/* global React, Icon, Button, Overline, SectionHead, InboxPreview, Faq, CtaBand, useDemo */
const { useState: useStateH } = React;

function HomePage({ hero, heroShot }) {
  const openDemo = useDemo();

  return (
    <main>
      {/* HERO */}
      <section className="lx-hero lx-container">
        <div className="lx-hero__copy">
          <span className="lx-verified">Aucun entraînement sur vos données</span>
          <h1>L'assistant juridique pour <em>les juristes</em></h1>
          <p className="lx-hero__sub">Lexo AI trie, analyse et répond à vos e-mails et documents — pour les cabinets d'avocats comme pour les directions juridiques et financières. Une suite souveraine, hébergée en France, qui n'entraîne jamais ses modèles sur vos données.</p>
          <div className="lx-hero__actions">
            <Button variant="primary" size="lg" href="#/services">Découvrir les services <Icon name="arrow-right" /></Button>
          </div>
        </div>
        {heroShot && <InboxPreview />}
      </section>

      {/* CHIFFRES CLÉS */}
      <section className="lx-figures">
        <div className="lx-figures__in">
          {[
            ["5–10 h", "récupérées chaque semaine, par praticien", false],
            ["0", "donnée client utilisée pour l'entraînement", true],
            ["AES-256", "chiffrement au repos et en transit", false],
            ["100 % UE", "infrastructure souveraine, hébergée en France", false],
          ].map(([n, l, ok]) => (
            <div className={"lx-figures__cell reveal" + (ok ? " lx-figures__cell--ok" : "")} key={l}>
              <div className="lx-figures__n">{n}</div>
              <div className="lx-figures__l">{l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* TRUST */}
      <div className="lx-trust">
        <div className="lx-container">
          <div className="lx-trust__label">Compatible avec vos outils</div>
          <div className="lx-trust__row">
            {[["outlook", "Outlook"], ["gmail", "Gmail"]].map(([f, l]) => (
              <div className="lx-trust__item" key={f}><img src={"assets/integrations/" + f + ".svg"} alt={l} /><span>{l}</span></div>
            ))}
          </div>
        </div>
      </div>

      {/* FEATURES */}
      <section className="lx-section">
        <div className="lx-container">
        <SectionHead overline="Fonctionnalités" title="Tout ce qu'il faut pour exceller">
          Une suite conçue avec des juristes, pour des juristes — pour vous rendre les heures que la gestion vous prend.
        </SectionHead>
        <div className="lx-bento">
          <div className="lx-feat lx-feat--wide reveal">
            <div className="lx-feat__ico"><Icon name="inbox" /></div>
            <h3>Tri intelligent des e-mails</h3>
            <p>Chaque message entrant est lu et compris en quelques millisecondes : intention, urgence, interlocuteur et contexte. Urgent, client, administratif ou information — tout est classé sans intervention de votre part.</p>
            <div className="lx-feat__mini">
              <div className="lx-feat__minirow"><span className="l"><span className="dot" style={{ background: "var(--bordeaux-500)" }} />Litige commercial — dossier #8821</span><span className="lxp__tag lxp__tag--urgent">Urgent</span></div>
              <div className="lx-feat__minirow"><span className="l"><span className="dot" style={{ background: "var(--navy-700)" }} />Retour client — affaire Alpha</span><span className="lxp__tag lxp__tag--client">Client</span></div>
              <div className="lx-feat__minirow"><span className="l"><span className="dot" style={{ background: "var(--brass-600)" }} />Convocation — audience du 3 juin</span><span className="lxp__tag lxp__tag--admin">Admin</span></div>
            </div>
          </div>
          <div className="lx-feat reveal">
            <div className="lx-feat__ico brass"><Icon name="scan-text" /></div>
            <h3>Analyse de contrats</h3>
            <p>Clauses, risques et échéances détectés en quelques secondes. Aucune obligation ne vous échappe.</p>
          </div>
          <div className="lx-feat reveal">
            <div className="lx-feat__ico"><Icon name="pen-line" /></div>
            <h3>Rédaction assistée</h3>
            <p>Des réponses adaptées au ton et au contexte de chaque échange. Vous validez, ajustez, envoyez.</p>
          </div>
          <div className="lx-feat reveal">
            <div className="lx-feat__ico brass"><Icon name="book-marked" /></div>
            <h3>Chat juridique sourcé</h3>
            <p>Un assistant de recherche qui cite ses sources : chaque réponse est rattachée à la décision ou au texte exact. Interrogez la jurisprudence en langage naturel et vérifiez chaque référence d'un clic.</p>
          </div>
          <div className="lx-feat reveal">
            <div className="lx-feat__ico"><Icon name="folder" /></div>
            <h3>Gestion documentaire</h3>
            <p>Pièces jointes et documents organisés, nommés et archivés — retrouvables par recherche sémantique.</p>
          </div>
        </div>
        </div>
      </section>

      {/* POUR QUI / MÉTIERS */}
      <section className="lx-section lx-gridbg">
        <div className="lx-container">
          <SectionHead center overline="Pour qui" title="Pensé pour les métiers où l'erreur coûte cher">
            Du cabinet d'avocats à la direction financière, partout où la confidentialité du dossier est aussi forte que l'exigence de rigueur.
          </SectionHead>
          <div className="lx-metiers">
            {[
              ["scale", "Cabinets d'avocats", "Avocats indépendants, cabinets spécialisés, structures de plaidoirie. Vous gérez plus de dossiers qu'il ne faudrait — Lexo AI absorbe le bruit pour vous laisser le conseil.", ["Droit des affaires", "Droit immobilier", "Contentieux & social"]],
              ["landmark", "Directions juridiques", "Juristes d'entreprise d'ETI et de grands groupes. Un volume d'e-mails et de contrats qu'aucune équipe ne traite manuellement sans risque.", ["Revue contractuelle", "Conformité & RGPD", "Gestion du contentieux"]],
              ["briefcase", "Finance & conseil", "Expertise comptable, conseil financier, gestion de patrimoine. Là où la confidentialité client est aussi forte qu'en droit.", ["Due diligence", "Conseil M&A", "Gestion privée"]],
            ].map(([ic, h, p, items]) => (
              <div className="lx-metier reveal" key={h}>
                <div className="lx-metier__ico"><Icon name={ic} /></div>
                <h3>{h}</h3>
                <p>{p}</p>
                <ul>{items.map((it) => <li key={it}>{it}</li>)}</ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section className="lx-section" style={{ background: "var(--paper-50)" }}>
        <div className="lx-container">
        <SectionHead center overline="Comment ça marche" title="Opérationnel en trois étapes">
          Pas de configuration complexe. Lexo AI s'adapte à votre façon de travailler et s'affine avec le temps.
        </SectionHead>
        <div className="lx-steps">
          {[
            ["1", "Connectez votre messagerie", "Reliez votre compte Outlook, Gmail ou tout client IMAP en quelques clics. L'analyse commence instantanément, sans jamais accéder à vos mots de passe."],
            ["2", "L'IA apprend votre contexte", "Lexo AI assimile votre vocabulaire, vos interlocuteurs clés et vos priorités — dans le strict respect du secret professionnel. Plus il est sollicité, plus il gagne en précision."],
            ["3", "Gérez votre cabinet en quelques minutes", "Chaque matin, retrouvez une boîte triée, vos urgences identifiées et vos réponses prêtes à valider. Fini le tri interminable, place au conseil."],
          ].map(([num, h, p]) => (
            <div className="lx-step reveal" key={num}>
              <div className="lx-step__num">{num}</div>
              <div className="lx-step__body"><h3>{h}</h3><p>{p}</p></div>
            </div>
          ))}
        </div>
        </div>
      </section>

      {/* SECURITY */}
      <SecurityBand />

      {/* ENGAGEMENTS */}
      <section className="lx-section lx-engage lx-gridbg">
        <div className="lx-container">
          <SectionHead center overline="Nos engagements" title="Quatre engagements non négociables" />
          <div className="lx-engage__list">
            {[
              ["01", "Souveraineté des données", "Vos données restent en Europe, hébergées en France sur une infrastructure certifiée SecNumCloud. Aucun transfert vers un cloud extra-européen, aucune API tierce non souveraine dans le pipeline de traitement."],
              ["02", "Aucun entraînement caché", "Aucun e-mail, document ou information sur vos clients ne servira jamais à entraîner nos modèles, ni ceux de tiers. Cet engagement est contractuel, pas marketing."],
              ["03", "Transparence du modèle", "Chaque réponse de Lexo AI est traçable : sources citées, raisonnement consultable, droit de correction immédiat. Jamais de boîte noire."],
              ["04", "Réversibilité totale", "Vous récupérez vos données quand vous le souhaitez, dans un format ouvert et exploitable. Suppression définitive sous 30 jours sur simple demande."],
            ].map(([n, h, p]) => (
              <div className="lx-engage__row reveal" key={n}>
                <div className="lx-engage__n">{n}</div>
                <div className="lx-engage__main">
                  <div className="lx-engage__h"><Icon name="circle-check" />{h}</div>
                  <p className="lx-engage__p">{p}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* BENEFITS */}
      <section className="lx-section lx-results">
        <div className="lx-container">
          <div className="lx-grid">
            <div className="reveal">
              <Overline>Avantages</Overline>
              <h2>Conçu pour les praticiens qui n'ont pas de temps à perdre</h2>
              <div className="lx-benefits">
                {[
                  ["Fin du tri manuel", "Lexo AI ne vous présente que ce qui réclame votre attention — le reste est classé pour vous."],
                  ["Aucune urgence manquée", "Les messages critiques remontent en priorité, avec notification immédiate sur les sujets sensibles."],
                  ["Dossier documentaire complet", "Retrouvez n'importe quelle pièce ou échange en quelques secondes grâce à la recherche sémantique."],
                  ["Confidentialité garantie", "Hébergement en France, chiffrement de bout en bout, aucune donnée revendue. Le secret professionnel, par conception."],
                ].map(([h, p]) => (
                  <div className="lx-benefit" key={h}>
                    <div className="lx-benefit__ico"><Icon name="check" /></div>
                    <div><h4>{h}</h4><p>{p}</p></div>
                  </div>
                ))}
              </div>
            </div>
            <div className="lx-bignum reveal">
              <div className="lx-bignum__n">10<span>h</span></div>
              <div className="lx-bignum__d">Jusqu'à dix heures récupérées chaque semaine par les cabinets équipés, sur la gestion de leur messagerie et de leurs dossiers.</div>
              <div className="lx-bignum__sub">
                <div><b>500+</b><span>cabinets</span></div>
                <div><b>98 %</b><span>satisfaction</span></div>
                <div><b>14 M</b><span>e-mails traités</span></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="lx-section">
        <div className="lx-container">
        <SectionHead center overline="Questions fréquentes" title="Tout ce que vous devez savoir" />
        <Faq items={HOME_FAQ} />
        </div>
      </section>
    </main>
  );
}

// Shared: security band (used on home + services)
function SecurityBand() {
  return (
    <section className="lx-section lx-security">
      <div className="lx-container">
        <div className="lx-grid">
          <div className="reveal">
            <Overline>Souveraineté</Overline>
            <h2>La sécurité n'est pas une option, c'est notre fondation.</h2>
            {[
              ["shield-check", "Aucun entraînement sur vos données", "Vos e-mails et documents ne servent jamais à entraîner nos modèles, ni ceux de tiers. Garanti par contrat.", true],
              ["landmark", "Hébergement souverain", "Vos données restent en Europe, hébergées en France sur une infrastructure certifiée SecNumCloud."],
              ["scale", "Conformité totale", "Respect strict du RGPD et du secret professionnel de l'avocat."],
              ["lock", "Chiffrement de bout en bout", "AES-256, TLS 1.3, MFA et SSO. Aucune donnée revendue, jamais."],
            ].map(([ic, h, p, ok]) => (
              <div className={"lx-secitem" + (ok ? " lx-secitem--ok" : "")} key={h}>
                <div className="lx-secitem__ico"><Icon name={ic} /></div>
                <div><h4>{h}</h4><p>{p}</p></div>
              </div>
            ))}
          </div>
          <div className="lx-code reveal">
            <div className="lx-code__bar"><i style={{ background: "#ff5f57" }} /><i style={{ background: "#febc2e" }} /><i style={{ background: "#28c840" }} /></div>
            <pre>{`{
  `}<span className="k">"security"</span>{`: {
    `}<span className="k">"hosting"</span>{`:        `}<span className="s">"France (Paris)"</span>{`,
    `}<span className="k">"certification"</span>{`:  `}<span className="s">"SecNumCloud · ISO 27001"</span>{`,
    `}<span className="k">"encryption"</span>{`:     `}<span className="s">"AES-256-GCM"</span>{`,
    `}<span className="k">"access_control"</span>{`: `}<span className="s">"MFA + SSO"</span>{`,
    `}<span className="k">"train_on_your_data"</span>{`: `}<span className="s">false</span>{`
  },
  `}<span className="k">"data_residency"</span>{`: `}<span className="s">"EU · hébergé en France"</span>{`,
  `}<span className="k">"status"</span>{`: `}<span className="s">"SECURE"</span>{`
}`}</pre>
          </div>
        </div>
      </div>
    </section>
  );
}

const HOME_FAQ = [
  { q: "Mes données sont-elles vraiment hébergées en France ?", a: "Oui. L'intégralité de vos données est hébergée sur une infrastructure souveraine certifiée SecNumCloud, sur le territoire français. Elles ne sont jamais transférées hors de France et ne sont jamais utilisées pour entraîner des modèles tiers." },
  { q: "Lexo AI respecte-t-il le secret professionnel ?", a: "Le respect du secret professionnel de l'avocat est au cœur de notre conception. Les accès sont chiffrés, journalisés et cloisonnés ; aucun collaborateur Lexo AI n'accède au contenu de vos dossiers." },
  { q: "Combien de temps prend la mise en place ?", a: "Moins de cinq minutes. La connexion se fait via OAuth sécurisé, sans partage de mot de passe. L'analyse de votre boîte démarre immédiatement et s'affine au fil des premiers jours." },
  { q: "Le chat juridique cite-t-il réellement ses sources ?", a: "Chaque réponse du module de jurisprudence est rattachée à la décision, l'article ou le texte exact dont elle est issue. Vous pouvez vérifier chaque référence d'un clic — aucune réponse n'est laissée sans source." },
  { q: "Suis-je propriétaire de mes données ?", a: "À tout moment. Vous récupérez l'intégralité de vos e-mails et documents quand vous le souhaitez, dans un format ouvert et exploitable. La suppression définitive intervient sous 30 jours sur simple demande, sans aucune rétention." },,
];

Object.assign(window, { HomePage, SecurityBand });