/* Proposition B — « Panorama » : hero sombre immersif, chiffres, sections denses. */
const { Button, Card, Badge, Icon, Stat } = window.NabooDesignSystem_955dca;
const S = window.NabooSite;

function PropB() {
  return (
    <div id="top" data-screen-label="Accueil">
      <S.SiteNav dark />

      <header className="mk-dark" style={{ position: "relative", overflow: "hidden", paddingBottom: 0 }}>
        <div className="mk-glow"></div>
        <S.Cosmos />
        <div className="mk-container mk-center" style={{ position: "relative", padding: "88px 24px 0" }}>
          <Badge tone="brand" style={{ marginBottom: 20 }}>Suivi de placements + gestion au résultat</Badge>
          <h1 className="mk-h1" style={{ maxWidth: 760, margin: "0 auto 20px" }}>Votre argent, <span className="mk-marker">enfin lisible</span>.</h1>
          <p className="mk-lead" style={{ maxWidth: 560 }}>
            Réunissez tous vos comptes sous un même ciel, comprenez enfin où en est
            votre argent, et parlez à un vrai conseiller, payé seulement quand vous gagnez.
          </p>
          <div className="mk-cta-row" style={{ justifyContent: "center" }}>
            <a href={S.CLIENT_URL}><Button size="lg" trailingIcon={<Icon name="arrow-right" size={18} color="#fff" />}>Ouvrir l'espace client</Button></a>
            <a href="#tarifs" style={{ color: "rgba(255,255,255,0.75)", fontWeight: 700, fontSize: 15, padding: "12px 8px" }}>Voir les tarifs</a>
          </div>
          <div style={{ margin: "56px auto 0", maxWidth: 960, textAlign: "left" }}>
            <S.DesktopMock />
          </div>
        </div>
      </header>

      <section className="mk-dark" style={{ padding: "40px 0 64px", borderTop: "1px solid rgba(255,255,255,0.07)", position: "relative" }}>
        <div className="mk-container">
          <div className="mk-glass mk-band-stats" style={{ padding: "30px 40px" }}>
          {[
            { k: "Patrimoine suivi", to: 240, suffix: "\u00a0M€" },
            { k: "Comptes connectés", to: 18400, suffix: "" },
            { k: "Abonnement", to: 5, suffix: "\u00a0€ / mois" },
          ].map((s) => (
            <div key={s.k} style={{ textAlign: "center", minWidth: 160 }}>
              <div style={{ fontSize: 11.5, fontWeight: 800, letterSpacing: "0.13em", textTransform: "uppercase", color: "rgba(255,255,255,0.45)", marginBottom: 8, whiteSpace: "nowrap" }}>{s.k}</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 34, letterSpacing: "-0.02em", color: "#fff", fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" }}><S.CountUp to={s.to} suffix={s.suffix} /></div>
            </div>
          ))}
          </div>
        </div>
        <div className="mk-horizon"></div>
      </section>

      <section className="mk-section" id="fonctionnalites">
        <div className="mk-container">
          <div style={{ marginBottom: 44, maxWidth: 640 }}>
            <p className="mk-overline">Fonctionnalités</p>
            <h2 className="mk-h2">Le nécessaire, bien fait</h2>
          </div>
          <div className="mk-grid-2">
            {S.FEATURES.map((f) => <S.FeatureCard key={f.title} f={f} />)}
          </div>
          <div style={{ marginTop: 20 }}>
            <Card variant="flat" padding={28}>
              <div style={{ display: "flex", gap: 24, alignItems: "center", flexWrap: "wrap", justifyContent: "space-between" }}>
                <div style={{ maxWidth: 520 }}>
                  <h3 className="mk-feature-title">Et sur grand écran aussi</h3>
                  <p className="mk-feature-text">L'espace client fonctionne dans votre navigateur, au bureau comme sur votre téléphone. Mêmes données, même clarté.</p>
                </div>
                <a href={S.CLIENT_URL}><Button variant="secondary" trailingIcon={<Icon name="arrow-right" size={16} color="var(--brand-blue-600)" />}>Essayer l'espace client</Button></a>
              </div>
            </Card>
          </div>
        </div>
      </section>

      <section className="mk-section-tight" id="comment" style={{ background: "var(--surface-card)", borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)", position: "relative", overflow: "hidden" }}>
        <div className="mk-orbit-motif" aria-hidden="true"></div>
        <div className="mk-container" style={{ position: "relative", zIndex: 1 }}>
          <div style={{ marginBottom: 40 }}>
            <p className="mk-overline">Comment ça marche</p>
            <h2 className="mk-h2">Prenez de la hauteur en quelques minutes</h2>
          </div>
          <S.Steps />
        </div>
      </section>

      <section className="mk-section" id="gestion">
        <div className="mk-container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center" }} className="mk-gestion-grid">
            <div>
              <p className="mk-overline">Gestion de portefeuille</p>
              <h2 className="mk-h2">Pas de gain, pas de commission.</h2>
              <p className="mk-sub">
                La gestion Naboo ne facture aucun frais fixe. Votre conseiller est rémunéré
                par une commission au résultat, appliquée uniquement aux gains réellement
                réalisés et encadrée par une lettre de mission. Nos intérêts sont les vôtres.
              </p>
              <ul className="mk-check-list" style={{ marginTop: 24 }}>
                <li><Icon name="check" size={17} color="var(--positive)" style={{ marginTop: 2, flex: "none" }} />Mandat clair, résiliable à tout moment</li>
                <li><Icon name="check" size={17} color="var(--positive)" style={{ marginTop: 2, flex: "none" }} />Chaque opération visible dans votre espace client</li>
                <li><Icon name="check" size={17} color="var(--positive)" style={{ marginTop: 2, flex: "none" }} />Un conseiller joignable, pas une hotline</li>
              </ul>
              <div className="mk-cta-row" style={{ marginTop: 26 }}>
                <a href="devenir-client.html"><Button trailingIcon={<Icon name="arrow-right" size={16} color="#fff" />}>Devenir client</Button></a>
                <a href="Gestion.html" style={{ color: "var(--brand-blue-600)", fontWeight: 700, fontSize: 14.5, padding: "12px 8px" }}>En savoir plus</a>
              </div>
            </div>
            <Card variant="dark" padding={32}>
              <p className="mk-overline" style={{ color: "var(--brand-blue)" }}>Exemple</p>
              <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", borderBottom: "1px solid rgba(255,255,255,0.1)", paddingBottom: 14 }}>
                  <span style={{ color: "rgba(255,255,255,0.65)", fontSize: 14.5 }}>Votre portefeuille progresse de</span>
                  <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, color: "var(--positive)", fontVariantNumeric: "tabular-nums" }}>+3 000 €</span>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", borderBottom: "1px solid rgba(255,255,255,0.1)", paddingBottom: 14 }}>
                  <span style={{ color: "rgba(255,255,255,0.65)", fontSize: 14.5 }}>Commission au résultat</span>
                  <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, color: "#fff", fontVariantNumeric: "tabular-nums" }}>selon mandat</span>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                  <span style={{ color: "rgba(255,255,255,0.65)", fontSize: 14.5 }}>Votre portefeuille stagne ou baisse</span>
                  <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, color: "#fff", fontVariantNumeric: "tabular-nums" }}>0 €</span>
                </div>
              </div>
            </Card>
          </div>
        </div>
      </section>

      <section className="mk-section-tight" id="conseiller">
        <div className="mk-container">
          <div style={{ marginBottom: 32, maxWidth: 640 }}>
            <p className="mk-overline">Qui gère votre argent</p>
            <h2 className="mk-h2">Un conseiller, en chair et en os</h2>
          </div>
          <S.AdvisorSection />
        </div>
      </section>

      <section className="mk-section-tight" id="confiance" style={{ background: "var(--surface-card)", borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)" }}>
        <div className="mk-container">
          <div style={{ marginBottom: 36, maxWidth: 640 }}>
            <p className="mk-overline">Sécurité &amp; cadre réglementaire</p>
            <h2 className="mk-h2" style={{ fontSize: 28 }}>Ce qui vous protège</h2>
          </div>
          <S.SecurityRow />
          <hr className="mk-rule" style={{ margin: "40px 0" }} />
          <S.RegulatorySection />
        </div>
      </section>

      <section className="mk-section" id="temoignages" style={{ background: "linear-gradient(180deg, var(--mk-warm-050), transparent 60%)" }}>
        <div className="mk-container">
          <div className="mk-center" style={{ marginBottom: 40 }}>
            <p className="mk-overline">Ils utilisent Naboo</p>
            <h2 className="mk-h2">Ils dorment mieux depuis</h2>
          </div>
          <S.Quotes />
        </div>
      </section>

      <section className="mk-section-tight" id="analyse">
        <div className="mk-container">
          <Card variant="flat" padding={28}>
            <div style={{ display: "flex", gap: 24, alignItems: "center", flexWrap: "wrap", justifyContent: "space-between" }}>
              <div style={{ maxWidth: 560 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
                  <h3 className="mk-feature-title" style={{ margin: 0 }}>Faites analyser votre portefeuille</h3>
                  <Badge tone="brand">14 €</Badge>
                </div>
                <p className="mk-feature-text">Frais cachés, doublons, risques mal répartis : un regard professionnel sur ce que vous détenez déjà. Rapport clair sous 72 h, sans abonnement ni engagement.</p>
                  <a href="Analyse.html#exemple" style={{ color: "var(--text-link)", fontWeight: 700, fontSize: 13.5 }}>Voir un exemple de rapport →</a>
              </div>
              <a href="Analyse.html"><Button variant="secondary" trailingIcon={<Icon name="arrow-right" size={16} color="var(--brand-blue-600)" />}>Demander une analyse · 14 €</Button></a>
            </div>
          </Card>
        </div>
      </section>

      <section className="mk-section-tight" id="tarifs">
        <div className="mk-container">
          <div className="mk-center" style={{ marginBottom: 40 }}>
            <p className="mk-overline">Tarifs</p>
            <h2 className="mk-h2">5 € par mois. Le reste au résultat.</h2>
          </div>
          <S.PricingCards />
        </div>
      </section>

      <section className="mk-section-tight" id="faq" style={{ paddingBottom: 96 }}>
        <div className="mk-container" style={{ maxWidth: 780 }}>
          <div className="mk-center" style={{ marginBottom: 24 }}>
            <p className="mk-overline">Questions fréquentes</p>
          </div>
          <S.FAQ compact />
        </div>
      </section>

      <S.SiteFooter dark />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("site-root")).render(<PropB />);