import type { Metadata } from "next";
import Link from "next/link";
import {
  ArrowUpRight,
  Search,
  Compass,
  FileText,
  Zap,
  MapPin,
  Phone,
  MessageCircle,
  Eye,
  TrendingUp,
  X,
} from "@/components/ui/icons";
import type { LucideIcon } from "@/components/ui/icons";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Reveal } from "@/components/ui/reveal";
import { SectionStamp } from "@/components/marketing/section-stamp";
import {
  CtaPanel,
  FaqSection,
  JsonLdFaq,
  type FaqItem,
} from "@/components/marketing/expertise-blocks";
import { JsonLdBreadcrumb } from "@/components/marketing/json-ld";
import { TornEdge } from "@/components/marketing/torn-edge";

export const metadata: Metadata = {
  title: "Référencement",
  description:
    "Votre site conçu dès le départ pour être trouvé sur Google par les bonnes personnes. Pas de prestation séparée, pas de jargon, pas de promesses absurdes. Inclus dans l'abonnement.",
  keywords: [
    "référencement",
    "référencement Google",
    "visibilité Google",
    "référencement local",
    "SEO",
    "Generative Engine Optimization",
  ],
};

const FAQ_ITEMS: FaqItem[] = [
  {
    q: "Combien de temps avant d'apparaître sur Google ?",
    a: "Les premières apparitions dans Google se font en quelques semaines. Pour atteindre une vraie visibilité sur les recherches qui comptent dans votre métier, il faut compter trois à six mois. C'est un travail de fond, pas un coup de baguette magique.",
  },
  {
    q: "Vous écrivez les textes pour moi ?",
    a: "On vous accompagne. Sur les pages clés, on rédige une première version qu'on affine avec vous. C'est vous qui connaissez votre métier, on s'occupe de mettre les bons mots aux bons endroits.",
  },
  {
    q: "Et si je veux ajouter des pages plus tard ?",
    a: "Vous nous écrivez ce que vous voulez ajouter, on s'en occupe. Chaque nouvelle page est pensée pour s'intégrer naturellement dans la logique du site et continuer à vous rendre visible.",
  },
  {
    q: "Qu'est-ce que je vois, concrètement, dans mon espace ?",
    a: "Combien de personnes ont visité votre site, d'où elles viennent, quelles pages elles regardent, et quelles recherches Google les ont amenées chez vous. Tout est lisible, sans jargon.",
  },
];

const REASONS_INVISIBLE: { icon: LucideIcon; title: string; text: string }[] = [
  {
    icon: Zap,
    title: "Ils sont trop lents.",
    text: "Une page qui met trois secondes à s'ouvrir fait fuir les visiteurs. Google le voit, et préfère mettre en avant les sites qui répondent vite.",
  },
  {
    icon: FileText,
    title: "Ils ne disent pas clairement ce qu'ils font.",
    text: "Quand un site reste vague, Google reste vague aussi. Il ne sait pas à qui le proposer, donc il ne le propose à personne.",
  },
  {
    icon: MapPin,
    title: "Ils oublient de dire où ils sont.",
    text: "Un coiffeur sans adresse claire, un plombier sans zone d'intervention : invisibles dans toutes les recherches locales. Pourtant c'est là que tout se joue.",
  },
  {
    icon: Compass,
    title: "Ils ne sont jamais à jour.",
    text: "Google préfère les sites vivants. Un site oublié depuis deux ans n'inspire confiance ni aux moteurs de recherche, ni aux gens qui tombent dessus.",
  },
];

const PRINCIPLES: { num: string; title: string; text: string }[] = [
  {
    num: "01",
    title: "Une page, un sujet.",
    text: "Chaque page de votre site répond à une vraie question que vos clients tapent sur Google. Pas de fourre-tout. Pas de page « divers ».",
  },
  {
    num: "02",
    title: "Des mots qui sont les leurs.",
    text: "On écrit avec les mots que vos clients utilisent vraiment, pas ceux de votre métier. Si un visiteur comprend votre page, Google la comprend aussi.",
  },
  {
    num: "03",
    title: "Un site qui ne fait pas attendre.",
    text: "Un site rapide, c'est un visiteur qui reste. Un visiteur qui reste, c'est Google qui en prend note et propose votre site à d'autres.",
  },
  {
    num: "04",
    title: "Là où vous êtes, on le dit.",
    text: "Adresse, horaires, zones d'intervention, numéro direct. Ce sont les détails que cherchent vos clients en premier, et ceux qui font remonter votre site dans les recherches locales.",
  },
];

const NOTHING_NOS: string[] = [
  "On ne vous promet pas la première place sur Google. Personne ne peut. Quelqu'un qui le fait vous vend du vent.",
  "On ne facture pas le référencement à part. C'est compris dans l'abonnement, dès le premier mois. Pas de devis additionnel six mois plus tard.",
  "On n'achète pas de fausse popularité pour vous. Aucune technique douteuse pour gonfler temporairement votre site. Quand Google s'en aperçoit, c'est votre nom qui en pâtit.",
  "On ne se cache pas derrière du jargon. Si on ne sait pas vous expliquer quelque chose simplement, c'est qu'on ne le maîtrise pas.",
];

export default function ReferencementPage() {
  return (
    <div className="relative overflow-hidden">

      {/* Hero split asymetrique : a gauche le titre + promesse + CTAs, a droite
          un mini-sommaire « 3 portes d'entree Google » qui dit immediatement
          de quoi on parle (SEO local + SEO national + GEO). */}
      <section className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 md:px-10 pt-16 pb-12 sm:pt-20 sm:pb-16">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-end">
          <div className="lg:col-span-8">
            <Reveal>
              <SectionStamp number="II" label="Référencement" />
            </Reveal>
            <Reveal delay={120}>
              <h1 className="font-editorial mt-6 text-4xl sm:text-5xl md:text-7xl font-medium text-text leading-[0.98] tracking-tight">
                Être trouvé par les bons clients.
              </h1>
            </Reveal>
            <Reveal delay={260}>
              <p className="mt-7 text-base md:text-lg text-text-muted leading-relaxed max-w-xl">
                Quand quelqu'un cherche votre métier sur Google, c'est votre site qui doit apparaître. Pas vos concurrents. Pas un annuaire généraliste. Vous.
              </p>
            </Reveal>
            <Reveal delay={400}>
              <div className="mt-8 flex flex-wrap items-center gap-x-6 gap-y-3">
                <Link href="/contact">
                  <Button variant="primary" size="lg">
                    Voir un aperçu de votre site
                  </Button>
                </Link>
                <Link
                  href="/tarifs"
                  className="group inline-flex items-center gap-1.5 text-sm text-text-muted hover:text-accent transition-colors"
                >
                  Découvrir les tarifs
                  <ArrowUpRight className="size-3.5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
                </Link>
              </div>
            </Reveal>
          </div>
          <div className="lg:col-span-4">
            <Reveal delay={220}>
              <ol className="border-t border-border">
                {[
                  ["SEO local", "votre ville, votre métier"],
                  ["SEO national", "vos requêtes principales"],
                  ["GEO", "ChatGPT, Perplexity, Gemini"],
                ].map(([word, sub], i) => (
                  <li
                    key={word}
                    className="flex items-baseline gap-4 py-3.5 border-b border-border"
                  >
                    <span className="font-editorial text-sm font-medium tabular-nums text-text-faint w-6 shrink-0">
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    <div className="min-w-0">
                      <div className="text-sm font-semibold text-text">{word}</div>
                      <div className="text-xs text-text-faint">{sub}</div>
                    </div>
                  </li>
                ))}
              </ol>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Le constat (intro problème) */}
      <section className="relative z-10 border-t border-border/60">
        <div className="mx-auto max-w-3xl px-4 sm:px-6 md:px-10 py-16 sm:py-20 md:py-24 text-center">
          <Reveal>
            <p className="font-editorial text-2xl md:text-3xl font-medium text-text leading-snug">
              Vous tapez votre métier sur Google.
              <span className="text-text-muted"> Vous n'y êtes pas.</span>
            </p>
          </Reveal>
          <Reveal delay={150}>
            <p className="mt-6 text-text-muted leading-relaxed max-w-xl mx-auto">
              À votre place, trois concurrents que vous connaissez et deux que vous n'avez jamais
              entendus. Pendant ce temps, vos prochains clients sont là, en train de chercher
              quelqu'un comme vous, et choisissent ailleurs.
            </p>
          </Reveal>
        </div>
      </section>

      {/* Pourquoi certains sites sont invisibles */}
      <section className="relative z-10 border-t border-border/60 bg-surface/30">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 md:px-10 py-16 sm:py-20 md:py-24 lg:py-32">
          <div className="text-center max-w-2xl mx-auto">
            <Reveal>
              <Badge tone="muted">Le constat</Badge>
            </Reveal>
            <Reveal delay={120}>
              <h2 className="font-editorial mt-5 text-3xl md:text-5xl font-medium text-text leading-[1.08] tracking-tight">
                Pourquoi certains sites
                <br />
                ne sont jamais trouvés.
              </h2>
            </Reveal>
            <Reveal delay={240}>
              <p className="mt-6 text-text-muted leading-relaxed">
                Ce n'est presque jamais une question de chance ni de budget. C'est presque
                toujours une question de bases mal posées au départ.
              </p>
            </Reveal>
          </div>

          <div className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-6">
            {REASONS_INVISIBLE.map((r, i) => (
              <Reveal key={r.title} delay={i * 100}>
                <ReasonCard {...r} />
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Notre approche */}
      <section className="relative z-10 border-t border-border/60">
        <div className="mx-auto max-w-4xl px-4 sm:px-6 md:px-10 py-16 sm:py-20 md:py-24 lg:py-32 text-center">
          <Reveal>
            <Badge tone="muted">Notre approche</Badge>
          </Reveal>
          <Reveal delay={120}>
            <h2 className="font-editorial mt-5 text-3xl md:text-5xl font-medium text-text leading-[1.08] tracking-tight">
              Le référencement,
              <br />
              c'est dans le site, pas à côté.
            </h2>
          </Reveal>
          <Reveal delay={240}>
            <p className="mt-7 text-base md:text-lg text-text-muted leading-relaxed max-w-2xl mx-auto">
              Pas de prestation séparée, pas de surcoût mensuel, pas de jargon. Quand on conçoit
              votre site, on le construit dès le départ pour qu'il soit lisible par Google et
              utile à vos visiteurs. Les deux vont ensemble. C'est tout.
            </p>
          </Reveal>
        </div>
      </section>

      {/* 4 principes */}
      <section className="relative z-10 border-t border-border/60 bg-surface/30">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 md:px-10 py-16 sm:py-20 md:py-24 lg:py-32">
          <div className="text-center max-w-2xl mx-auto">
            <Reveal>
              <Badge tone="muted">Comment on s'y prend</Badge>
            </Reveal>
            <Reveal delay={120}>
              <h2 className="font-editorial mt-5 text-3xl md:text-5xl font-medium text-text leading-[1.08] tracking-tight">
                Quatre choses simples,
                <br />
                faites bien.
              </h2>
            </Reveal>
          </div>

          <div className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-6">
            {PRINCIPLES.map((p, i) => (
              <Reveal key={p.title} delay={i * 100}>
                <PrincipleCard {...p} />
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Projection concrète */}
      <section className="relative z-10 border-t border-border/60">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 md:px-10 py-16 sm:py-20 md:py-24 lg:py-32">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-20 items-center">
            <Reveal className="lg:col-span-6">
              <Badge tone="muted">Concrètement</Badge>
              <h2 className="font-editorial mt-5 text-3xl md:text-5xl font-medium text-text leading-[1.08] tracking-tight">
                Plus de gens qui vous trouvent.
                <br />
                Plus de gens qui vous appellent.
              </h2>
              <p className="mt-6 text-base md:text-lg text-text-muted leading-relaxed max-w-xl">
                Le téléphone qui sonne après un mois de silence. Une demande de devis le matin,
                une autre le soir. Un client qui dit « je vous ai trouvé sur Google ». C'est ça
                qui change. Et c'est suivi dans votre espace, dans des mots qu'on comprend.
              </p>

              <div className="mt-9 grid grid-cols-3 gap-4 max-w-md">
                <ImpactStat icon={Eye} label="Visites" />
                <ImpactStat icon={Phone} label="Appels" />
                <ImpactStat icon={MessageCircle} label="Demandes" />
              </div>
            </Reveal>

            <Reveal delay={200} className="lg:col-span-6">
              <ActivityFeed />
            </Reveal>
          </div>
        </div>
      </section>

      {/* Ce qu'on ne fait pas */}
      <section className="relative z-10 border-t border-border/60 bg-surface/30">
        <div className="mx-auto max-w-4xl px-4 sm:px-6 md:px-10 py-16 sm:py-20 md:py-24 lg:py-32">
          <div className="text-center">
            <Reveal>
              <Badge tone="muted">Ce qu'on ne fait pas</Badge>
            </Reveal>
            <Reveal delay={120}>
              <h2 className="font-editorial mt-5 text-3xl md:text-5xl font-medium text-text leading-[1.08] tracking-tight">
                Ce que vous ne nous
                <br />
                entendrez jamais dire.
              </h2>
            </Reveal>
            <Reveal delay={240}>
              <p className="mt-6 text-text-muted leading-relaxed max-w-2xl mx-auto">
                Le référencement attire son lot de promesses douteuses. Voilà quatre phrases qui
                ne sortiront pas de notre bouche.
              </p>
            </Reveal>
          </div>

          <div className="mt-14 space-y-3">
            {NOTHING_NOS.map((text, i) => (
              <Reveal key={i} delay={i * 80}>
                <NoCard text={text} />
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <FaqSection
        items={FAQ_ITEMS}
        title={
          <>
            Les questions qu'on nous pose{" "}
            le plus souvent.
          </>
        }
      />

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

      <CtaPanel
        title={
          <>
            Envie de voir si Google
            <br />
            peut vous trouver ?
          </>
        }
        text="Dites-nous votre métier et l'endroit où vous travaillez, on vous montre ce que cherchent vos clients et ce qu'ils trouvent à votre place aujourd'hui."
      />

      <JsonLdFaq items={FAQ_ITEMS} />
      <JsonLdBreadcrumb
        items={[
          { name: "Accueil", path: "/" },
          { name: "Expertises", path: "/expertises/seo-geo" },
          { name: "Référencement SEO & GEO", path: "/expertises/seo-geo" },
        ]}
      />
    </div>
  );
}

function ReasonCard({
  icon: Icon,
  title,
  text,
}: {
  icon: LucideIcon;
  title: string;
  text: string;
}) {
  return (
    <div className="group relative h-full panel p-7 md:p-8 overflow-hidden transition-all duration-500 hover:-translate-y-0.5 hover:border-accent/30">
      <div className="absolute inset-0 bg-gradient-to-br from-accent/[0.03] via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />

      <div className="relative">
        <span className="size-10 rounded-md bg-stone-900/[0.03] border border-border flex items-center justify-center text-text-muted group-hover:text-accent group-hover:border-accent/30 transition-colors">
          <Icon className="size-[18px]" strokeWidth={1.6} />
        </span>
        <h3 className="mt-6 font-editorial text-xl md:text-2xl font-medium text-text leading-snug">
          {title}
        </h3>
        <p className="mt-3 text-sm md:text-base text-text-muted leading-relaxed">{text}</p>
      </div>
    </div>
  );
}

function PrincipleCard({ num, title, text }: { num: string; title: string; text: string }) {
  return (
    <div className="group relative h-full panel p-7 md:p-8 overflow-hidden transition-all duration-500 hover:-translate-y-0.5 hover:border-accent/30">
      <div className="absolute inset-0 bg-gradient-to-br from-accent/[0.03] via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />

      <div className="relative flex items-start gap-5">
        <span className="font-editorial text-3xl md:text-4xl font-medium text-accent tabular-nums leading-none shrink-0">
          {num}
        </span>
        <div>
          <h3 className="font-editorial text-xl md:text-2xl font-medium text-text leading-snug">
            {title}
          </h3>
          <p className="mt-3 text-sm md:text-base text-text-muted leading-relaxed">{text}</p>
        </div>
      </div>
    </div>
  );
}

function ImpactStat({ icon: Icon, label }: { icon: LucideIcon; label: string }) {
  return (
    <div className="panel p-4 text-center">
      <Icon className="size-5 mx-auto text-accent" strokeWidth={1.6} />
      <div className="mt-2 text-xs text-text-muted">{label}</div>
      <div className="mt-1 flex items-center justify-center gap-1 text-xxs text-success font-medium">
        <TrendingUp className="size-3" strokeWidth={2} />
        en hausse
      </div>
    </div>
  );
}

function ActivityFeed() {
  return (
    <div className="relative">
      <div className="relative panel p-6 md:p-7">
        <div className="flex items-center justify-between pb-4 border-b border-border/60">
          <div>
            <div className="text-micro uppercase tracking-wider text-text-faint">
              Activité de votre site
            </div>
            <div className="mt-1 text-sm font-semibold text-text">Sept derniers jours</div>
          </div>
          <span className="text-xxs px-2.5 py-1 rounded-full bg-success/[0.08] border border-success/20 text-success font-medium">
            En hausse
          </span>
        </div>

        <div className="mt-5 space-y-4">
          <FeedItem
            icon={Phone}
            day="Mardi"
            text={
              <>
                <span className="text-text">M. Lerouge</span> vous a appelé depuis Google.
              </>
            }
          />
          <FeedItem
            icon={Eye}
            day="Lundi"
            text={
              <>
                <span className="text-text">8 nouvelles visites</span> depuis « plombier proche
                de chez moi ».
              </>
            }
          />
          <FeedItem
            icon={MessageCircle}
            day="Vendredi"
            text={
              <>
                <span className="text-text">Mme Durand</span> a demandé un devis via votre
                formulaire.
              </>
            }
          />
          <FeedItem
            icon={Search}
            day="Jeudi"
            text={
              <>
                Votre page « réparation de fuite » remonte sur Google pour la première fois.
              </>
            }
            highlight
          />
        </div>

        <div className="mt-6 pt-4 border-t border-border/60 text-xxs text-text-faint italic text-center">
          Aperçu illustratif. Vos vrais chiffres apparaissent dans votre espace client.
        </div>
      </div>
    </div>
  );
}

function FeedItem({
  icon: Icon,
  day,
  text,
  highlight,
}: {
  icon: LucideIcon;
  day: string;
  text: React.ReactNode;
  highlight?: boolean;
}) {
  return (
    <div className="flex items-start gap-3">
      <span
        className={`size-8 shrink-0 rounded-md flex items-center justify-center mt-0.5 ${
          highlight
            ? "bg-accent/15 border border-accent/30 text-accent"
            : "bg-stone-900/[0.03] border border-border text-text-muted"
        }`}
      >
        <Icon className="size-3.5" strokeWidth={1.8} />
      </span>
      <div className="flex-1 min-w-0">
        <div className="text-micro uppercase tracking-wider text-text-faint">{day}</div>
        <p className="mt-0.5 text-sm text-text-muted leading-relaxed">{text}</p>
      </div>
    </div>
  );
}

function NoCard({ text }: { text: string }) {
  const [head, ...rest] = text.split(/(?<=\.) /);
  const tail = rest.join(" ");
  return (
    <div className="panel p-5 md:p-6 flex items-start gap-4">
      <span className="size-9 shrink-0 rounded-md bg-danger/[0.08] border border-danger/20 flex items-center justify-center text-danger mt-0.5">
        <X className="size-4" strokeWidth={2} />
      </span>
      <div className="flex-1">
        <p className="text-base font-semibold text-text leading-snug">{head}</p>
        {tail && (
          <p className="mt-1.5 text-sm text-text-muted leading-relaxed">{tail}</p>
        )}
      </div>
    </div>
  );
}