/* Naboo — site vitrine : composants et contenus partagés entre les 3 propositions. */
const DS = window.NabooDesignSystem_955dca;
const { Button, Card, Badge, Delta, Stat, Icon, AreaChart, AllocationBar } = DS;
const { useState, useEffect, useRef } = React;

const ROOT = window.__nabooRoot || "";
const CLIENT_URL = ROOT + "espace-client/desktop-client.html";
const ICON_URL = ROOT + "site/naboo-icon.png";
const ADVISOR = {
  name: "Sébastien Puccinelli",
  role: "Votre conseiller · gestion de portefeuille",
  photo: ROOT + "site/sebastien-web.jpg",
  email: "naboo.placements@gmail.com",
};

/* Cadre réglementaire — valeurs à compléter marquées TODO (null). */
const LEGAL = {
  company: "iMinelli",
  siren: "995 066 453",
  orias: null,      // TODO : ajouter le numéro ORIAS (8 chiffres)
  statut: null,     // TODO : préciser le statut (CIF, COA/IAS…)
  mediateur: null,  // TODO : nom du médiateur de la consommation
  hosting: "France",
};

/* ---------------- Contenus ---------------- */
const FEATURES = [
  { icon: "wallet", title: "Tous vos comptes réunis", text: "Assurance-vie, PEA, livrets, crypto : une seule vue, toujours à jour." },
  { icon: "trending-up", title: "Une performance honnête", text: "Gains et pertes en euros d'abord. Pas de jargon, pas d'acronymes." },
  { icon: "chart-pie", title: "Une répartition lisible", text: "Où est votre argent, en un coup d'œil : par actif, enveloppe et horizon." },
  { icon: "file-text", title: "Des rapports clairs", text: "Un bilan qui se lit en deux minutes, et vous dit s'il y a quelque chose à faire." },
];

const STEPS = [
  { title: "Créez votre espace", text: "En quelques minutes, depuis votre navigateur ou votre téléphone. Sans engagement." },
  { title: "Connectez vos comptes", text: "Assurance-vie, PEA, comptes-titres, livrets, crypto : tout est réuni, en lecture seule." },
  { title: "Suivez, comprenez, décidez", text: "Performance, répartition et explications claires, mises à jour chaque jour." },
];

const SECURITY = [
  { icon: "eye", title: "Lecture seule", text: "L'agrégation ne permet aucune opération sur vos comptes." },
  { icon: "lock", title: "Chiffrement", text: "Vos identifiants et vos données sont chiffrés de bout en bout." },
  { icon: "landmark", title: "Hébergé en France", text: "Vos données restent sur des serveurs situés en France." },
  { icon: "shield", title: "Jamais revendues", text: "Vos données ne sont ni partagées, ni revendues. Jamais." },
];

const QUOTES = [
  { text: "Pour la première fois, je sais exactement où en est mon argent. Tout est au même endroit, et c'est clair.", name: "Camille D.", meta: "34 ans · Lyon · cliente depuis 2023", initial: "C", color: "var(--brand-blue)" },
  { text: "Le bilan mensuel est d'une clarté rare. Je le lis en deux minutes, et je sais quoi faire.", name: "Marc L.", meta: "58 ans · Bordeaux · gestion de portefeuille", initial: "M", color: "var(--brand-indigo)" },
  { text: "La gestion au résultat change tout : si mon portefeuille ne progresse pas, je ne paie rien.", name: "Anne R.", meta: "46 ans · Nantes · cliente depuis 2024", initial: "A", color: "var(--positive)" },
];

const FAQS = [
  { q: "Naboo peut-il effectuer des opérations sur mes comptes ?", a: "Non. L'agrégation fonctionne en lecture seule : Naboo lit vos soldes et vos positions pour les afficher, mais ne peut ni acheter, ni vendre, ni virer quoi que ce soit." },
  { q: "Que comprend l'abonnement à 5 € par mois ?", a: "L'accès complet à l'app et à l'espace client en ligne : agrégation de tous vos comptes, suivi de performance, répartition, rapports réguliers et export de vos données. Sans engagement." },
  { q: "Comment fonctionne la rémunération au résultat ?", a: "Pour la gestion de portefeuille, nous ne facturons aucun frais fixe. Notre commission ne s'applique qu'aux gains nets, calculés au-dessus de votre plus-haut historique (high-water mark) et une fois votre seuil de déclenchement atteint, selon les termes de votre lettre de mission. Concrètement : vous n'êtes jamais facturé deux fois sur la même hausse, et une année sans gain, vous ne payez rien." },
  { q: "Puis-je résilier à tout moment ?", a: "Oui. L'abonnement est sans engagement et se résilie en un clic depuis votre espace client. Vous pouvez exporter toutes vos données avant de partir." },
  { q: "Mes données sont-elles en sécurité ?", a: "Oui. Elles sont chiffrées, hébergées en France, accessibles en lecture seule, et ne sont jamais revendues ni partagées avec des tiers." },
];

const PRICING = [
  {
    name: "L'app Naboo", price: "5 €", per: "/ mois", note: "ou 55 € / an — 1 mois offert", badge: "1ᵉʳ mois offert", badgeTone: "brand",
    items: ["1 mois d'essai gratuit à la création du compte", "Agrégation illimitée de vos comptes", "Performance, répartition et rapports", "Espace client web et mobile", "Export de vos données à tout moment"],
    cta: "Ouvrir l'espace client", href: CLIENT_URL, primary: true,
  },
  {
    name: "Gestion de portefeuille", price: "0 €", per: "de frais fixes", badge: "Commission au résultat", badgeTone: "positive",
    items: ["Mandat encadré par une lettre de mission", "Commission due seulement sur les gains nets (high-water mark)", "Rien à payer si votre portefeuille ne progresse pas", "Suivi transparent dans l'app, inclus"],
    cta: "Devenir client en gestion", href: ROOT + "devenir-client.html", primary: false,
  },
];

/* ---------------- Hooks utilitaires ---------------- */
function Cosmos() {
  return (
    <div className="mk-cosmos" aria-hidden="true">
      <div className="mk-stars"></div>
      <div className="mk-stars mk-stars-2"></div>
      <div className="mk-orbits">
        <span className="mk-orbit mk-orbit-1"></span>
        <span className="mk-orbit mk-orbit-2"></span>
        <span className="mk-orbit mk-orbit-3"></span>
      </div>
      <div className="mk-shooting"></div>
    </div>
  );
}

function useInView(ref) {
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el || seen) return;
    const io = new IntersectionObserver((entries) => {
      if (entries.some((e) => e.isIntersecting)) { setSeen(true); io.disconnect(); }
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [seen]);
  return seen;
}

function CountUp({ to, suffix = "", prefix = "", duration = 1500 }) {
  const ref = useRef(null);
  const seen = useInView(ref);
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (!seen) return;
    if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setVal(to); return; }
    let raf, start;
    const step = (t) => {
      if (start == null) start = t;
      const p = Math.min((t - start) / duration, 1);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(to * eased);
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [seen, to, duration]);
  const s = Math.round(val).toString().replace(/\B(?=(\d{3})+(?!\d))/g, "\u202f");
  return <span ref={ref}>{prefix}{s}{suffix}</span>;
}

/* ---------------- Composants ---------------- */
/* Logos des cartes acceptées (Visa, Mastercard, CB) — marques simplifiées en SVG inline. */
function AcceptedCards({ style, label = "Cartes acceptées" }) {
  const chip = { display: "block", borderRadius: 5 };
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 7, ...style }}>
      {label ? <span style={{ fontSize: 11.5, fontWeight: 600, color: "var(--text-faint)", marginRight: 1 }}>{label}</span> : null}
      {/* Visa */}
      <svg width="34" height="22" viewBox="0 0 48 30" role="img" aria-label="Visa" style={chip}>
        <rect x="0.5" y="0.5" width="47" height="29" rx="5" fill="#fff" stroke="#E3E8F1" />
        <text x="24" y="20" textAnchor="middle" fontFamily="Arial, sans-serif" fontSize="13" fontWeight="700" fontStyle="italic" letterSpacing="0.5" fill="#1434CB">VISA</text>
      </svg>
      {/* Mastercard */}
      <svg width="34" height="22" viewBox="0 0 48 30" role="img" aria-label="Mastercard" style={chip}>
        <rect x="0.5" y="0.5" width="47" height="29" rx="5" fill="#fff" stroke="#E3E8F1" />
        <circle cx="20" cy="15" r="8" fill="#EB001B" />
        <circle cx="28" cy="15" r="8" fill="#F79E1B" fillOpacity="0.9" />
      </svg>
      {/* CB — Cartes Bancaires */}
      <svg width="34" height="22" viewBox="0 0 48 30" role="img" aria-label="CB" style={chip}>
        <rect x="0.5" y="0.5" width="47" height="29" rx="5" fill="#fff" stroke="#E3E8F1" />
        <text x="24" y="20" textAnchor="middle" fontFamily="Arial, sans-serif" fontSize="13" fontWeight="800" letterSpacing="0.5" fill="#16607A">CB</text>
      </svg>
      {/* American Express */}
      <svg width="34" height="22" viewBox="0 0 48 30" role="img" aria-label="American Express" style={chip}>
        <rect x="0.5" y="0.5" width="47" height="29" rx="5" fill="#1F72CF" stroke="#1A63B4" />
        <text x="24" y="19" textAnchor="middle" fontFamily="Arial, sans-serif" fontSize="10" fontWeight="800" letterSpacing="0.3" fill="#fff">AMEX</text>
      </svg>
    </div>
  );
}

function SiteNav({ dark, active, home = "" }) {
  const [open, setOpen] = useState(false);
  const [openGroup, setOpenGroup] = useState(null);
  const navRef = useRef(null);
  useEffect(() => {
    if (!openGroup) return;
    const close = (e) => { if (navRef.current && !navRef.current.contains(e.target)) setOpenGroup(null); };
    const esc = (e) => { if (e.key === "Escape") setOpenGroup(null); };
    document.addEventListener("pointerdown", close);
    document.addEventListener("keydown", esc);
    return () => { document.removeEventListener("pointerdown", close); document.removeEventListener("keydown", esc); };
  }, [openGroup]);
  const links = [
    { label: "Pourquoi", href: "Pourquoi.html", key: "pourquoi" },
    { label: "Fonctionnalités", href: "fonctionnalites.html", key: "fonctionnalites" },
    { label: "Nos offres", key: "offres", children: [
      { label: "Gestion", href: "Gestion.html", key: "gestion" },
      { label: "Analyse", href: "Analyse.html", key: "analyse" },
    ] },
    { label: "Marchés", href: "marches.html", key: "marches" },
    { label: "Tarifs", href: "Tarifs.html", key: "tarifs" },
    { label: "À propos", key: "apropos", children: [
      { label: "Sébastien", href: "Sebastien.html", key: "sebastien" },
      { label: "Questions", href: "Questions.html", key: "faq" },
    ] },
  ];
  const iconColor = dark ? "#fff" : "var(--text-strong)";
  const caret = (up) => (
    <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true" style={{ transition: "transform 150ms cubic-bezier(0.2,0,0,1)", transform: up ? "rotate(180deg)" : "none" }}><path d="M1.5 3.5 L5 7 L8.5 3.5" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"></path></svg>
  );
  return (
    <nav className={"mk-nav" + (dark ? " mk-nav-dark" : "")} ref={navRef}>
      <div className="mk-nav-inner">
        <a className="mk-logo" href={home ? ROOT + home : "#top"}><img src={ICON_URL} alt="Naboo" />Naboo</a>
        <div className="mk-nav-links">
          {links.map((l) => l.children ? (
            <div key={l.key} className="mk-nav-group">
              <button
                type="button"
                className={"mk-nav-group-btn" + (l.children.some((c) => c.key === active) ? " mk-nav-active" : "")}
                aria-expanded={openGroup === l.key}
                onClick={() => setOpenGroup((g) => (g === l.key ? null : l.key))}
              >{l.label}{caret(openGroup === l.key)}</button>
              {openGroup === l.key && (
                <div className="mk-nav-dropdown">
                  {l.children.map((c) => (
                    <a key={c.key} className={"mk-nav-link" + (active === c.key ? " mk-nav-active" : "")} href={ROOT + c.href}>{c.label}</a>
                  ))}
                </div>
              )}
            </div>
          ) : (
            <a key={l.key} className={"mk-nav-link" + (active === l.key ? " mk-nav-active" : "")} href={ROOT + l.href}>{l.label}</a>
          ))}
          <a href={CLIENT_URL}><Button size="sm" leadingIcon={<Icon name="user" size={16} color="#fff" />} style={{ whiteSpace: "nowrap" }}>Espace client</Button></a>
        </div>
        <button className="mk-burger" aria-label="Menu" aria-expanded={open} onClick={() => setOpen((o) => !o)}>
          <Icon name={open ? "x" : "menu"} size={22} color={iconColor} />
        </button>
      </div>
      {open && (
        <div className="mk-nav-mobile">
          {links.flatMap((l) => l.children
            ? [<div key={l.key} className="mk-nav-mobile-group">{l.label}</div>].concat(
                l.children.map((c) => (
                  <a key={c.key} className={"mk-nav-link mk-nav-sub" + (active === c.key ? " mk-nav-active" : "")} href={ROOT + c.href} onClick={() => setOpen(false)}>{c.label}</a>
                )))
            : [<a key={l.key} className={"mk-nav-link" + (active === l.key ? " mk-nav-active" : "")} href={ROOT + l.href} onClick={() => setOpen(false)}>{l.label}</a>]
          )}
          <a href={CLIENT_URL} style={{ marginTop: 12 }}><Button block leadingIcon={<Icon name="user" size={16} color="#fff" />}>Espace client</Button></a>
        </div>
      )}
    </nav>
  );
}

function PhoneMock() {
  return (
    <div className="mk-phone">
      <div className="mk-phone-screen">
        <div className="mk-phone-status"><span>9:41</span><span style={{ display: "flex", gap: 5 }}><Icon name="signal" size={13} color="var(--text-strong)" /><Icon name="wifi" size={13} color="var(--text-strong)" /><Icon name="battery-full" size={15} color="var(--text-strong)" /></span></div>
        <div className="mk-phone-body">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "2px 4px" }}>
            <div>
              <div style={{ fontSize: 12, fontWeight: 700, color: "var(--text-muted)" }}>Bonjour Camille</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 700, color: "var(--text-strong)", letterSpacing: "-0.01em" }}>Votre patrimoine</div>
            </div>
            <div style={{ width: 32, height: 32, borderRadius: "50%", background: "var(--brand-gradient)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 13, fontWeight: 700 }}>C</div>
          </div>
          <Card variant="brand" padding={16}>
            <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: "0.12em", opacity: 0.8 }}>PATRIMOINE TOTAL</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 27, fontWeight: 700, letterSpacing: "-0.02em", fontVariantNumeric: "tabular-nums", margin: "4px 0 6px" }}>128 460 €</div>
            <div style={{ display: "flex", gap: 8, alignItems: "center", fontSize: 12.5 }}>
              <span style={{ background: "rgba(255,255,255,0.18)", borderRadius: 999, padding: "3px 9px", fontWeight: 700, whiteSpace: "nowrap" }}>▲ +4,82 %</span>
              <span style={{ opacity: 0.8, whiteSpace: "nowrap" }}>+1 240 € ce mois-ci</span>
            </div>
            <AreaChart data={[100,102,101,105,104,108,107,112,110,116,115,121]} height={54} color="#ffffff" fill strokeWidth={2} style={{ marginTop: 10, width: "100%" }} />
          </Card>
          <Card padding={14}>
            <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: "0.12em", color: "var(--text-faint)", marginBottom: 10 }}>RÉPARTITION</div>
            <AllocationBar height={10} showLegend segments={[
              { label: "Actions", value: 42, color: "var(--brand-blue)" },
              { label: "Assurance-vie", value: 30, color: "var(--brand-indigo)" },
              { label: "Livrets", value: 18, color: "var(--positive)" },
              { label: "Crypto", value: 10, color: "var(--warning)" },
            ]} />
          </Card>
          <Card padding={6} style={{ flex: 1, overflow: "hidden" }}>
            {[
              { n: "PEA Fortuneo", v: "32 410 €", d: 6.2, c: "var(--brand-blue)", s: "P" },
              { n: "Assurance-vie Linxea", v: "54 120 €", d: 3.1, c: "var(--brand-indigo)", s: "A" },
              { n: "Livret A", v: "12 300 €", d: null, c: "var(--positive)", s: "L" },
            ].map((r, i) => (
              <div key={r.n} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 10px", borderTop: i ? "1px solid var(--border-subtle)" : "none" }}>
                <div style={{ width: 30, height: 30, borderRadius: 10, flex: "none", background: r.c, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 13, fontWeight: 800 }}>{r.s}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: "var(--text-strong)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{r.n}</div>
                  <div style={{ fontSize: 12, color: "var(--text-muted)", fontVariantNumeric: "tabular-nums" }}>{r.v}</div>
                </div>
                {r.d !== null ? <Delta value={r.d} /> : <span style={{ fontSize: 12, fontWeight: 700, color: "var(--text-faint)" }}>—</span>}
              </div>
            ))}
          </Card>
        </div>
      </div>
    </div>
  );
}

function DesktopMock({ src = "site/apercu-tableau-de-bord.png", alt = "Tableau de bord de l'espace client Naboo", slides, note }) {
  const list = slides && slides.length ? slides : [{ src: src, alt: alt }];
  const [idx, setIdx] = useState(0);
  const cur = list[Math.min(idx, list.length - 1)];
  return (
    <div>
    <div className="mk-desktop">
      <div className="mk-desktop-bar">
        <span className="mk-desktop-dot" /><span className="mk-desktop-dot" /><span className="mk-desktop-dot" />
        <span style={{ marginLeft: 12, fontSize: 12.5, fontWeight: 700, color: "var(--text-muted)" }}>app.naboo.fr · Espace client</span>
        {list.length > 1 ? (
          <span style={{ marginLeft: "auto", display: "flex", gap: 4 }}>
            {list.map((s, k) => (
              <button key={s.src} onClick={() => setIdx(k)} style={{ height: 26, padding: "0 11px", borderRadius: 999, border: "none", cursor: "pointer", fontFamily: "var(--font-body)", fontSize: 11.5, fontWeight: 700, background: idx === k ? "var(--brand-gradient)" : "transparent", color: idx === k ? "#fff" : "var(--text-muted)", whiteSpace: "nowrap" }}>{s.label || "Vue " + (k + 1)}</button>
            ))}
          </span>
        ) : null}
      </div>
      <a href={CLIENT_URL} title="Ouvrir l'espace client">
        <img src={cur.src} alt={cur.alt || alt} loading="lazy" style={{ display: "block", width: "100%" }} />
      </a>
    </div>
    {note ? (
      <div className="mk-hand-wrap" aria-hidden="true">
        <svg className="mk-hand-arrow" width="34" height="32" viewBox="0 0 34 32" fill="none">
          <path d="M30 30 C22 26 12 18 9 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
          <path d="M4 12 L9 3 L16 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        <span className="mk-hand-note">{note}</span>
      </div>
    ) : null}
    </div>
  );
}

function FeatureCard({ f, flat }) {
  return (
    <Card variant={flat ? "flat" : "default"} padding={24}>
      <div className="mk-icon-tile"><Icon name={f.icon} size={22} color="var(--brand-blue-600)" /></div>
      <h3 className="mk-feature-title">{f.title}</h3>
      <p className="mk-feature-text">{f.text}</p>
    </Card>
  );
}

function Steps({ vertical }) {
  return (
    <div className={vertical ? "" : "mk-grid-3"} style={vertical ? { display: "flex", flexDirection: "column", gap: 28 } : null}>
      {STEPS.map((s, i) => (
        <div className="mk-step" key={s.title}>
          <div className="mk-step-num">{i + 1}</div>
          <div>
            <h3 className="mk-feature-title">{s.title}</h3>
            <p className="mk-feature-text">{s.text}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

function PricingCards() {
  return (
    <div className="mk-grid-2" style={{ maxWidth: 860, margin: "0 auto" }}>
      {PRICING.map((p) => (
        <Card key={p.name} padding={28} variant={p.primary ? "default" : "flat"} style={p.primary ? { border: "1.5px solid var(--brand-blue)", boxShadow: "var(--shadow-brand, 0 12px 30px -10px rgba(85,137,255,0.45))" } : null}>
          <Badge tone={p.badgeTone || (p.primary ? "brand" : "positive")} style={{ marginBottom: 14 }}>{p.badge}</Badge>
          <h3 className="mk-feature-title" style={{ margin: "0 0 6px" }}>{p.name}</h3>
          <div className="mk-price">{p.price} <small>{p.per}</small></div>
          {p.note ? <div style={{ fontSize: 13, fontWeight: 700, color: "var(--brand-blue-600)", margin: "2px 0 0" }}>{p.note}</div> : null}
          <ul className="mk-check-list" style={{ marginTop: 18 }}>
            {p.items.map((it) => (
              <li key={it}><Icon name="check" size={17} color="var(--positive)" style={{ marginTop: 2, flex: "none" }} />{it}</li>
            ))}
          </ul>
          <a href={p.href} style={{ display: "block", marginTop: 24 }}>
            <Button variant={p.primary ? "primary" : "secondary"} block>{p.cta}</Button>
          </a>
        </Card>
      ))}
    </div>
  );
}

function FAQ({ compact, items }) {
  const [open, setOpen] = useState(0);
  const list = items || FAQS;
  return (
    <div>
      {list.map((f, i) => (
        <div className="mk-faq-item" key={f.q}>
          <button className="mk-faq-q" onClick={() => setOpen(open === i ? -1 : i)} style={compact ? { fontSize: 15, padding: "16px 4px" } : null}>
            {f.q}
            <span className={"mk-faq-chev" + (open === i ? " open" : "")}><Icon name="chevron-down" size={18} color="var(--text-faint)" /></span>
          </button>
          {open === i ? <p className="mk-faq-a">{f.a}</p> : null}
        </div>
      ))}
    </div>
  );
}

function Quotes() {
  return (
    <div className="mk-grid-3">
      {QUOTES.map((q, i) => (
        <Card key={q.name} variant="flat" padding={26} className={"mk-quote-card" + (i === 1 ? " mk-tilt" : "")}>
          <div className="mk-quote-mark">«</div>
          <p className="mk-quote-text">{q.text}</p>
          <div className="mk-quote-person">
            <div className="mk-quote-avatar" style={{ background: q.color }}>{q.initial}</div>
            <div>
              <div className="mk-quote-who">{q.name}</div>
              <div className="mk-quote-meta">{q.meta}</div>
            </div>
          </div>
        </Card>
      ))}
    </div>
  );
}

function AdvisorSection() {
  return (
    <Card variant="flat" padding={0} style={{ overflow: "hidden" }}>
      <div className="mk-advisor-grid">
        <div className="mk-advisor-photo">
          <img src={ADVISOR.photo} alt={ADVISOR.name} />
        </div>
        <div className="mk-advisor-body">
          <p className="mk-overline">Une personne, pas une hotline</p>
          <p className="mk-advisor-lead">Chez Naboo, vous parlez toujours à Sébastien.</p>
          <p className="mk-advisor-quote">
            « C'est moi qui gère votre portefeuille et qui vous réponds
            directement, sans numéro surtaxé ni robot. Mon métier&nbsp;: rendre votre argent lisible,
            et n'être payé que lorsque vous gagnez. Une question&nbsp;? Écrivez-moi, je vous réponds en personne. »
          </p>
          <p className="mk-advisor-hand">Écrivez-moi, vraiment. Sébastien</p>
          <div className="mk-advisor-sign">
            <div className="mk-advisor-name">{ADVISOR.name}</div>
            <div className="mk-advisor-role">{ADVISOR.role}</div>
          </div>
          <div className="mk-cta-row" style={{ marginTop: 22 }}>
            <a href={"mailto:" + ADVISOR.email}><Button trailingIcon={<Icon name="arrow-right" size={16} color="#fff" />}>Écrire à Sébastien</Button></a>
            <a href={"mailto:" + ADVISOR.email + "?subject=" + encodeURIComponent("15 min avec Sébastien")}><Button variant="secondary" leadingIcon={<Icon name="calendar" size={16} color="var(--brand-blue-600)" />}>Prendre 15 min</Button></a>
          </div>
          <div className="mk-advisor-promise"><span className="mk-warm-dot"></span>Répond en général sous quelques heures, par une vraie personne.</div>
        </div>
      </div>
    </Card>
  );
}

function Todo({ label }) {
  return <span className="mk-todo" title="À compléter">{label}</span>;
}

function AdvisorMini({ note }) {
  return (
    <div className="mk-advisor-mini">
      <img src={ADVISOR.photo} alt={ADVISOR.name} />
      <div style={{ minWidth: 0 }}>
        <div className="mk-advisor-mini-name">{ADVISOR.name}</div>
        <div className="mk-advisor-mini-role">{note || "C'est votre conseiller, il vous répond en personne."}</div>
      </div>
      <a href={"mailto:" + ADVISOR.email} className="mk-advisor-mini-link"><Icon name="mail" size={16} color="var(--brand-blue-600)" />Écrire</a>
    </div>
  );
}

function RegulatorySection() {
  const items = [
    { icon: "landmark", label: "Société", value: <span>{LEGAL.company} · SIREN {LEGAL.siren}</span> },
    { icon: "shield", label: "Immatriculation ORIAS", value: LEGAL.orias || <Todo label="N° ORIAS à ajouter" /> },
    { icon: "file-text", label: "Statut réglementaire", value: LEGAL.statut || <Todo label="À préciser" /> },
    { icon: "user", label: "Médiateur de la consommation", value: LEGAL.mediateur || <Todo label="Nom à ajouter" /> },
    { icon: "lock", label: "Hébergement des données", value: <span>En {LEGAL.hosting}</span> },
    { icon: "eye", label: "Vos comptes", value: <span>Agrégés en lecture seule</span> },
  ];
  return (
    <div>
      <div className="mk-grid-3 mk-reg-grid">
        {items.map((it) => (
          <div key={it.label} className="mk-reg-item">
            <div className="mk-icon-tile" style={{ marginBottom: 0, width: 38, height: 38, flex: "none" }}><Icon name={it.icon} size={19} color="var(--brand-blue-600)" /></div>
            <div>
              <div className="mk-reg-label">{it.label}</div>
              <div className="mk-reg-value">{it.value}</div>
            </div>
          </div>
        ))}
      </div>
      <div className="mk-reg-risk">
        <Icon name="info" size={18} color="var(--text-muted)" style={{ flex: "none", marginTop: 1 }} />
        <p>Investir comporte un risque de perte en capital. Les performances passées ne préjugent pas des performances futures. Nous ne vous promettons pas de gains : nous vous promettons de la clarté, et une rémunération alignée sur vos résultats.</p>
      </div>
    </div>
  );
}

function SecurityRow() {  return (
    <div className="mk-grid-4">
      {SECURITY.map((s) => (
        <div key={s.title} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
          <div className="mk-icon-tile" style={{ marginBottom: 0, width: 40, height: 40, flex: "none" }}><Icon name={s.icon} size={20} color="var(--brand-blue-600)" /></div>
          <div>
            <h3 className="mk-feature-title" style={{ fontSize: 15.5 }}>{s.title}</h3>
            <p className="mk-feature-text" style={{ fontSize: 13.5 }}>{s.text}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

function SiteFooter({ dark }) {
  return (
    <footer className={"mk-footer" + (dark ? " mk-footer-dark" : "")}>
      <div className="mk-container">
        <div className="mk-footer-grid">
          <div className="mk-logo" style={dark ? { color: "#fff" } : null}><img src={ICON_URL} alt="Naboo" />Naboo</div>
          <div className="mk-footer-links">
            <a href={ROOT + "Pourquoi.html"}>Pourquoi Naboo</a>
            <a href={ROOT + "fonctionnalites.html"}>Fonctionnalités</a>
            <a href={ROOT + "Gestion.html"}>Gestion</a>
            <a href={ROOT + "Sebastien.html"}>Votre conseiller</a>
            <a href={ROOT + "Tarifs.html"}>Tarifs</a>
            <a href={ROOT + "Questions.html"}>Questions</a>
            <a href={ROOT + "Analyse.html"}>Analyse de portefeuille</a>
            <a href={ROOT + "devenir-client.html"}>Devenir client</a>
            <a href={CLIENT_URL}>Espace client</a>
            <a href={ROOT + "legal/mentions-legales.html"}>Mentions légales</a>
            <a href={ROOT + "legal/confidentialite.html"}>Confidentialité</a>
            <a href={ROOT + "legal/cgu.html"}>Conditions générales</a>
            <a href={ROOT + "legal/cookies.html"}>Cookies</a>
            <a href="mailto:naboo.placements@gmail.com">Contact</a>
          </div>
        </div>
        <div className="mk-footer-human">
          <img src={ADVISOR.photo} alt="" loading="lazy" />
          <p>
            « Une question ? C'est moi qui lis et réponds aux e-mails. »
            <span className="mk-footer-sig">— Sébastien</span>{" "}
            <a href={"mailto:" + ADVISOR.email}>Lui écrire</a>
          </p>
        </div>
        <p className="mk-legal">
          <span className="mk-legal-reg">{LEGAL.company} · SIREN {LEGAL.siren} · ORIAS <span className="mk-todo mk-todo-inline">à compléter</span> · Données hébergées en France.</span><br />
          Naboo · maquette de démonstration. Investir comporte des risques de perte en capital. Les performances passées ne préjugent pas des performances futures. Les montants et comptes affichés sont fictifs.
        </p>
      </div>
    </footer>
  );
}

function CookieBanner() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    try { if (!localStorage.getItem("naboo:cookie-consent")) setShow(true); } catch (e) {}
  }, []);
  const choose = (v) => { try { localStorage.setItem("naboo:cookie-consent", v); } catch (e) {} setShow(false); };
  if (!show) return null;
  return (
    <div style={{ position: "fixed", left: 0, right: 0, bottom: 0, zIndex: 2147483000, display: "flex", justifyContent: "center", padding: "0 16px 16px", pointerEvents: "none" }}>
      <div style={{ pointerEvents: "auto", maxWidth: 720, width: "100%", background: "#fff", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-xl, 20px)", boxShadow: "var(--shadow-lg, 0 20px 50px -18px rgba(14,21,37,0.35))", padding: "18px 20px", display: "flex", gap: 18, alignItems: "center", flexWrap: "wrap" }}>
        <div style={{ flex: "1 1 300px", minWidth: 0 }}>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 15, color: "var(--text-strong)", marginBottom: 4 }}>Cookies</div>
          <p style={{ margin: 0, fontSize: 13, lineHeight: 1.55, color: "var(--text-muted)" }}>
            Nous utilisons uniquement les cookies nécessaires au fonctionnement du site. Aucun traceur
            publicitaire, aucune revente de données. <a href={ROOT + "legal/cookies.html"} style={{ color: "var(--text-link)", fontWeight: 700 }}>En savoir plus</a>.
          </p>
        </div>
        <div style={{ display: "flex", gap: 10, flex: "0 0 auto" }}>
          <Button variant="ghost" size="sm" onClick={() => choose("refused")}>Refuser</Button>
          <Button size="sm" onClick={() => choose("accepted")}>Accepter</Button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  NabooSite: {
    CLIENT_URL, ICON_URL, FEATURES, STEPS, SECURITY, QUOTES, FAQS, PRICING,
    ADVISOR, LEGAL, CountUp, Cosmos, AcceptedCards, CookieBanner,
    SiteNav, PhoneMock, DesktopMock, FeatureCard, Steps, PricingCards, FAQ, Quotes, AdvisorSection, AdvisorMini, RegulatorySection, SecurityRow, SiteFooter,
  },
});

/* Bandeau cookies — mont\u00e9 une fois, sur toutes les pages qui chargent ce fichier. */
(function mountCookieBanner() {
  if (typeof document === "undefined" || document.getElementById("naboo-cookie-root")) return;
  var el = document.createElement("div");
  el.id = "naboo-cookie-root";
  document.body.appendChild(el);
  ReactDOM.createRoot(el).render(<CookieBanner />);
})();