"use client";

import Link from "next/link";
import { Mail, MapPin, Phone } from "lucide-react";
import {
  LinkedInIcon,
  YouTubeIcon,
  InstagramIcon,
  FacebookIcon,
  TwitterXIcon,
  TeamsIcon,
} from "@/components/icons/SocialIcons";
import { socialLinks, footerColumns, footerContact } from "@/lib/content";
import { useReveal } from "@/hooks/use-reveal";
import Logo from "@/components/Logo";

const iconMap: Record<string, React.ComponentType<{ size?: number }>> = {
  LinkedIn: LinkedInIcon,
  YouTube: YouTubeIcon,
  Instagram: InstagramIcon,
  Facebook: FacebookIcon,
  "Twitter / X": TwitterXIcon,
  Teams: TeamsIcon,
};

const headingClass =
  "text-xs font-semibold uppercase tracking-[0.18em] text-ink-400";

export default function Footer() {
  const year = new Date().getFullYear();
  const { ref, visible } = useReveal<HTMLDivElement>();

  const enter = (delay: number) => ({
    className: visible ? "animate-fade-up" : "opacity-0",
    style: { animationDelay: `${delay}ms` },
  });

  const address = `${footerContact.addressLine1} ${footerContact.addressLine2}`;
  const mapsHref = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`;

  return (
    <footer className="relative overflow-hidden pt-20 sm:pt-24 lg:pt-28">
      <FooterBackground />

      <div className="container" ref={ref}>
        {/* Four columns: Brand · Quick Links · Company · Get In Touch */}
        <div className="grid grid-cols-[minmax(0,1fr)] gap-12 md:grid-cols-2 md:gap-x-10 lg:grid-cols-[31fr_19fr_19fr_31fr] lg:gap-x-12">
          {/* Brand */}
          <div
            className={`md:col-span-2 lg:col-span-1 ${enter(0).className}`}
            style={enter(0).style}
          >
            <Link
              href="/"
              aria-label="Vasundhara Infotech home"
              className="inline-flex min-h-11 items-center rounded-md focus-visible:ring-offset-2"
            >
              <Logo imageClassName="h-8 w-auto sm:h-9" alt="" />
            </Link>
            <p className="mt-5 max-w-sm text-[0.95rem] leading-[1.75] text-ink-300">
              Innovative IT solutions for a smarter tomorrow. We build modern
              web, mobile and cloud products that help businesses grow and
              scale.
            </p>

            <ul
              className="mt-6 flex flex-wrap gap-2.5"
              aria-label="Social media"
            >
              {socialLinks.map((social) => {
                const Icon = iconMap[social.label];
                return (
                  <li key={social.label}>
                    <a
                      href={social.href}
                      aria-label={social.label}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex h-10 w-10 items-center justify-center rounded-xl border border-slate-200 bg-white text-ink-400 shadow-card transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-accent hover:bg-accent-50 hover:text-accent focus-visible:ring-offset-2"
                    >
                      {Icon && <Icon size={17} />}
                    </a>
                  </li>
                );
              })}
            </ul>
          </div>

          {/* Link columns */}
          {footerColumns.map((col, i) => {
            const a = enter(100 + i * 100);
            return (
              <nav
                key={col.title}
                aria-label={col.title}
                className={a.className}
                style={a.style}
              >
                <h3 className={headingClass}>{col.title}</h3>
                <ul className="mt-4 flex flex-col gap-0.5">
                  {col.items.map((item) => (
                    <li key={item.label}>
                      <Link
                        href={item.href}
                        className="group inline-flex min-h-10 items-center text-[0.95rem] text-ink-300 transition-colors duration-200 hover:text-accent focus-visible:ring-offset-2"
                      >
                        <span
                          aria-hidden
                          className="mr-0 h-px w-0 bg-accent opacity-0 transition-all duration-200 ease-out group-hover:mr-2 group-hover:w-3 group-hover:opacity-100"
                        />
                        {item.label}
                      </Link>
                    </li>
                  ))}
                </ul>
              </nav>
            );
          })}

          {/* Contact */}
          <div
            className={`md:col-span-2 lg:col-span-1 ${enter(300).className}`}
            style={enter(300).style}
          >
            <h3 className={headingClass}>Get in touch</h3>
            <ul className="mt-5 flex flex-col gap-4">
              <li>
                <a
                  href={`mailto:${footerContact.email}`}
                  className="group flex items-start gap-3 focus-visible:ring-offset-2"
                >
                  <ContactIcon>
                    <Mail className="h-4 w-4" strokeWidth={1.85} aria-hidden />
                  </ContactIcon>
                  <span className="min-w-0 wrap-break-word pt-1.5 text-[0.97rem] transition-colors duration-200 group-hover:text-accent">
                    {footerContact.email}
                  </span>
                </a>
              </li>
              <li>
                <a
                  href={`tel:${footerContact.phone.replace(/\s+/g, "")}`}
                  className="group flex items-start gap-3 focus-visible:ring-offset-2"
                >
                  <ContactIcon>
                    <Phone className="h-4 w-4" strokeWidth={1.85} aria-hidden />
                  </ContactIcon>
                  <span className="pt-1.5 text-[0.97rem] text-ink-300 transition-colors duration-200 group-hover:text-accent">
                    {footerContact.phone}
                  </span>
                </a>
              </li>
              <li>
                <a
                  href={mapsHref}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="group flex items-start gap-3 focus-visible:ring-offset-2"
                >
                  <ContactIcon>
                    <MapPin
                      className="h-4 w-4"
                      strokeWidth={1.85}
                      aria-hidden
                    />
                  </ContactIcon>
                  <span className="min-w-0 pt-1.5 text-[0.97rem] leading-relaxed text-ink-300 transition-colors duration-200 group-hover:text-accent">
                    {footerContact.addressLine1}
                    <br className="hidden sm:block" />{" "}
                    {footerContact.addressLine2}
                  </span>
                </a>
              </li>
            </ul>
          </div>
        </div>

        {/* Bottom bar */}
        <div className="relative mt-14 lg:mt-16">
          <div className="h-px w-full bg-slate-200" />
          <div className="absolute left-0 top-0 h-px w-24 bg-linear-to-r from-accent to-transparent" />
        </div>
        <div className="flex flex-col items-center justify-between gap-2 py-7 text-center sm:flex-row sm:text-left">
          <p className="text-[0.8rem] text-ink-400">
            © {year} Vasundhara Infotech. All rights reserved.
          </p>
          <div className="flex items-center gap-5 text-[0.8rem]">
            <Link
              href="/privacy-policy"
              className="inline-flex min-h-10 items-center text-ink-400 transition-colors duration-200 hover:text-accent focus-visible:ring-offset-2"
            >
              Privacy Policy
            </Link>
            <Link
              href="/terms-of-use"
              className="inline-flex min-h-10 items-center text-ink-400 transition-colors duration-200 hover:text-accent focus-visible:ring-offset-2"
            >
              Terms &amp; Conditions
            </Link>
          </div>
        </div>
      </div>
    </footer>
  );
}

function ContactIcon({ children }: { children: React.ReactNode }) {
  return (
    <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-accent/10 text-accent transition-colors duration-200 group-hover:bg-accent/20">
      {children}
    </span>
  );
}

function FooterBackground() {
  return <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10 bg-gradient-to-b from-white to-accent-50/70" />;
}