import type { Metadata } from "next";
import Link from "next/link";
import {
  ArrowRight,
  Check,
  Sparkles,
  X,
} from "@/components/ui/icons";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Reveal } from "@/components/ui/reveal";
import { CtaPanel, FaqSection, JsonLdFaq, type FaqItem } from "@/components/marketing/expertise-blocks";
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: "Tarifs",
  description:
    "Trois formules d'abonnement mensuel tout inclus. Création, hébergement, sécurité, maintenance et support. Sans engagement, sans frais cachés.",
};

type Plan = {
  name: string;
  priceLabel: string;
  priceAmount: string;
  priceSuffix?: string;
  ideal: string;
  description: string;
  points: string[];
  ctaLabel: string;
  highlight?: boolean;
};

const PLANS: Plan[] = [
  {
    name: "Présence",
    priceLabel: "",
    priceAmount: "49,99",
    ideal: "Idéal pour exister en ligne avec un site qui inspire confiance.",
    description:
      "Un site clair, soigné et rapide pour montrer qui vous êtes, ce que vous faites, et comment vous joindre.",
    points: [
      "Site vitrine sur-mesure jusqu'à 5 pages",
      "Modifications de contenu à la demande (textes, photos, horaires)",
      "Référencement local soigné",
    ],
    ctaLabel: "Choisir Présence",
  },
  {
    name: "Développement",
    priceLabel: "à partir de",
    priceAmount: "99",
    ideal: "Idéal pour attirer plus de clients grâce à votre site.",
    description:
      "Tout ce qu'il faut pour transformer votre site en véritable canal d'acquisition, sans devoir y penser.",
    points: [
      "Site complet, sans limite de pages",
      "Évolutions illimitées (nouvelles sections, refonte, blog)",
      "Optimisations SEO et contenu récurrentes",
      "Recommandations basées sur les données du portail",
    ],
    ctaLabel: "Choisir Développement",
    highlight: true,
  },
  {
    name: "E-commerce",
    priceLabel: "à partir de",
    priceAmount: "199",
    ideal: "Idéal pour vendre vos produits en ligne, simplement.",
    description:
      "Une boutique soignée, rapide et sécurisée. Vos clients commandent, vous gérez votre activité.",
    points: [
      "Boutique sur-mesure : catalogue, panier, encaissement sécurisé",
      "Gestion produits, stock et commandes depuis le portail",
      "Suivi des conversions (mises au panier, abandons)",
      "Tout ce qui est inclus dans Développement",
    ],
    ctaLabel: "Choisir E-commerce",
  },
];

const INCLUDED: { label: string }[] = [
  { label: "Création du site" },
  { label: "Hébergement" },
  { label: "Nom de domaine" },
  { label: "Sécurité" },
  { label: "Maintenance" },
  { label: "Performance optimisée" },
  { label: "Référencement Google" },
  { label: "Suivi des données" },
];

const FAQ_ITEMS: FaqItem[] = [
  {
    q: "Est-ce que je suis engagé ?",
    a: "Non. Vous n'êtes lié par aucune durée minimale. L'abonnement est mensuel, vous restez libre.",
  },
  {
    q: "Puis-je arrêter quand je veux ?",
    a: "Oui. Vous pouvez résilier à tout moment, en fin de mois en cours. Pas de pénalité, pas de frais de sortie.",
  },
  {
    q: "Est-ce que je dois m'occuper du site ?",
    a: "Non. Hébergement, sécurité, maintenance, mises à jour, sauvegardes : tout est pris en charge. Vous nous demandez les changements quand vous en avez besoin.",
  },
  {
    q: "Combien de temps pour être en ligne ?",
    a: "Quelques semaines en général, selon votre disponibilité pour les contenus. On commence vite, vous validez à chaque étape.",
  },
];

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

      {/* Hero asymétrique split : casser le centered-stack repete sur 7 pages.
          Colonne gauche = stamp + h1 left-aligned + reassurance ; colonne droite =
          les 3 prix annonces directement, au-dessus du fold, sans cards pleines.
          Le prospect voit le prix avant de scroller. */}
      <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-16 items-end">
          <div className="lg:col-span-7">
            <Reveal>
              <SectionStamp number="€" label="Tarifs" />
            </Reveal>
            <Reveal delay={100}>
              <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 professionnel,
                <br />
                sans surprise.
              </h1>
            </Reveal>
            <Reveal delay={240}>
              <p className="mt-7 text-base sm:text-lg text-text-muted max-w-lg leading-relaxed">
                Un abonnement mensuel, tout inclus. Pas de frais cachés, pas de devis à rallonge. Vous choisissez, on s'occupe du reste.
              </p>
            </Reveal>
            <Reveal delay={340}>
              <div className="mt-7 flex flex-wrap items-center gap-x-5 gap-y-2 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" />
                  Sans frais cachés
                </span>
                <span className="inline-flex items-center gap-1.5">
                  <span className="size-1 rounded-full bg-accent" />
                  Résiliable à tout moment
                </span>
              </div>
            </Reveal>
          </div>
          <div className="lg:col-span-5">
            <Reveal delay={180}>
              <ol className="border-t border-border">
                {PLANS.map((plan, i) => (
                  <li
                    key={plan.name}
                    className="group flex items-baseline justify-between gap-4 py-4 border-b border-border hover:bg-surface/60 transition-colors"
                  >
                    <div className="flex items-baseline gap-4 min-w-0">
                      <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 truncate">
                          {plan.name}
                          {plan.highlight && (
                            <span className="ml-2 text-micro uppercase tracking-wider text-accent font-semibold">le plus choisi</span>
                          )}
                        </div>
                        {plan.priceLabel && (
                          <div className="text-xxs text-text-faint">{plan.priceLabel}</div>
                        )}
                      </div>
                    </div>
                    <a
                      href="#offres"
                      className="flex items-baseline gap-1 shrink-0 text-text hover:text-accent transition-colors"
                    >
                      <span className="font-editorial text-2xl font-medium tabular-nums">
                        {plan.priceAmount}
                      </span>
                      <span className="text-base text-text-muted">€</span>
                      <span className="text-micro text-text-faint ml-0.5">/m</span>
                    </a>
                  </li>
                ))}
              </ol>
              <p className="mt-3 text-xxs uppercase tracking-[0.18em] text-text-faint">
                Détail des offres ci-dessous
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Plans */}
      <section id="offres" className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 md:px-10 pb-16 sm:pb-20 scroll-mt-24">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
          {PLANS.map((plan, i) => (
            <Reveal key={plan.name} delay={i * 100}>
              <PlanCard plan={plan} />
            </Reveal>
          ))}
        </div>
      </section>

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

      {/* Tout est inclus : sommaire éditorial numéroté, plus « cahier d'atelier »
          que grille pastel SaaS. Numérotation Fraunces tabular, libellé Cabinet
          Grotesk, séparateurs hairline. Briser la rythmique des icon-grids. */}
      <section className="relative z-10 bg-surface-2/50">
        <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="max-w-2xl">
            <Reveal>
              <SectionStamp number="N°1" label="Tout est inclus" />
            </Reveal>
            <Reveal delay={120}>
              <h2 className="font-editorial mt-6 text-3xl md:text-5xl font-medium text-text leading-tight">
                Pas d'option, pas d'extra,
                <br />
                pas de mauvaise surprise.
              </h2>
            </Reveal>
            <Reveal delay={240}>
              <p className="mt-5 text-text-muted leading-relaxed max-w-xl">
                Création, hébergement, sécurité, suivi. Le même contenu, peu importe la formule choisie.
              </p>
            </Reveal>
          </div>

          <Reveal delay={360}>
            <ol className="mt-12 max-w-4xl border-t border-border grid grid-cols-1 sm:grid-cols-2">
              {INCLUDED.map(({ label }, i) => (
                <li
                  key={label}
                  className="group flex items-baseline gap-5 py-4 sm:py-5 border-b border-border sm:[&:nth-child(odd)]:border-r sm:[&:nth-child(odd)]:pr-6 sm:[&:nth-child(even)]:pl-6 hover:bg-surface/40 transition-colors"
                >
                  <span className="font-editorial text-base font-medium tabular-nums text-text-faint w-8 shrink-0">
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  <span className="text-base text-text font-medium leading-snug">
                    {label}
                  </span>
                </li>
              ))}
            </ol>
          </Reveal>
        </div>
      </section>

      {/* Pas de mauvaise surprise */}
      <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="text-center max-w-2xl mx-auto">
            <Reveal>
              <Badge tone="muted">Notre engagement</Badge>
            </Reveal>
            <Reveal delay={120}>
              <h2 className="font-editorial mt-4 text-3xl md:text-5xl font-medium text-text leading-tight">
                Pas de mauvaise surprise.
              </h2>
            </Reveal>
          </div>

          <div className="mt-14 grid grid-cols-1 md:grid-cols-2 gap-5">
            <Reveal delay={200}>
              <div className="panel p-7 h-full bg-surface-2/40">
                <div className="text-micro uppercase tracking-wider font-semibold text-text-faint">
                  Ailleurs
                </div>
                <ul className="mt-5 space-y-3.5">
                  <ConRow text="Devis à cinq chiffres avant même d'avoir un site" />
                  <ConRow text="Frais cachés au fil des mois" />
                  <ConRow text="Process compliqué, jargon technique" />
                  <ConRow text="Plus personne au bout du fil après la mise en ligne" />
                </ul>
              </div>
            </Reveal>

            <Reveal delay={320}>
              <div className="panel p-7 h-full border-accent/30 bg-accent/[0.03]">
                <div className="text-micro uppercase tracking-wider font-semibold text-accent">
                  Avec nous
                </div>
                <ul className="mt-5 space-y-3.5">
                  <ProRow text="Un abonnement clair, du premier au dernier mois" />
                  <ProRow text="Tout est compris, sans option, sans extra" />
                  <ProRow text="Une approche simple, dans votre langue" />
                  <ProRow text="Un accompagnement humain, sur la durée" />
                </ul>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

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

      <FaqSection
        items={FAQ_ITEMS}
        eyebrow="Vos questions"
        title={
          <>
            Les réponses, tout simplement.
          </>
        }
      />

      <CtaPanel
        title={
          <>
            On vous montre à quoi pourrait <br className="hidden md:block" />
            ressembler votre site ?
          </>
        }
        text="On vous prépare une proposition de maquette personnalisée, gratuite, sous 48h."
        primaryLabel="Recevoir ma maquette"
        primaryHref="/contact"
        secondaryLabel="Voir les offres"
        secondaryHref="#offres"
      />

      <JsonLdFaq items={FAQ_ITEMS} />

      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "OfferCatalog",
            name: `Abonnements ${BRAND_NAME}`,
            itemListElement: PLANS.map((p, i) => ({
              "@type": "Offer",
              position: i + 1,
              name: p.name,
              description: p.description,
              price: p.priceAmount.replace(",", "."),
              priceCurrency: "EUR",
              priceSpecification: {
                "@type": "UnitPriceSpecification",
                price: p.priceAmount.replace(",", "."),
                priceCurrency: "EUR",
                billingDuration: "P1M",
              },
            })),
          }),
        }}
      />
    </div>
  );
}

function PlanCard({ plan }: { plan: Plan }) {
  return (
    <div
      className={`panel p-8 md:p-10 h-full flex flex-col relative ${
        plan.highlight
          ? "border-accent/45 bg-accent-soft shadow-[var(--shadow-md)] md:-translate-y-2 md:scale-[1.02]"
          : "shadow-[var(--shadow-xs)]"
      } transition-shadow duration-200 hover:shadow-[var(--shadow-card-hover)]`}
    >
      {plan.highlight && (
        <>
          {/* Ruban "le plus choisi" : signature visuelle plus marquee qu'un simple
              label inline (audit soft-skill + huashu : highlight pas assez
              differencie en palette claire). */}
          <div className="absolute -top-3 left-1/2 -translate-x-1/2">
            <span className="inline-flex items-center gap-1.5 rounded-full bg-accent text-accent-fg px-3 py-1 text-micro uppercase tracking-wider font-semibold shadow-[var(--shadow-accent-soft)]">
              <Sparkles className="size-3" aria-hidden />
              Le plus choisi
            </span>
          </div>
        </>
      )}

      <h3 className="font-editorial text-2xl font-medium text-text">{plan.name}</h3>
      <p className="mt-2 text-xs text-accent font-medium">{plan.ideal}</p>

      <div className="mt-6">
        {plan.priceLabel ? (
          <div className="text-xxs text-text-faint uppercase tracking-wider">
            {plan.priceLabel}
          </div>
        ) : (
          <div className="text-xxs text-text-faint uppercase tracking-wider invisible">
            placeholder
          </div>
        )}
        <div className="mt-1 flex items-baseline gap-1.5">
          <span className="font-editorial text-5xl font-medium text-text tabular-nums">
            {plan.priceAmount}
          </span>
          <span className="text-2xl text-text-muted font-medium">€</span>
          <span className="text-sm text-text-faint ml-1">/ mois</span>
        </div>
      </div>

      <p className="mt-6 text-sm text-text-muted leading-relaxed">{plan.description}</p>

      <ul className="mt-6 space-y-2.5 flex-1">
        {plan.points.map((p) => (
          <li key={p} className="flex items-start gap-2.5 text-sm text-text-muted leading-relaxed">
            <Check className="size-4 mt-0.5 shrink-0 text-accent" />
            <span>{p}</span>
          </li>
        ))}
      </ul>

      <div className="mt-8 pt-6 border-t border-border">
        <Link href="/contact" className="block">
          <Button variant={plan.highlight ? "primary" : "outline"} size="md" className="w-full">
            {plan.ctaLabel}
            <ArrowRight className="size-4" />
          </Button>
        </Link>
      </div>
    </div>
  );
}

function ProRow({ text }: { text: string }) {
  return (
    <li className="flex items-start gap-3 text-sm text-text leading-relaxed">
      <Check className="size-4 mt-0.5 shrink-0 text-accent" />
      <span>{text}</span>
    </li>
  );
}

function ConRow({ text }: { text: string }) {
  return (
    <li className="flex items-start gap-3 text-sm text-text-dim leading-relaxed">
      <X className="size-4 mt-0.5 shrink-0 text-text-faint" />
      <span className="line-through decoration-text-faint/40">{text}</span>
    </li>
  );
}