/* global React, PageShell */

const ProduitPage = () => (
  <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' }} />
            Produit
          </span>
        </div>
        <h1 className="t-h1" style={{ maxWidth: 880 }}>
          Un <span className="italic-accent">tronc commun</span>, trois cursus métier,
          six niveaux. <span style={{ color: 'var(--texte-soft)' }}>5 minutes par jour suffisent.</span>
        </h1>
        <p className="t-body-lg lead">
          Vos équipes apprennent l'IA <strong>sur leurs vrais cas métier</strong>, validés entre pairs,
          avec une progression visible. Pas un MOOC asynchrone. Pas un atelier de 2 jours qu'on oublie en 2 semaines.
        </p>
      </div>
    </section>

    {/* TRONC COMMUN */}
    <section style={{ paddingTop: 24 }}>
      <div className="container">
        <div className="card" style={{ padding: '40px 44px', display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 48, alignItems: 'center' }}>
          <div>
            <span className="t-eyebrow">Semaine 1 · obligatoire</span>
            <h2 className="t-h2" style={{ marginTop: 10, marginBottom: 14 }}>Tronc commun — Fondamentaux IA</h2>
            <p className="t-body" style={{ margin: '0 0 20px' }}>
              Le socle non-négociable, partagé par toutes les équipes : <strong>prompting efficace</strong>,
              cadre RGPD, hallucinations & biais, méthode d'évaluation des réponses.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 }}>
              {[
                'Prompting structuré (rôle, contexte, exemple, format)',
                'Cadre RGPD : ce que vous pouvez/ne devez pas envoyer à un LLM',
                'Détecter une hallucination en 30 secondes',
                'Mesurer la qualité d\'une réponse : 4 critères opérationnels',
                'Multi-modèle : quand utiliser GPT, Claude, Gemini, Mistral, Llama',
              ].map((line) => (
                <li key={line} style={{ display: 'flex', gap: 10, fontSize: 15, color: 'var(--texte-soft)', lineHeight: 1.5 }}>
                  <span style={{ color: 'var(--vert-sapin)', fontWeight: 700 }}>✓</span>
                  <span>{line}</span>
                </li>
              ))}
            </ul>
          </div>
          <img src="/assets/illus/checklist.png" alt="" style={{ width: '100%', maxWidth: 420, justifySelf: 'center' }} />
        </div>
      </div>
    </section>

    {/* 3 CURSUS */}
    <section>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <span className="t-eyebrow">À partir de la Semaine 2</span>
          <h2 className="t-h2" style={{ marginTop: 12 }}>Trois cursus métier au choix</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {[
            {
              icon: '🌐', name: 'Général', status: 'Disponible', statusColor: 'var(--vert-sapin)', statusBg: 'var(--vert-menthe-soft)',
              targets: 'RH · Marketing · Finance · Support',
              cases: ['Brouillon de fiche de poste en 90 secondes', 'Synthèse multi-CV pour préqualif', 'Réponses support templates personnalisés', 'Reporting automatique mensuel'],
              illus: 'office.png',
            },
            {
              icon: '⚙️', name: 'Technique', status: 'Bientôt', statusColor: 'var(--accent)', statusBg: 'var(--accent-soft)',
              targets: 'Devs · Data · IT',
              cases: ['Code review assistée par IA', 'Génération de tests unitaires', 'Documentation API automatique', 'Debug de logs avec contexte métier'],
              illus: 'programmer.png',
            },
            {
              icon: '💼', name: 'Commercial', status: 'Bientôt', statusColor: 'var(--accent)', statusBg: 'var(--accent-soft)',
              targets: 'Sales · Account managers',
              cases: ['Préparation de RDV à partir du CRM', 'Mail de relance contextualisé', 'Compte-rendu d\'entretien structuré', 'Proposition commerciale en 15 min'],
              illus: 'team-goals.png',
            },
          ].map((c) => (
            <div key={c.name} className="card card-hover" style={{ padding: 28, display: 'flex', flexDirection: 'column' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
                <span style={{ fontSize: 32 }}>{c.icon}</span>
                <span className="pill" style={{ background: c.statusBg, borderColor: 'transparent', color: c.statusColor, fontWeight: 600 }}>{c.status}</span>
              </div>
              <h3 className="t-h3" style={{ marginBottom: 6 }}>Cursus {c.name}</h3>
              <p style={{ fontSize: 13, color: 'var(--texte-mute)', margin: '0 0 14px' }}>{c.targets}</p>
              <div style={{ borderTop: '1px solid var(--hairline)', paddingTop: 14, marginBottom: 14 }}>
                <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--texte-mute)', marginBottom: 10 }}>Cas concrets</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {c.cases.map((cs) => (
                    <li key={cs} style={{ display: 'flex', gap: 8, fontSize: 14, color: 'var(--texte-soft)', lineHeight: 1.45 }}>
                      <span style={{ color: 'var(--vert-sapin)' }}>·</span>
                      <span>{cs}</span>
                    </li>
                  ))}
                </ul>
              </div>
              <img src={`/assets/illus/${c.illus}`} alt="" style={{ width: '100%', maxWidth: 220, alignSelf: 'center', marginTop: 'auto' }} />
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* 6 NIVEAUX */}
    <section style={{ background: 'var(--blanc)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <span className="t-eyebrow">Progression</span>
          <h2 className="t-h2" style={{ marginTop: 12 }}>Six niveaux pour progresser à votre rythme</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16 }}>
          {[
            { emoji: '🌱', name: 'Curieux', desc: 'Découverte. Premiers prompts utiles.' },
            { emoji: '🔰', name: 'Initié', desc: 'Routines installées. RGPD compris.' },
            { emoji: '★', name: 'Praticien', desc: 'Cas métier maîtrisés. Certifiable.' },
            { emoji: '◆', name: 'Avancé', desc: 'Workflows multi-outils. Mentor d\'équipe.' },
            { emoji: '✦', name: 'Expert', desc: 'Architecture IA métier. Certifiable+.' },
            { emoji: '👑', name: 'Maître', desc: 'Référent IA dans l\'organisation.' },
          ].map((n, i) => (
            <div key={n.name} className="card" style={{ padding: 20, textAlign: 'center' }}>
              <div style={{ fontSize: 24, marginBottom: 8 }}>{n.emoji}</div>
              <div style={{ fontSize: 11, color: 'var(--texte-mute)', fontWeight: 500, marginBottom: 4 }}>Niveau {i + 1}</div>
              <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 6 }}>{n.name}</div>
              <div style={{ fontSize: 12, color: 'var(--texte-soft)', lineHeight: 1.45 }}>{n.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* MULTI-MODÈLE */}
    <section>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 56, alignItems: 'center' }}>
        <div>
          <span className="t-eyebrow">Multi-modèle</span>
          <h2 className="t-h2" style={{ marginTop: 12, marginBottom: 16 }}>Pas dépendant d'un seul fournisseur</h2>
          <p className="t-body" style={{ marginBottom: 18 }}>
            Vos équipes apprennent à choisir le bon modèle pour la bonne tâche. Pas à dépendre d'un éditeur.
            Vous gardez la main sur vos données et votre stack.
          </p>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            {['OpenAI GPT', 'Anthropic Claude', 'Google Gemini', 'Mistral AI', 'Meta Llama'].map((m) => (
              <span key={m} className="pill" style={{ background: 'var(--blanc)' }}>{m}</span>
            ))}
          </div>
        </div>
        <img src="/assets/illus/process.png" alt="" style={{ width: '100%', maxWidth: 420, justifySelf: 'center' }} />
      </div>
    </section>

    {/* CERTIFICATIONS */}
    <section style={{ background: 'var(--vert-menthe-soft)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <span className="t-eyebrow">Certifications</span>
          <h2 className="t-h2" style={{ marginTop: 12 }}>En cours d'inscription France Compétences</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, maxWidth: 920, margin: '0 auto' }}>
          {[
            { name: 'Praticien IA Métier', hours: '80h', desc: 'Niveau Praticien★ (3) validé. Ouvre à un poste référent IA dans son département.' },
            { name: 'Expert IA Appliqué', hours: '200h', desc: 'Niveau Expert★ (5) validé. Architecte de workflows IA multi-équipes.' },
          ].map((c) => (
            <div key={c.name} className="card" style={{ padding: 28, background: 'var(--blanc)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                <span style={{ fontSize: 24 }}>🎓</span>
                <span className="pill" style={{ background: 'var(--creme)', borderColor: 'transparent' }}>{c.hours}</span>
              </div>
              <h3 className="t-h3" style={{ marginBottom: 8 }}>{c.name}</h3>
              <p style={{ fontSize: 14, color: 'var(--texte-soft)', lineHeight: 1.55, margin: 0 }}>{c.desc}</p>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 32 }}>
          <span className="pill" style={{ background: 'var(--blanc)', fontWeight: 600 }}>
            <span style={{ color: 'var(--vert-sapin)' }}>✓</span>
            Qualiopi déjà certifié — finançable OPCO immédiatement
          </span>
        </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 }}>Voir ça fonctionner sur votre métier</h2>
        <p className="t-body" style={{ marginBottom: 32 }}>
          On vous montre les cas concrets adaptés à votre secteur. Vingt minutes, sans engagement.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="/tarifs" className="btn btn-secondary" style={{ padding: '16px 26px', fontSize: 16 }}>Voir les tarifs</a>
          <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>
      </div>
    </section>
  </PageShell>
);

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