// Home page — entry to the 3 demo scenarios
const Home = ({ navigate }) => {
  const scenarios = [
    {
      id: 'A',
      title: 'Scénario A — Créer ma première évaluation',
      persona: 'Enseignant',
      personaColor: '#6ECFB5',
      illus: 'assets/prof1.png',
      steps: ['1.1 Connexion', '1.2 Dashboard', '1.3 Paramètres', '1.4 Exercices', '1.2 Retour (évaluation créée)'],
      desc: 'Élodie crée une évaluation de complexité algorithmique pour ses L2 Info. Wizard 4 étapes, bibliothèque d’exercices, IA générative.',
      route: '#/prof/login',
      btn: 'Lancer le scénario A',
    },
    {
      id: 'B',
      title: 'Scénario B — Passer une évaluation',
      persona: 'Étudiant',
      personaColor: '#8B7CF6',
      illus: 'assets/studient.png',
      steps: ['2.1 Connexion', '2.2 Dashboard', '2.3 Pré-examen', '2.4 Composition (8 questions)', '2.5 Soumission'],
      desc: 'Lucas passe une évaluation chronométrée — 8 exercices de types variés (QCM, association, texte à trous, rédaction, ordonnancement). Mode plein écran, timer, auto-save.',
      route: '#/etudiant/login',
      btn: 'Lancer le scénario B',
    },
    {
      id: 'C',
      title: 'Scénario C — Corriger avec l’IA',
      persona: 'Enseignant',
      personaColor: '#A78BFA',
      illus: 'assets/prof.png',
      steps: ['1.2 Dashboard', '1.5 Correction IA', 'Valider / Modifier / Rejeter', '1.6 Résultats'],
      desc: 'Élodie corrige une copie de rédaction assistée par l’IA. La proposition de note, la justification et les points forts s’affichent en direct — elle valide ou modifie en un clic.',
      route: '#/prof/correction/ev-309',
      btn: 'Lancer le scénario C',
    },
  ];

  return (
    <div style={{ minHeight: '100vh', background: 'linear-gradient(180deg, #FAF8FF 0%, #F0FDF9 100%)', paddingBottom: 80 }}>
      {/* Header */}
      <header style={{ padding: '24px 48px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', maxWidth: 1400, margin: '0 auto' }}>
        <Logo size="lg" />
        <div className="flex gap-3 items-center">
          <span className="badge" style={{ background: 'rgba(110,207,181,0.15)', color: '#047857' }}><Icon name="shield" size={12}/> Établissement pilote</span>
          <a href="#/design-system" className="btn btn-secondary btn-sm">Design System</a>
        </div>
      </header>

      {/* Hero */}
      <section style={{ maxWidth: 1280, margin: '20px auto 48px', padding: '0 48px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48, alignItems: 'center' }}>
          <div>
            <div className="t-label" style={{ color: '#6ECFB5', marginBottom: 16 }}>Prototype interactif · MVP v1</div>
            <h1 className="t-h1" style={{ fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.03em', marginBottom: 20 }}>
              L'évaluation pédagogique<br/>
              <span style={{ background: 'linear-gradient(135deg, #8B7CF6, #E879A0)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>réinventée</span> pour le multi-campus.
            </h1>
            <p className="t-body" style={{ color: '#64748B', fontSize: 17, maxWidth: 560, marginBottom: 28 }}>
              Un environnement unique pour concevoir, diffuser, corriger (avec l'assistance d'une IA) et analyser les évaluations.
              Trois parcours — enseignant, étudiant, administrateur — pensés pour la réalité d'un établissement pilote.
            </p>
            <div className="flex gap-3 items-center">
              <a href="#/prof/login" className="btn btn-primary-prof btn-lg">
                <Icon name="play" size={16}/> Démarrer côté enseignant
              </a>
              <a href="#/etudiant/login" className="btn btn-secondary btn-lg">
                Côté étudiant <Icon name="arrowRight" size={16}/>
              </a>
            </div>
            <div className="flex gap-6" style={{ marginTop: 36, paddingTop: 24, borderTop: '1px solid #E2E8F0' }}>
              {[['3', 'parcours utilisateurs'], ['18', 'écrans cliquables'], ['7', 'types d’exercices'], ['5', 'campus simulés']].map(([n, l], i) => (
                <div key={i}>
                  <div style={{ fontFamily: 'Poppins', fontWeight: 800, fontSize: 28, color: '#1A1A2E' }}>{n}</div>
                  <div style={{ fontSize: 13, color: '#64748B' }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
          {/* Character collage */}
          <div style={{ position: 'relative', height: 420 }}>
            <div style={{ position: 'absolute', top: 0, right: 0, width: 220, height: 280, background: 'linear-gradient(135deg, #D0F5EC, #EDE9FE)', borderRadius: 40, transform: 'rotate(6deg)' }}/>
            <div style={{ position: 'absolute', bottom: 0, left: 20, width: 220, height: 300, background: 'linear-gradient(135deg, #FDE68A, #FECDD3)', borderRadius: 40, transform: 'rotate(-4deg)' }}/>
            <img src="assets/prof2.png" style={{ position: 'absolute', top: -30, right: 40, width: 220, filter: 'drop-shadow(0 20px 40px rgba(0,0,0,0.12))' }} />
            <img src="assets/studient.png" style={{ position: 'absolute', bottom: -20, left: 60, width: 240, filter: 'drop-shadow(0 20px 40px rgba(0,0,0,0.12))' }} />
            <img src="assets/admin.png" style={{ position: 'absolute', top: 80, left: -10, width: 180, filter: 'drop-shadow(0 20px 40px rgba(0,0,0,0.12))' }} />
          </div>
        </div>
      </section>

      {/* Scenarios */}
      <section style={{ maxWidth: 1280, margin: '0 auto', padding: '0 48px' }}>
        <div className="flex items-center justify-between" style={{ marginBottom: 24 }}>
          <div>
            <div className="t-label" style={{ color: '#94A3B8', marginBottom: 6 }}>Scénarios de démo</div>
            <h2 className="t-h2">Trois parcours clés à tester</h2>
          </div>
          <a href="#/screens" className="btn btn-ghost btn-sm">Tous les écrans <Icon name="arrowRight" size={14}/></a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {scenarios.map(sc => (
            <a key={sc.id} href={sc.route} className="card card-hover" style={{ padding: 0, overflow: 'hidden', cursor: 'pointer', display: 'flex', flexDirection: 'column' }}>
              <div style={{ height: 180, background: `linear-gradient(135deg, ${sc.personaColor}22, ${sc.personaColor}08)`, position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', top: 14, left: 14 }}>
                  <span className="badge" style={{ background: 'white', color: sc.personaColor }}>
                    <div style={{ width: 6, height: 6, borderRadius: 3, background: sc.personaColor }}/> {sc.persona}
                  </span>
                </div>
                <div style={{ position: 'absolute', top: 14, right: 14, fontFamily: 'Poppins', fontWeight: 800, fontSize: 44, color: sc.personaColor, opacity: 0.25, letterSpacing: '-0.03em' }}>{sc.id}</div>
                <img src={sc.illus} style={{ position: 'absolute', bottom: -10, right: 10, height: 180, objectFit: 'contain' }}/>
              </div>
              <div style={{ padding: 20, flex: 1, display: 'flex', flexDirection: 'column' }}>
                <h3 className="t-h3" style={{ marginBottom: 8 }}>{sc.title}</h3>
                <p className="t-small" style={{ color: '#64748B', marginBottom: 14, flex: 1 }}>{sc.desc}</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginBottom: 16 }}>
                  {sc.steps.map((s, i) => (
                    <span key={i} style={{ fontFamily: 'JetBrains Mono', fontSize: 10, background: '#F1F5F9', color: '#64748B', padding: '3px 8px', borderRadius: 4 }}>{s}</span>
                  ))}
                </div>
                <div className="btn btn-secondary btn-sm" style={{ alignSelf: 'flex-start' }}>
                  {sc.btn} <Icon name="arrowRight" size={14}/>
                </div>
              </div>
            </a>
          ))}
        </div>
      </section>

      {/* Direct access by screen */}
      <section style={{ maxWidth: 1280, margin: '64px auto 0', padding: '0 48px' }}>
        <div className="t-label" style={{ color: '#94A3B8', marginBottom: 12 }}>Accès direct par parcours</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {[
            { label: 'Parcours Enseignant', color: '#6ECFB5', icon: 'palette', screens: [
              ['#/prof/login', '1.1 Connexion'],
              ['#/prof', '1.2 Dashboard'],
              ['#/prof/wizard/1', '1.3 Paramètres'],
              ['#/prof/wizard/2', '1.4 Exercices'],
              ['#/prof/correction/ev-309', '1.5 Correction IA'],
              ['#/prof/results/ev-301', '1.6 Résultats'],
            ]},
            { label: 'Parcours Étudiant', color: '#8B7CF6', icon: 'zap', screens: [
              ['#/etudiant/login', '2.1 Connexion'],
              ['#/etudiant', '2.2 Dashboard'],
              ['#/etudiant/pre-examen/ev-312', '2.3 Pré-examen'],
              ['#/etudiant/examen/ev-312', '2.4 Examen'],
              ['#/etudiant/soumis', '2.5 Soumission'],
              ['#/etudiant/m/dashboard', '📱 Mobile'],
            ]},
            { label: 'Parcours Admin', color: '#6366F1', icon: 'building', screens: [
              ['#/admin', '3.1 Dashboard multi-campus'],
              ['#/admin/campus', '3.2 Campus & groupes'],
              ['#/admin/onboarding', '3.3 Onboarding enseignants'],
            ]},
          ].map((col, i) => (
            <div key={i} className="card" style={{ padding: 20 }}>
              <div className="flex items-center gap-3" style={{ marginBottom: 14 }}>
                <div style={{ width: 32, height: 32, borderRadius: 10, background: col.color + '22', color: col.color, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={col.icon} size={16}/>
                </div>
                <div style={{ fontFamily: 'Poppins', fontWeight: 700, fontSize: 14 }}>{col.label}</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                {col.screens.map(([href, label], j) => (
                  <a key={j} href={href} style={{ padding: '8px 12px', borderRadius: 8, fontSize: 13, color: '#475569', display: 'flex', justifyContent: 'space-between', alignItems: 'center', transition: 'all 0.15s' }}
                     onMouseEnter={e => { e.currentTarget.style.background = '#F1F5F9'; e.currentTarget.style.color = col.color; }}
                     onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#475569'; }}>
                    {label} <Icon name="chevronRight" size={14}/>
                  </a>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Limitations note */}
      <section style={{ maxWidth: 1280, margin: '48px auto 0', padding: '0 48px' }}>
        <div style={{ background: '#FEF9E7', border: '1px solid #FDE68A', borderRadius: 16, padding: '16px 20px', display: 'flex', gap: 14, alignItems: 'flex-start' }}>
          <div style={{ color: '#B45309', marginTop: 2 }}><Icon name="warn" size={18}/></div>
          <div>
            <div style={{ fontFamily: 'Poppins', fontWeight: 700, fontSize: 13, color: '#92400E', marginBottom: 4 }}>Limitations du prototype</div>
            <div className="t-small" style={{ color: '#78350F' }}>
              Données mockées, pas de backend · Les champs email/mot de passe acceptent n'importe quoi · Les corrections IA sont pré-écrites · Le reload réinitialise l'état · Responsive : parcours étudiant mobile + desktop, autres parcours desktop uniquement.
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

window.Home = Home;