import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import {
  ArrowUpRight,
  Search,
  Smartphone,
  Palette,
  MessageCircle,
  Phone,
  MapPin,
  Star,
} 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: "Site internet sur-mesure",
  description:
    "Création de site internet pour artisans, commerçants et professions libérales. Visible sur Google, agréable sur tous les écrans, maintenu pour vous, en abonnement mensuel.",
  keywords: [
    "site internet professionnel",
    "création site internet",
    "site vitrine sur-mesure",
    "site artisan",
    "site commerçant",
    "site web entreprise locale",
  ],
};

const FAQ_ITEMS: FaqItem[] = [
  {
    q: "Combien de temps avant que mon site soit en ligne ?",
    a: "Compter deux à quatre semaines, selon le nombre de pages et votre disponibilité pour valider les choix de design et le contenu. La première semaine sert à se rencontrer et à comprendre votre activité, les suivantes à concevoir et finaliser.",
  },
  {
    q: "Et si j'ai déjà un site, vous le reprenez ?",
    a: "Oui. On regarde ce qui peut être conservé (textes, photos, références), on identifie ce qui pose problème, et on reconstruit sur une base saine. Votre ancien site reste accessible le temps de la transition pour ne pas perdre votre visibilité actuelle.",
  },
  {
    q: "Je suis bien propriétaire de mon site ?",
    a: "Oui. Le nom de domaine est à votre nom dès la signature. Si un jour vous décidez de partir, vous récupérez l'ensemble (textes, photos, structure) sans frais et sans question.",
  },
  {
    q: "Et pour modifier un texte ou une photo plus tard ?",
    a: "Vous nous écrivez ce que vous voulez changer, on s'en occupe dans la journée. Pas d'interface à apprendre, pas de manipulation à craindre. C'est compris dans l'abonnement.",
  },
];

const PROMISES: { icon: LucideIcon; title: string; text: string }[] = [
  {
    icon: Palette,
    title: "Pensé pour votre métier.",
    text: "Vos photos, vos mots, vos clients, vos parcours. Pas un thème acheté en ligne où on remplace le logo, pas une mise en page qu'on a déjà vue chez votre voisin.",
  },
  {
    icon: Search,
    title: "Trouvable dès le premier jour.",
    text: "Le site est construit pour que Google le comprenne et le propose aux bonnes personnes. Le détail, c'est sur la page Référencement.",
  },
  {
    icon: Smartphone,
    title: "Lisible sur leur téléphone.",
    text: "La majorité de vos visiteurs vous regardent depuis un téléphone, parfois debout dans la rue. Le site est pensé pour eux d'abord.",
  },
  {
    icon: MessageCircle,
    title: "Modifié pour vous.",
    text: "Un horaire, une photo, un texte à changer ? Vous nous écrivez, c'est fait dans la journée. Aucune interface à apprendre, aucun mot de passe à retenir.",
  },
];

export default function SiteInternetPage() {
  return (
    <div className="relative overflow-hidden">
      {/* Décor de fond très discret */}

      {/* Hero split asymetrique : casser le centered-stack identique sur toutes
          les pages expertises. Promesse a gauche (left-aligned), 3 mots-cles
          metier a droite en colonnage numerote (signature atelier). */}
      <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="I" label="Site internet" />
            </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">
                Un site qui vous amène vos prochains clients.
              </h1>
            </Reveal>
            <Reveal delay={260}>
              <p className="mt-7 text-base md:text-lg text-text-muted leading-relaxed max-w-xl">
                Vos prochains clients commencent par chercher en ligne. Le site, c'est ce qui leur donne envie de vous écrire ou de vous appeler. Le vôtre est fait pour ça, précisément.
              </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">
                {[
                  ["Être trouvé", "par les bonnes personnes"],
                  ["Convaincre", "en cinq secondes"],
                  ["Faire agir", "appel, message, devis"],
                ].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>

      {/* Visuel + manifeste */}
      <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 order-2 lg:order-1">
              <Badge tone="muted">À quoi ça ressemble</Badge>
              <h2 className="font-editorial mt-5 text-3xl md:text-5xl font-medium text-text leading-[1.08] tracking-tight">
                Un site qui donne
                <br />
                envie de vous écrire.
              </h2>
              <p className="mt-6 text-base md:text-lg text-text-muted leading-relaxed max-w-xl">
                Quelqu'un arrive sur votre site. En cinq secondes, il doit savoir ce que vous
                faites, où vous êtes, et comment vous joindre. Pas de menu à rallonge, pas de
                bandeau qui clignote, pas de pop-up qui réclame son e-mail.
              </p>

              <ul className="mt-8 space-y-3">
                <ManifestoItem text="Une accroche qui dit en deux phrases ce que vous faites et pour qui." />
                <ManifestoItem text="Un numéro de téléphone et un itinéraire toujours à portée de pouce." />
                <ManifestoItem text="Vos services présentés simplement, sans tournures gonflées." />
                <ManifestoItem text="Vos avis clients en évidence, parce que c'est ce qui décide." />
              </ul>
            </Reveal>

            <Reveal delay={200} className="lg:col-span-6 order-1 lg:order-2">
              <PhoneMockup />
            </Reveal>
          </div>
        </div>
      </section>

      {/* Les promesses */}
      <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">Ce que vous obtenez</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,
                <br />
                faites correctement.
              </h2>
            </Reveal>
            <Reveal delay={240}>
              <p className="mt-6 text-text-muted leading-relaxed">
                Vous allez nous juger sur ces quatre points. C'est plus parlant qu'une liste de
                vingt fonctionnalités qu'on ne regarde jamais.
              </p>
            </Reveal>
          </div>

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

      {/* Pour qui (mention discrète) */}
      <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-14 sm:py-16 md:py-20 text-center">
          <Reveal>
            <p className="text-text-faint text-micro uppercase tracking-[0.2em] font-semibold">
              Pour qui
            </p>
          </Reveal>
          <Reveal delay={120}>
            <p className="mt-5 font-editorial text-2xl md:text-3xl font-medium text-text leading-snug">
              Les artisans, commerçants, professions libérales et TPE qui veulent gagner des clients,
              <span className="text-text-muted"> pas administrer un site.</span>
            </p>
          </Reveal>
          <Reveal delay={240}>
            <div className="mt-8 flex flex-wrap items-center justify-center gap-x-2 gap-y-2 text-sm text-text-muted">
              <SectorPill>Plombiers</SectorPill>
              <SectorPill>Boulangers</SectorPill>
              <SectorPill>Avocats</SectorPill>
              <SectorPill>Ostéopathes</SectorPill>
              <SectorPill>Restaurants</SectorPill>
              <SectorPill>Coiffeurs</SectorPill>
              <SectorPill>Garagistes</SectorPill>
              <SectorPill>Architectes</SectorPill>
              <SectorPill>Et bien d'autres</SectorPill>
            </div>
          </Reveal>
        </div>
      </section>

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

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

      <CtaPanel
        title={
          <>
            Envie de voir un{" "}
            premier jet de votre futur site ?
          </>
        }
        text="On regarde votre activité, on imagine ce que pourrait être votre site, et on vous l'envoie. Sans engagement, et sans formulaire à 18 cases."
      />

      <JsonLdFaq items={FAQ_ITEMS} />
      <JsonLdBreadcrumb
        items={[
          { name: "Accueil", path: "/" },
          { name: "Expertises", path: "/expertises/site-internet" },
          { name: "Site internet", path: "/expertises/site-internet" },
        ]}
      />
    </div>
  );
}

function ManifestoItem({ text }: { text: string }) {
  return (
    <li className="flex items-start gap-3">
      <span className="mt-2 size-1 rounded-full bg-accent shrink-0" />
      <span className="text-sm md:text-base text-text-muted leading-relaxed">{text}</span>
    </li>
  );
}

function PromiseCard({
  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">
      {/* Halo subtil au hover */}
      <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 SectorPill({ children }: { children: React.ReactNode }) {
  return (
    <span className="px-3.5 py-1.5 rounded-full border border-border/80 bg-stone-900/[0.03] text-xs md:text-sm text-text-muted">
      {children}
    </span>
  );
}

function PhoneMockup() {
  return (
    <div className="relative mx-auto w-full max-w-[300px]">
      {/* Corps du téléphone : aplat stone-900 + drop-shadow warm legere */}
      <div className="relative aspect-[9/19] rounded-[2.6rem] border border-stone-800 bg-stone-900 p-2 shadow-[var(--shadow-lg)]">
        {/* Encoche */}
        <div className="absolute top-2 left-1/2 -translate-x-1/2 w-24 h-5 bg-stone-950 rounded-b-2xl z-10 border-x border-b border-stone-800/80" />

        {/* Écran */}
        <div className="relative size-full rounded-[2.05rem] bg-gradient-to-b from-surface via-surface to-surface-2 overflow-hidden">
          {/* Status bar */}
          <div className="flex items-center justify-between px-6 pt-3 pb-1.5 text-[9px] text-text-muted tabular-nums">
            <span>9:41</span>
            <span className="size-1 rounded-full bg-text-muted/40" />
            <span>100 %</span>
          </div>

          {/* Site mockup */}
          <div className="px-5 pt-7 space-y-4">
            {/* Mini header */}
            <div className="flex items-center justify-between">
              <span className="font-editorial text-xs font-medium text-text italic">
                Atelier Maël
              </span>
              <span className="size-5 rounded-md border border-border flex items-center justify-center">
                <span className="block w-2 h-px bg-text-muted" />
              </span>
            </div>

            {/* Hero du faux site */}
            <div className="pt-3">
              <div className="text-[9px] uppercase tracking-wider text-text-faint">
                Menuiserie sur-mesure · Lyon
              </div>
              <h4 className="mt-2 font-editorial text-lg font-medium text-text leading-[1.15]">
                Du bois,
                <br />
                du temps,
                <br />
                du soin.
              </h4>
            </div>

            {/* Visuel atelier de bois */}
            <div className="aspect-[4/3] rounded-lg border border-border/60 relative overflow-hidden bg-stone-200">
              <Image
                src="/visuals/atelier-menuiserie.jpg"
                alt="Atelier de menuiserie"
                fill
                sizes="240px"
                className="object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-stone-900/30 via-transparent to-transparent pointer-events-none" />
            </div>

            {/* CTAs */}
            <div className="grid grid-cols-2 gap-2 pt-1">
              <div className="flex items-center justify-center gap-1.5 py-2 rounded-md bg-accent text-accent-fg text-micro font-semibold">
                <Phone className="size-3" />
                Appeler
              </div>
              <div className="flex items-center justify-center gap-1.5 py-2 rounded-md border border-border bg-stone-900/[0.03] text-text text-micro font-medium">
                <MapPin className="size-3" />
                Itinéraire
              </div>
            </div>

            {/* Avis Google */}
            <div className="pt-1 flex items-center gap-2 text-[9px] text-text-muted">
              <div className="flex items-center gap-0.5 text-accent">
                <Star className="size-2.5 fill-current" />
                <Star className="size-2.5 fill-current" />
                <Star className="size-2.5 fill-current" />
                <Star className="size-2.5 fill-current" />
                <Star className="size-2.5 fill-current" />
              </div>
              <span className="text-text">4,9</span>
              <span className="text-text-faint">·</span>
              <span>87 avis Google</span>
            </div>

            {/* Bandeau ouvert */}
            <div className="px-3 py-2 rounded-md bg-success/[0.08] border border-success/20 flex items-center gap-2">
              <span className="size-1.5 rounded-full bg-success" />
              <span className="text-micro text-text">Ouvert · ferme à 18 h</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}