/* Page détail — Fonctionnalités : les écrans réels de l'espace client, expliqués. */
const { Button, Card, Badge, Icon } = window.NabooDesignSystem_955dca;
const S = window.NabooSite;
const HOME = "Accueil.html";

function FeatRow({ overline, title, text, points, src, alt, slides, note, reverse }) {
  return (
    <section className="mk-section-tight">
      <div className="mk-container">
        <div className="mk-feat-row" style={{ display: "grid", gridTemplateColumns: "1fr 1.25fr", gap: 56, alignItems: "center", direction: reverse ? "rtl" : "ltr" }}>
          <div style={{ direction: "ltr" }}>
            <p className="mk-overline">{overline}</p>
            <h2 className="mk-h2">{title}</h2>
            <p className="mk-sub">{text}</p>
            <ul className="mk-check-list" style={{ marginTop: 22 }}>
              {points.map((p) => (
                <li key={p}><Icon name="check" size={17} color="var(--positive)" style={{ marginTop: 2, flex: "none" }} />{p}</li>
              ))}
            </ul>
          </div>
          <div style={{ direction: "ltr" }}>
            <S.DesktopMock src={src} alt={alt} slides={slides} note={note} />
          </div>
        </div>
      </div>
    </section>
  );
}

function PageFonctionnalites() {
  return (
    <div id="top" data-screen-label="Fonctionnalités">
      <S.SiteNav dark active="fonctionnalites" home={HOME} />

      <header className="mk-dark" style={{ position: "relative", overflow: "hidden", padding: "88px 0 72px" }}>
        <div className="mk-glow"></div>
        <S.Cosmos />
        <div className="mk-container" style={{ position: "relative" }}>
          <p className="mk-overline">L'app Naboo</p>
          <h1 className="mk-h1" style={{ maxWidth: 760 }}>Chaque écran répond à une <span className="mk-marker">question simple</span>.</h1>
          <p className="mk-lead">
            Où en est mon argent ? Qu'est-ce que je détiens ? Comment tout cela se répartit-il ?
            Voici les écrans de l'espace client, tels que vous les utiliserez — de vrais écrans, pas des visuels retouchés.
          </p>
          <div className="mk-cta-row">
            <a href={S.CLIENT_URL}><Button size="lg" trailingIcon={<Icon name="arrow-right" size={18} color="#fff" />}>Essayer l'espace client</Button></a>
            <a href={HOME} style={{ color: "rgba(255,255,255,0.75)", fontWeight: 700, fontSize: 15, padding: "12px 8px" }}>Retour à l'accueil</a>
          </div>
        </div>
      </header>

      <FeatRow
        overline="Tableau de bord"
        title="Votre situation, en une page"
        text="La valeur totale de votre portefeuille, son évolution, et les chiffres qui comptent : plus-values latentes et réalisées, semaine en cours, santé du portefeuille."
        points={[
          "Valeur totale et évolution, mises à jour chaque jour",
          "Objectif annuel et comparaison avec un indice de référence",
          "Versements PEA suivis par rapport au plafond",
          "Dividendes estimés sur vos positions",
        ]}
        src="site/apercu-tableau-de-bord.png"
        alt="Tableau de bord : valeur totale, plus-values, objectif"
        note="L'écran que vous ouvrirez chaque matin"
        slides={[
          { src: "site/apercu-tableau-de-bord.png", label: "Synthèse", alt: "Tableau de bord : valeur totale et plus-values" },
          { src: "site/apercu-tableau-de-bord-2.png", label: "Objectif & évolution", alt: "Tableau de bord : objectif annuel, benchmark et évolution" },
        ]}
      />

      <FeatRow
        reverse
        overline="Portefeuille"
        title="Chaque ligne, noir sur blanc"
        text="Toutes vos positions, avec leur cours, leur prix de revient et leur plus ou moins-value, en euros d'abord, en pourcentage ensuite. Les pertes s'affichent comme les gains : sans détour."
        points={[
          "Positions PEA et CTO, espèces incluses",
          "Cours actualisés automatiquement",
          "Plus ou moins-value par ligne, et poids dans le portefeuille",
          "Tri par valeur, plus-value ou poids, en un clic",
        ]}
        src="site/apercu-portefeuille.png"
        alt="Portefeuille : lignes, cours, plus-values"
        slides={[
          { src: "site/apercu-portefeuille.png", label: "Vue d'ensemble", alt: "Portefeuille : PEA, CTO, espèces et début des lignes" },
          { src: "site/apercu-portefeuille-2.png", label: "Les lignes", alt: "Portefeuille : chaque ligne avec cours, prix de revient et plus-value" },
        ]}
      />

      <FeatRow
        overline="Watchlist"
        title="Gardez un œil sur ce que vous ne détenez pas encore"
        text="Suivez les valeurs qui vous intéressent sans les posséder : cours et variation du jour en direct, tendances par secteur, et les grands repères de marché en un coup d'œil."
        points={[
          "Cours et variation du jour, actualisés en direct",
          "Repères de marché : or, pétrole, CAC 40, EUR/USD, Bitcoin",
          "Valeurs regroupées par secteur, avec la tendance du jour",
          "Alertes de cours : soyez prévenu dès qu'un seuil est franchi",
        ]}
        src="site/apercu-watchlist.png"
        alt="Watchlist : valeurs suivies, repères de marché, alertes de cours"
        slides={[
          { src: "site/apercu-watchlist.png", label: "Marché & secteurs", alt: "Watchlist : indicateurs de marché et tendance par secteur" },
          { src: "site/apercu-watchlist-2.png", label: "Valeurs suivies", alt: "Watchlist : valeurs suivies avec jauges et alertes de cours" },
        ]}
      />

      <FeatRow
        reverse
        overline="Patrimoine"
        title="Au-delà de la bourse"
        text="Le portefeuille géré dans Naboo, plus vos autres actifs (assurance-vie, immobilier, livrets) pour une vision patrimoniale complète, dettes comprises."
        points={[
          "Patrimoine net et brut, endettement suivi",
          "Répartition patrimoniale en un graphique",
          "Actifs hors bourse ajoutés en deux clics",
          "Part gérée en bourse toujours visible",
        ]}
        src="site/apercu-patrimoine.png"
        alt="Patrimoine : répartition, patrimoine net, autres actifs"
      />

      <FeatRow
        overline="Ventes"
        title="Chaque vente, et ce qu'elle a vraiment rapporté"
        text="Toutes vos ventes de l'année, gagnantes ou perdantes, avec la plus-value réalisée, la fiscalité estimée et le détail mois par mois. De quoi savoir où vous en êtes, avant même la déclaration."
        points={[
          "Plus-value réalisée et taux de réussite de l'exercice",
          "Fiscalité estimée CTO (flat tax) et PEA, export PDF",
          "Plus-values mois par mois, comparées à votre objectif",
          "Historique complet, conservé année après année",
        ]}
        src="site/apercu-ventes.png"
        alt="Ventes : plus-value réalisée, fiscalité, détail par mois"
        note="Tout est déjà prêt pour la déclaration"
        slides={[
          { src: "site/apercu-ventes.png", label: "Synthèse & fiscalité", alt: "Ventes : plus-value réalisée, taux de réussite et fiscalité" },
          { src: "site/apercu-ventes-2.png", label: "Mois par mois", alt: "Ventes : plus-values mensuelles, répartition et historique" },
        ]}
      />

      <section className="mk-section-tight" style={{ paddingTop: 0, paddingBottom: 0 }}>
        <div className="mk-container" style={{ maxWidth: 768 }}>
          <S.AdvisorMini note="Un écran n'est pas clair ? Dites-le-lui, il vous le montre en personne." />
        </div>
      </section>

      <section className="mk-section-tight" style={{ position: "relative", overflow: "hidden" }}>
        <div className="mk-orbit-motif left" aria-hidden="true"></div>
        <div className="mk-container" style={{ position: "relative", zIndex: 1 }}>
          <div className="mk-center" style={{ marginBottom: 40 }}>
            <p className="mk-overline">Et aussi</p>
            <h2 className="mk-h2">Ce qui travaille en coulisses</h2>
          </div>
          <div className="mk-grid-4">
            {[
              { icon: "message-circle", title: "Une vraie personne derrière", text: "Une question sur un écran ? Sébastien vous répond. Pas de robot, pas de file d'attente." },
              { icon: "download", title: "Vos données à vous", text: "Exportez votre profil complet en un fichier, réimportable partout." },
              { icon: "refresh-cw", title: "Cours automatiques", text: "Les valorisations se rafraîchissent sans que vous n'ayez rien à faire." },
              { icon: "eye", title: "Lecture seule", text: "Naboo affiche et explique. Aucune opération n'est possible depuis l'app." },
            ].map((f) => (
              <Card key={f.title} variant="flat" 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>
            ))}
          </div>
        </div>
      </section>

      <section className="mk-section-tight">
        <div className="mk-container">
          <div className="mk-cta-band">
            <h2>Le mieux, c'est de l'ouvrir.</h2>
            <p>L'espace client de démonstration est accessible dès maintenant.</p>
            <a href={S.CLIENT_URL}><Button size="lg" variant="solid" style={{ background: "#fff", color: "var(--brand-blue-700)" }}>Ouvrir l'espace client</Button></a>
          </div>
          <p style={{ textAlign: "center", marginTop: 22, fontSize: 14.5, fontWeight: 600, color: "var(--text-muted)" }}>
            Et ensuite ? <a href="Tarifs.html" style={{ color: "var(--text-link)", fontWeight: 700 }}>Voir les tarifs</a>
            <span aria-hidden="true" style={{ margin: "0 10px", color: "var(--text-faint)" }}>·</span>
            <a href="Gestion.html" style={{ color: "var(--text-link)", fontWeight: 700 }}>Découvrir la gestion de portefeuille</a>
          </p>
        </div>
      </section>

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

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