// PLATFORM — Clyvonna SaaS side
const { useState, useEffect } = React;
const { Link, Btn, TEAM } = window;

function Platform() {
  return (
    <main className="page-enter" style={{ background: "var(--ink)", color: "var(--cream)" }}>
      <PlatformHero />
      <PlatformProductShot />
      <PlatformFeatures />
      <PlatformWorkflow />
      <PlatformIntegrations />
      <PlatformSecurity />
      <PlatformCTA />
    </main>
  );
}

function PlatformHero() {
  return (
    <section style={{ paddingTop: 180, paddingBottom: 80, color: "var(--cream)" }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80, alignItems: "end" }}>
        <div>
          <div className="eyebrow" style={{ color: "var(--cream)" }}>
            <span style={{ background: "var(--acid)" }} />
            <span style={{ marginLeft: 2 }}>Clyvonna · Plateforme · v.7.2</span>
          </div>
          <h1 className="serif" style={{ fontSize: "clamp(64px, 9vw, 200px)", lineHeight: 0.9, letterSpacing: "-0.025em", marginTop: 28, color: "var(--cream)" }}>
            Le système<br/>
            d'<em style={{ color: "var(--acid)" }}>exploitation</em> que nous<br/>
            utilisons sur chaque compte.
          </h1>
        </div>
        <div>
          <p className="body-lg" style={{ color: "rgba(242,237,228,0.8)", maxWidth: 460 }}>
            Suivi des campagnes, reporting en marge de contribution, gestion des demandes créatives, et le tableau de bord que votre directeur financier ouvrira vraiment. Construit à l'origine pour notre propre studio. Utilisé aujourd'hui par 240 équipes.
          </p>
          <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Btn to="/signup" variant="acid" magnetic>Démarrer l'essai gratuit</Btn>
            <Btn to="/pricing" variant="ghost">Voir la tarification</Btn>
          </div>
          <div className="mono" style={{ marginTop: 28, color: "rgba(242,237,228,0.5)" }}>
            Essai de 14 jours · Sans carte · Importe votre stack dès le premier jour
          </div>
        </div>
      </div>
    </section>
  );
}

function PlatformProductShot() {
  const [tab, setTab] = useState("dashboard");
  return (
    <section style={{ paddingBottom: 100 }}>
      <div className="page">
        <div style={{
          background: "var(--ink-2)", border: "1px solid rgba(242,237,228,0.15)",
          borderRadius: 6, overflow: "hidden",
        }}>
          {/* App chrome */}
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 20px", borderBottom: "1px solid rgba(242,237,228,0.12)", background: "rgba(0,0,0,0.2)" }}>
            <div className="flex items-center gap-3">
              <div style={{ width: 10, height: 10, borderRadius: "50%", background: "#FF5F57" }} />
              <div style={{ width: 10, height: 10, borderRadius: "50%", background: "#FEBC2E" }} />
              <div style={{ width: 10, height: 10, borderRadius: "50%", background: "#28C840" }} />
              <span className="mono" style={{ color: "rgba(242,237,228,0.5)", marginLeft: 16 }}>app.clyvonna.com / olvera / dashboards</span>
            </div>
            <div className="mono" style={{ color: "var(--acid)" }}>● En direct · 11:24</div>
          </div>
          {/* App body */}
          <div style={{ display: "grid", gridTemplateColumns: "240px 1fr", minHeight: 600 }}>
            {/* Sidebar */}
            <div style={{ borderRight: "1px solid rgba(242,237,228,0.12)", padding: 24 }}>
              <div className="flex items-center gap-2" style={{ marginBottom: 24 }}>
                <span style={{ width: 28, height: 28, borderRadius: 6, background: "var(--acid)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--ink)", fontFamily: "var(--serif)", fontSize: 18 }}>O</span>
                <div>
                  <div className="serif" style={{ fontSize: 16, color: "var(--cream)" }}>Olvera Roasters</div>
                  <div className="mono" style={{ color: "rgba(242,237,228,0.5)", fontSize: 9 }}>ESPACE · 14 MEMBRES</div>
                </div>
              </div>
              <div className="lx-label" style={{ color: "rgba(242,237,228,0.4)", marginBottom: 10 }}>Espaces</div>
              {[
                ["dashboard", "Tableaux de bord", "↑ +14%"],
                ["campaigns", "Campagnes", "12 en cours"],
                ["creative", "Demandes créatives", "3 nouvelles"],
                ["mmm", "MMM", "MAJ lundi"],
                ["budgets", "Budgets", "248 k$ T4"],
                ["reporting", "Reporting", "hebdo"],
                ["team", "Équipe & accès", "—"],
              ].map(([id, label, meta]) => (
                <div key={id} onClick={() => setTab(id)}
                  style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px 12px", marginLeft: -12, marginRight: -12, borderRadius: 4, cursor: "pointer",
                    background: tab === id ? "rgba(242,237,228,0.06)" : "transparent",
                    color: tab === id ? "var(--cream)" : "rgba(242,237,228,0.65)",
                    borderLeft: tab === id ? "2px solid var(--acid)" : "2px solid transparent" }}>
                  <span className="body" style={{ color: "inherit" }}>{label}</span>
                  <span className="mono" style={{ color: "rgba(242,237,228,0.4)", fontSize: 9 }}>{meta}</span>
                </div>
              ))}
            </div>
            {/* Main */}
            <div style={{ padding: 32 }}>
              {tab === "dashboard" && <DashView />}
              {tab === "campaigns" && <CampaignsView />}
              {tab === "creative" && <CreativeView />}
              {tab === "mmm" && <MMMView />}
              {tab === "budgets" && <BudgetsView />}
              {tab === "reporting" && <ReportingView />}
              {tab === "team" && <TeamView />}
            </div>
          </div>
        </div>
        <div className="mono" style={{ marginTop: 16, color: "rgba(242,237,228,0.5)" }}>
          ↳ Cliquez sur n'importe quel élément de la barre latérale. Données fictives, mise en page réelle.
        </div>
      </div>
    </section>
  );
}

function DashView() {
  return (
    <div>
      <div className="flex justify-between items-center" style={{ marginBottom: 28 }}>
        <h3 className="serif" style={{ fontSize: 32, color: "var(--cream)" }}>Cette semaine</h3>
        <div className="flex gap-2">
          <span className="pill" style={{ color: "rgba(242,237,228,0.75)" }}><span className="dot" style={{ background: "var(--acid)" }}/>En direct</span>
          <span className="mono" style={{ color: "rgba(242,237,228,0.5)" }}>SEM 38 · 2026</span>
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginBottom: 24 }}>
        {[
          ["Marge de contribution", "184 k$", "+18%"],
          ["CAC payant", "28 $", "-12%"],
          ["Taux de rachat", "41,2 %", "+2,1pp"],
          ["Couverture MMM", "92 %", "stable"],
        ].map(([l, v, d], i) => (
          <div key={i} style={{ background: "rgba(242,237,228,0.04)", padding: 18, borderRadius: 4 }}>
            <div className="mono" style={{ color: "rgba(242,237,228,0.5)", fontSize: 9, marginBottom: 10 }}>{l}</div>
            <div className="serif ticker" style={{ fontSize: 36, color: "var(--cream)", lineHeight: 1 }}>{v}</div>
            <div className="mono" style={{ color: "var(--acid)", marginTop: 8, fontSize: 10 }}>↗ {d}</div>
          </div>
        ))}
      </div>
      <div style={{ background: "rgba(242,237,228,0.04)", padding: 24, borderRadius: 4, marginBottom: 16 }}>
        <div className="flex justify-between items-center" style={{ marginBottom: 16 }}>
          <div>
            <div className="serif" style={{ fontSize: 18, color: "var(--cream)" }}>Marge de contribution par canal · 12 semaines</div>
            <div className="mono" style={{ color: "rgba(242,237,228,0.5)", fontSize: 9, marginTop: 4 }}>SOURCE · MMM v.4.2 · GA4 · KLAVIYO · SHOPIFY</div>
          </div>
        </div>
        <ChannelChart />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        <div style={{ background: "rgba(242,237,228,0.04)", padding: 20, borderRadius: 4 }}>
          <div className="lx-label" style={{ color: "rgba(242,237,228,0.5)", marginBottom: 14 }}>Meilleures créations cette semaine</div>
          {[
            ["Saturday Morning · v.07", "24 k$ MC", "+34%"],
            ["Yirgacheffe Origin · v.03", "18 k$ MC", "+12%"],
            ["Club, en pause · v.02", "11 k$ MC", "-4%"],
            ["Hands you can shake · v.01", "9 k$ MC", "+6%"],
          ].map(([n, v, d], i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 80px 60px", gap: 12, padding: "10px 0", borderTop: i === 0 ? "none" : "1px solid rgba(242,237,228,0.08)" }}>
              <span className="body" style={{ color: "var(--cream)" }}>{n}</span>
              <span className="mono ticker" style={{ color: "rgba(242,237,228,0.7)" }}>{v}</span>
              <span className="mono" style={{ color: d.startsWith("-") ? "#E66" : "var(--acid)" }}>{d}</span>
            </div>
          ))}
        </div>
        <div style={{ background: "rgba(242,237,228,0.04)", padding: 20, borderRadius: 4 }}>
          <div className="lx-label" style={{ color: "rgba(242,237,228,0.5)", marginBottom: 14 }}>Notes · synchronisées depuis Slack</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <NoteRow who="Rune" t="Arrêt du set de retargeting Meta 0918 — MC négative depuis deux semaines." />
            <NoteRow who="Pilar" t="Livraison créative jeudi : 12 statiques, 3 motion, 2 UGC. Revue vendredi." />
            <NoteRow who="Lior" t="Le test geo-lift à NY/SF se conclut mardi prochain. La puissance statistique semble correcte." />
          </div>
        </div>
      </div>
    </div>
  );
}

function ChannelChart() {
  // Stacked-area chart, simulated
  const W = 800, H = 220;
  const channels = [
    { name: "Propriétaires", color: "oklch(88% 0.21 128)", data: [25, 28, 30, 34, 38, 42, 45, 47, 52, 56, 60, 64] },
    { name: "Meta", color: "#1E3FFF", data: [40, 38, 36, 34, 32, 30, 28, 28, 28, 26, 24, 22] },
    { name: "Search", color: "#5A1A1B", data: [20, 22, 22, 24, 26, 28, 30, 32, 32, 34, 36, 38] },
    { name: "TikTok", color: "#E8E1D2", data: [8, 9, 10, 11, 12, 13, 12, 14, 16, 18, 20, 22] },
  ];
  const N = channels[0].data.length;
  // build stacked
  const stacks = channels[0].data.map((_, i) => channels.reduce((s, c) => s + c.data[i], 0));
  const max = Math.max(...stacks);
  let cum = Array(N).fill(0);
  const polys = channels.map((c, ci) => {
    const top = c.data.map((v, i) => { cum[i] += v; return [i / (N-1) * W, H - (cum[i] / max) * (H - 20)]; });
    const bottom = c.data.map((v, i) => [i / (N-1) * W, H - ((cum[i] - v) / max) * (H - 20)]).reverse();
    const pts = [...top, ...bottom].map(p => p.join(",")).join(" ");
    return <polygon key={c.name} points={pts} fill={c.color} opacity={0.85} />;
  });
  return (
    <div>
      <svg viewBox={`0 0 ${W} ${H}`} style={{ width: "100%", height: 220 }}>{polys}</svg>
      <div className="flex gap-6" style={{ marginTop: 16 }}>
        {channels.map(c => (
          <div key={c.name} className="flex items-center gap-2">
            <span style={{ width: 10, height: 10, background: c.color, display: "inline-block" }} />
            <span className="mono" style={{ color: "rgba(242,237,228,0.7)", fontSize: 10 }}>{c.name.toUpperCase()}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function NoteRow({ who, t }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "60px 1fr", gap: 12 }}>
      <span className="mono" style={{ color: "var(--acid)", fontSize: 10 }}>{who.toUpperCase()}</span>
      <span className="body" style={{ color: "rgba(242,237,228,0.85)" }}>{t}</span>
    </div>
  );
}

function CampaignsView() {
  return (
    <div>
      <div className="flex justify-between items-center" style={{ marginBottom: 24 }}>
        <h3 className="serif" style={{ fontSize: 32, color: "var(--cream)" }}>Campagnes · 12 en cours</h3>
        <button className="btn btn-acid" style={{ padding: "8px 16px" }}>+ Nouvelle campagne</button>
      </div>
      <div style={{ background: "rgba(242,237,228,0.04)", borderRadius: 4 }}>
        {[
          ["EN COURS", "Saturday Morning · Meta · Prospection", "48 k$ / 60 k$", "28 $ CAC", "+18%"],
          ["EN COURS", "Yirgacheffe · TikTok · Prospection", "22 k$ / 28 k$", "34 $ CAC", "+6%"],
          ["EN COURS", "Club · Email · Rétention", "—", "—", "+24%"],
          ["EN COURS", "Google · Marque", "8 k$ / 12 k$", "14 $ CAC", "+2%"],
          ["EN PAUSE", "Meta · Retargeting · v.0918", "0 $ / 0 $", "—", "arrêtée"],
          ["BROUILLON", "Fêtes · OOH · NY+SF", "0 $ / 80 k$", "—", "—"],
        ].map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "70px 2.4fr 1fr 1fr 80px", gap: 16, padding: "16px 20px", borderTop: i === 0 ? "none" : "1px solid rgba(242,237,228,0.08)", alignItems: "center" }}>
            <span className="mono" style={{ color: r[0] === "EN COURS" ? "var(--acid)" : r[0] === "EN PAUSE" ? "#E66" : "rgba(242,237,228,0.5)", fontSize: 10 }}>● {r[0]}</span>
            <span className="body" style={{ color: "var(--cream)" }}>{r[1]}</span>
            <span className="mono ticker" style={{ color: "rgba(242,237,228,0.7)" }}>{r[2]}</span>
            <span className="mono ticker" style={{ color: "rgba(242,237,228,0.7)" }}>{r[3]}</span>
            <span className="mono" style={{ color: r[4] === "arrêtée" ? "#E66" : "var(--acid)" }}>{r[4]}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function CreativeView() {
  return (
    <div>
      <div className="flex justify-between items-center" style={{ marginBottom: 24 }}>
        <h3 className="serif" style={{ fontSize: 32, color: "var(--cream)" }}>Demandes créatives</h3>
        <div className="mono" style={{ color: "rgba(242,237,228,0.5)" }}>EN COURS 7 · BROUILLON 3 · REVUE 2</div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
        {[
          ["RÉCEPTION", ["Bundle abonnement fêtes", "Drop origine Fête des pères"]],
          ["BRIEF", ["Statiques Yirgacheffe v2", "Club / en pause — remontage", "Saturday Morning · motion"]],
          ["EN PRODUCTION", ["Pack UGC · 6 créateurs", "OOH · storyboards NY métropole", "Photo · shooting origine T4"]],
          ["REVUE", ["Hands you can shake · v.03", "Notes d'arrêt Pour over"]],
        ].map(([col, items]) => (
          <div key={col} style={{ background: "rgba(242,237,228,0.04)", padding: 16, borderRadius: 4 }}>
            <div className="lx-label" style={{ color: "rgba(242,237,228,0.55)", marginBottom: 14 }}>{col}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {items.map((it, i) => (
                <div key={i} style={{ padding: "10px 12px", background: "rgba(242,237,228,0.05)", borderRadius: 4, borderLeft: "2px solid var(--acid)" }}>
                  <div className="body" style={{ color: "var(--cream)", marginBottom: 4 }}>{it}</div>
                  <div className="mono" style={{ color: "rgba(242,237,228,0.4)", fontSize: 9 }}>OLVERA · ÉCHÉANCE VEN · P. QUESADA</div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function MMMView() {
  return (
    <div>
      <h3 className="serif" style={{ fontSize: 32, color: "var(--cream)", marginBottom: 20 }}>Modèle marketing-mix · v.4.2</h3>
      <div className="mono" style={{ color: "rgba(242,237,228,0.5)", marginBottom: 20 }}>↳ Rafraîchi lundi 09:14 · 18 mois de données · 4 canaux · adstock + saturation</div>
      <div style={{ background: "rgba(242,237,228,0.04)", padding: 24, borderRadius: 4, marginBottom: 16 }}>
        <div className="lx-label" style={{ color: "rgba(242,237,228,0.55)", marginBottom: 14 }}>Décomposition de contribution · T3</div>
        <div style={{ display: "flex", gap: 0, height: 80 }}>
          {[
            ["Propriétaires", 36, "oklch(88% 0.21 128)"],
            ["Meta", 22, "#1E3FFF"],
            ["Search", 18, "#5A1A1B"],
            ["TikTok", 12, "#E8E1D2"],
            ["Base", 12, "rgba(242,237,228,0.2)"],
          ].map(([n, v, c], i) => (
            <div key={i} style={{ flex: v, background: c, color: c === "#E8E1D2" || c === "oklch(88% 0.21 128)" ? "var(--ink)" : "var(--cream)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.1em" }}>
              {n.toUpperCase()} {v}%
            </div>
          ))}
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
        {[
          ["Saturation Meta", "73 %", "Dépensez un peu plus, mais la courbe s'aplatit vite."],
          ["Incrémentalité Search", "0,41", "Plus faible qu'annoncé. Cannibalisation des mots-clés de marque."],
          ["Capitalisation canaux propres", "+4,2pt/mois", "Le taux de rachat progresse chaque mois."],
        ].map(([l, v, d], i) => (
          <div key={i} style={{ background: "rgba(242,237,228,0.04)", padding: 18, borderRadius: 4 }}>
            <div className="mono" style={{ color: "rgba(242,237,228,0.5)", fontSize: 9, marginBottom: 8 }}>{l.toUpperCase()}</div>
            <div className="serif ticker" style={{ fontSize: 32, color: "var(--cream)" }}>{v}</div>
            <div className="body-sm" style={{ color: "rgba(242,237,228,0.7)", marginTop: 6 }}>{d}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function BudgetsView() {
  return (
    <div>
      <h3 className="serif" style={{ fontSize: 32, color: "var(--cream)", marginBottom: 24 }}>Budget T4 · 248 000 $</h3>
      <div style={{ background: "rgba(242,237,228,0.04)", padding: 24, borderRadius: 4 }}>
        {[
          ["Meta", 72, 80, "↓ raboté -8 k"],
          ["Google", 36, 40, "↑ marque uniquement"],
          ["TikTok", 48, 36, "↑ nouveau drop origine"],
          ["OOH (NY/SF)", 60, 80, "↓ retrait 1 métropole"],
          ["Ops canaux propres", 18, 14, "↑ programme club"],
          ["Tests + holdouts", 14, 8, "↑ geo-lift T4"],
        ].map(([n, s, p, note], i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "120px 1fr 80px 80px 180px", gap: 16, padding: "14px 0", borderTop: i === 0 ? "none" : "1px solid rgba(242,237,228,0.08)", alignItems: "center" }}>
            <span className="body" style={{ color: "var(--cream)" }}>{n}</span>
            <div style={{ height: 14, background: "rgba(242,237,228,0.08)", position: "relative", borderRadius: 2 }}>
              <div style={{ position: "absolute", left: 0, top: 0, height: "100%", background: "var(--acid)", width: `${(s/p)*100}%`, borderRadius: 2 }} />
            </div>
            <span className="mono ticker" style={{ color: "rgba(242,237,228,0.7)" }}>${s}k</span>
            <span className="mono ticker" style={{ color: "rgba(242,237,228,0.5)" }}>/ ${p}k</span>
            <span className="mono" style={{ color: "var(--acid)" }}>{note}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function ReportingView() {
  return (
    <div>
      <h3 className="serif" style={{ fontSize: 32, color: "var(--cream)", marginBottom: 24 }}>Reporting</h3>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
        {[
          { t: "Revue d'affaires hebdomadaire", d: "Vendredi 11:00 · envoi auto à 7 parties prenantes", n: 38 },
          { t: "P&L mensuel", d: "Premier lundi du mois · diffusion finance", n: 12 },
          { t: "Dossier trimestriel pour le conseil", d: "PDF prêt pour les investisseurs · annexe MMM", n: 4 },
          { t: "Digest d'anomalies quotidien", d: "Slack #olvera-growth · uniquement si nécessaire", n: 88 },
        ].map((r, i) => (
          <div key={i} style={{ background: "rgba(242,237,228,0.04)", padding: 20, borderRadius: 4, display: "flex", gap: 16, alignItems: "start" }}>
            <span className="serif" style={{ fontSize: 40, color: "var(--acid)" }}>{r.n}</span>
            <div>
              <div className="body" style={{ color: "var(--cream)", marginBottom: 4 }}>{r.t}</div>
              <div className="body-sm" style={{ color: "rgba(242,237,228,0.6)" }}>{r.d}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function TeamView() {
  return (
    <div>
      <h3 className="serif" style={{ fontSize: 32, color: "var(--cream)", marginBottom: 20 }}>Équipe & accès · 14 membres</h3>
      <div style={{ background: "rgba(242,237,228,0.04)", borderRadius: 4 }}>
        {TEAM.slice(0, 7).map((p, i) => (
          <div key={p.name} style={{ display: "grid", gridTemplateColumns: "40px 1fr 1fr 120px 80px", gap: 16, padding: "14px 20px", alignItems: "center", borderTop: i === 0 ? "none" : "1px solid rgba(242,237,228,0.08)" }}>
            <span style={{ width: 32, height: 32, borderRadius: "50%", background: "var(--ink)", color: "var(--cream)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--serif)", fontSize: 14, border: "1px solid rgba(242,237,228,0.2)" }}>{p.name.split(" ").map(n => n[0]).join("")}</span>
            <span className="body" style={{ color: "var(--cream)" }}>{p.name}</span>
            <span className="body" style={{ color: "rgba(242,237,228,0.6)" }}>{p.role}</span>
            <span className="mono" style={{ color: "rgba(242,237,228,0.5)" }}>{p.city}</span>
            <span className="mono" style={{ color: "var(--acid)" }}>{i === 0 ? "PROPRIÉTAIRE" : i < 3 ? "ADMIN" : "MEMBRE"}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function PlatformFeatures() {
  const f = [
    { n: "01", t: "Suivi des campagnes", d: "Connectez Meta, Google, TikTok, Klaviyo, Shopify, GA4 et un entrepôt de données. Chaque campagne remonte automatiquement à une vue en marge de contribution." },
    { n: "02", t: "Un MMM lisible", d: "Un MMM réellement maintenu. Rafraîchi chaque semaine, avec des courbes de saturation et d'adstock présentables à un conseil." },
    { n: "03", t: "Gestion des demandes créatives", d: "Briefs en entrée, statuts en sortie. Conçu pour les équipes créatives internes qui livrent plus de 60 unités publicitaires par mois et préfèrent ne pas vivre dans Jira." },
    { n: "04", t: "Demandes de travaux et périmètres", d: "Si vous avez une agence, c'est ici que vous lui parlez. Nous l'utilisons nous-mêmes au quotidien." },
    { n: "05", t: "Un reporting qui arrive vraiment", d: "Hebdomadaire, mensuel, trimestriel. Des PDF que votre directeur financier ouvre. Des digests Slack que votre responsable croissance lit vraiment." },
    { n: "06", t: "Une couche de données honnête", d: "Nous envoyons les données brutes vers votre entrepôt. Elles vous appartiennent. Nous ne construisons pas de douve sur votre flux d'événements." },
  ];
  return (
    <section style={{ padding: "140px 0", borderTop: "1px solid rgba(242,237,228,0.15)" }}>
      <div className="page section-head" style={{ padding: 0 }}>
        <div>
          <div className="eyebrow-num" style={{ color: "rgba(242,237,228,0.6)" }}>Fonctionnalités</div>
          <h2 className="serif" style={{ fontSize: "clamp(48px, 6vw, 112px)", lineHeight: 0.96, letterSpacing: "-0.02em", marginTop: 16, color: "var(--cream)" }}>
            Six modules.<br/>Un seul espace de travail.
          </h2>
        </div>
        <div style={{ alignSelf: "end" }}>
          <p className="body-lg" style={{ maxWidth: 460, color: "rgba(242,237,228,0.8)" }}>
            Tous intégrés par défaut. Aucun à moitié construit. Nous l'utilisons sur chaque compte que nous pilotons, y compris le vôtre, à terme.
          </p>
        </div>
      </div>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0 }}>
        {f.map((it, i) => (
          <div key={it.n} style={{ padding: "36px 28px", borderTop: "1px solid rgba(242,237,228,0.15)", borderLeft: i % 3 === 0 ? "none" : "1px solid rgba(242,237,228,0.15)", borderBottom: i >= 3 ? "1px solid rgba(242,237,228,0.15)" : "none" }}>
            <div className="mono" style={{ color: "var(--acid)", marginBottom: 16 }}>{it.n}</div>
            <h3 className="serif" style={{ fontSize: 36, lineHeight: 1.0, letterSpacing: "-0.02em", color: "var(--cream)", marginBottom: 14 }}>{it.t}</h3>
            <p className="body" style={{ color: "rgba(242,237,228,0.75)" }}>{it.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function PlatformWorkflow() {
  return (
    <section style={{ padding: "120px 0", background: "var(--ink-2)", borderTop: "1px solid rgba(242,237,228,0.15)", borderBottom: "1px solid rgba(242,237,228,0.15)" }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "center" }}>
        <div>
          <div className="eyebrow-num" style={{ color: "rgba(242,237,228,0.6)" }}>Flux de travail</div>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 80px)", lineHeight: 0.96, letterSpacing: "-0.02em", marginTop: 16, color: "var(--cream)" }}>
            Du brief à la mise<br/>en ligne en 11 jours,<br/>reproductible.
          </h2>
          <p className="body-lg" style={{ marginTop: 24, color: "rgba(242,237,228,0.78)", maxWidth: 480 }}>
            Brief → Revue de concept → Production → QA → Lancement → Revue du vendredi. Chaque étape a un responsable, un délai engagé et un fil de commentaires.
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {[
            ["Jour 0", "Rédaction du brief", "1 page dans la plateforme", "var(--acid)"],
            ["Jour 1", "Revue de concept", "Trois territoires, un retenu", "rgba(242,237,228,0.6)"],
            ["Jours 2–6", "Production", "Photographie, copie, motion, statiques", "rgba(242,237,228,0.6)"],
            ["Jour 7", "QA + contrôle de marque", "Auto + humain", "rgba(242,237,228,0.6)"],
            ["Jour 8", "Lancement", "Mise en ligne sur les canaux actifs", "rgba(242,237,228,0.6)"],
            ["Jour 11", "Revue du vendredi", "P&L à l'écran", "var(--acid)"],
          ].map((s, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "60px 200px 1fr", gap: 16, padding: "16px 20px", background: "rgba(242,237,228,0.04)", borderRadius: 4, borderLeft: `2px solid ${s[3]}` }}>
              <span className="mono" style={{ color: s[3] }}>{s[0].toUpperCase()}</span>
              <span className="serif" style={{ fontSize: 22, color: "var(--cream)" }}>{s[1]}</span>
              <span className="body" style={{ color: "rgba(242,237,228,0.65)" }}>{s[2]}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PlatformIntegrations() {
  const ints = ["Meta", "Google Ads", "TikTok", "Klaviyo", "Shopify", "Stripe", "GA4", "Snowflake", "BigQuery", "Redshift", "Postgres", "Slack", "Notion", "Linear", "Figma", "Looker", "Mailchimp", "Iterable", "Segment", "Customer.io", "Branch", "Heap", "Mixpanel", "Amplitude"];
  return (
    <section style={{ padding: "120px 0" }}>
      <div className="page">
        <div className="flex justify-between items-end" style={{ marginBottom: 48 }}>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 88px)", lineHeight: 0.96, letterSpacing: "-0.02em", color: "var(--cream)" }}>
            Intégrations.
          </h2>
          <div className="mono" style={{ color: "rgba(242,237,228,0.6)" }}>{ints.length} actives · 14 en bêta</div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 0, border: "1px solid rgba(242,237,228,0.15)" }}>
          {ints.map((it, i) => (
            <div key={it} style={{ padding: 24, borderRight: (i+1) % 6 === 0 ? "none" : "1px solid rgba(242,237,228,0.15)", borderBottom: i < ints.length - 6 ? "1px solid rgba(242,237,228,0.15)" : "none", aspectRatio: "2/1", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--cream)" }}>
              <span className="serif" style={{ fontSize: 22, letterSpacing: "-0.005em" }}>{it}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PlatformSecurity() {
  return (
    <section style={{ padding: "120px 0", background: "var(--ink-2)", borderTop: "1px solid rgba(242,237,228,0.15)" }}>
      <div className="page" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }}>
        <div>
          <div className="eyebrow-num" style={{ color: "rgba(242,237,228,0.6)" }}>Sécurité & données</div>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 80px)", lineHeight: 0.96, letterSpacing: "-0.02em", marginTop: 16, color: "var(--cream)" }}>
            Volontairement ennuyeux.
          </h2>
        </div>
        <div>
          <p className="body-lg" style={{ color: "rgba(242,237,228,0.78)", marginBottom: 32 }}>
            Nous ne sommes pas votre prestataire le plus excitant. Nous sommes le plus ennuyeux. Single-tenant sur l'offre entreprise, SOC 2 Type II héritée de notre hébergeur depuis 2023, résidence des données en UE, clés gérées par le client, journal d'audit sur l'ensemble des actions.
          </p>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            {[
              ["SOC 2 Type II", "Hérité de notre hébergeur · 2025"],
              ["RGPD + CCPA", "DPA sur demande"],
              ["Résidence UE", "Francfort + Dublin"],
              ["SSO + SCIM", "Okta, Google, Azure"],
              ["Chiffrement", "AES-256 au repos"],
              ["Journal d'audit", "Chaque action"],
            ].map(([k, v]) => (
              <div key={k} className="kvp" style={{ gridTemplateColumns: "120px 1fr", borderColor: "rgba(242,237,228,0.15)" }}>
                <div className="k" style={{ color: "rgba(242,237,228,0.5)" }}>{k}</div>
                <div className="v" style={{ color: "var(--cream)" }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function PlatformCTA() {
  return (
    <section style={{ padding: "120px 0" }}>
      <div className="page">
        <h2 className="serif" style={{ fontSize: "clamp(56px, 8vw, 168px)", lineHeight: 0.9, letterSpacing: "-0.025em", color: "var(--cream)" }}>
          Essayez-la pendant <em style={{ color: "var(--acid)" }}>14 jours</em>.<br/>
          Gardez les données, dans tous les cas.
        </h2>
        <div style={{ marginTop: 48, display: "flex", gap: 12 }}>
          <Btn to="/signup" variant="acid" magnetic>Démarrer l'essai gratuit</Btn>
          <Btn to="/pricing" variant="ghost">Tarification</Btn>
        </div>
      </div>
    </section>
  );
}

window.Platform = Platform;