import Link from "next/link";
import { ArrowRight } from "@/components/ui/icons";
import { Logo } from "@/components/brand/logo";
import { Button } from "@/components/ui/button";
import { BRAND_NAME } from "@/lib/brand";

export function MarketingFooter() {
  return (
    <footer className="px-4 pb-4 pt-12 relative z-10">
      <div className="relative rounded-2xl border border-border bg-surface-2/60 backdrop-blur-xl overflow-hidden">
        {/* Filigrane marque en arrière-plan, très peu visible */}
        <div
          aria-hidden
          className="absolute inset-x-0 bottom-0 flex justify-center pointer-events-none select-none translate-y-[5%]"
        >
          <span className="font-editorial italic font-medium leading-none text-stone-900/[0.04] text-[18vw] md:text-[14rem] lg:text-[20rem] whitespace-nowrap tracking-tight">
            {BRAND_NAME}
          </span>
        </div>

        {/* CTA d'invitation */}
        <div className="relative mx-auto max-w-4xl px-4 sm:px-6 md:px-12 pt-20 pb-16 md:pt-28 md:pb-20 text-center">
          <h2 className="font-editorial text-3xl md:text-5xl font-medium text-text leading-[1.1]">
            Votre projet mérite mieux
            <br />
            qu'un devis automatique.
          </h2>
          <p className="mt-5 text-text-muted leading-relaxed max-w-xl mx-auto">
            Présentez-nous votre activité et vos objectifs. On revient vers vous avec
            des idées concrètes et un interlocuteur humain.
          </p>
          <div className="mt-8 flex items-center justify-center">
            <Link href="/contact">
              <Button variant="primary" size="lg">
                Prendre contact
                <ArrowRight className="size-4" />
              </Button>
            </Link>
          </div>
          <div className="mt-5 flex items-center justify-center gap-5 text-xs text-text-dim">
            <span className="inline-flex items-center gap-1.5">
              <span className="size-1 rounded-full bg-accent" />
              Sans engagement
            </span>
            <span className="inline-flex items-center gap-1.5">
              <span className="size-1 rounded-full bg-accent" />
              Réponse rapide
            </span>
          </div>
        </div>

        {/* Grille de liens */}
        <div className="relative border-t border-border">
          <div className="mx-auto max-w-7xl px-4 sm:px-6 md:px-12 py-14 grid grid-cols-2 md:grid-cols-4 gap-10">
            <div className="col-span-2 md:col-span-1">
              <Logo />
              <p className="mt-4 text-sm text-text-muted leading-relaxed max-w-md">
                La performance web, sans complexité.
                <br />
                Création, hébergement et optimisation inclus.
              </p>
            </div>

            <div>
              <div className="text-micro uppercase tracking-wider font-semibold text-text-faint mb-4">
                Pages
              </div>
              <ul className="space-y-2.5 text-sm">
                <li><Link href="/" className="text-text-muted hover:text-accent transition-colors">Accueil</Link></li>
                <li><Link href="/essentiel" className="text-text-muted hover:text-accent transition-colors">L'essentiel</Link></li>
                <li><Link href="/realisations" className="text-text-muted hover:text-accent transition-colors">Réalisations</Link></li>
                <li><Link href="/tarifs" className="text-text-muted hover:text-accent transition-colors">Tarifs</Link></li>
                <li><Link href="/contact" className="text-text-muted hover:text-accent transition-colors">Contact</Link></li>
              </ul>
            </div>

            <div>
              <div className="text-micro uppercase tracking-wider font-semibold text-text-faint mb-4">
                Expertises
              </div>
              <ul className="space-y-2.5 text-sm">
                <li><Link href="/expertises/site-internet" className="text-text-muted hover:text-accent transition-colors">Site internet</Link></li>
                <li><Link href="/expertises/seo-geo" className="text-text-muted hover:text-accent transition-colors">Référencement SEO &amp; GEO</Link></li>
                <li><Link href="/expertises/e-commerce" className="text-text-muted hover:text-accent transition-colors">E-commerce</Link></li>
              </ul>
            </div>

            <div>
              <div className="text-micro uppercase tracking-wider font-semibold text-text-faint mb-4">
                Légal
              </div>
              <ul className="space-y-2.5 text-sm">
                <li><Link href="/mentions-legales" className="text-text-muted hover:text-accent transition-colors">Mentions légales</Link></li>
                <li><Link href="/cgv" className="text-text-muted hover:text-accent transition-colors">CGV</Link></li>
                <li><Link href="/confidentialite" className="text-text-muted hover:text-accent transition-colors">Confidentialité</Link></li>
              </ul>
            </div>
          </div>
        </div>

        {/* Bottom bar */}
        <div className="relative border-t border-border">
          <div className="mx-auto max-w-7xl px-4 sm:px-6 md:px-12 py-5 flex flex-col md:flex-row items-center justify-between gap-3">
            <div className="text-xs text-text-dim">© 2026 {BRAND_NAME} · Tous droits réservés</div>
            <div className="flex items-center gap-2 text-xs text-text-faint">
              <span aria-hidden className="inline-flex h-3 w-[18px] overflow-hidden rounded-[2px] border border-border">
                <span className="h-full w-1/3 bg-[#0055A4]" />
                <span className="h-full w-1/3 bg-white" />
                <span className="h-full w-1/3 bg-[#EF4135]" />
              </span>
              Entreprise française
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}