import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { ArrowRight, Gauge, ShieldCheck, Sparkles, LineChart, Search, Wallet, Target, Wand2, Heart, MessageCircle } from "@/components/ui/icons";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Reveal } from "@/components/ui/reveal";
import { ProcessSection } from "@/components/marketing/process";
import { PageSpeedMockup } from "@/components/marketing/pagespeed-mockup";
import { SectionStamp } from "@/components/marketing/section-stamp";
import { TornEdge } from "@/components/marketing/torn-edge";
import { BRAND_NAME } from "@/lib/brand";

export const metadata: Metadata = {
  title: "Sites sur-mesure en abonnement",
  description:
    "Création, hébergement, sécurité et suivi inclus. Un site rapide, bien référencé et toujours à jour, sans budget pro.",
};

export default function HomePage() {
  return (
    <div className="relative overflow-hidden">
      {/* Decor de fond minimaliste : on laisse le grain papier (grain-overlay
          du layout marketing) parler seul. Grille fine supprimee : trop AI
          default, conflit avec la direction atelier editoriale. */}

      {/* Hero */}
      <section className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 md:px-10 pt-20 pb-24 sm:pt-28 sm:pb-32 md:pt-32 md:pb-40 text-center">
        <Reveal>
          <h1 className="font-editorial text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-medium text-text leading-[1.04] md:leading-[1.02] tracking-tight">
            Un site qui vous apporte des clients,
            <br />
            <span className="italic text-accent-hi">On s'occupe du reste.</span>
          </h1>
        </Reveal>
        <Reveal delay={140}>
          <p className="mt-6 text-base sm:text-lg text-text-muted max-w-2xl mx-auto leading-relaxed">
            Création, hébergement et optimisation inclus.
            <br className="hidden sm:block" />
            <span className="sm:hidden"> </span>Votre site est performant, visible et toujours à jour, sans effort.
          </p>
        </Reveal>
        <Reveal delay={280}>
          <div className="mt-10 flex flex-wrap items-center justify-center gap-3">
            <Link href="/contact">
              <Button variant="primary" size="lg">
                Recevoir ma maquette gratuite
                <ArrowRight className="size-4" />
              </Button>
            </Link>
            <Link href="/tarifs">
              <Button variant="outline" size="lg">
                Voir les tarifs
              </Button>
            </Link>
          </div>
        </Reveal>
      </section>

      {/* Piliers : le constat. Ouvert par le premier cartouche d'atelier. */}
      <section className="relative z-10 border-t border-border bg-surface/30">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 md:px-10 pt-16 sm:pt-20 md:pt-24 pb-4 text-center">
          <Reveal>
            <div className="flex justify-center mb-6">
              <SectionStamp number="N°1" label="Le constat" />
            </div>
          </Reveal>
          <Reveal delay={100}>
            <h2 className="font-editorial text-2xl sm:text-3xl font-medium text-text leading-snug max-w-3xl mx-auto">
              Avoir un site ne suffit plus.
            </h2>
          </Reveal>
          <Reveal delay={150}>
            <p className="mt-5 text-text-muted leading-relaxed max-w-2xl mx-auto">
              Aujourd'hui, beaucoup d'entreprises sont en ligne…
              <br />
              sans jamais être trouvées, ni contactées.
            </p>
          </Reveal>
          <Reveal delay={280}>
            <PageSpeedMockup />
          </Reveal>
          <Reveal delay={420}>
            <p className="mt-10 text-text-muted leading-relaxed max-w-2xl mx-auto">
              Un site rapide, bien structuré et optimisé est mieux référencé,
              <br className="hidden md:block" />
              {" "}plus agréable à utiliser… et génère plus de contacts.
            </p>
          </Reveal>
        </div>
        <div className="mx-auto max-w-7xl px-4 sm:px-6 md:px-10 pb-16 sm:pb-20 md:pb-24 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-5 md:gap-6">
          <Reveal>
            <Pillar
              icon={Gauge}
              title="Performance native"
              text="Votre site est rapide et fluide, pour offrir une expérience agréable à vos visiteurs et améliorer votre visibilité."
            />
          </Reveal>
          <Reveal delay={120}>
            <Pillar
              icon={Search}
              title="Visibilité sur Google"
              text="Votre site est pensé pour être trouvé facilement par vos futurs clients. Référencement naturel SEO et GEO intégrés dès la conception."
            />
          </Reveal>
          <Reveal delay={240}>
            <Pillar
              icon={ShieldCheck}
              title="Sécurité incluse"
              text="SSL, WAF, sauvegardes automatiques, mises à jour permanentes. C'est notre travail, pas le vôtre."
            />
          </Reveal>
          <Reveal delay={360}>
            <Pillar
              icon={Sparkles}
              title="Suivi clair"
              text="Vos données Google Search Console et Analytics 4 transformées en chiffres lisibles dans votre espace client."
              highlight
            />
          </Reveal>
        </div>
      </section>

      <ProcessSection />

      <TornEdge side="bottom" fill="var(--color-surface-2)" />

      {/* Pourquoi {BRAND_NAME} — ouverture marquée par le cartouche d'atelier */}
      <section className="relative z-10 bg-surface-2/60">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 md:px-10 py-16 sm:py-20 md:py-24 grid grid-cols-1 lg:grid-cols-5 gap-10 sm:gap-12 lg:gap-20">
          <div className="lg:col-span-2">
            <Reveal>
              <SectionStamp number="N°3" label={`Pourquoi ${BRAND_NAME}`} emphasis />
            </Reveal>
            <Reveal delay={100}>
              <h2 className="font-editorial mt-6 text-3xl sm:text-4xl md:text-5xl font-medium text-text leading-tight">
                Une autre façon
                <br />
                de créer un<br className="hidden md:block" />
                site web.
              </h2>
              <p className="mt-5 text-base md:text-lg text-text-muted leading-relaxed max-w-md">
                {BRAND_NAME} n'est pas une agence web classique. Pas de devis a cinq chiffres, pas de
                CMS qui vieillit, pas de prestataire injoignable.
              </p>
            </Reveal>
            <Reveal delay={200}>
              <PhoneMockup />
            </Reveal>
          </div>

          <div className="lg:col-span-3">
            <div role="list" className="border-y border-border divide-y divide-border">
              {WHY_POINTS.map((point, i) => (
                <Reveal key={point.title} delay={i * 80}>
                  <WhyPoint {...point} />
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* L'atelier : bloc humain de clôture. Pas de photo, l'authenticité est
          portée par la typographie (statement Fraunces) + la texture papier
          locale (.paper-card) + le cartouche FR signature. Évite le piège
          « stock photo équipe diverse souriante ». */}
      <section className="relative z-10 border-t border-border">
        <div className="mx-auto max-w-5xl px-4 sm:px-6 md:px-10 py-16 sm:py-20 md:py-24">
          <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-start">
            <div className="md:col-span-4">
              <Reveal>
                <SectionStamp number="FR" label="L'atelier" emphasis />
              </Reveal>
              <Reveal delay={120}>
                <p className="mt-8 text-sm text-text-dim leading-relaxed">
                  Atelier numérique français basé en métropole. Pas d'open space, pas d'équipe de quinze, pas de
                  prestataires en cascade.
                </p>
              </Reveal>
            </div>
            <div className="md:col-span-8 paper-card rounded-lg border border-border bg-surface p-7 md:p-10">
              <Reveal>
                <p className="font-editorial text-2xl md:text-4xl text-text leading-snug">
                  Chaque ligne de code de votre site est écrite, relue et signée par la personne qui
                  vous répond ensuite.
                </p>
              </Reveal>
              <Reveal delay={150}>
                <p className="mt-6 text-base text-text-muted leading-relaxed">
                  Quand vous nous écrivez, vous parlez à quelqu'un qui a posé les pierres de votre
                  site. Pas un commercial qui relaie à un développeur qui sous-traite à un freelance.
                </p>
              </Reveal>
              <Reveal delay={300}>
                <div className="mt-8 pt-6 border-t border-border flex items-center justify-between flex-wrap gap-4">
                  <span className="font-editorial text-base text-text-faint">
                    {BRAND_NAME}, atelier web français
                  </span>
                  <span className="text-micro uppercase tracking-[0.18em] text-text-faint">
                    Établi 2025
                  </span>
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

    </div>
  );
}

const WHY_POINTS: { icon: typeof Wallet; title: string; text: string }[] = [
  {
    icon: Wallet,
    title: "Un abonnement, pas un devis",
    text: "Tarif mensuel transparent. Pas de facture à 5 chiffres au démarrage, pas de frais cachés ensuite.",
  },
  {
    icon: Target,
    title: "Un outil, pas une vitrine",
    text: "On conçoit votre site pour générer des demandes, pas pour faire joli en attendant.",
  },
  {
    icon: Wand2,
    title: "Du sur-mesure, pas un template",
    text: "Conçu pour votre activité, pensé pour tous les écrans. Chaque site a son identité, ses parcours, ses conversions.",
  },
  {
    icon: Heart,
    title: "Une équipe, pas un prestataire",
    text: "On reste branchés sur votre site dans la durée. Mises à jour, optimisations, conseils : c'est continu.",
  },
  {
    icon: MessageCircle,
    title: "Du langage clair, pas du jargon",
    text: "Un interlocuteur direct, des choix expliqués, des chiffres lisibles. Vous savez où vous en êtes.",
  },
];

function PhoneMockup() {
  return (
    <div className="relative mt-12 mx-auto lg:mx-0 w-[260px] sm:w-[300px] aspect-[3/4]">
      <Image
        src="/phone-mockup.png"
        alt="Aperçu d'un site responsive sur mobile"
        fill
        sizes="(max-width: 1024px) 260px, 300px"
        className="relative object-contain drop-shadow-[0_20px_40px_rgba(28,25,23,0.10)]"
        style={{
          maskImage:
            "linear-gradient(160deg, black 0%, black 45%, transparent 82%)",
          WebkitMaskImage:
            "linear-gradient(160deg, black 0%, black 45%, transparent 82%)",
        }}
        priority={false}
      />
    </div>
  );
}

function WhyPoint({ icon: Icon, title, text }: { icon: typeof Wallet; title: string; text: string }) {
  return (
    <div role="listitem" className="group py-5 sm:py-7 flex items-start gap-4 sm:gap-5">
      <div className="size-10 sm:size-11 shrink-0 rounded-lg bg-surface-2 border border-border flex items-center justify-center text-text-muted group-hover:text-accent group-hover:border-accent/40 transition-colors">
        <Icon className="size-5" />
      </div>
      <div className="flex-1 min-w-0">
        <h3 className="text-base font-semibold text-text">{title}</h3>
        <p className="mt-1.5 text-sm text-text-muted leading-relaxed">{text}</p>
      </div>
    </div>
  );
}

function Pillar({ icon: Icon, title, text, highlight }: { icon: typeof Gauge; title: string; text: string; highlight?: boolean }) {
  return (
    <div className={`panel p-6 h-full ${highlight ? "border-accent/30 bg-accent/[0.03]" : ""}`}>
      <span
        className={`size-10 rounded-md flex items-center justify-center ${
          highlight ? "bg-accent/15 text-accent" : "bg-stone-900/[0.03] border border-border text-text-muted"
        }`}
      >
        <Icon className="size-5" />
      </span>
      <h3 className="mt-4 text-base font-semibold text-text">{title}</h3>
      <p className="mt-1.5 text-sm text-text-muted leading-relaxed">{text}</p>
      {highlight && (
        <div className="mt-3 flex items-center gap-1.5 text-micro uppercase tracking-wider text-accent font-semibold">
          <LineChart className="size-3" />
          Différenciateur {BRAND_NAME}
        </div>
      )}
    </div>
  );
}