// ============================================================
// NOMERUS · LANDING PAGE
// ============================================================

// ──────────────────────────────────────────────────────────────
// TICKERTAPE — scrolling honest status strip
// Replaces the old fake metrics bar (no all-time trade counter,
// no fabricated uptime / latency numbers).
// ──────────────────────────────────────────────────────────────
const WTickertape = () => {
  const W = window.W;

  // Honest content. Pills get a tiny green dot for `LIVE`,
  // version gets indigo soft. Everything else is mono dim text
  // with `·` separators in textMute.
  const sep = (
    <span style={{ color: W.textMute, padding: "0 14px" }}>·</span>
  );
  const ver = (
    <span style={{ color: W.indigo, fontWeight: 600 }}>v1.0.0</span>
  );

  const segment = (
    <>
      {ver}
      {sep}
      <span style={{ color: W.green, fontWeight: 600 }}>plan gratuit · sans carte</span>
      {sep}
      <span>import csv + saisie manuelle</span>
      {sep}
      <span>coach ia sur tes vrais trades</span>
      {sep}
      <span style={{ color: W.indigo, fontWeight: 600 }}>le brief · le journal des marchés</span>
      {sep}
      <span>données hébergées en ue</span>
      {sep}
      <span>sync broker : bientôt</span>
      {sep}
      <span>export csv / json à tout moment</span>
      {sep}
      <span>made in 🇨🇭</span>
      <span style={{ padding: "0 14px" }}/>
    </>
  );

  return (
    <div style={{
      position: "relative", overflow: "hidden",
      height: 30,
      background: "rgba(124, 158, 255, 0.04)",
      borderTop: `1px solid ${W.border}`,
      borderBottom: `1px solid ${W.border}`,
      fontFamily: W.mono,
      fontSize: 11,
      letterSpacing: 1.5,
      textTransform: "uppercase",
      color: W.textDim,
    }}>
      {/* inline keyframes — keeps the marquee self-contained */}
      <style>{`
        @keyframes nomerus-marquee {
          0%   { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .nomerus-tickertape-track {
          display: inline-flex;
          align-items: center;
          white-space: nowrap;
          animation: nomerus-marquee 60s linear infinite;
          height: 30px;
          will-change: transform;
        }
        @media (prefers-reduced-motion: reduce) {
          .nomerus-tickertape-track { animation-duration: 240s; }
        }
      `}</style>
      <div className="nomerus-tickertape-track">
        {/* duplicate the content twice so the loop is seamless */}
        <span style={{ display: "inline-flex", alignItems: "center", paddingLeft: 28 }}>{segment}</span>
        <span style={{ display: "inline-flex", alignItems: "center" }}>{segment}</span>
      </div>
    </div>
  );
};

const WLanding = ({ go }) => {
  const W = window.W;
  const Icon = window.Icon;
  const Reveal = window.Reveal;
  const RevealGroup = window.RevealGroup;
  const heroCurve = React.useMemo(() => window.qtMakeCurve(120, 100000, 280, 420), []);

  return (
    <div style={{ background: W.bg, color: W.text, fontFamily: W.sans }}>
      {/* ───── HERO ───── */}
      <section style={{ position: "relative", overflow: "hidden", borderBottom: `1px solid ${W.border}` }}>
        {/* Grid backdrop */}
        <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.5, pointerEvents: "none" }} preserveAspectRatio="none">
          <defs>
            <pattern id="grid" width="64" height="64" patternUnits="userSpaceOnUse">
              <path d="M 64 0 L 0 0 0 64" fill="none" stroke={W.border} strokeWidth="0.5"/>
            </pattern>
            <radialGradient id="fade" cx="50%" cy="0%" r="80%">
              <stop offset="0%" stopColor={W.bg} stopOpacity="0"/>
              <stop offset="100%" stopColor={W.bg} stopOpacity="1"/>
            </radialGradient>
          </defs>
          <rect width="100%" height="100%" fill="url(#grid)"/>
          <rect width="100%" height="100%" fill="url(#fade)"/>
        </svg>

        {/* Ambient glow — drifts slowly behind the hero */}
        <div className="nm-glow" aria-hidden="true" style={{
          position: "absolute", top: "-25%", left: "26%", width: "64%", height: "130%",
          background: "radial-gradient(circle at center, rgba(124,158,255,0.16), rgba(124,158,255,0) 62%)",
          filter: "blur(8px)", pointerEvents: "none", zIndex: 0,
        }}/>

        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "clamp(56px, 7vw, 96px) 28px 60px", position: "relative", zIndex: 1 }}>
          <div className="w-stack" style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 56, alignItems: "center" }}>
            {/* Left col */}
            <div>
              {/* Eyebrow */}
              <Reveal delay={0} y={14}>
                <div style={{
                  display: "inline-flex", alignItems: "center", gap: 8,
                  padding: "6px 12px", borderRadius: 99,
                  background: W.indigoSoft, border: `1px solid ${W.borderStrong}`,
                  fontFamily: W.mono, fontSize: 10, letterSpacing: 1.5, color: W.indigo,
                  marginBottom: 28,
                }}>
                  <span className="nm-dot" style={{ width: 6, height: 6, borderRadius: "50%", background: W.indigo }}/>
                  PLAN GRATUIT · SANS CARTE · MADE IN 🇨🇭
                </div>
              </Reveal>

              <Reveal delay={80}>
                <h1 style={{
                  fontFamily: W.sans, fontSize: "clamp(38px, 5vw, 62px)", fontWeight: 700, lineHeight: 1.06,
                  letterSpacing: -2, margin: "0 0 22px", color: W.text,
                }}>
                  Le journal de trading<br/>
                  qui te débrieffe<br/>
                  <span style={{ color: W.indigo }}>comme un coach.</span>
                </h1>
              </Reveal>

              <Reveal delay={160}>
                <p style={{
                  fontFamily: W.sans, fontSize: 18, color: W.textDim, lineHeight: 1.6,
                  maxWidth: 520, margin: "0 0 36px",
                }}>
                  Importe l'export CSV de ton broker : en trois minutes tu vois ta vraie courbe d'équité, ton drawdown, ton winrate par session. Puis le Coach IA te dit, chiffres à l'appui, où tu gagnes vraiment — et où tu te sabotes.
                </p>
              </Reveal>

              {/* CTAs */}
              <Reveal delay={240}>
                <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginBottom: 36 }}>
                  <button onClick={() => go("signup")} className="w-cta" style={{
                    background: W.indigo, color: W.bg, border: "none", cursor: "pointer",
                    padding: "13px 22px", borderRadius: 5,
                    fontFamily: W.mono, fontSize: 12, fontWeight: 700, letterSpacing: 2,
                  }}>
                    COMMENCER GRATUITEMENT →
                  </button>
                  <button onClick={() => go("features")} className="w-ghost" style={{
                    background: "transparent", color: W.text, border: `1px solid ${W.borderStrong}`, cursor: "pointer",
                    padding: "12px 22px", borderRadius: 5,
                    fontFamily: W.mono, fontSize: 12, fontWeight: 600, letterSpacing: 2,
                  }}>
                    VOIR LES FONCTIONNALITÉS →
                  </button>
                </div>
              </Reveal>

              {/* Trust micro-row */}
              <Reveal delay={320} y={12}>
                <div style={{
                  display: "flex", gap: 18, flexWrap: "wrap",
                  fontFamily: W.mono, fontSize: 10, color: W.textMute, letterSpacing: 1.4,
                }}>
                  <span>PLAN GRATUIT POUR COMMENCER</span>
                  <span style={{ color: W.border }}>|</span>
                  <span>SANS CARTE DE CRÉDIT</span>
                  <span style={{ color: W.border }}>|</span>
                  <span>TES DONNÉES EXPORTABLES À TOUT MOMENT</span>
                </div>
              </Reveal>
            </div>

            {/* Right col — terminal preview */}
            <Reveal delay={140} y={30} style={{
              background: W.panel, border: `1px solid ${W.borderStrong}`, borderRadius: 8,
              boxShadow: `0 24px 80px -20px rgba(124,158,255,0.18), 0 0 0 1px rgba(124,158,255,0.04) inset`,
              overflow: "hidden",
            }}>
              {/* Window chrome */}
              <div style={{
                padding: "10px 14px", borderBottom: `1px solid ${W.border}`,
                display: "flex", alignItems: "center", gap: 10,
                fontFamily: W.mono, fontSize: 10, color: W.textMute, letterSpacing: 1.4,
              }}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: "rgba(255,107,122,0.6)" }}/>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: "rgba(255,180,84,0.6)" }}/>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: "rgba(91,217,154,0.6)" }}/>
                <span style={{ marginLeft: 6 }}>nomerus.com/dashboard</span>
                <span style={{ marginLeft: "auto", color: W.textMute, letterSpacing: 1.4 }}>DÉMO</span>
              </div>

              {/* Equity stat */}
              <div style={{ padding: "20px 22px 6px" }}>
                <div style={{ fontFamily: W.mono, fontSize: 9, color: W.textMute, letterSpacing: 1.5 }}>ÉQUITÉ · COMPTE DÉMO</div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginTop: 6 }}>
                  <div style={{ fontFamily: W.mono, fontSize: 32, color: W.text, fontWeight: 600, letterSpacing: -0.5 }}>127 482,55 CHF</div>
                  <div style={{ fontFamily: W.mono, fontSize: 13, color: W.green, fontWeight: 600 }}>+16.9% · 30J</div>
                </div>
              </div>

              {/* Curve */}
              <div className="hero-spark" style={{ padding: "8px 22px 0", height: 180, position: "relative" }}>
                <window.QTSpark data={heroCurve} color={W.indigo} height={170}/>
              </div>

              {/* Stat grid */}
              <div style={{
                display: "grid", gridTemplateColumns: "repeat(4, 1fr)",
                borderTop: `1px solid ${W.border}`,
              }}>
                {[
                  ["MODE", "DÉMO", W.textDim],
                  ["TX %", "60,4", W.text],
                  ["SHARPE", "1,58", W.text],
                  ["DD", "-7,8%", W.red],
                ].map(([l, v, c]) => (
                  <div key={l} style={{ padding: "12px 14px", borderRight: `1px solid ${W.border}` }}>
                    <div style={{ fontFamily: W.mono, fontSize: 9, color: W.textMute, letterSpacing: 1.5 }}>{l}</div>
                    <div style={{ fontFamily: W.mono, fontSize: 16, color: c, fontWeight: 600, marginTop: 4 }}>{v}</div>
                  </div>
                ))}
              </div>

              {/* Live tick row */}
              <div style={{
                padding: "10px 14px", borderTop: `1px solid ${W.border}`,
                fontFamily: W.mono, fontSize: 10, color: W.textDim, letterSpacing: 1.2,
                display: "flex", gap: 18, overflow: "hidden", whiteSpace: "nowrap",
              }}>
                <span><span style={{ color: W.green }}>●</span> IMPORTÉ · EUR/USD · +312,50 CHF</span>
                <span><span style={{ color: W.green }}>●</span> IMPORTÉ · XAU/USD · +670,00 CHF</span>
                <span><span style={{ color: W.red }}>●</span> IMPORTÉ · SPX500 · -56,00 CHF</span>
              </div>
            </Reveal>
          </div>
        </div>

        {/* Trusted-by strip */}
        <div style={{
          borderTop: `1px solid ${W.border}`, background: W.bgAlt,
          padding: "18px 28px",
        }}>
          <div style={{
            maxWidth: 1280, margin: "0 auto",
            display: "flex", alignItems: "center", gap: 28, flexWrap: "wrap",
            fontFamily: W.mono, fontSize: 10, color: W.textMute, letterSpacing: 1.5,
          }}>
            <span style={{ color: W.indigo }}>SYNC BROKER AUTOMATIQUE · BIENTÔT :</span>
            {["CTRADER", "OANDA", "METATRADER 5"].map(b => (
              <span key={b} style={{ color: W.textDim, letterSpacing: 1.2 }}>{b}</span>
            ))}
          </div>
        </div>
      </section>

      {/* ───── TICKERTAPE · LIVE STATUS ───── */}
      <WTickertape/>

      {/* ───── FEATURES BENTO ───── */}
      <section style={{ borderBottom: `1px solid ${W.border}` }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "clamp(64px, 8vw, 100px) 28px" }}>
          <Reveal>
            <div className="w-stack" style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 56, alignItems: "start", marginBottom: 48 }}>
              <div>
                <div style={{ fontFamily: W.mono, fontSize: 10, color: W.indigo, letterSpacing: 2, marginBottom: 12 }}>// 02 · CAPACITÉS</div>
                <h2 style={{ fontFamily: W.sans, fontSize: "clamp(30px, 3.4vw, 40px)", fontWeight: 700, letterSpacing: -1.2, margin: 0, lineHeight: 1.1 }}>
                  Tes trades, transformés<br/>en edge lisible.
                </h2>
              </div>
              <p style={{ fontFamily: W.sans, fontSize: 16, color: W.textDim, lineHeight: 1.65, margin: "8px 0 0" }}>
                Ton historique entre en trois minutes. Ensuite tout est automatique : courbe d'équité, drawdown, winrate par session, edge par paire — et un Coach IA qui lit <em>tes</em> trades, pas tes espoirs. Conçu pour les traders qui veulent une performance répétable, pas du feeling.
              </p>
            </div>
          </Reveal>

          <RevealGroup className="w-stack" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 14 }}>
            {[
              { icon: "bot",      title: "Import & saisie en un geste",  tag: "JOURNAL",    span: 6, variant: "feature", body: "Importe l'export CSV de ton broker (MetaTrader, cTrader, Bybit…) ou saisis tes trades à la main. Dédoublonnage automatique : réimporte le même fichier sans jamais créer de doublons. La sync broker automatique arrive bientôt." },
              { icon: "analyze",  title: "Les stats qui expliquent ton P&L", tag: "ANALYSE", span: 2, variant: "std",   body: "Sharpe glissant, edge par paire, heatmap heure × jour, échelle de drawdown, winrate par session. Les chiffres qui comptent — pas des vanity metrics." },
              { icon: "ai",       title: "Coach IA",                    tag: "COACH",      span: 2, variant: "std",     body: "Un copilote qui lit ton journal : les sessions qui te coûtent, les actifs qui portent ton P&L, les dérives de discipline. Ton premier debrief est offert à l'inscription." },
              { icon: "shield",   title: "Tes données, protégées",      tag: "SÉCURITÉ",   span: 2, variant: "std",     body: "Chiffrées, hébergées en UE, jamais revendues ni utilisées pour entraîner un modèle. Et la sync broker à venir sera en lecture seule : Nomerus ne pourra jamais trader ni retirer." },
              { icon: "spark",    title: "Multi-marché",                tag: "JOURNAL",    span: 2, variant: "std",     body: "Forex, crypto, indices, actions — tous tes comptes dans un seul journal, une seule courbe d'équité, un P&L normalisé entre toutes les plateformes." },
              { icon: "news",     title: "Le Brief",                    tag: "MARCHÉS",    span: 2, variant: "std",     body: "Le journal des marchés, directement dans ton espace : macro, forex, crypto, indices. Rédigé par IA à partir d'une veille multi-sources — factuel, sourcé, mis à jour plusieurs fois par jour." },
              { icon: "download", title: "Tes données t'appartiennent", tag: "EXPORT",     span: 2, variant: "std",     body: "Chaque trade, chaque frais, chaque note : exportable en CSV ou JSON à tout moment. Tes données sont à toi. Toujours." },
            ].map((f, i) => {
              const card = {
                background: W.panel, border: `1px solid ${W.border}`, borderRadius: 6,
                padding: 24, gridColumn: `span ${f.span}`, "--ri": i,
              };
              const iconBox = (s) => ({
                width: s, height: s, borderRadius: 5, flexShrink: 0,
                background: W.indigoSoft, color: W.indigo,
                display: "flex", alignItems: "center", justifyContent: "center",
                border: `1px solid ${W.borderStrong}`,
              });
              const tagTxt = { fontFamily: W.mono, fontSize: 9, color: W.textMute, letterSpacing: 1.8 };
              const titleTxt = (sz) => ({ fontFamily: W.sans, fontSize: sz, fontWeight: 600, color: W.text });
              const bodyTxt = { fontFamily: W.sans, fontSize: 13, color: W.textDim, lineHeight: 1.6 };

              if (f.variant === "feature") {
                return (
                  <div key={f.title} className="w-card reveal-item" style={card}>
                    <div className="w-stack" style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 26, alignItems: "center" }}>
                      <div>
                        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
                          <div className="w-card-icon" style={iconBox(40)}><Icon name={f.icon} size={20}/></div>
                          <span style={tagTxt}>· {f.tag}</span>
                        </div>
                        <div style={{ ...titleTxt(22), marginBottom: 10 }}>{f.title}</div>
                        <div style={{ ...bodyTxt, fontSize: 14, maxWidth: 460 }}>{f.body}</div>
                      </div>
                      {/* Mini live journal */}
                      <div style={{ background: W.bg, border: `1px solid ${W.border}`, borderRadius: 6, padding: "14px 16px", display: "flex", flexDirection: "column", gap: 10 }}>
                        <div style={{ fontFamily: W.mono, fontSize: 9, color: W.textMute, letterSpacing: 1.6, marginBottom: 2 }}>JOURNAL · DÉMO</div>
                        {[["IC MARKETS", "EUR/USD", "+312,50", W.green], ["OANDA", "XAU/USD", "+670,00", W.green], ["BYBIT", "BTC/USDT", "-58,00", W.red]].map(([br, pair, pnl, c], k) => (
                          <div key={k} style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: W.mono, fontSize: 11 }}>
                            <span className="nm-dot" style={{ width: 5, height: 5, borderRadius: "50%", background: c, flexShrink: 0 }}/>
                            <span style={{ color: W.textDim, flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{br} · {pair}</span>
                            <span style={{ color: c }}>{pnl} CHF</span>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                );
              }

              if (f.variant === "wide") {
                return (
                  <div key={f.title} className="w-card reveal-item" style={{ ...card, display: "flex", gap: 18 }}>
                    <div className="w-card-icon" style={iconBox(42)}><Icon name={f.icon} size={20}/></div>
                    <div style={{ minWidth: 0 }}>
                      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
                        <span style={{ ...titleTxt(16) }}>{f.title}</span>
                        <span style={tagTxt}>· {f.tag}</span>
                      </div>
                      <div style={bodyTxt}>{f.body}</div>
                      {f.chips && (
                        <div style={{ display: "flex", gap: 8, marginTop: 14, flexWrap: "wrap" }}>
                          {f.chips.map(c => (
                            <span key={c} style={{ fontFamily: W.mono, fontSize: 10, letterSpacing: 1.5, padding: "5px 11px", borderRadius: 4, background: W.indigoSoft, color: W.indigo, border: `1px solid ${W.borderStrong}` }}>{c}</span>
                          ))}
                        </div>
                      )}
                    </div>
                  </div>
                );
              }

              return (
                <div key={f.title} className="w-card reveal-item" style={{ ...card, display: "flex", flexDirection: "column", gap: 14 }}>
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <div className="w-card-icon" style={iconBox(36)}><Icon name={f.icon} size={18}/></div>
                    <span style={tagTxt}>· {f.tag}</span>
                  </div>
                  <div style={titleTxt(16)}>{f.title}</div>
                  <div style={bodyTxt}>{f.body}</div>
                </div>
              );
            })}
          </RevealGroup>
        </div>
      </section>

      {/* ───── WORKFLOW · 3 STEPS ───── */}
      <section style={{ borderBottom: `1px solid ${W.border}`, background: W.bgAlt }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "clamp(64px, 8vw, 100px) 28px" }}>
          <Reveal>
            <div style={{ fontFamily: W.mono, fontSize: 10, color: W.indigo, letterSpacing: 2, marginBottom: 12 }}>// 03 · DÉROULÉ</div>
            <h2 style={{ fontFamily: W.sans, fontSize: "clamp(30px, 3.4vw, 40px)", fontWeight: 700, letterSpacing: -1.2, margin: "0 0 48px", lineHeight: 1.1, maxWidth: 820 }}>
              De l'inscription à ton premier debrief IA en <span style={{ color: W.indigo }}>moins de 5 minutes.</span>
            </h2>
          </Reveal>

          <RevealGroup className="w-stack" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
            {[
              { n: "01", title: "Importe tes trades",      body: "Export CSV de ton broker (MetaTrader, cTrader, Bybit…) ou saisie manuelle. Dédoublonnage automatique — tu peux réimporter le même fichier sans jamais créer de doublons. Pas envie d'importer tout de suite ? Un compte démo te fait visiter." },
              { n: "02", title: "Vois tes vraies stats",   body: "Dès le premier import : courbe d'équité, drawdown, winrate par session, P&L par actif et par jour. De vraies stats dès le premier jour, pas une courbe vide." },
              { n: "03", title: "Reçois ton debrief IA",   body: "Le Coach lit tes trades importés et te livre un premier debrief offert : tes patterns intraday, tes biais récurrents, et où ton edge est réel — chaque constat chiffré depuis tes données." },
            ].map((s, i) => (
              <div key={s.n} className="w-card reveal-item" style={{
                background: W.panel, border: `1px solid ${W.border}`, borderRadius: 6,
                padding: 28, position: "relative", overflow: "hidden", "--ri": i,
              }}>
                <div style={{
                  fontFamily: W.mono, fontSize: 64, fontWeight: 700, color: W.indigoSoft,
                  position: "absolute", top: 12, right: 18, lineHeight: 1, letterSpacing: -2,
                }}>{s.n}</div>
                <div style={{ fontFamily: W.mono, fontSize: 10, color: W.indigo, letterSpacing: 2, marginBottom: 14 }}>ÉTAPE {s.n}</div>
                <div style={{ fontFamily: W.sans, fontSize: 20, fontWeight: 600, color: W.text, marginBottom: 10, position: "relative" }}>{s.title}</div>
                <div style={{ fontFamily: W.sans, fontSize: 13, color: W.textDim, lineHeight: 1.6, position: "relative" }}>{s.body}</div>
              </div>
            ))}
          </RevealGroup>
        </div>
      </section>

      {/* ───── AI COACH PREVIEW ───── */}
      <section style={{ borderBottom: `1px solid ${W.border}` }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "clamp(64px, 8vw, 100px) 28px" }}>
          <div className="w-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 56, alignItems: "center" }}>
            <Reveal y={24}>
              <div style={{ fontFamily: W.mono, fontSize: 10, color: W.indigo, letterSpacing: 2, marginBottom: 12 }}>// 04 · COACH IA</div>
              <h2 style={{ fontFamily: W.sans, fontSize: 40, fontWeight: 700, letterSpacing: -1.2, margin: "0 0 22px", lineHeight: 1.1 }}>
                Le copilote qui lit vraiment ton journal.
              </h2>
              <p style={{ fontFamily: W.sans, fontSize: 16, color: W.textDim, lineHeight: 1.6, margin: "0 0 24px", maxWidth: 480 }}>
                La plupart des fonctionnalités « IA » sont du papier peint. Le Coach a le contexte de chaque trade de ton journal — entrées, sorties, tailles, drawdowns — et répond dans la langue du risque : des constats chiffrés, tirés de tes propres données.
              </p>
              <div style={{ display: "flex", flexDirection: "column", gap: 14, maxWidth: 480 }}>
                {[
                  ["EDGE", "Détecte les patterns intraday que tes yeux ratent"],
                  ["RISQUE", "Signale la corrélation rampante avant qu'elle se concentre"],
                  ["RÉGLAGE", "Suggère des ajustements de paramètres basés sur tes propres données"],
                ].map(([k, v]) => (
                  <div key={k} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <span style={{
                      fontFamily: W.mono, fontSize: 10, letterSpacing: 1.5,
                      padding: "3px 8px", borderRadius: 3,
                      background: W.indigoSoft, color: W.indigo,
                      border: `1px solid ${W.borderStrong}`, flexShrink: 0, marginTop: 2,
                    }}>{k}</span>
                    <span style={{ fontFamily: W.sans, fontSize: 14, color: W.text }}>{v}</span>
                  </div>
                ))}
              </div>
            </Reveal>

            {/* Chat mock */}
            <Reveal delay={120} y={28} style={{
              background: W.panel, border: `1px solid ${W.borderStrong}`, borderRadius: 8, padding: 22,
              boxShadow: `0 24px 80px -20px rgba(124,158,255,0.14)`,
            }}>
              <div style={{
                fontFamily: W.mono, fontSize: 10, color: W.textMute, letterSpacing: 1.6,
                borderBottom: `1px solid ${W.border}`, paddingBottom: 12, marginBottom: 14,
                display: "flex", justifyContent: "space-between",
              }}>
                <span>◆ COACH IA · CONTEXTE : TON JOURNAL</span>
                <span style={{ color: W.green }}>● EN LIGNE</span>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                <div style={{ alignSelf: "flex-end", maxWidth: "78%",
                  background: W.indigoSoft, border: `1px solid ${W.borderStrong}`,
                  padding: "10px 14px", borderRadius: 8, fontSize: 13, color: W.text,
                }}>
                  Pourquoi mes trades de l'après-midi sous-performent ceux du matin ?
                </div>
                <div style={{ alignSelf: "flex-start", maxWidth: "92%",
                  background: W.panel2, padding: "12px 14px", borderRadius: 8, fontSize: 13, color: W.text, lineHeight: 1.55,
                }}>
                  Sur tes trades importés, la session <span style={{ color: W.indigo, fontFamily: W.mono }}>08:00–11:00</span> sort à <span style={{ color: W.indigo, fontFamily: W.mono }}>+1,8R</span> de moyenne, contre <span style={{ color: W.indigo, fontFamily: W.mono }}>−0,3R</span> l'après-midi — surtout sur des ranges à faible volatilité où ton edge de mean-reversion s'effondre.
                  <div style={{ marginTop: 10, padding: 10, background: W.bg, borderRadius: 4, fontFamily: W.mono, fontSize: 11, color: W.green }}>
                    → Suggestion : concentre tes entrées sur ta fenêtre du matin (+0,4 Sharpe sur ton historique)
                  </div>
                </div>
                <div style={{
                  display: "flex", alignItems: "center", gap: 10,
                  padding: "10px 12px", borderRadius: 6,
                  border: `1px dashed ${W.border}`,
                  fontFamily: W.mono, fontSize: 11, color: W.textMute, letterSpacing: 1,
                }}>
                  ▌ DEMANDE N'IMPORTE QUOI SUR TON JOURNAL...
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* ───── PRICING SNAPSHOT ───── */}
      <WPricingTable go={go} compact/>

      {/* ───── CTA STRIP ───── */}
      <section>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "clamp(64px, 8vw, 100px) 28px" }}>
          <Reveal y={28} className="w-stack" style={{
            position: "relative", overflow: "hidden", borderRadius: 8,
            background: `linear-gradient(135deg, ${W.panel} 0%, ${W.panel2} 100%)`,
            border: `1px solid ${W.borderStrong}`,
            padding: "clamp(36px, 5vw, 56px)",
            display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 40, alignItems: "center",
          }}>
            <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.5, pointerEvents: "none" }} preserveAspectRatio="none">
              <pattern id="grid2" width="40" height="40" patternUnits="userSpaceOnUse">
                <path d="M 40 0 L 0 0 0 40" fill="none" stroke={W.border} strokeWidth="0.4"/>
              </pattern>
              <rect width="100%" height="100%" fill="url(#grid2)"/>
            </svg>

            <div style={{ position: "relative" }}>
              <div style={{ fontFamily: W.mono, fontSize: 10, color: W.indigo, letterSpacing: 2, marginBottom: 12 }}>// PRÊT</div>
              <h2 style={{ fontFamily: W.sans, fontSize: 36, fontWeight: 700, letterSpacing: -1, margin: 0, lineHeight: 1.1 }}>
                Arrête de remplir des tableurs. Comprends enfin tes trades.
              </h2>
              <p style={{ fontFamily: W.sans, fontSize: 15, color: W.textDim, lineHeight: 1.6, marginTop: 14, maxWidth: 460 }}>
                Plan gratuit, sans carte. Trois minutes pour importer ton historique, un debrief IA offert pour te dire ce qu'il raconte.
              </p>
            </div>
            <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 10 }}>
              <button onClick={() => go("signup")} className="w-cta" style={{
                background: W.indigo, color: W.bg, border: "none", cursor: "pointer",
                padding: "16px 22px", borderRadius: 5,
                fontFamily: W.mono, fontSize: 12, fontWeight: 700, letterSpacing: 2,
              }}>
                COMMENCER GRATUITEMENT →
              </button>
              <button onClick={() => go("login")} className="w-ghost" style={{
                background: "transparent", color: W.text, border: `1px solid ${W.borderStrong}`, cursor: "pointer",
                padding: "15px 22px", borderRadius: 5,
                fontFamily: W.mono, fontSize: 12, fontWeight: 600, letterSpacing: 2,
              }}>
                SE CONNECTER À UN COMPTE EXISTANT
              </button>
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
};

// ──────────────────────────────────────────────────────────────
// PRICING TABLE — shared between landing & pricing page
// Pro est ACTIF : le CTA lance un checkout Stripe (create-checkout-session)
// pour l'utilisateur connecté, sinon l'envoie créer un compte d'abord.
// Prérequis config : produits Stripe pro_monthly / pro_yearly (voir
// docs/PRO_ACTIVATION.md).
// ──────────────────────────────────────────────────────────────
const WPricingTable = ({ go, compact = false }) => {
  const W = window.W;
  const Reveal = window.Reveal;
  const RevealGroup = window.RevealGroup;
  const [cadence, setCadence] = React.useState("monthly"); // "monthly" | "yearly"
  const [checkoutPending, setCheckoutPending] = React.useState(false);
  const [checkoutErr, setCheckoutErr] = React.useState(null);

  // Lance l'abonnement Pro. Connecté → session Stripe Checkout ; sinon →
  // création de compte (l'abonnement se poursuit depuis Compte, ou au retour).
  const startProCheckout = async () => {
    setCheckoutErr(null);
    try {
      const session = await window.nomerusAuth.getSession();
      if (!session) { go("signup"); return; }
      setCheckoutPending(true);
      const sb = window.nomerusSb();
      const lookup = cadence === "yearly" ? "pro_yearly" : "pro_monthly";
      if (window.NomerusAnalytics) window.NomerusAnalytics.track("checkout_started", { cadence });
      const { data, error } = await sb.functions.invoke("create-checkout-session", {
        body: { price_lookup_key: lookup },
      });
      if (error || !data || !data.checkout_url) {
        setCheckoutErr("Le paiement est momentanément indisponible. Réessaie dans un instant.");
        setCheckoutPending(false);
        return;
      }
      window.location.href = data.checkout_url;
    } catch (_) {
      setCheckoutErr("Erreur réseau. Vérifie ta connexion et réessaie.");
      setCheckoutPending(false);
    }
  };

  const proPrice = cadence === "yearly" ? "119 CHF" : "14,99 CHF";
  const proCadence = cadence === "yearly" ? "/ an" : "/ mois";
  const yearlyHint = cadence === "yearly"
    ? "Économise environ 34 % vs le tarif mensuel"
    : "Passe à l'annuel et économise environ 34 %";

  const tiers = [
    {
      name: "GRATUIT",
      price: "0 CHF",
      cadence: "/ pour toujours",
      desc: "Tout ce qu'il faut pour journaliser sérieusement. Sans carte.",
      cta: "Commencer gratuitement",
      action: () => go("signup"),
      features: ["Import CSV + saisie manuelle", "Jusqu'à 30 trades / mois", "Stats de base + courbe d'équité", "Coach IA · 30 messages / jour", "Debrief IA d'accueil (1 fois)"],
    },
    {
      name: "PRO",
      price: proPrice,
      cadence: proCadence,
      desc: "Historique complet, Coach IA sans limite pratique, sync broker, exports.",
      cta: checkoutPending ? "Redirection…" : "S'abonner",
      featured: true,
      action: startProCheckout,
      features: ["Trades illimités + stats profondes", "Coach IA · 300 messages / jour", "Analyse IA graphique par graphique", "Import CSV illimité + comptes illimités", "Accès prioritaire à la sync broker", "Support par email prioritaire"],
    },
  ];

  return (
    <section style={{ borderBottom: `1px solid ${W.border}` }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "clamp(64px, 8vw, 100px) 28px" }}>
        <Reveal>
          <div style={{ marginBottom: 28 }}>
            <div style={{ fontFamily: W.mono, fontSize: 10, color: W.indigo, letterSpacing: 2, marginBottom: 12 }}>// 05 · TARIFS</div>
            <h2 style={{ fontFamily: W.sans, fontSize: "clamp(30px, 3.4vw, 40px)", fontWeight: 700, letterSpacing: -1.2, margin: 0, lineHeight: 1.1 }}>
              Commence gratuitement. <span style={{ color: W.indigo }}>Passe à Pro quand tu veux.</span>
            </h2>
          </div>
        </Reveal>

        {/* Toggle Mensuel / Annuel */}
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 28 }}>
          <div style={{
            display: "inline-flex", border: `1px solid ${W.border}`, borderRadius: 5, padding: 3,
            background: W.panel,
          }}>
            {[
              ["monthly", "MENSUEL"],
              ["yearly", "ANNUEL · −34 %"],
            ].map(([key, label, pressed]) => (
              <button key={key} onClick={() => setCadence(key)} aria-pressed={cadence === key} style={{
                padding: "8px 16px", borderRadius: 4, border: "none", cursor: "pointer",
                background: cadence === key ? W.indigo : "transparent",
                color: cadence === key ? W.bg : W.textDim,
                fontFamily: W.mono, fontSize: 11, fontWeight: 700, letterSpacing: 1.5,
              }}>{label}</button>
            ))}
          </div>
        </div>

        <RevealGroup className="w-stack" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 14, maxWidth: 760, margin: "0 auto" }}>
          {tiers.map((t, i) => (
            <div key={t.name} className="w-price-card reveal-item" style={{
              background: t.featured ? W.panel2 : W.panel,
              border: `1px solid ${t.featured ? W.indigo : W.border}`,
              borderRadius: 6, padding: 28,
              display: "flex", flexDirection: "column", gap: 20,
              position: "relative", "--ri": i,
            }}>
              {t.featured && (
                <span style={{
                  position: "absolute", top: -10, right: 18,
                  background: W.indigo, color: W.bg,
                  fontFamily: W.mono, fontSize: 9, fontWeight: 700, letterSpacing: 2,
                  padding: "3px 10px", borderRadius: 3,
                }}>POPULAIRE</span>
              )}
              <div>
                <div style={{ fontFamily: W.mono, fontSize: 11, color: t.featured ? W.indigo : W.textDim, letterSpacing: 2, fontWeight: 600 }}>{t.name}</div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 12 }}>
                  <span style={{ fontFamily: W.sans, fontSize: 40, fontWeight: 700, color: W.text, letterSpacing: -1 }}>{t.price}</span>
                  <span style={{ fontFamily: W.mono, fontSize: 12, color: W.textMute, letterSpacing: 1.2 }}>{t.cadence}</span>
                </div>
                <div style={{ fontFamily: W.sans, fontSize: 13, color: W.textDim, lineHeight: 1.55, marginTop: 10, minHeight: compact ? 0 : 42 }}>{t.desc}</div>
                {t.featured && (
                  <div style={{ fontFamily: W.mono, fontSize: 10, color: W.indigo, letterSpacing: 1, marginTop: 8 }}>
                    {yearlyHint}
                  </div>
                )}
              </div>
              <button onClick={t.action || (() => go("signup"))}
                disabled={t.featured && checkoutPending}
                className={t.featured ? "w-cta" : "w-ghost"} style={{
                background: t.featured ? W.indigo : "transparent",
                color: t.featured ? W.bg : W.indigo,
                border: `1px solid ${W.indigo}`,
                cursor: (t.featured && checkoutPending) ? "default" : "pointer",
                opacity: (t.featured && checkoutPending) ? 0.7 : 1,
                padding: "11px 14px", borderRadius: 4,
                fontFamily: W.mono, fontSize: 11, fontWeight: 700, letterSpacing: 2,
              }}>{t.cta.toUpperCase()} →</button>
              {t.featured && checkoutErr && (
                <div role="alert" style={{ fontFamily: W.sans, fontSize: 12, color: W.red, lineHeight: 1.4, marginTop: -8 }}>
                  {checkoutErr}
                </div>
              )}
              <div style={{ borderTop: `1px solid ${W.border}`, paddingTop: 16, display: "flex", flexDirection: "column", gap: 10 }}>
                {t.features.map(f => (
                  <div key={f} style={{ display: "flex", gap: 10, fontFamily: W.sans, fontSize: 13, color: W.text }}>
                    <span style={{ color: t.featured ? W.indigo : W.green, marginTop: 2 }}>
                      <window.Icon name="check" size={13}/>
                    </span>
                    {f}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </RevealGroup>

        <div style={{ marginTop: 24, fontFamily: W.mono, fontSize: 11, color: W.textMute, textAlign: "center", letterSpacing: 1.2 }}>
          Les deux plans incluent : Le Brief (journal des marchés) · données chiffrées · hébergement UE · export CSV / JSON · zéro autorisation de retrait
        </div>

        <div style={{ maxWidth: 760, margin: "18px auto 0", fontFamily: W.sans, fontSize: 12, color: W.textMute, textAlign: "center", lineHeight: 1.5 }}>
          Paiement sécurisé par Stripe · annulation en un clic depuis ton espace · sans engagement.
          Un code promo ? Tu pourras l'appliquer sur la page de paiement.
        </div>
      </div>
    </section>
  );
};

window.WLanding = WLanding;
window.WPricingTable = WPricingTable;
window.WTickertape = WTickertape;