import Link from "next/link";
import { Mail, PhoneCall, Globe } from "lucide-react";
import { offices } from "@/lib/site-config";

export function SiteFooter() {
  const vaOffice = offices.find((o) => o.id === "va");

  return (
    <footer className="mt-8 bg-emerald-950 text-emerald-50">
      <div className="mx-auto max-w-6xl px-4 pb-8 pt-10 md:px-6 md:pb-10">
        <div className="rounded-3xl border border-emerald-800 bg-emerald-950 px-6 py-8 shadow-[0_18px_0_0_rgba(6,78,59,0.6)] md:px-10 md:py-10">
          <div className="grid gap-8 md:grid-cols-[2fr,1fr,1fr]">
            <div>
              <div className="flex items-center gap-2">
                <span className="flex h-8 w-8 items-center justify-center rounded-full border border-emerald-400 bg-emerald-50 text-xs font-semibold text-emerald-900">
                  GF
                </span>
                <span className="text-sm font-semibold tracking-[0.14em] uppercase">
                  Ghion Financial
                </span>
              </div>
              <p className="mt-3 max-w-sm text-sm text-emerald-50/90">
                Empowering individuals, families, and businesses with tax,
                insurance, and bookkeeping services that make financial
                decisions clearer and less stressful.
              </p>
              {vaOffice && (
                <div className="mt-4 space-y-2 text-sm text-emerald-50/90">
                  <div className="inline-flex items-center gap-2">
                    <PhoneCall className="h-4 w-4" />
                    <a
                      href={vaOffice.phoneHref}
                      className="hover:underline"
                    >
                      {vaOffice.phone}
                    </a>
                  </div>
                  <div className="inline-flex items-center gap-2">
                    <Mail className="h-4 w-4" />
                    <a
                      href={vaOffice.emailHref}
                      className="hover:underline"
                    >
                      {vaOffice.email}
                    </a>
                  </div>
                  <div className="inline-flex items-center gap-2">
                    <Globe className="h-4 w-4" />
                    <a
                      href="https://www.ghiontax.com/"
                      target="_blank"
                      rel="noreferrer"
                      className="hover:underline"
                    >
                      ghiontax.com
                    </a>
                  </div>
                </div>
              )}
            </div>
            <div className="space-y-3 text-sm">
              <div className="font-semibold text-emerald-50">Site map</div>
              <div className="flex flex-col gap-1 text-emerald-100/90">
                <Link href="/" className="underline-offset-2 hover:underline">
                  Home
                </Link>
                <a
                  href="#services"
                  className="underline-offset-2 hover:underline"
                >
                  Services
                </a>
                <a
                  href="#reviews"
                  className="underline-offset-2 hover:underline"
                >
                  Reviews
                </a>
                <a
                  href="#locations"
                  className="underline-offset-2 hover:underline"
                >
                  Locations
                </a>
                <Link
                  href="/contact"
                  className="underline-offset-2 hover:underline"
                >
                  Contact Us
                </Link>
              </div>
            </div>
            <div className="space-y-3 text-sm">
              <div className="font-semibold text-emerald-50">Offices</div>
              {offices.map((office) => (
                <div key={office.id} className="space-y-1 text-emerald-100/90">
                  <div>{office.label}</div>
                  <div className="text-xs text-emerald-200/80">
                    {office.addressLines.map((line) => (
                      <div key={line}>{line}</div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="mt-8 flex flex-col items-start justify-between gap-3 border-t border-emerald-800 pt-4 text-xs text-emerald-200/80 md:flex-row md:items-center">
            <p>
              © {new Date().getFullYear()} Ghion Financial. All rights reserved.
            </p>
            <div className="flex gap-4">
              <Link
                href="/privacy"
                className="underline-offset-2 hover:underline"
              >
                Privacy Policy
              </Link>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}

