// PRICING — three tiers, narrative comparison + configurator
const { useState, useEffect } = React;
const { Link, Btn } = window;

function Pricing() {
  return (
    <main className="page-enter">
      <PricingHero />
      <PricingTiers />
      <PricingConfigurator />
      <PricingFAQ />
    </main>
  );
}

function PricingHero() {
  return (
    <section style={{ paddingTop: 180, paddingBottom: 60 }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end" }}>
        <div>
          <div className="eyebrow">↳ La tarification, en français clair</div>
          <h1 className="serif" style={{ fontSize: "clamp(64px, 9.4vw, 192px)", lineHeight: 0.9, letterSpacing: "-0.025em", marginTop: 28 }}>
            Trois façons<br/>de travailler avec nous.<em style={{ color: "var(--acid-deep)" }}>—</em>
          </h1>
        </div>
        <div>
          <p className="body-lg" style={{ maxWidth: 480 }}>
            Nous n'avons pas d'équipe commerciale. Les tarifs de cette page sont les tarifs. Si vous avez besoin d'un devis, écrivez-nous — mais la plupart des entreprises n'en ont pas besoin.
          </p>
        </div>
      </div>
    </section>
  );
}

function PricingTiers() {
  const tiers = [
    {
      kind: "Forfait studio",
      from: "22 k$", suffix: "/ mois",
      sub: "Nous opérons une fonction marketing comme votre équipe interne. Six mois minimum.",
      best: "Startups séries A à C, marques DTC au-delà de 5 M$",
      what: [
        "1 ou 2 pratiques nommées (Performance, Cycle de vie, Contenu, Marque, Création, Analytique)",
        "Équipe senior dédiée, 4 à 7 personnes",
        "Revue d'affaires hebdomadaire, P&L mensuel",
        "Plateforme Clyvonna incluse",
        "Rafraîchissement MMM trimestriel sur demande",
        "Accès direct au CEO / CMO",
      ],
      against: "Agences à plateaux, équipes anonymes, grilles tarifaires opaques",
      cta: ["Nous contacter", "/contact"],
      flag: null,
    },
    {
      kind: "Plateforme seule",
      from: "890 $", suffix: "/ mois",
      sub: "Utilisez le système d'exploitation que nous avons bâti pour nous, sans nous.",
      best: "Équipes croissance internes, 2 à 20 marketeurs",
      what: [
        "Jusqu'à 20 utilisateurs",
        "Les 6 modules, sans verrou de fonctionnalité",
        "Jusqu'à 12 intégrations",
        "Module MMM, en libre-service",
        "Synchronisation Slack + Notion",
        "Customer success humain, sans chatbot",
      ],
      against: "Prolifération d'outils, six dashboards, une source de vérité qui n'en est pas une",
      cta: ["Démarrer l'essai gratuit", "/signup"],
      flag: "Le plus choisi",
    },
    {
      kind: "Mission sur mesure",
      from: "60 k$", suffix: "forfaitaires",
      sub: "Projet à périmètre fixe : refonte de marque, lancement, système d'attribution, système de création publicitaire.",
      best: "Moments d'inflexion, bascules ponctuelles",
      what: [
        "8 à 14 semaines, prix fixe",
        "Mené par un associé senior, sur site possible",
        "Tous les livrables remis et présentés",
        "30 jours d'accompagnement post-lancement",
        "Extension en forfait en option",
        "Périmètre verrouillé, sans dérive",
      ],
      against: "Régie horaire, facturation à l'heure, inflation du périmètre",
      cta: ["Écrivez-nous", "/contact"],
      flag: null,
    },
  ];
  return (
    <section style={{ padding: "60px 0 100px", borderTop: "1px solid var(--rule)" }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0 }}>
        {tiers.map((t, i) => (
          <PricingTierCard t={t} i={i} key={t.kind} />
        ))}
      </div>
    </section>
  );
}

function PricingTierCard({ t, i }) {
  return (
    <div style={{ padding: "48px 32px", borderLeft: i === 0 ? "none" : "1px solid var(--rule)", position: "relative", background: t.flag ? "var(--ink)" : "transparent", color: t.flag ? "var(--cream)" : "var(--ink)" }}>
      {t.flag && <span style={{ position: "absolute", top: 20, right: 20, background: "var(--acid)", color: "var(--ink)", padding: "4px 12px", fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", borderRadius: 999 }}>{t.flag}</span>}
      <div className="mono" style={{ color: t.flag ? "rgba(242,237,228,0.6)" : "var(--muted)", marginBottom: 14 }}>0{i+1} · {t.kind}</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 8 }}>
        <span className="serif" style={{ fontSize: 88, lineHeight: 0.92, letterSpacing: "-0.025em" }}>{t.from}</span>
        <span className="body" style={{ color: t.flag ? "rgba(242,237,228,0.6)" : "var(--muted)" }}>{t.suffix}</span>
      </div>
      <p className="body-lg" style={{ color: t.flag ? "rgba(242,237,228,0.8)" : "var(--ink-2)", marginBottom: 28, maxWidth: 360 }}>{t.sub}</p>
      <div className="lx-label" style={{ color: t.flag ? "rgba(242,237,228,0.5)" : "var(--muted)", marginBottom: 12 }}>Idéal pour</div>
      <div className="serif" style={{ fontSize: 22, lineHeight: 1.2, marginBottom: 28 }}>{t.best}</div>
      <div className="hairline" style={{ background: t.flag ? "rgba(242,237,228,0.18)" : "var(--rule)", margin: "24px 0" }} />
      <div className="lx-label" style={{ color: t.flag ? "rgba(242,237,228,0.5)" : "var(--muted)", marginBottom: 16 }}>Ce que vous obtenez</div>
      <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 12, marginBottom: 28 }}>
        {t.what.map((w, j) => (
          <li key={j} className="body" style={{ display: "grid", gridTemplateColumns: "16px 1fr", gap: 10, color: t.flag ? "rgba(242,237,228,0.85)" : "var(--ink-2)" }}>
            <span className="mono" style={{ color: "var(--acid-deep)" }}>↳</span>
            <span>{w}</span>
          </li>
        ))}
      </ul>
      <div className="hairline" style={{ background: t.flag ? "rgba(242,237,228,0.18)" : "var(--rule)", margin: "16px 0" }} />
      <div className="mono" style={{ color: t.flag ? "rgba(242,237,228,0.5)" : "var(--ox)", marginBottom: 8 }}>↳ Ce n'est pas ça</div>
      <p className="body-sm" style={{ color: t.flag ? "rgba(242,237,228,0.6)" : "var(--muted)", marginBottom: 28 }}>{t.against}</p>
      <Btn to={t.cta[1]} variant={t.flag ? "acid" : "primary"} magnetic>{t.cta[0]}</Btn>
    </div>
  );
}

// Configurator: small estimator for the Platform tier
function PricingConfigurator() {
  const [users, setUsers] = useState(8);
  const [integrations, setIntegrations] = useState(6);
  const [mmm, setMmm] = useState(true);
  const [datares, setDatares] = useState(false);

  const base = 890;
  const extraUsers = Math.max(0, users - 20) * 24;
  const extraInt = Math.max(0, integrations - 12) * 80;
  const mmmCost = mmm ? 0 : 0; // included
  const drCost = datares ? 280 : 0;
  const total = base + extraUsers + extraInt + drCost;

  return (
    <section style={{ background: "var(--cream-2)", padding: "120px 0", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "start" }}>
        <div style={{ position: "sticky", top: 120 }}>
          <div className="eyebrow-num">Configurateur</div>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 80px)", lineHeight: 0.96, letterSpacing: "-0.02em", marginTop: 16 }}>
            Construisez<br/>le prix de votre plateforme.
          </h2>
          <p className="body-lg" style={{ marginTop: 20, maxWidth: 440 }}>
            Faites glisser deux ou trois curseurs, voyez le coût. Aucune gymnastique de type « contactez le commercial ».
          </p>
          <div style={{ marginTop: 36, padding: 32, background: "var(--ink)", color: "var(--cream)", borderRadius: 4 }}>
            <div className="lx-label" style={{ color: "rgba(242,237,228,0.55)", marginBottom: 10 }}>Votre mensualité</div>
            <div className="serif ticker" style={{ fontSize: 96, lineHeight: 1, letterSpacing: "-0.02em" }}>{total.toLocaleString()} $</div>
            <div className="mono" style={{ marginTop: 10, color: "rgba(242,237,228,0.6)" }}>↳ Facturation mensuelle · résiliation à tout moment</div>
            <div style={{ marginTop: 24, display: "flex", gap: 12 }}>
              <Btn to="/signup" variant="acid">Démarrer l'essai gratuit</Btn>
            </div>
          </div>
        </div>
        <div>
          <ConfigRow label="Sièges" sub={users <= 20 ? "Inclus jusqu'à 20." : `${users - 20} sièges supplémentaires à 24 $/mois`}>
            <input type="range" min="3" max="80" value={users} onChange={e => setUsers(+e.target.value)} style={{ width: "100%", accentColor: "var(--ink)" }} />
            <div className="flex justify-between mono" style={{ color: "var(--muted)" }}><span>3</span><span className="serif ticker" style={{ fontSize: 32, color: "var(--ink)" }}>{users}</span><span>80</span></div>
          </ConfigRow>
          <ConfigRow label="Intégrations" sub={integrations <= 12 ? "Incluses jusqu'à 12." : `${integrations - 12} intégrations supplémentaires à 80 $/mois`}>
            <input type="range" min="2" max="24" value={integrations} onChange={e => setIntegrations(+e.target.value)} style={{ width: "100%", accentColor: "var(--ink)" }} />
            <div className="flex justify-between mono" style={{ color: "var(--muted)" }}><span>2</span><span className="serif ticker" style={{ fontSize: 32, color: "var(--ink)" }}>{integrations}</span><span>24</span></div>
          </ConfigRow>
          <ConfigRow label="Module MMM" sub="Intégré dans le prix de base. Rafraîchissez aussi souvent que vous le souhaitez.">
            <label style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
              <input type="checkbox" checked={mmm} onChange={e => setMmm(e.target.checked)} style={{ width: 20, height: 20, accentColor: "var(--ink)" }} />
              <span className="body">Inclus (impossible à désactiver sur ce palier)</span>
            </label>
          </ConfigRow>
          <ConfigRow label="Résidence des données UE" sub="+280 $/mois. Francfort + Dublin. Clés gérées par le client.">
            <label style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
              <input type="checkbox" checked={datares} onChange={e => setDatares(e.target.checked)} style={{ width: 20, height: 20, accentColor: "var(--ink)" }} />
              <span className="body">Activer la résidence UE</span>
            </label>
          </ConfigRow>
        </div>
      </div>
    </section>
  );
}

function ConfigRow({ label, sub, children }) {
  return (
    <div style={{ padding: "28px 0", borderTop: "1px solid var(--rule)" }}>
      <div className="lx-label" style={{ marginBottom: 6 }}>{label}</div>
      <div className="body-sm" style={{ marginBottom: 16 }}>{sub}</div>
      {children}
    </div>
  );
}

function PricingFAQ() {
  const items = [
    ["Facturez-vous à l'heure ?", "Non. Nous travaillons en forfaits fixes et en projets à périmètre fixe. Si vous cherchez un prestataire qui facture par tranches de 15 minutes, ce n'est pas nous."],
    ["Prenez-vous une commission d'agence sur les dépenses média ?", "Non. Nous facturons un forfait, vous gardez vos dépenses. Nous ne voulons pas que nos incitations divergent des vôtres."],
    ["Et si je veux seulement de la stratégie ?", "C'est le palier « Mission sur mesure » : un engagement stratégie à périmètre fixe. La plupart se transforment en forfaits ; certains, volontairement, non."],
    ["Répondez-vous aux appels d'offres ?", "Non. Nous en avons refusé de très flatteurs. Les processus d'appels d'offres sélectionnent les pires relations agence-client possibles. Envoyez-nous plutôt un paragraphe."],
    ["Que comprend réellement le palier « Plateforme seule » ?", "Les six modules. Jusqu'à 20 utilisateurs, 12 intégrations. SOC 2 (hérité de notre hébergeur). Résidence UE en option. Il n'existe pas de « palier entreprise » avec des fonctionnalités cachées — c'est l'intégralité du produit."],
    ["Peut-on changer de palier ?", "Oui. Environ un tiers de nos clients « plateforme seule » deviennent clients forfait. Quelques-uns font le chemin inverse, et cela nous convient."],
  ];
  return (
    <section style={{ padding: "120px 0" }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 60, alignItems: "start" }}>
        <div style={{ position: "sticky", top: 120 }}>
          <div className="eyebrow-num">FAQ</div>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 80px)", lineHeight: 0.96, letterSpacing: "-0.02em", marginTop: 16 }}>
            Les questions<br/>qu'on nous pose vraiment.
          </h2>
        </div>
        <div>
          {items.map((q, i) => (
            <FAQRow key={i} q={q[0]} a={q[1]} i={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQRow({ q, a, i }) {
  const [open, setOpen] = useState(i === 0);
  return (
    <div style={{ borderTop: "1px solid var(--rule)", padding: "24px 0", cursor: "pointer" }} onClick={() => setOpen(!open)}>
      <div className="flex justify-between items-center" style={{ gap: 32 }}>
        <h3 className="serif" style={{ fontSize: 32, lineHeight: 1.1, letterSpacing: "-0.01em" }}>{q}</h3>
        <span className="serif" style={{ fontSize: 28, color: "var(--acid-deep)", transform: open ? "rotate(45deg)" : "rotate(0)", transition: "transform .3s var(--ease)" }}>+</span>
      </div>
      {open && <p className="body-lg" style={{ marginTop: 16, maxWidth: 720 }}>{a}</p>}
    </div>
  );
}

window.Pricing = Pricing;