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

// ── SERVICES ─────────────────────────────────────────────────────────────────
function ServiceRow({ flip, icon, title, lead, bullets, children }) {
  return (
    <section className={"lx-srow" + (flip ? " lx-srow--flip" : "")}>
      <div className="reveal">
        <div className="lx-srow__ico"><Icon name={icon} /></div>
        <h2>{title}</h2>
        <p>{lead}</p>
        <ul>{bullets.map((b) => <li key={b}><Icon name="check" />{b}</li>)}</ul>
      </div>
      <div className="lx-srow__media reveal">{children}</div>
    </section>
  );
}

function ServicesPage() {
  return (
    <main>
      <section className="lx-pagehero">
        <div className="lx-container">
          <span className="lx-crumb">Services</span>
          <h1>Une suite souveraine, <em>pensée pour le droit</em></h1>
          <p>Cinq outils complémentaires qui couvrent le quotidien d'un cabinet d'avocats comme d'une direction juridique ou financière — du tri de la messagerie à la recherche de jurisprudence — réunis dans un environnement confidentiel, hébergé en France et jamais entraîné sur vos données.</p>
        </div>
      </section>

      <div className="lx-container">
        <ServiceRow icon="inbox" title="Tri & classification des e-mails"
          lead="Chaque message entrant est lu, compris et classé instantanément. Vous ouvrez votre boîte sur une priorité claire, jamais sur le chaos."
          bullets={["Catégories Urgent · Client · Administratif · Information", "Détection automatique des échéances et délais de procédure", "Rattachement de chaque message au bon dossier"]}>
          <div className="lx-mock__bar"><Icon name="inbox" /> Boîte de réception</div>
          {[["var(--bordeaux-500)", "Litige commercial — dossier #4821", "urgent", "Urgent"], ["var(--navy-700)", "Retour client — affaire Alpha", "client", "Client"], ["var(--brass-600)", "Convocation — audience du 3 juin", "admin", "Admin"], ["var(--slate-500)", "Veille jurisprudentielle — mai", "info", "Info"]].map(([c, s, t, tl]) => (
            <div className="lx-mock__line" key={s}><span className="l"><span className="dot" style={{ background: c }} />{s}</span><span className={"lxp__tag lxp__tag--" + t}>{tl}</span></div>
          ))}
        </ServiceRow>

        <ServiceRow flip icon="pen-line" title="Rédaction assistée"
          lead="Lexo AI rédige des réponses adaptées au ton et au contexte de chaque échange. Vous n'avez plus qu'à valider, ajuster ou envoyer."
          bullets={["Brouillons calés sur votre style et le bon registre", "Reprise du contexte du dossier et des échanges précédents", "Validation en un clic, ajustement libre avant envoi"]}>
          <div className="lx-mock__bar"><Icon name="pen-line" /> Réponse — affaire Chartier</div>
          <p className="lx-mock__doc" style={{ color: "var(--fg-muted)" }}>« Pourriez-vous me confirmer l'état d'avancement du dossier #4821 avant l'audience ? »</p>
          <div className="lx-mock__cite" style={{ marginTop: 14 }}><Icon name="sparkles" /><span>Bonjour Madame Chartier, le dossier #4821 est <b>en état d'être plaidé</b> : conclusions déposées le 18 mai et pièces adverses intégrées. <b>Aucune diligence n'est attendue de votre part</b> avant l'audience du 3 juin.</span></div>
        </ServiceRow>

        <ServiceRow icon="scan-text" title="Analyse de contrats"
          lead="Importez un contrat, recevez en quelques secondes une lecture structurée : clauses sensibles, obligations, échéances et points de vigilance surlignés."
          bullets={["Repérage des clauses à risque et des déséquilibres", "Extraction des dates clés et obligations de chaque partie", "Synthèse exportable, prête pour la relecture"]}>
          <div className="lx-mock__bar"><Icon name="file-text" /> Contrat de prestation — analyse</div>
          <p className="lx-mock__doc">Article 4 — Le prestataire s'engage à livrer sous un délai de <span className="hl">trente (30) jours</span> à compter de la signature.<br /><br />Article 9 — En cas de retard, une pénalité de <span className="risk">10 % par jour</span> sera appliquée, sans plafond.<br /><br />Article 12 — Reconduction <span className="risk">tacite</span> pour une durée indéterminée.</p>
          <div className="lx-mock__cite" style={{ marginTop: 14 }}><Icon name="alert-triangle" /><span><b>2 points de vigilance</b> — pénalité sans plafond (art. 9) et reconduction tacite (art. 12).</span></div>
        </ServiceRow>

        <ServiceRow flip icon="book-marked" title="Chat juridique sourcé"
          lead="Interrogez la jurisprudence et les textes en langage naturel. Chaque réponse cite ses sources — vous gardez la maîtrise et la vérifiabilité."
          bullets={["Réponses rattachées à la décision ou à l'article exact", "Vérification de chaque référence d'un clic", "Veille jurisprudentielle sur vos domaines de pratique"]}>
          <div className="lx-mock__bar"><Icon name="message-square" /> Assistant juridique</div>
          <p className="lx-mock__doc" style={{ color: "var(--fg)" }}>Quelles sont les conditions de la rupture brutale d'une relation commerciale établie ?</p>
          <div className="lx-mock__cite"><Icon name="quote" /><span>La rupture suppose une relation suivie et stable ; un préavis écrit suffisant est requis.<br /><b>Source : art. L442-1 C. com. · Cass. com. 2023</b></span></div>
        </ServiceRow>

        <ServiceRow icon="folder" title="Gestion documentaire"
          lead="Pièces jointes et documents nommés, classés et archivés automatiquement au bon dossier — chaque client dispose de son espace, retrouvable par recherche sémantique, pas seulement par mot-clé."
          bullets={["Nommage et classement automatiques des pièces", "Recherche sémantique sur l'ensemble du cabinet", "Historique complet et traçabilité de chaque document"]}>
          <div className="lx-mock__bar"><Icon name="folder-check" /> Dossier #4821 — Chartier</div>
          {[["Assignation_TC_Paris.pdf", "12 mai"], ["Conclusions_v3.docx", "18 mai"], ["Pièces_adverses.zip", "24 mai"]].map(([f, d]) => (
            <div className="lx-mock__line" key={f}><span className="l"><Icon name="file-text" style={{ color: "var(--brass-600)" }} />{f}</span><span style={{ color: "var(--fg-subtle)", fontSize: 13 }}>{d}</span></div>
          ))}
        </ServiceRow>
      </div>

      <SecurityBand />

      {/* INTEGRATIONS */}
      <section className="lx-section" style={{ background: "var(--paper-50)" }}>
        <div className="lx-container">
        <SectionHead center overline="Intégrations" title="S'intègre à votre environnement">
          Connectez Lexo AI à vos outils en moins de cinq minutes. Zéro friction, aucune migration.
        </SectionHead>
          <div className="lx-integ">
            {[
              ["outlook", "Microsoft Outlook", "Tri et réponses directement dans votre boîte."],
              ["gmail", "Gmail & Workspace", "Connexion sécurisée OAuth, sans mot de passe."],
            ].map(([f, t, d]) => (
              <div className="lx-integ__card reveal" key={f}>
                <div className="lx-integ__logo"><img src={"assets/integrations/" + f + ".svg"} alt="" /></div>
                <div><div className="lx-integ__t">{t}</div><div className="lx-integ__d">{d}</div></div>
              </div>
            ))}
            <a className="lx-integ__more reveal" href="#/contact"><Icon name="plug" /> API &amp; intégrations sur mesure</a>
          </div>
        </div>
      </section>
    </main>
  );
}

// ── À PROPOS ─────────────────────────────────────────────────────────────────
function AProposPage() {
  return (
    <main>
      <section className="lx-pagehero">
        <div className="lx-container">
          <span className="lx-crumb">À propos</span>
          <h1>L'IA au service du droit, <em>sans compromis</em></h1>
          <p>Nous sommes convaincus que les professionnels du droit méritent des outils à la hauteur de leurs exigences : précis, confidentiels et souverains. C'est la raison d'être de Lexo AI.</p>
        </div>
      </section>

      <section className="lx-section">
        <div className="lx-container">
          <div className="lx-about__grid">
            <div className="reveal">
              <Overline>Notre mission</Overline>
              <p>Rendre aux professionnels du droit et de la finance le temps que la gestion leur prend, pour qu'ils le consacrent à ce qui compte vraiment : le conseil et la décision.</p>
              <p>Née de la rencontre entre des avocats et des ingénieurs, Lexo AI part d'un constat simple : les outils d'IA grand public ne sont pas pensés pour le secret professionnel, ni pour la rigueur attendue d'un cabinet. Nous avons construit l'inverse — une suite où la confidentialité et la traçabilité sont posées dès la première ligne de code.</p>
              <p>Chaque fonctionnalité est éprouvée avec des cabinets partenaires, dans le respect des règles déontologiques de la profession.</p>
            </div>
            <div className="lx-bignum reveal">
              <div className="lx-bignum__n">100<span>%</span></div>
              <div className="lx-bignum__d">de vos données hébergées et traitées en France, sur une infrastructure certifiée SecNumCloud.</div>
              <div className="lx-bignum__sub">
                <div><b>2023</b><span>année de création</span></div>
                <div><b>Paris</b><span>siège social</span></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="lx-section" style={{ background: "var(--paper-50)" }}>
        <div className="lx-container">
        <SectionHead center overline="Nos valeurs" title="Trois principes, jamais négociés" />
          <div className="lx-values">
            {[
              ["shield-check", "Souveraineté", "Vos données restent en France, sous votre contrôle. Aucune dépendance à un cloud extra-européen, aucune zone grise."],
              ["lock", "Confidentialité", "Le secret professionnel guide chaque décision technique. Vos dossiers ne servent jamais à entraîner nos modèles."],
              ["scale", "Rigueur juridique", "Conçu avec des praticiens, vérifiable à la source. La précision prime toujours sur l'effet de manche."],
            ].map(([ic, h, p]) => (
              <div className="lx-value reveal" key={h}>
                <div className="lx-value__ico"><Icon name={ic} /></div>
                <h3>{h}</h3><p>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="lx-section">
        <div className="lx-container">
        <SectionHead center overline="L'équipe" title="Les fondateurs" />
          <div className="lx-team">
            {[
              ["MC", "var(--navy-700)", "Matéo Chauchepart", "Cofondateur · CEO"],
              ["ML", "var(--brass-600)", "Maxence Labbé", "Cofondateur · CTO"],
            ].map(([m, c, n, r]) => (
              <div className="lx-member reveal" key={n}>
                <div className="lx-member__av" style={{ background: c }}>{m}</div>
                <b>{n}</b><span>{r}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// ── CONTACT ──────────────────────────────────────────────────────────────────
function ContactPage() {
  return (
    <main>
      <section className="lx-pagehero">
        <div className="lx-container">
          <span className="lx-crumb">Contact</span>
          <h1>Activité <em>suspendue</em></h1>
          <p>Lexo AI a cessé son activité pour le moment. Le service n'est temporairement plus disponible — merci de votre compréhension.</p>
        </div>
      </section>

      <section className="lx-section" style={{ padding: "64px 0 88px" }}>
        <div className="lx-container">
          <div
            className="lx-contact__card reveal"
            style={{ maxWidth: 560, margin: "0 auto", textAlign: "center" }}
          >
            <div
              className="lx-cinfo__ico"
              style={{ margin: "0 auto 20px" }}
            >
              <Icon name="mail" />
            </div>
            <h2 style={{ font: "var(--text-h3)", margin: "0 0 8px", color: "var(--fg)" }}>Nous écrire</h2>
            <p style={{ font: "var(--text-sm)", color: "var(--fg-muted)", margin: "0 0 24px" }}>
              Pour toute question, vous pouvez nous joindre à l'adresse suivante :
            </p>
            <a
              href="mailto:mchprtpro17@gmail.com"
              style={{
                font: "var(--text-title)",
                color: "var(--accent)",
                textDecoration: "none",
                fontWeight: 600,
                wordBreak: "break-all",
              }}
            >
              mchprtpro17@gmail.com
            </a>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ServicesPage, AProposPage, ContactPage });