"use client";

import Link from "next/link";
import {
  Mail,
  Phone,
  MapPin,
  Twitter,
  Linkedin,
  Github,
  Instagram,
  ShieldCheck,
} from "lucide-react";
import { Logo } from "@/components/common/Logo";
import { Container } from "@/components/common/Container";
import { FOOTER_LINKS, SITE } from "@/constants/site";
import { useTranslation } from "@/hooks/useTranslation";

const SOCIAL = [
  { icon: Twitter, label: "Twitter", href: "#" },
  { icon: Linkedin, label: "LinkedIn", href: "#" },
  { icon: Instagram, label: "Instagram", href: "#" },
  { icon: Github, label: "GitHub", href: "#" },
];

export function Footer() {
  const { t } = useTranslation();

  return (
    <footer className="relative overflow-hidden border-t border-slate-200/70 bg-gradient-to-b from-slate-50/80 to-slate-100/50 dark:border-slate-800/70 dark:from-slate-950 dark:to-slate-950">
      {/* Subtle top gradient */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-brand-500/40 to-transparent"
      />

      <Container className="py-16 sm:py-20">
        <div className="grid gap-12 lg:grid-cols-5">
          {/* Brand */}
          <div className="lg:col-span-2">
            <Logo />
            <p className="mt-5 max-w-sm text-base leading-relaxed text-slate-600 dark:text-slate-400">
              {SITE.description}
            </p>

            {/* Social */}
            <div className="mt-6 flex items-center gap-2">
              {SOCIAL.map(({ icon: Icon, label, href }) => (
                <a
                  key={label}
                  href={href}
                  aria-label={label}
                  className="group inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-500 transition-all duration-200 ease-snappy hover:-translate-y-0.5 hover:border-brand-300 hover:bg-brand-50 hover:text-brand-600 hover:shadow-soft dark:border-slate-800 dark:bg-slate-900 dark:text-slate-400 dark:hover:border-brand-400/40 dark:hover:bg-brand-500/10 dark:hover:text-brand-300"
                >
                  <Icon className="h-4 w-4" />
                </a>
              ))}
            </div>

            {/* Trust badge */}
            <div className="mt-6 inline-flex items-center gap-2 rounded-full border border-emerald-200/60 bg-emerald-50/80 px-3 py-1.5 text-xs font-semibold text-emerald-700 dark:border-emerald-400/20 dark:bg-emerald-500/10 dark:text-emerald-300">
              <ShieldCheck className="h-3.5 w-3.5 shrink-0" />
              <span className="-mb-px">{t("footer.builtBy")}</span>
            </div>
          </div>

          <div className="grid grid-cols-3 gap-8 lg:col-span-3 lg:grid-cols-3">
            <FooterCol title={t("footer.productTitle")} links={FOOTER_LINKS.product} />
            <FooterCol title={t("footer.companyTitle")} links={FOOTER_LINKS.company} />
            <FooterCol title={t("footer.legalTitle")} links={FOOTER_LINKS.legal} />
          </div>
        </div>

        {/* Contact strip */}
        <div className="mt-14 grid gap-4 border-t border-slate-200/70 pt-10 dark:border-slate-800/70 sm:grid-cols-3">
          <ContactItem icon={<Mail className="h-4 w-4" />} text={SITE.email} href={`mailto:${SITE.email}`} />
          <ContactItem icon={<Phone className="h-4 w-4" />} text={SITE.phone} href={`tel:${SITE.phone.replace(/[^\d+]/g, "")}`} />
          <ContactItem icon={<MapPin className="h-4 w-4" />} text={SITE.address} />
        </div>

        {/* Copyright */}
        <div className="mt-10 flex flex-col items-center justify-between gap-3 border-t border-slate-200/70 pt-8 dark:border-slate-800/70 sm:flex-row">
          <p className="text-xs text-slate-500 dark:text-slate-500">
            © {new Date().getFullYear()} {SITE.name}. {t("footer.rights")}
          </p>
          <p className="text-xs text-slate-400 dark:text-slate-600">
            Made with care for senders worldwide.
          </p>
        </div>
      </Container>
    </footer>
  );
}

function FooterCol({
  title,
  links,
}: {
  title: string;
  links: { href: string; key: string }[];
}) {
  const { t } = useTranslation();
  return (
    <div>
      <h3 className="text-xs font-semibold uppercase tracking-wider text-slate-900 dark:text-white">
        {title}
      </h3>
      <ul className="mt-5 space-y-3">
        {links.map((l) => (
          <li key={l.href}>
            <Link
              href={l.href}
              className="group inline-flex items-center gap-1 text-sm text-slate-600 transition-colors duration-200 hover:text-brand-700 dark:text-slate-400 dark:hover:text-brand-300"
            >
              <span className="relative">
                {t(l.key)}
                <span className="absolute inset-x-0 -bottom-0.5 h-px scale-x-0 bg-brand-500 transition-transform duration-300 ease-snappy group-hover:scale-x-100" />
              </span>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

function ContactItem({
  icon,
  text,
  href,
}: {
  icon: React.ReactNode;
  text: string;
  href?: string;
}) {
  const inner = (
    <div className="group flex items-center gap-3 text-sm text-slate-600 transition-colors dark:text-slate-400">
      <span className="grid h-10 w-10 shrink-0 place-items-center rounded-full border border-slate-200 bg-white text-brand-600 shadow-soft transition-all duration-200 group-hover:-translate-y-0.5 group-hover:border-brand-300 group-hover:shadow-card dark:border-slate-800 dark:bg-slate-900 dark:text-brand-300 dark:group-hover:border-brand-400/40">
        {icon}
      </span>
      <span className="truncate group-hover:text-slate-900 dark:group-hover:text-white">{text}</span>
    </div>
  );
  return href ? (
    <a href={href} className="block">
      {inner}
    </a>
  ) : (
    inner
  );
}