/* global React, PageShell */

const ManifestePage = () => (
  <PageShell>
    {/* HERO */}
    <section className="page-hero">
      <div className="container">
        <div className="eyebrow-row">
          <span className="pill" style={{ background: 'var(--vert-menthe-soft)', borderColor: 'transparent', color: 'var(--vert-sapin)', fontWeight: 600 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--vert-sapin)', display: 'inline-block' }} />
            <span>Notre manifeste</span>
          </span>
        </div>
        <h1 className="t-h1" style={{ maxWidth: 880 }}>
          L'IA n'est pas une <span className="italic-accent">menace</span>. C'est un <span className="italic-accent">outil</span>. Et personne n'a appris à s'en servir.
        </h1>
        <p className="t-body-lg lead">
          On a lancé Virage parce qu'on a vu trop d'équipes face à un mur. Pas par manque d'envie — par manque
          de méthode. Voici ce qu'on défend, ce qu'on refuse de faire, et pourquoi on pense que la formation
          IA mérite mieux qu'un MOOC de 12 heures qu'on ne finit jamais.
        </p>
      </div>
    </section>

    {/* INTRO + ILLU */}
    <section style={{ padding: '64px 0' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 64, alignItems: 'center' }}>
        <div className="prose">
          <p className="t-body-lg" style={{ color: 'var(--texte)', fontWeight: 500 }}>
            On a passé 40 ans à équiper les PME françaises avec les meilleurs outils :
            Sage, Cegid, Pennylane, Lucca. <strong>3 943 entreprises</strong> nous ont fait confiance.
          </p>
          <p>
            Aujourd'hui, ces mêmes dirigeants nous appellent avec la même question :
            <em> « Comment on s'y met, à l'IA ? »</em>
          </p>
          <p>
            Pas la grande question philosophique. La question concrète. Pratique.
            <strong> Comment ma DAF gagne 2h par semaine ? Comment mon commercial qualifie mieux ses leads ?
            Comment mon DRH automatise un onboarding ?</strong>
          </p>
          <p>
            Virage est notre réponse. Une plateforme de formation IA qui démarre par le métier,
            pas par la techno. Qui valorise les progrès collectifs, pas les podiums individuels.
            Qui se finance via votre OPCO, parce qu'on est Qualiopi depuis longtemps.
          </p>
        </div>
        <img src="/assets/illus/community.png" alt="" style={{ width: '100%', maxWidth: 480, justifySelf: 'center' }} />
      </div>
    </section>

    {/* 4 PILIERS */}
    <section style={{ background: 'var(--blanc)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <span className="t-eyebrow">Ce qui nous tient</span>
          <h2 className="t-h2" style={{ marginTop: 12 }}>Quatre principes non-négociables</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }} className="manifeste-piliers">
          {[
            { emoji: '🌱', title: 'À hauteur d\'humain', body: 'L\'IA ne remplace pas. Elle augmente. On part de votre métier, on revient à votre métier. Jamais l\'inverse.' },
            { emoji: '⏱', title: 'Cinq minutes par jour', body: 'On n\'a pas le temps de faire 30 heures de formation d\'un coup. Donc on fait 5 minutes par jour. Pendant 6 semaines.' },
            { emoji: '🤝', title: 'Validation par les pairs', body: 'Vos collègues savent ce qui marche dans votre métier. La progression se valide ensemble — pas seul devant un quiz.' },
            { emoji: '🛡', title: 'Pas de bullshit IA', body: 'Pas de promesse magique. Pas de "remplace ton équipe". Pas de chiffres inventés. On dit ce qu\'on sait, on prouve ce qu\'on dit.' },
          ].map((p) => (
            <div key={p.title} className="card" style={{ padding: 28 }}>
              <div style={{ fontSize: 36, marginBottom: 14 }}>{p.emoji}</div>
              <h3 className="t-h3" style={{ marginBottom: 8 }}>{p.title}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--texte-soft)', margin: 0 }}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* SYMBOLIQUE */}
    <section>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 64, alignItems: 'center' }}>
        <img src="/assets/illus/goal.png" alt="" style={{ width: '100%', maxWidth: 480, justifySelf: 'center' }} />
        <div className="prose">
          <span className="t-eyebrow">Pourquoi le creux ?</span>
          <h2 className="t-h2" style={{ marginTop: 12, marginBottom: 16 }}>Passer par le creux pour aller plus haut.</h2>
          <p>
            Notre logo est un sourire qui descend, puis remonte plus haut. Ce n'est pas un raccourci graphique :
            c'est notre conviction.
          </p>
          <p>
            Apprendre à utiliser l'IA, c'est traverser un moment d'inconfort. Le moment où on ne maîtrise pas.
            Où le prompt ne sort pas ce qu'on voulait. Où on doute. <strong>Ce moment fait partie du parcours,
            pas de l'échec.</strong>
          </p>
          <p>
            Notre rôle n'est pas de vous faire éviter le creux. C'est de vous accompagner pendant qu'il dure
            — assez peu pour que ça reste motivant, assez longtemps pour que ça reste vrai.
          </p>
        </div>
      </div>
    </section>

    {/* CE QU'ON NE FAIT PAS */}
    <section style={{ background: 'var(--blanc)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <span className="t-eyebrow">À lire aussi</span>
          <h2 className="t-h2" style={{ marginTop: 12 }}>Ce qu'on ne fera jamais</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, maxWidth: 920, margin: '0 auto' }} className="manifeste-anti">
          {[
            'Promettre que l\'IA va « remplacer 30 % de votre effectif »',
            'Vendre un MOOC asynchrone sans accompagnement humain',
            'Inventer des chiffres comme « 14 200 collaborateurs formés »',
            'Cibler uniquement les développeurs et data scientists',
            'Comparer publiquement nos prix à Microsoft Copilot',
            'Faire payer les certifications en plus du forfait',
          ].map((line) => (
            <div key={line} style={{
              padding: '20px 24px',
              borderRadius: 16,
              border: '1px solid var(--hairline)',
              display: 'flex', alignItems: 'flex-start', gap: 14,
              background: 'var(--creme)'
            }}>
              <span style={{
                flexShrink: 0, width: 28, height: 28, borderRadius: 999,
                background: 'rgba(229, 112, 75, 0.12)', color: 'var(--accent)',
                display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 16
              }}>✕</span>
              <span style={{ fontSize: 15, color: 'var(--texte)', lineHeight: 1.5 }}>{line}</span>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* CTA */}
    <section style={{ padding: '80px 0' }}>
      <div className="container" style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto' }}>
        <h2 className="t-h2" style={{ marginBottom: 16 }}>Si ça vous parle, parlons-nous.</h2>
        <p className="t-body" style={{ marginBottom: 32 }}>
          Pas de discours commercial. Vingt minutes pour comprendre votre contexte et voir si Virage colle.
        </p>
        <a href="#demo" onClick={(e) => { e.preventDefault(); window.openVirageDemo(); }}
           className="btn btn-primary" style={{ padding: '16px 26px', fontSize: 16 }}>
          Demander une démo
          <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </a>
      </div>
    </section>
  </PageShell>
);

ReactDOM.createRoot(document.getElementById('root')).render(<ManifestePage />);