// Klyvio — Landing page (dark theme Klyvio)

function Landing({ onStart, onAdmin }) {
  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>

      {/* Hero */}
      <section style={{
        position: "relative",
        padding: "72px 28px 48px",
        maxWidth: 1280,
        width: "100%",
        margin: "0 auto",
        display: "grid",
        gridTemplateColumns: "1.1fr 1fr",
        gap: 64,
        alignItems: "center"
      }}>
        <div>
          <div className="chip chip-accent" style={{ marginBottom: 24 }}>
            <Icon name="sparkles" size={12} /> Audit IA personnalisé — 35 min
          </div>

          <h1 className="display" style={{ fontSize: 72, margin: "0 0 24px", lineHeight: 1.02, color: "var(--white)" }}>
            En 35 minutes,<br />
            découvrez <em style={{ fontStyle: "italic", color: "var(--accent)" }}>exactement</em><br />
            ce que l'IA peut faire<br />
            pour votre entreprise.
          </h1>

          <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--gray)", maxWidth: 560, margin: "0 0 36px" }}>
            Répondez à quelques questions simples sur votre activité. Nous construisons
            votre <strong style={{ color: "var(--white)" }}>rapport de maturité IA</strong> personnalisé&nbsp;:
            diagnostic, processus automatisables, ROI chiffré et plan d'action sur 12 mois.
          </p>

          <div style={{ display: "flex", gap: 12, marginBottom: 40 }}>
            <button className="btn btn-primary btn-lg" onClick={onStart}>
              Démarrer mon audit
              <Icon name="arrowRight" size={14} />
            </button>
          </div>

          <div style={{ display: "flex", gap: 28, fontSize: 13, color: "var(--gray)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <Icon name="check" size={14} color="var(--success)" /> Confidentiel &amp; sans engagement
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <Icon name="check" size={14} color="var(--success)" /> Données 100&nbsp;% sécurisées
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <Icon name="check" size={14} color="var(--success)" /> Rapport livré instantanément
            </div>
          </div>
        </div>

        {/* Hero card preview */}
        <HeroPreview />
      </section>

      {/* Steps */}
      <section style={{
        maxWidth: 1280, width: "100%", margin: "0 auto",
        padding: "64px 28px",
        borderTop: "1px solid var(--border)"
      }}>
        <div className="eyebrow-line" style={{ marginBottom: 16 }}>Comment ça marche</div>
        <h2 className="display" style={{ fontSize: 44, margin: "0 0 48px", maxWidth: 700, color: "var(--white)" }}>
          Un processus léger, un livrable sérieux.
        </h2>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }}>
          {[
          { n: "01", title: "Quelques infos", desc: "Secteur, taille, priorités. 2 minutes.", icon: "briefcase" },
          { n: "02", title: "46 questions simples", desc: "Pas de jargon. Pédagogique. 30 minutes.", icon: "compass" },
          { n: "03", title: "Analyse instantanée", desc: "Score, pain points, benchmark. 30 secondes.", icon: "bolt" },
          { n: "04", title: "Rapport actionnable", desc: "Roadmap, ROI, quick wins. À vous de jouer.", icon: "target" }].
          map((s, i) =>
          <div key={i} className="card" style={{ padding: "24px 24px 28px" }}>
              <div style={{
              display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 36
            }}>
                <span className="mono" style={{ fontSize: 12, color: "var(--text-mute)" }}>{s.n}</span>
                <div style={{
                width: 36, height: 36, borderRadius: 10,
                background: "var(--accent-dim)",
                border: "1px solid var(--border)",
                color: "var(--accent)",
                display: "flex", alignItems: "center", justifyContent: "center"
              }}>
                  <Icon name={s.icon} size={16} />
                </div>
              </div>
              <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 6, color: "var(--white)" }}>{s.title}</div>
              <div style={{ fontSize: 13, color: "var(--gray)", lineHeight: 1.5 }}>{s.desc}</div>
            </div>
          )}
        </div>
      </section>

      {/* Dimensions */}
      <section style={{
        background: "var(--bg2)",
        borderTop: "1px solid var(--border)",
        borderBottom: "1px solid var(--border)",
        padding: "80px 28px"
      }}>
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <div className="eyebrow-line" style={{ marginBottom: 16 }}>
            Couverture de l'audit
          </div>
          <h2 className="display" style={{ fontSize: 44, margin: "0 0 16px", maxWidth: 780, color: "var(--white)" }}>
            7 dimensions pour une lecture <em style={{ color: "var(--accent)" }}>complète</em> de votre maturité.
          </h2>
          <p style={{ fontSize: 16, color: "var(--gray)", maxWidth: 620, margin: "0 0 48px" }}>
            Chaque dimension est scorée sur 100. Le rapport identifie forces, faiblesses, et actions prioritaires.
          </p>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
            {window.KLYVIO_DIMENSIONS.map((d, i) =>
            <div key={d.id} style={{
              padding: "22px 20px",
              borderRadius: 16,
              border: "1px solid var(--border)",
              background: "rgba(0,174,239,0.03)",
              transition: "border-color .2s ease"
            }}
            onMouseEnter={(e) => e.currentTarget.style.borderColor = "var(--border-hover)"}
            onMouseLeave={(e) => e.currentTarget.style.borderColor = "var(--border)"}>
              
                <div style={{
                width: 36, height: 36, borderRadius: 10,
                background: `${d.color}22`,
                color: d.color,
                display: "flex", alignItems: "center", justifyContent: "center",
                marginBottom: 18
              }}>
                  <Icon name={d.icon} size={16} />
                </div>
                <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 6, color: "var(--white)" }}>{d.label}</div>
                <div style={{ fontSize: 12, color: "var(--gray)", lineHeight: 1.5 }}>
                  {["Vision, alignement, priorités",
                "Stockage, qualité, gouvernance",
                "Outils, intégrations, cloud",
                "Adoption, formation, freins",
                "Irritants, répétitions, gains",
                "RGPD, AI Act, risques",
                "CA, ROI, investissement"][i]}
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Footer CTA */}
      <section style={{
        padding: "80px 28px",
        maxWidth: 1280,
        width: "100%",
        margin: "0 auto",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between"
      }}>
        <div>
          <h3 className="display" style={{ fontSize: 38, margin: "0 0 10px", color: "var(--white)" }}>
            Prêt à démarrer ?
          </h3>
          <p style={{ fontSize: 16, color: "var(--gray)", margin: 0 }}>
            35 minutes aujourd'hui pour économiser des centaines d'heures demain.
          </p>
        </div>
        <button className="btn btn-primary btn-lg" onClick={onStart}>
          Lancer mon audit IA
          <Icon name="arrowRight" size={14} />
        </button>
      </section>

    </div>);

}

function HeroPreview() {
  const [score, setScore] = React.useState(0);
  React.useEffect(() => {
    let raf;
    const start = performance.now();
    const tick = (t) => {
      const p = Math.min(1, (t - start) / 1800);
      const eased = 1 - Math.pow(1 - p, 3);
      setScore(Math.round(62 * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  return (
    <div style={{ position: "relative", height: 520 }}>

      {/* Main card */}
      <div className="card" style={{
        position: "absolute", top: 40, right: 20, width: 380,
        padding: "24px 24px 20px",
        boxShadow: "var(--sh-lg)"
      }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 20 }}>
          <div className="chip">PME · 38 collaborateurs</div>
          <span className="chip chip-success"><span className="dot" /> Rapport prêt</span>
        </div>

        <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
          <ScoreDial value={score} size={140} stroke={10} label="Maturité" />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, color: "var(--gray)", marginBottom: 4 }}>Gain potentiel identifié</div>
            <div style={{ fontSize: 28, fontWeight: 800, color: "var(--accent)", marginBottom: 8, fontVariantNumeric: "tabular-nums" }}>
              184 k€/an
            </div>
            <div style={{ fontSize: 12, color: "var(--text-mute)" }}>
              Soit 3&nbsp;240 heures économisées sur 12 mois.
            </div>
          </div>
        </div>

        <div style={{ height: 1, background: "var(--border)", margin: "20px -24px" }} />

        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "0.1em", color: "var(--text-mute)", marginBottom: 10 }}>
          TOP 3 AUTOMATISATIONS
        </div>
        {[
        { label: "Génération de devis", impact: 54, level: "Quick win" },
        { label: "Support client niveau 1", impact: 38, level: "3 mois" },
        { label: "Reporting commercial", impact: 22, level: "Quick win" }].
        map((r, i) =>
        <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 0", borderBottom: i < 2 ? "1px solid var(--border)" : "none" }}>
            <div style={{
            width: 20, height: 20, borderRadius: 5,
            background: i === 0 ? "var(--accent-dim)" : "rgba(255,255,255,0.04)",
            border: "1px solid var(--border)",
            display: "flex", alignItems: "center", justifyContent: "center",
            fontSize: 10, fontWeight: 600,
            color: i === 0 ? "var(--accent)" : "var(--text-mute)"
          }}>{i + 1}</div>
            <div style={{ flex: 1, fontSize: 13, color: "var(--white)" }}>{r.label}</div>
            <span className="chip" style={{ fontSize: 10, padding: "2px 7px" }}>{r.level}</span>
            <div style={{ fontSize: 13, fontWeight: 600, color: "var(--accent)" }}>{r.impact} k€</div>
          </div>
        )}
      </div>

      {/* Floating chip — durée */}
      <div style={{ position: "absolute", top: 8, left: 0, transform: "rotate(-4deg)" }}>
        <div className="card" style={{ padding: "10px 14px", display: "flex", alignItems: "center", gap: 8, boxShadow: "var(--sh-md)" }}>
          <div style={{
            width: 24, height: 24, borderRadius: 6,
            background: "var(--accent-dim)", border: "1px solid var(--border)",
            color: "var(--accent)",
            display: "flex", alignItems: "center", justifyContent: "center"
          }}>
            <Icon name="clock" size={12} />
          </div>
          <div>
            <div style={{ fontSize: 11, color: "var(--gray)" }}>Durée moyenne</div>
            <div style={{ fontSize: 13, fontWeight: 600, color: "var(--white)" }}>32 min 14</div>
          </div>
        </div>
      </div>

      {/* Floating chip — benchmark */}
      <div style={{ position: "absolute", top: 200, left: -40, transform: "rotate(3deg)" }}>
        <div className="card" style={{ width: 200, boxShadow: "var(--sh-md)", padding: "14px 16px" }}>
          <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: "0.1em", color: "var(--text-mute)", marginBottom: 8 }}>
            BENCHMARK SECTEUR
          </div>
          <div style={{ display: "flex", alignItems: "flex-end", gap: 3, height: 36, marginBottom: 8 }}>
            {[18, 28, 42, 62, 71, 45, 32, 22].map((v, i) =>
            <div key={i} style={{
              flex: 1,
              background: i === 3 ? "var(--accent)" : "var(--gray-dim)",
              borderRadius: 2,
              height: `${v}%`,
              transition: "height .4s ease"
            }} />
            )}
          </div>
          <div style={{ fontSize: 12, color: "var(--white)" }}>
            Vous êtes dans le <strong style={{ color: "var(--accent)" }}>top 35%</strong>
          </div>
        </div>
      </div>
    </div>);

}

window.Landing = Landing;