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

export function SiteFooter() {
  return (
    <footer className="bg-[var(--navy-dark)] text-white">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
          {/* Brand */}
          <div className="lg:col-span-1">
            <div className="flex items-center gap-3 mb-4">
              <div className="relative w-12 h-12 bg-white rounded-lg p-1">
                <Image src="/logo.png" alt="Alpha CPA Consulting LLC" fill className="object-contain p-0.5" />
              </div>
              <div>
                <span className="font-display font-bold text-lg block">Alpha CPA</span>
                <span className="text-xs text-[var(--gold-light)] tracking-wider uppercase">Consulting LLC</span>
              </div>
            </div>
            <p className="text-white/60 text-sm leading-relaxed">
              Professional CPA, Tax, Bookkeeping, and Payroll services for businesses and individuals worldwide.
            </p>
          </div>

          {/* Quick Links */}
          <div>
            <h4 className="font-display font-semibold text-[var(--gold-light)] mb-4">Quick Links</h4>
            <ul className="space-y-2.5">
              {[{ label: 'Home', href: '/' }, { label: 'Services', href: '/services' }, { label: 'About', href: '/about' }, { label: 'Blog', href: '/blog' }, { label: 'Contact', href: '/contact' }]?.map((link: any) => (
                <li key={link?.href}>
                  <Link href={link?.href ?? '#'} className="text-white/60 hover:text-[var(--gold-light)] transition-colors text-sm">
                    {link?.label ?? ''}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Services */}
          <div>
            <h4 className="font-display font-semibold text-[var(--gold-light)] mb-4">Services</h4>
            <ul className="space-y-2.5">
              {['Tax Preparation', 'Bookkeeping', 'Payroll Services', 'Sales Tax Submission']?.map((s: string) => (
                <li key={s}>
                  <Link href="/services" className="text-white/60 hover:text-[var(--gold-light)] transition-colors text-sm">
                    {s}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact - Both Offices */}
          <div>
            <h4 className="font-display font-semibold text-[var(--gold-light)] mb-4">Contact</h4>
            <div className="space-y-5">
              {/* US Office */}
              <div>
                <p className="text-[var(--gold-light)] text-xs font-semibold uppercase tracking-wider mb-2 flex items-center gap-1.5">
                  <Globe className="w-3 h-3" /> US Office
                </p>
                <div className="space-y-2">
                  <div className="flex items-start gap-2.5 text-sm text-white/60">
                    <MapPin className="w-4 h-4 text-[var(--gold)] mt-0.5 shrink-0" />
                    502 West 7th Street, Suite 100, Erie, PA 16502, US
                  </div>
                  <a href="tel:+15707553434" className="flex items-center gap-2.5 text-sm text-white/60 hover:text-[var(--gold-light)] transition-colors">
                    <Phone className="w-4 h-4 text-[var(--gold)] shrink-0" />
                    +1 570-7553-434
                  </a>
                </div>
              </div>

              {/* BD Office */}
              <div>
                <p className="text-[var(--gold-light)] text-xs font-semibold uppercase tracking-wider mb-2 flex items-center gap-1.5">
                  <Globe className="w-3 h-3" /> Bangladesh Office
                </p>
                <div className="space-y-2">
                  <div className="flex items-start gap-2.5 text-sm text-white/60">
                    <MapPin className="w-4 h-4 text-[var(--gold)] mt-0.5 shrink-0" />
                    Sayedpur West, Holding 56, Narayanganj Sadar-1400, BD
                  </div>
                  <a href="tel:+8801928802438" className="flex items-center gap-2.5 text-sm text-white/60 hover:text-[var(--gold-light)] transition-colors">
                    <Phone className="w-4 h-4 text-[var(--gold)] shrink-0" />
                    +88 01928802438
                  </a>
                </div>
              </div>

              {/* Email */}
              <a href="mailto:Accounting@alphacpaconsulting.com" className="flex items-center gap-2.5 text-sm text-white/60 hover:text-[var(--gold-light)] transition-colors">
                <Mail className="w-4 h-4 text-[var(--gold)] shrink-0" />
                Accounting@alphacpaconsulting.com
              </a>
            </div>
          </div>
        </div>
      </div>

      <div className="border-t border-white/10">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-white/40 text-sm">&copy; 2026 Alpha CPA Consulting LLC. All rights reserved.</p>
          <span className="text-white/40 text-sm">
            www.alphacpaconsulting.com
          </span>
        </div>
      </div>
    </footer>
  );
}
