import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import {
  ArrowUpRight,
  ShoppingBag,
  Sparkles,
  Wand2,
  Zap,
  Plus,
  Pencil,
  Tag,
  Package,
  MessageCircle,
  ShieldCheck,
  Headphones,
  CloudCog,
  TrendingUp,
  X,
  Heart,
  MapPin,
} 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 { CtaPanel } from "@/components/marketing/expertise-blocks";
import { SectionStamp } from "@/components/marketing/section-stamp";
import { JsonLdBreadcrumb } from "@/components/marketing/json-ld";
import { TornEdge } from "@/components/marketing/torn-edge";

export const metadata: Metadata = {
  title: "Boutique en ligne sur-mesure",
  description:
    "Vendez en ligne sans complexité. Une boutique claire pour vos clients, simple à gérer pour vous, sans commission sur les ventes. Tout inclus en abonnement mensuel.",
  keywords: [
    "création site e-commerce",
    "boutique en ligne",
    "site marchand",
    "vendre en ligne simplement",
    "e-commerce sans commission",
  ],
};

const PILLARS: { icon: LucideIcon; title: string; text: string }[] = [
  {
    icon: ShoppingBag,
    title: "L'achat se fait en trois clics.",
    text: "Voir un produit, le mettre dans le panier, payer. Pas d'inscription forcée, pas de quinze cases à remplir, pas de captcha qui ne marche jamais. Vos clients arrêtent d'abandonner en route.",
  },
  {
    icon: Sparkles,
    title: "Vos produits sont mis en avant.",
    text: "Des photos qu'on a envie de regarder, des descriptions courtes mais précises, un prix qu'on voit du premier coup d'œil. Vos clients comprennent ce qu'ils achètent, et pourquoi chez vous.",
  },
  {
    icon: Wand2,
    title: "La gestion tient dans votre poche.",
    text: "Ajouter un produit, baisser un prix, lancer une promo : trente secondes depuis votre téléphone, entre deux clients. Aucun manuel à lire, aucune formation à suivre.",
  },
  {
    icon: Zap,
    title: "La boutique ne fait jamais attendre.",
    text: "Une page qui met trois secondes à s'ouvrir, c'est une vente perdue. La boutique est faite pour s'afficher tout de suite, sur n'importe quel téléphone, n'importe où.",
  },
];

const QUICK_ACTIONS: { icon: LucideIcon; label: string }[] = [
  { icon: Plus, label: "Ajouter un produit" },
  { icon: Pencil, label: "Modifier un prix" },
  { icon: Tag, label: "Mettre en promo" },
  { icon: Package, label: "Voir les commandes" },
  { icon: MessageCircle, label: "Répondre à un client" },
];

const REASSURANCE: { icon: LucideIcon; title: string; text: string }[] = [
  {
    icon: CloudCog,
    title: "L'hébergement, c'est nous.",
    text: "Tout tourne sur notre infrastructure, surveillée en continu. Vous n'avez rien à installer, rien à mettre à jour, rien à maintenir.",
  },
  {
    icon: ShieldCheck,
    title: "Les paiements, c'est sécurisé.",
    text: "Carte bancaire, Apple Pay, Google Pay. Vos clients paient en toute confiance, vos fonds arrivent directement sur votre compte bancaire.",
  },
  {
    icon: Headphones,
    title: "Une vraie équipe répond.",
    text: "Pas de chatbot, pas de service externalisé. Quand vous écrivez, c'est quelqu'un qui connaît votre boutique qui vous répond, en français, dans la journée.",
  },
  {
    icon: TrendingUp,
    title: "Tout évolue sans que vous y touchiez.",
    text: "Mises à jour, nouvelles fonctionnalités, ajustements de design : ça se passe en arrière-plan. Votre boutique s'améliore sans que vous ayez à vous en occuper.",
  },
];

const NOTHING_NOS: string[] = [
  "On ne prend aucun pourcentage sur vos ventes. Ce que vous vendez vous revient en entier (hors frais bancaires habituels).",
  "On ne facture pas chaque ajout de fonctionnalité. Si une option vous manque, on l'intègre. C'est compris dans l'abonnement.",
  "On ne vous oblige pas à tout réapprendre tous les six mois. L'interface évolue, mais elle reste lisible. On garde vos repères.",
  "On ne construit pas d'usine à gaz. Si une option ne sert pas à vendre plus, on ne la met pas. Une boutique qui marche, c'est une boutique simple.",
];

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

      {/* Hero split asymetrique : a gauche promesse + CTAs, a droite mini-flow
          du parcours d'achat (arriver / hesiter / commander) qui telegraphie
          l'angle « conversion » sans avoir a lire 2 paragraphes. */}
      <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="III" label="E-commerce" />
            </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">
                Transformer vos visites en ventes.
              </h1>
            </Reveal>
            <Reveal delay={260}>
              <p className="mt-7 text-base md:text-lg text-text-muted leading-relaxed max-w-xl">
                Un client arrive sur votre boutique, regarde un produit, hésite. Soit il achète, soit il ferme l'onglet. Tout se joue dans ces quelques secondes. C'est exactement ce moment qu'on travaille.
              </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 boutique
                  </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">
                {[
                  ["Arrive", "depuis Google ou Insta"],
                  ["Hésite", "5 à 30 secondes critiques"],
                  ["Commande", "checkout en 2 étapes"],
                ].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>

      {/* 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">
              Une visite ne paie pas votre loyer.
              <span className="text-text-muted"> Une vente, oui.</span>
            </p>
          </Reveal>
          <Reveal delay={150}>
            <p className="mt-6 text-text-muted leading-relaxed max-w-xl mx-auto">
              On construit votre boutique avec une seule idée en tête : que la personne qui
              arrive reparte avec quelque chose dans son panier, plutôt qu'avec un onglet fermé.
              Le reste (hébergement, paiements, maintenance), c'est notre affaire.
            </p>
          </Reveal>
        </div>
      </section>

      {/* Projection visuelle */}
      <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="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">
                Une boutique faite
                <br />
                pour donner envie d'acheter.
              </h2>
              <p className="mt-6 text-base md:text-lg text-text-muted leading-relaxed max-w-xl">
                Pas de bandeaux qui clignotent, pas de pop-up qui réclame un e-mail avant qu'on
                ait vu le premier produit, pas de roulette « gagnez 5 % ». Une boutique nette, où
                vos produits respirent et où acheter ne prend que quelques secondes.
              </p>

              <ul className="mt-8 space-y-3">
                <ManifestoItem text="Des photos qu'on a envie d'agrandir." />
                <ManifestoItem text="Un prix qui se voit, jamais caché." />
                <ManifestoItem text="Un bouton « Ajouter » à portée de pouce, sur chaque page." />
                <ManifestoItem text="La confiance qui s'installe, sans qu'on ait besoin de la forcer." />
              </ul>
            </Reveal>

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

      {/* 4 piliers */}
      <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="text-center max-w-2xl mx-auto">
            <Reveal>
              <Badge tone="muted">Ce qui compte vraiment</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 />
                qui font vendre.
              </h2>
            </Reveal>
            <Reveal delay={240}>
              <p className="mt-6 text-text-muted leading-relaxed">
                C'est sur ces quatre points que se joue la différence entre une boutique qui
                tourne et une boutique qui prend la poussière. On ne lâche rien dessus.
              </p>
            </Reveal>
          </div>

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

      {/* Au quotidien */}
      <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">Au quotidien</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">
                Tout ce que vous faites souvent,
                <br />
                en quelques secondes.
              </h2>
            </Reveal>
            <Reveal delay={240}>
              <p className="mt-6 text-text-muted leading-relaxed">
                Vous gérez votre boutique entre deux clients, depuis votre comptoir ou votre
                téléphone. L'interface est faite pour ça : peu de clics, peu de menus, pas de
                jargon.
              </p>
            </Reveal>
          </div>

          <div className="mt-14 max-w-5xl mx-auto">
            <Reveal delay={200}>
              <div className="grid grid-cols-2 md:grid-cols-5 gap-3 md:gap-4">
                {QUICK_ACTIONS.map((a) => (
                  <ActionCard key={a.label} {...a} />
                ))}
              </div>
            </Reveal>

            <Reveal delay={400}>
              <p className="mt-10 text-center text-sm text-text-faint italic">
                Si une action vous prend plus de trente secondes, c'est qu'on a mal fait notre
                travail.
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Rassurance */}
      <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="text-center max-w-2xl mx-auto">
            <Reveal>
              <Badge tone="muted">Le reste, c'est nous</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">
                Vous vendez,
                <br />
                on s'occupe du reste.
              </h2>
            </Reveal>
          </div>

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

      {/* Différenciation */}
      <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">
                Quatre choses
                <br />
                qu'on refuse de faire.
              </h2>
            </Reveal>
            <Reveal delay={240}>
              <p className="mt-6 text-text-muted leading-relaxed max-w-2xl mx-auto">
                L'e-commerce attire son lot de pratiques qui ne servent que les plateformes,
                jamais les commerçants. On ne joue pas à ça.
              </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>

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

      <CtaPanel
        title={
          <>
            Envie de voir votre boutique
            <br />
            avant de la lancer ?
          </>
        }
        text="Dites-nous ce que vous vendez et à qui. On imagine la boutique qui irait avec, on vous l'envoie, vous nous dites si on a vu juste."
      />

      <JsonLdBreadcrumb
        items={[
          { name: "Accueil", path: "/" },
          { name: "Expertises", path: "/expertises/e-commerce" },
          { name: "E-commerce", path: "/expertises/e-commerce" },
        ]}
      />
    </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 PillarCard({
  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 ActionCard({ icon: Icon, label }: { icon: LucideIcon; label: string }) {
  return (
    <div className="group panel p-5 text-center transition-all duration-300 hover:-translate-y-0.5 hover:border-accent/30">
      <span className="size-10 mx-auto rounded-md bg-accent/10 border border-accent/20 flex items-center justify-center text-accent transition-transform duration-300 group-hover:-rotate-6">
        <Icon className="size-[18px]" strokeWidth={1.6} />
      </span>
      <div className="mt-3 text-xs md:text-sm font-medium text-text leading-tight">{label}</div>
    </div>
  );
}

function ReassuranceCard({
  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 flex items-start gap-5">
        <span className="size-11 shrink-0 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-5" strokeWidth={1.6} />
        </span>
        <div>
          <h3 className="font-editorial text-lg md:text-xl font-medium text-text leading-snug">
            {title}
          </h3>
          <p className="mt-2 text-sm md:text-base text-text-muted leading-relaxed">{text}</p>
        </div>
      </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>
  );
}

function ProductMockup() {
  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)]">
        <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" />

        <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>

          {/* Header boutique */}
          <div className="px-5 pt-6 flex items-center justify-between">
            <span className="font-editorial text-xs font-medium text-text italic">
              Maison Rive
            </span>
            <div className="flex items-center gap-2 text-text-muted">
              <Heart className="size-3.5" strokeWidth={1.6} />
              <ShoppingBag className="size-3.5" strokeWidth={1.6} />
            </div>
          </div>

          {/* Photo produit */}
          <div className="mt-4 mx-3 aspect-[4/5] rounded-lg border border-border/60 relative overflow-hidden bg-gradient-to-b from-stone-100 via-stone-200 to-stone-300">
            <Image
              src="/visuals/vase-calanque.png"
              alt="Vase Calanque émail brut"
              fill
              sizes="240px"
              className="object-contain object-center scale-95"
            />
            <div className="absolute top-2 left-2 z-10">
              <span className="text-[8px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-accent text-accent-fg font-bold">
                Nouveau
              </span>
            </div>
            <div className="absolute top-2 right-2 z-10 size-6 rounded-full bg-surface/80 backdrop-blur-sm flex items-center justify-center">
              <Heart className="size-3 text-text-muted" strokeWidth={1.6} />
            </div>
          </div>

          {/* Infos produit */}
          <div className="px-5 pt-4">
            <div className="text-[9px] uppercase tracking-wider text-text-faint">
              Céramique fait main
            </div>
            <h4 className="mt-1 font-editorial text-base font-medium text-text leading-tight">
              Vase Calanque
              <br />
              émail brut
            </h4>
            <div className="mt-2 flex items-baseline gap-1.5">
              <span className="font-editorial text-lg font-medium text-text tabular-nums">
                38 €
              </span>
              <span className="text-[9px] text-text-faint">livraison incluse</span>
            </div>
          </div>

          {/* CTA achat */}
          <div className="px-5 pt-4 pb-5">
            <div className="flex items-center justify-center gap-2 py-2.5 rounded-md bg-accent text-accent-fg text-xxs font-semibold">
              <ShoppingBag className="size-3.5" strokeWidth={2} />
              Ajouter au panier
            </div>
            <div className="mt-2 flex items-center justify-center gap-1.5 text-[9px] text-text-muted">
              <MapPin className="size-2.5" strokeWidth={1.6} />
              Livré sous 3 à 5 jours
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

