poi-preview/src/components/Footer.tsx

import React from 'react'
import { Phone, Mail, ShieldCheck, Cookie, FileText } from 'lucide-react'
import { Logo } from '@/components/Logo'

import type { Media } from '@/payload-types'

export interface FooterNavItem {
  id?: string
  label: string
  href: string
}

interface FooterProps {
  companyName?: string | null
  footerTagline?: string | null
  nip?: string | null
  nipLabel?: string | null
  regon?: string | null
  regonLabel?: string | null
  address?: string | null
  city?: string | null
  phone?: string | null
  email?: string | null
  items?: FooterNavItem[]
  privacyHref?: string | null
  privacyLabel?: string | null
  cookieHref?: string | null
  cookieLabel?: string | null
  termsHref?: string | null
  termsLabel?: string | null
  navTitle?: string | null
  contactTitle?: string | null
  legalTitle?: string | null
  creditLabel?: string | null
  creditHref?: string | null
  logo?: Media | { url?: string | null; alt?: string | null } | null
}

export function Footer({
  companyName,
  footerTagline,
  nip,
  nipLabel,
  regon,
  regonLabel,
  address,
  city,
  phone,
  email,
  items,
  privacyHref,
  privacyLabel,
  cookieHref,
  cookieLabel,
  termsHref,
  termsLabel,
  navTitle,
  contactTitle,
  legalTitle,
  creditLabel,
  creditHref,
  logo,
}: FooterProps) {
  return (
    <footer className="bg-dark text-[#d0d0d0] pt-14 pb-8 border-t-4 border-primary">
      <div className="container mx-auto px-4 sm:px-6 lg:px-12 max-w-7xl">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-12">
          {/* 1. Company Info */}
          <div className="space-y-4">
            <div className="flex items-center gap-3">
              {logo ? (
                <Logo className="h-12 w-auto" alt={companyName || undefined} media={logo} />
              ) : companyName ? (
                <span className="font-black text-xl tracking-tight text-white uppercase">{companyName}</span>
              ) : null}
            </div>
            {footerTagline && (
              <p className="text-xs sm:text-sm text-[#a0a0a0] leading-relaxed">
                {footerTagline}
              </p>
            )}
            {(companyName || address || city || nip || regon) && (
              <div className="text-xs text-[#a0a0a0] space-y-1.5 pt-3 border-t border-[#363032]">
                {companyName && (
                  <div className="font-bold text-white uppercase tracking-wide">
                    {companyName}
                  </div>
                )}
                {(address || city) && (
                  <div className="text-[#a0a0a0]">
                    {address}
                    {address && city ? ', ' : ''}
                    {city}
                  </div>
                )}
                <div className="text-xs text-[#888888] font-mono space-y-1 pt-1">
                  {nip && (
                    <div>
                      {nipLabel ? `${nipLabel}: ` : ''}
                      <span className="text-[#e0e0e0] font-semibold">{nip}</span>
                    </div>
                  )}
                  {regon && (
                    <div>
                      {regonLabel ? `${regonLabel}: ` : ''}
                      <span className="text-[#e0e0e0] font-semibold">{regon}</span>
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>

          {/* 2. Navigation Links */}
          {items && items.length > 0 && (
            <div className="space-y-4">
              {navTitle && (
                <div className="text-xs font-black uppercase tracking-widest text-primary border-b border-[#363032] pb-2">
                  {navTitle}
                </div>
              )}
              <ul className="space-y-2.5 text-xs font-bold uppercase tracking-wider">
                {items.map((item, idx) => (
                  <li key={item.id || idx}>
                    <a href={item.href} className="text-[#d0d0d0] hover:text-primary transition-colors block py-0.5">
                      {item.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          )}

          {/* 3. Legal & Policies Column */}
          {(privacyHref || cookieHref || termsHref) && (
            <div className="space-y-4">
              {legalTitle && (
                <div className="text-xs font-black uppercase tracking-widest text-primary border-b border-[#363032] pb-2">
                  {legalTitle}
                </div>
              )}
              <ul className="space-y-2.5 text-xs font-bold uppercase tracking-wider">
                {privacyHref && privacyLabel && (
                  <li>
                    <a href={privacyHref} className="text-[#d0d0d0] hover:text-primary transition-colors flex items-center gap-2 py-0.5">
                      <ShieldCheck className="h-3.5 w-3.5 text-primary shrink-0" />
                      <span>{privacyLabel}</span>
                    </a>
                  </li>
                )}
                {cookieHref && cookieLabel && (
                  <li>
                    <a href={cookieHref} className="text-[#d0d0d0] hover:text-primary transition-colors flex items-center gap-2 py-0.5">
                      <Cookie className="h-3.5 w-3.5 text-primary shrink-0" />
                      <span>{cookieLabel}</span>
                    </a>
                  </li>
                )}
                {termsHref && termsLabel && (
                  <li>
                    <a href={termsHref} className="text-[#d0d0d0] hover:text-primary transition-colors flex items-center gap-2 py-0.5">
                      <FileText className="h-3.5 w-3.5 text-primary shrink-0" />
                      <span>{termsLabel}</span>
                    </a>
                  </li>
                )}
              </ul>
            </div>
          )}

          {/* 4. Contact Details */}
          {(phone || email) && (
            <div className="space-y-4">
              {contactTitle && (
                <div className="text-xs font-black uppercase tracking-widest text-primary border-b border-[#363032] pb-2">
                  {contactTitle}
                </div>
              )}
              <ul className="space-y-3 text-xs">
                {phone && (
                  <li className="flex items-center gap-2.5">
                    <Phone className="h-4 w-4 text-primary shrink-0" />
                    <a href={`tel:${phone.replace(/\s+/g, '')}`} className="text-white hover:text-primary font-mono font-black text-sm">
                      {phone}
                    </a>
                  </li>
                )}
                {email && (
                  <li className="flex items-center gap-2.5">
                    <Mail className="h-4 w-4 text-primary shrink-0" />
                    <a href={`mailto:${email}`} className="text-[#d0d0d0] hover:text-white font-medium">
                      {email}
                    </a>
                  </li>
                )}
              </ul>
            </div>
          )}
        </div>

        {/* Bottom Bar - Evenly balanced spacing */}
        <div className="mt-8 pt-5 border-t border-[#363032] flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-[#888888]">
          {companyName && (
            <div>
              © {new Date().getFullYear()} {companyName}
            </div>
          )}
          {creditHref && creditLabel && (
            <div>
              <a
                href={creditHref}
                target="_blank"
                rel="noopener noreferrer"
                className="font-bold text-white hover:text-primary transition-colors underline decoration-primary decoration-2 underline-offset-4"
              >
                {creditLabel}
              </a>
            </div>
          )}
        </div>
      </div>
    </footer>
  )
}