/* global React, PageShell */

const TarifsPage = () => {
  const features = [
    { label: 'Tronc commun (Fondamentaux IA)', s: true, p: true, e: true },
    { label: 'Cursus Général', s: true, p: true, e: true },
    { label: 'Cursus Technique', s: false, p: true, e: true },
    { label: 'Cursus Commercial', s: false, p: true, e: true },
    { label: 'Validation par les pairs', s: false, p: true, e: true },
    { label: 'Certifications France Compétences', s: false, p: true, e: true },
    { label: 'SSO (Microsoft / Google)', s: false, p: true, e: true },
    { label: 'Tableau de bord Manager', s: 'Basique', p: 'Avancé', e: 'Sur-mesure' },
    { label: 'Cas d\'usage personnalisés métier', s: false, p: false, e: true },
    { label: 'Support', s: 'Email', p: 'Email + Chat prioritaire', e: 'CSM dédié' },
    { label: 'API & intégrations sur-mesure', s: false, p: false, e: true },
  ];

  const renderCell = (val) => {
    if (val === true) return <span style={{ color: 'var(--vert-sapin)', fontWeight: 700 }}>✓</span>;
    if (val === false) return <span style={{ color: 'var(--texte-mute)', opacity: 0.5 }}>—</span>;
    return <span style={{ fontSize: 13, color: 'var(--texte-soft)' }}>{val}</span>;
  };

  return (
    <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 }}>
              Tarifs
            </span>
          </div>
          <h1 className="t-h1" style={{ maxWidth: 880 }}>
            Trois plans. <span className="italic-accent">Finançables OPCO.</span> Reste à charge possible : 0€.
          </h1>
          <p className="t-body-lg lead">
            Prix par utilisateur, par mois. Engagement annuel, paiement mensuel, dégressifs au-delà de 100 utilisateurs.
            Qualiopi déjà certifié — votre OPCO peut prendre la formation en charge.
          </p>
        </div>
      </section>

      {/* 3 PLANS */}
      <section style={{ paddingTop: 24 }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {/* STARTER */}
            <div className="card" style={{ padding: 32, display: 'flex', flexDirection: 'column' }}>
              <div style={{ marginBottom: 18 }}>
                <span className="t-eyebrow">Starter</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 8 }}>
                <span style={{ fontSize: 44, fontWeight: 800, letterSpacing: '-0.02em' }}>14€</span>
                <span style={{ fontSize: 14, color: 'var(--texte-mute)' }}>/ utilisateur / mois</span>
              </div>
              <p style={{ fontSize: 14, color: 'var(--texte-soft)', margin: '0 0 24px' }}>PME 10 → 50 collaborateurs.</p>
              <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 24px', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {['Tronc commun complet', 'Cursus Général', 'Tableau de bord Manager', 'Support email'].map((f) => (
                  <li key={f} style={{ display: 'flex', gap: 10, fontSize: 14, color: 'var(--texte-soft)' }}>
                    <span style={{ color: 'var(--vert-sapin)', fontWeight: 700 }}>✓</span>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
              <a href="#demo" onClick={(e) => { e.preventDefault(); window.openVirageDemo(); }}
                 className="btn btn-secondary" style={{ marginTop: 'auto', justifyContent: 'center' }}>
                Demander un devis
              </a>
            </div>

            {/* PRO */}
            <div className="card" style={{
              padding: 32, display: 'flex', flexDirection: 'column',
              border: '2px solid var(--vert-sapin)',
              boxShadow: '0 12px 40px -16px rgba(31, 77, 62, 0.25)',
              position: 'relative',
            }}>
              <div style={{
                position: 'absolute', top: -12, left: '50%', transform: 'translateX(-50%)',
                background: 'var(--vert-sapin)', color: 'var(--blanc)',
                padding: '6px 14px', borderRadius: 999, fontSize: 12, fontWeight: 600, letterSpacing: '0.04em',
              }}>★ Recommandé</div>
              <div style={{ marginBottom: 18 }}>
                <span className="t-eyebrow">Pro</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 8 }}>
                <span style={{ fontSize: 44, fontWeight: 800, letterSpacing: '-0.02em', color: 'var(--vert-sapin)' }}>24€</span>
                <span style={{ fontSize: 14, color: 'var(--texte-mute)' }}>/ utilisateur / mois</span>
              </div>
              <p style={{ fontSize: 14, color: 'var(--texte-soft)', margin: '0 0 24px' }}>PME 50 → 300 collaborateurs.</p>
              <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 24px', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {['Tout le plan Starter, plus :', 'Les 3 cursus métier', 'Validation par les pairs', 'Certifications incluses', 'SSO Microsoft / Google', 'Support email + chat prioritaire'].map((f, i) => (
                  <li key={f} style={{ display: 'flex', gap: 10, fontSize: 14, color: i === 0 ? 'var(--texte)' : 'var(--texte-soft)', fontWeight: i === 0 ? 600 : 400 }}>
                    {i > 0 && <span style={{ color: 'var(--vert-sapin)', fontWeight: 700 }}>✓</span>}
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
              <a href="#demo" onClick={(e) => { e.preventDefault(); window.openVirageDemo(); }}
                 className="btn btn-primary" style={{ marginTop: 'auto', justifyContent: 'center' }}>
                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>

            {/* ENTERPRISE */}
            <div className="card" style={{ padding: 32, display: 'flex', flexDirection: 'column' }}>
              <div style={{ marginBottom: 18 }}>
                <span className="t-eyebrow">Enterprise</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 8 }}>
                <span style={{ fontSize: 32, fontWeight: 800, letterSpacing: '-0.02em' }}>Sur devis</span>
              </div>
              <p style={{ fontSize: 14, color: 'var(--texte-soft)', margin: '0 0 24px' }}>ETI 300+ utilisateurs.</p>
              <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 24px', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {['Tout le plan Pro, plus :', 'Cas d\'usage métier sur-mesure', 'Tableau de bord sur-mesure', 'API & intégrations dédiées', 'CSM dédié', 'SLA contractuel'].map((f, i) => (
                  <li key={f} style={{ display: 'flex', gap: 10, fontSize: 14, color: i === 0 ? 'var(--texte)' : 'var(--texte-soft)', fontWeight: i === 0 ? 600 : 400 }}>
                    {i > 0 && <span style={{ color: 'var(--vert-sapin)', fontWeight: 700 }}>✓</span>}
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
              <a href="#demo" onClick={(e) => { e.preventDefault(); window.openVirageDemo(); }}
                 className="btn btn-secondary" style={{ marginTop: 'auto', justifyContent: 'center' }}>
                Nous contacter
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* MATRICE FEATURES */}
      <section>
        <div className="container">
          <div style={{ textAlign: 'center', marginBottom: 32 }}>
            <span className="t-eyebrow">Comparatif détaillé</span>
            <h2 className="t-h2" style={{ marginTop: 12 }}>Quoi est inclus dans chaque plan</h2>
          </div>
          <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', borderBottom: '1px solid var(--hairline)', background: 'var(--creme)' }}>
              <div style={{ padding: '18px 24px', fontSize: 12, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--texte-mute)' }}></div>
              <div style={{ padding: '18px 16px', fontSize: 13, fontWeight: 700, textAlign: 'center' }}>Starter</div>
              <div style={{ padding: '18px 16px', fontSize: 13, fontWeight: 700, textAlign: 'center', color: 'var(--vert-sapin)' }}>Pro ★</div>
              <div style={{ padding: '18px 16px', fontSize: 13, fontWeight: 700, textAlign: 'center' }}>Enterprise</div>
            </div>
            {features.map((f, i) => (
              <div key={f.label} style={{
                display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr',
                borderBottom: i < features.length - 1 ? '1px solid var(--hairline)' : 'none',
                alignItems: 'center'
              }}>
                <div style={{ padding: '14px 24px', fontSize: 14, color: 'var(--texte)' }}>{f.label}</div>
                <div style={{ padding: '14px 16px', textAlign: 'center' }}>{renderCell(f.s)}</div>
                <div style={{ padding: '14px 16px', textAlign: 'center', background: 'rgba(184, 230, 207, 0.18)' }}>{renderCell(f.p)}</div>
                <div style={{ padding: '14px 16px', textAlign: 'center' }}>{renderCell(f.e)}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ROI + QUALIOPI */}
      <section style={{ background: 'var(--blanc)' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <div className="card" style={{ padding: 36, background: 'var(--vert-sapin)', color: 'var(--blanc)', border: 'none' }}>
            <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--vert-menthe)' }}>Calcul ROI</span>
            <h3 style={{ fontSize: 24, fontWeight: 700, lineHeight: 1.2, margin: '12px 0 18px' }}>10 000€ d'économies par utilisateur formé.</h3>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: 'rgba(255,255,255,0.85)', margin: '0 0 24px' }}>
              200h économisées par an × 50€/h coût horaire moyen = <strong style={{ color: 'var(--blanc)' }}>10 000€</strong> de productivité retrouvée.
            </p>
            <div style={{ background: 'rgba(255,255,255,0.08)', borderRadius: 12, padding: '16px 18px', borderLeft: '3px solid var(--vert-menthe)' }}>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)', marginBottom: 4 }}>Coût Pro annuel</div>
              <div style={{ fontSize: 22, fontWeight: 700 }}>288€ / utilisateur</div>
              <div style={{ fontSize: 13, color: 'var(--vert-menthe)', marginTop: 4 }}>≈ 35× retour sur investissement</div>
            </div>
          </div>
          <div className="card" style={{ padding: 36, background: 'var(--vert-menthe-soft)', border: 'none' }}>
            <span className="t-eyebrow">Financement</span>
            <h3 style={{ fontSize: 24, fontWeight: 700, lineHeight: 1.2, margin: '12px 0 18px', color: 'var(--vert-sapin)' }}>Financé par votre OPCO.</h3>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--texte)', margin: '0 0 18px' }}>
              <strong>0€ de reste à charge</strong> possible selon votre OPCO et votre plan de développement
              des compétences. Le groupe SRA est <strong>Qualiopi certifié</strong> depuis 2021.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {['Atlas, AKTO, OPCO 2i, OPCO EP — déjà accompagnés', 'Dossier OPCO préparé par notre équipe', 'Attestation Qualiopi sur demande'].map((l) => (
                <li key={l} style={{ display: 'flex', gap: 10, fontSize: 14, color: 'var(--texte)' }}>
                  <span style={{ color: 'var(--vert-sapin)', fontWeight: 700 }}>✓</span>
                  <span>{l}</span>
                </li>
              ))}
            </ul>
          </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 }}>Un devis adapté à vos volumes</h2>
          <p className="t-body" style={{ marginBottom: 32 }}>
            Au-delà de 100 utilisateurs, dégressifs automatiques. Au-delà de 300, cas d'usage personnalisés.
          </p>
          <a href="#demo" onClick={(e) => { e.preventDefault(); window.openVirageDemo(); }}
             className="btn btn-primary" style={{ padding: '16px 26px', fontSize: 16 }}>
            Demander un devis
            <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(<TarifsPage />);