Corporate Footer — 기업형 푸터

/**
 * Corporate Footer — 기업형 푸터
 *
 * 다크 배경, 4컬럼 반응형 레이아웃.
 * 로고+설명+고객센터 / 링크 그룹 N개 / 하단 사업자 정보+저작권.
 *
 * @source silvercare-master (260214 + 260114 병합)
 * @extracted 2026-02-18
 * @version 1.0.0
 *
 * @dependencies lucide-react, next/link, next/image
 *
 * @example
 * ```tsx
 * import { FooterCorporate } from './footer-corporate';
 * import { KO_FOOTER_LABELS } from './_shared/i18n';
 *
 * <FooterCorporate
 *   brand={{ name: '실버케어', description: '믿을 수 있는 노인 돌봄 서비스', logoSrc: '/logo.png' }}
 *   contact={{ phone: '1588-0000', businessHours: '평일 09:00-18:00', email: 'help@example.com' }}
 *   linkGroups={[
 *     { title: '서비스', links: [{ label: '소개', href: '/about' }] },
 *     { title: '고객지원', links: [{ label: 'FAQ', href: '/faq' }] },
 *   ]}
 *   business={{ companyName: '(주)실버케어', representative: '홍길동', businessNumber: '000-00-00000', address: '서울시 강남구' }}
 *   labels={KO_FOOTER_LABELS.corporate}
 * />
 * ```
 */

import Link from 'next/link';
import Image from 'next/image';
import { Phone, Mail, MessageSquare, MapPin } from 'lucide-react';

import type {
  FooterBrandInfo,
  FooterContactInfo,
  FooterLinkGroup,
  FooterBusinessInfo,
} from './_shared/types';
import type { CorporateFooterLabels } from './_shared/i18n';
import { DEFAULT_CORPORATE_LABELS } from './_shared/i18n';

// ============================================
// Props
// ============================================

export interface FooterCorporateProps {
  /** 브랜드 정보 */
  brand: FooterBrandInfo;
  /** 고객센터 / 연락처 정보 */
  contact?: FooterContactInfo;
  /** 링크 그룹 목록 */
  linkGroups: FooterLinkGroup[];
  /** 사업자 정보 (하단 바) */
  business?: FooterBusinessInfo;
  /** 저작권 텍스트 (기본: '© {year} {brand.name}. All rights reserved.') */
  copyrightText?: string;
  /** i18n 라벨 */
  labels?: CorporateFooterLabels;
  /** 추가 className */
  className?: string;
}

// ============================================
// 컴포넌트
// ============================================

export function FooterCorporate({
  brand,
  contact,
  linkGroups,
  business,
  copyrightText,
  labels = DEFAULT_CORPORATE_LABELS,
  className = '',
}: FooterCorporateProps) {
  const currentYear = new Date().getFullYear();
  const homeHref = brand.homeHref ?? '/';

  return (
    <footer className={`bg-gray-900 text-gray-300 ${className}`}>
      {/* 메인 푸터 */}
      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
          {/* 브랜드 + 고객센터 */}
          <div className="lg:col-span-1">
            <Link href={homeHref} className="flex items-center gap-2">
              {brand.logoSrc ? (
                <Image
                  src={brand.logoSrc}
                  alt={brand.name}
                  width={40}
                  height={40}
                  className="rounded-xl"
                />
              ) : brand.icon ? (
                brand.icon
              ) : null}
              <span className="text-xl font-bold text-white">
                {brand.name}
              </span>
            </Link>

            {brand.description && (
              <p className="mt-4 text-sm leading-relaxed text-gray-400">
                {brand.description}
              </p>
            )}

            {/* 고객센터 */}
            {contact && (
              <div className="mt-6 space-y-3">
                <h4 className="text-sm font-semibold text-white">
                  {labels.customerService}
                </h4>
                <div className="space-y-2">
                  {contact.inquiryHref && (
                    <Link
                      href={contact.inquiryHref}
                      className="flex items-center gap-2 text-sm text-gray-400 transition-colors hover:text-teal-400"
                    >
                      <MessageSquare size={16} />
                      <span className="font-semibold text-white">
                        {labels.inquiry}
                      </span>
                    </Link>
                  )}
                  {contact.phone && (
                    <a
                      href={`tel:${contact.phone}`}
                      className="flex items-center gap-2 text-sm text-gray-400 transition-colors hover:text-teal-400"
                    >
                      <Phone size={16} />
                      <span className="font-semibold text-white">
                        {contact.phone}
                      </span>
                    </a>
                  )}
                  {contact.businessHours && (
                    <p className="text-xs text-gray-500">
                      {contact.businessHours}
                    </p>
                  )}
                  {contact.email && (
                    <a
                      href={`mailto:${contact.email}`}
                      className="flex items-center gap-2 text-sm text-gray-400 transition-colors hover:text-teal-400"
                    >
                      <Mail size={16} />
                      {contact.email}
                    </a>
                  )}
                </div>
              </div>
            )}
          </div>

          {/* 링크 그룹 */}
          {linkGroups.map((group) => (
            <div key={group.title}>
              <h4 className="text-sm font-semibold text-white">
                {group.title}
              </h4>
              <ul className="mt-4 space-y-2">
                {group.links.map((link) => (
                  <li key={link.href}>
                    <Link
                      href={link.href}
                      className={`text-sm transition-colors hover:text-teal-400 ${
                        link.highlight
                          ? 'font-semibold text-white'
                          : 'text-gray-400'
                      }`}
                      {...(link.external
                        ? { target: '_blank', rel: 'noopener noreferrer' }
                        : {})}
                    >
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>

      {/* 하단 바 */}
      <div className="border-t border-gray-800">
        <div className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
          {/* 사업자 정보 */}
          {business && (
            <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
              <div className="flex flex-col items-center gap-2 text-xs text-gray-500 md:flex-row md:gap-4">
                {business.companyName && <p>{business.companyName}</p>}
                {business.representative && (
                  <>
                    <span className="hidden md:inline">{labels.separator}</span>
                    <p>
                      {labels.representativePrefix} {business.representative}
                    </p>
                  </>
                )}
                {business.businessNumber && (
                  <>
                    <span className="hidden md:inline">{labels.separator}</span>
                    <p>
                      {labels.businessNumberPrefix} {business.businessNumber}
                    </p>
                  </>
                )}
              </div>
              {business.address && (
                <div className="flex items-center gap-2 text-xs text-gray-500">
                  <MapPin size={14} />
                  <p>{business.address}</p>
                </div>
              )}
            </div>
          )}

          {/* 저작권 */}
          <p className="mt-4 text-center text-xs text-gray-500">
            {copyrightText ??
              `© ${currentYear} ${brand.name}. All rights reserved.`}
          </p>
        </div>
      </div>
    </footer>
  );
}