// ============================================
// FLC — Page Accueil (i18n FR/AR)
// ============================================

// ============================================
// HomeHero — Carousel multi-slides (auto-rotation, swipe, dots, progress)
// 5 slides présentant chaque univers FLC
// ============================================
function HomeHero() {
  useLang();

  const SLIDE_DURATION = 7000; // ms per slide

  // Slide data (i18n keys built dynamically)
  const slides = [
    { key:'s1', img: IMG.classroom, accent:'var(--saffron-dark)', pillClass:'pill pill-mint',
      blob1:{c:'#F4A24C',w:340,h:340,t:-120,r:-100,o:0.45}, blob2:{c:'#7FC8A9',w:280,h:280,b:-100,l:-80,o:0.4},
      cta1Href:'contact.html', cta2Href:'methode.html', badgeIcon:'🎓',
      stat1Color:'var(--ink-500)', stat2Color:'var(--mint-600)' },
    { key:'s2', img: IMG.cambridge, accent:'var(--saffron-dark)', pillClass:'pill pill-saffron',
      blob1:{c:'#F4A24C',w:360,h:360,t:-130,r:-110,o:0.5}, blob2:{c:'#3E4F8F',w:260,h:260,b:-90,l:-60,o:0.25},
      cta1Href:'anglais.html', cta2Href:'contact.html', badgeIcon:'🏆',
      stat1Color:'var(--saffron-dark)', stat2Color:'var(--indigo-700)' },
    { key:'s3', img: IMG.primaire, accent:'var(--mint-600)', pillClass:'pill pill-mint',
      blob1:{c:'#7FC8A9',w:340,h:340,t:-120,r:-90,o:0.45}, blob2:{c:'#F4A24C',w:260,h:260,b:-90,l:-60,o:0.3},
      cta1Href:'soutien.html', cta2Href:'contact.html', badgeIcon:'✏️',
      stat1Color:'var(--mint-600)', stat2Color:'var(--saffron-dark)' },
    { key:'s4', img: IMG.cooking, accent:'var(--coral)', pillClass:'pill',
      pillStyle:{background:'rgba(232,128,107,.12)',color:'var(--coral)',borderColor:'rgba(232,128,107,.3)'},
      blob1:{c:'#E8806B',w:340,h:340,t:-120,r:-100,o:0.45}, blob2:{c:'#F4A24C',w:260,h:260,b:-80,l:-60,o:0.35},
      cta1Href:'ateliers.html', cta2Href:'contact.html', badgeIcon:'✨',
      stat1Color:'var(--coral)', stat2Color:'var(--saffron-dark)' },
    { key:'s5', img: IMG.coran, accent:'#E08A2D', pillClass:'pill',
      pillStyle:{background:'rgba(244,162,76,.12)',color:'#E08A2D',borderColor:'rgba(244,162,76,.3)'},
      blob1:{c:'#F4A24C',w:340,h:340,t:-120,r:-90,o:0.4}, blob2:{c:'#3E4F8F',w:260,h:260,b:-80,l:-60,o:0.3},
      cta1Href:'coran.html', cta2Href:'contact.html', badgeIcon:'📖',
      stat1Color:'#E08A2D', stat2Color:'var(--indigo-700)' },
  ];

  const labels = ['hh.lbl.s1','hh.lbl.s2','hh.lbl.s3','hh.lbl.s4','hh.lbl.s5'];

  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const [progress, setProgress] = React.useState(0); // 0 → 100
  const touchStartX = React.useRef(null);
  const slideRef = React.useRef(null);

  const goto = (i) => {
    setIdx(((i % slides.length) + slides.length) % slides.length);
    setProgress(0);
  };
  const next = () => goto(idx + 1);
  const prev = () => goto(idx - 1);

  // Auto-rotate with progress
  React.useEffect(() => {
    if (paused) return;
    const start = Date.now();
    const tick = setInterval(() => {
      const elapsed = Date.now() - start;
      const pct = Math.min(100, (elapsed / SLIDE_DURATION) * 100);
      setProgress(pct);
      if (elapsed >= SLIDE_DURATION) {
        clearInterval(tick);
        setIdx(i => (i + 1) % slides.length);
        setProgress(0);
      }
    }, 60);
    return () => clearInterval(tick);
  }, [idx, paused]);

  // Pause when tab hidden
  React.useEffect(() => {
    const handler = () => setPaused(document.hidden);
    document.addEventListener('visibilitychange', handler);
    return () => document.removeEventListener('visibilitychange', handler);
  }, []);

  // Touch swipe
  const onTouchStart = e => { touchStartX.current = e.touches[0].clientX; };
  const onTouchEnd = e => {
    if (touchStartX.current == null) return;
    const dx = e.changedTouches[0].clientX - touchStartX.current;
    if (Math.abs(dx) > 50) { dx < 0 ? next() : prev(); }
    touchStartX.current = null;
  };

  const s = slides[idx];
  const k = (sub) => `hh.${s.key}.${sub}`;

  return (
    <section
      className="hh-section"
      onMouseEnter={()=>setPaused(true)}
      onMouseLeave={()=>setPaused(false)}
    >
      {/* Animated background blobs that change with slide */}
      <div className="hh-blob hh-blob-1" key={`b1-${idx}`} style={{background:s.blob1.c,width:s.blob1.w,height:s.blob1.h,top:s.blob1.t,right:s.blob1.r,opacity:s.blob1.o}}></div>
      <div className="hh-blob hh-blob-2" key={`b2-${idx}`} style={{background:s.blob2.c,width:s.blob2.w,height:s.blob2.h,bottom:s.blob2.b,left:s.blob2.l,opacity:s.blob2.o}}></div>

      <div className="container hh-content">
        <div
          className="hh-grid"
          ref={slideRef}
          onTouchStart={onTouchStart}
          onTouchEnd={onTouchEnd}
        >
          {/* Copy column */}
          <div className="hh-copy" key={`copy-${idx}`}>
            <span className={s.pillClass} style={{...(s.pillStyle||{}),animation:'pulse 2.5s infinite'}}>
              {t(k('pill'))}
            </span>
            <h1 className="h-display h1 hh-title">
              {t(k('title1'))} <em style={{fontStyle:'italic',color:s.accent}}>{t(k('title_em'))}</em>.
            </h1>
            <p className="lead hh-lead">{t(k('lead'))}</p>
            <div className="hh-ctas">
              <a href={s.cta1Href} className="btn btn-primary">{t(k('cta1'))}</a>
              <a href={s.cta2Href} className="btn btn-ghost">{t(k('cta2'))}</a>
            </div>
            <div className="hero-trust">
              <div className="hero-trust-avatars">
                {[1,2,3,4].map(i=>(
                  <div key={i} className="hero-avatar" style={{background:['#F4A24C','#7FC8A9','#E8806B','#3E4F8F'][i-1]}}>
                    {['L','S','A','Y'][i-1]}
                  </div>
                ))}
              </div>
              <div>
                <div style={{display:'flex',gap:2,color:'#F4A24C'}}>
                  {[1,2,3,4,5].map(i=><I.Star key={i} size={13}/>)}
                </div>
                <div style={{fontSize:12,color:'var(--ink-700)',marginTop:2}}>{t('home.hero.trust')}</div>
              </div>
            </div>
          </div>

          {/* Visual column */}
          <div className="hh-visual">
            <div className="hh-photo" key={`photo-${idx}`}>
              <img src={s.img} alt="" loading="eager"/>
              <div className="hh-photo-badge">
                <span style={{fontSize:20}}>{s.badgeIcon}</span>
                <div>
                  <div style={{fontSize:11,color:'var(--ink-500)',fontWeight:600}}>{t(k('badge_l'))}</div>
                  <div style={{fontWeight:700,fontSize:14,color:'var(--indigo-900)'}}>{t(k('badge_v'))}</div>
                </div>
              </div>
            </div>
            <div className="hh-stat hh-stat-1" key={`st1-${idx}`}>
              <div className="hh-stat-l" style={{color:s.stat1Color}}>{t(k('stat1_l'))}</div>
              <div className="hh-stat-v">{t(k('stat1_v'))}</div>
              <div className="hh-stat-s">{t(k('stat1_s'))}</div>
            </div>
            <div className="hh-stat hh-stat-2" key={`st2-${idx}`}>
              <div className="hh-stat-l" style={{color:s.stat2Color}}>{t(k('stat2_l'))}</div>
              <div className="hh-stat-v">{t(k('stat2_v'))}</div>
              <div className="hh-stat-s">{t(k('stat2_s'))}</div>
            </div>
          </div>
        </div>

        {/* Carousel controls (dots with labels + arrows + progress) */}
        <div className="hh-controls">
          <button className="hh-arrow hh-arrow-prev" onClick={prev} aria-label={t('hh.aria.prev')}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
          </button>
          <div className="hh-dots">
            {slides.map((_,i)=>(
              <button
                key={i}
                className={`hh-dot ${i===idx?'hh-dot-active':''}`}
                onClick={()=>goto(i)}
                aria-label={t(labels[i])}
              >
                <span className="hh-dot-label">{t(labels[i])}</span>
                <span className="hh-dot-progress">
                  <span className="hh-dot-progress-fill" style={{width: i===idx ? `${progress}%` : (i<idx ? '100%' : '0%')}}></span>
                </span>
              </button>
            ))}
          </div>
          <button className="hh-arrow hh-arrow-next" onClick={next} aria-label={t('hh.aria.next')}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
          </button>
          <button className="hh-pause" onClick={()=>setPaused(p=>!p)} aria-label={paused ? t('hh.aria.play') : t('hh.aria.pause')}>
            {paused ? (
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
            ) : (
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
            )}
          </button>
        </div>
      </div>

      <style>{`
        .hh-section {
          position: relative;
          padding: 32px 0 56px;
          background: linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%);
          overflow: hidden;
        }
        @media (min-width: 768px) { .hh-section { padding: 56px 0 80px; } }
        .hh-blob {
          position: absolute;
          border-radius: 50%;
          filter: blur(80px);
          pointer-events: none;
          transition: opacity 0.8s ease;
          animation: hh-blob-fade 0.8s ease;
        }
        @keyframes hh-blob-fade { from { opacity: 0; } }
        .hh-content { position: relative; z-index: 1; }
        .hh-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 36px;
          align-items: center;
        }
        @media (min-width: 900px) { .hh-grid { grid-template-columns: 1.05fr 1fr; gap: 56px; } }

        /* Copy block transitions */
        .hh-copy { animation: hh-copy-in 0.6s cubic-bezier(.2,.8,.2,1); }
        @keyframes hh-copy-in {
          from { opacity: 0; transform: translateY(12px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .hh-title { color: var(--indigo-900); margin-top: 14px; }
        .hh-lead { margin-top: 14px; max-width: 560px; }
        .hh-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
        .hero-trust { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
        .hero-trust-avatars { display: flex; }
        .hero-avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid white; margin-left: -10px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 13px; }
        .hero-trust-avatars > :first-child { margin-left: 0; }
        html[dir="rtl"] .hero-avatar { margin-left: 0; margin-right: -10px; }
        html[dir="rtl"] .hero-trust-avatars > :first-child { margin-right: 0; }

        /* Visual block */
        .hh-visual { position: relative; aspect-ratio: 4/3.4; }
        .hh-photo {
          position: absolute; inset: 0;
          border-radius: var(--r-2xl);
          overflow: hidden;
          box-shadow: var(--shadow-xl);
          animation: hh-photo-in 0.7s cubic-bezier(.2,.8,.2,1);
        }
        @keyframes hh-photo-in {
          from { opacity: 0; transform: scale(1.04); }
          to { opacity: 1; transform: scale(1); }
        }
        .hh-photo img { width: 100%; height: 100%; object-fit: cover; }
        .hh-photo-badge {
          position: absolute;
          bottom: 16px; left: 16px;
          background: white;
          padding: 10px 14px;
          border-radius: var(--r-md);
          display: flex;
          align-items: center;
          gap: 10px;
          box-shadow: var(--shadow-md);
        }
        html[dir="rtl"] .hh-photo-badge { left: auto; right: 16px; }

        .hh-stat {
          position: absolute;
          background: white;
          padding: 14px 18px;
          border-radius: var(--r-lg);
          box-shadow: var(--shadow-lg);
          animation: hh-stat-in 0.7s cubic-bezier(.2,.8,.2,1) both, float 6s ease-in-out infinite 0.7s;
          min-width: 130px;
        }
        @keyframes hh-stat-in {
          from { opacity: 0; transform: translateX(20px) scale(.96); }
          to { opacity: 1; transform: translateX(0) scale(1); }
        }
        .hh-stat-1 { top: 8%; right: -8px; }
        .hh-stat-2 { bottom: 22%; right: -16px; animation-delay: 0.15s, 2s; }
        @media (min-width: 900px) {
          .hh-stat-1 { right: -28px; }
          .hh-stat-2 { right: -36px; }
        }
        html[dir="rtl"] .hh-stat-1 { right: auto; left: -8px; }
        html[dir="rtl"] .hh-stat-2 { right: auto; left: -16px; }
        @media (min-width: 900px) {
          html[dir="rtl"] .hh-stat-1 { left: -28px; }
          html[dir="rtl"] .hh-stat-2 { left: -36px; }
        }
        .hh-stat-l { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
        .hh-stat-v { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--indigo-900); margin: 4px 0; line-height: 1; }
        .hh-stat-s { font-size: 12px; color: var(--ink-700); line-height: 1.3; max-width: 130px; }

        /* Carousel controls */
        .hh-controls {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-top: 36px;
          padding: 8px;
          background: rgba(255,255,255,.7);
          backdrop-filter: blur(10px);
          border: 1px solid rgba(30,42,94,.06);
          border-radius: 999px;
          box-shadow: var(--shadow-sm);
          width: fit-content;
          max-width: 100%;
          margin-left: auto;
          margin-right: auto;
        }
        @media (min-width: 768px) { .hh-controls { margin-top: 48px; } }
        .hh-arrow, .hh-pause {
          width: 36px; height: 36px;
          border-radius: 50%;
          border: 0;
          background: white;
          color: var(--indigo-900);
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all .2s;
          flex-shrink: 0;
        }
        .hh-arrow:hover, .hh-pause:hover { background: var(--indigo-900); color: white; transform: scale(1.05); }
        html[dir="rtl"] .hh-arrow svg { transform: scaleX(-1); }
        .hh-pause { width: 32px; height: 32px; }
        .hh-dots {
          display: flex;
          gap: 6px;
          padding: 0 4px;
          overflow-x: auto;
          scrollbar-width: none;
        }
        .hh-dots::-webkit-scrollbar { display: none; }
        .hh-dot {
          flex-shrink: 0;
          padding: 8px 12px;
          background: transparent;
          border: 0;
          color: var(--ink-700);
          font-size: 12px;
          font-weight: 600;
          cursor: pointer;
          border-radius: 999px;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 6px;
          transition: color .25s, background .25s;
          min-width: 70px;
        }
        .hh-dot:hover { color: var(--indigo-900); }
        .hh-dot-active {
          color: var(--indigo-900);
          background: rgba(244,162,76,.12);
        }
        .hh-dot-label { white-space: nowrap; }
        .hh-dot-progress {
          width: 100%;
          height: 2px;
          background: rgba(30,42,94,.1);
          border-radius: 2px;
          overflow: hidden;
          display: block;
        }
        .hh-dot-progress-fill {
          display: block;
          height: 100%;
          background: var(--saffron-dark);
          transition: width 0.2s linear;
        }
        .hh-dot:not(.hh-dot-active) .hh-dot-progress-fill { background: var(--ink-300, rgba(30,42,94,.2)); }

        @media (max-width: 600px) {
          .hh-dot { min-width: 56px; padding: 6px 8px; font-size: 11px; }
          .hh-arrow, .hh-pause { width: 32px; height: 32px; }
        }
      `}</style>
    </section>
  );
}

function HomeTrust() {
  useLang();
  const stats = [
    { num: '8–12', label: t('home.trust.s1.label'), sub: t('home.trust.s1.sub') },
    { num: '115h', label: t('home.trust.s2.label'), sub: t('home.trust.s2.sub') },
    { num: '+25%', label: t('home.trust.s3.label'), sub: t('home.trust.s3.sub') },
    { num: '100%', label: t('home.trust.s4.label'), sub: t('home.trust.s4.sub') },
  ];
  return (
    <section style={{padding:'40px 0',background:'white',borderTop:'1px solid var(--ink-100)',borderBottom:'1px solid var(--ink-100)'}}>
      <div className="container">
        <div className="trust-grid">
          {stats.map((s,i)=>(
            <div key={i} className="trust-cell reveal">
              <div className="trust-num">{s.num}</div>
              <div className="trust-label">{s.label}</div>
              <div className="trust-sub">{s.sub}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
        @media (min-width: 768px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
        .trust-cell { padding: 18px 12px; text-align: center; border-right: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); }
        .trust-cell:nth-child(2n) { border-right: none; }
        .trust-cell:nth-child(n+3) { border-bottom: none; }
        @media (min-width: 768px) {
          .trust-cell { padding: 24px 16px; border-right: 1px solid var(--ink-100); border-bottom: none; }
          .trust-cell:last-child { border-right: none; }
          .trust-cell:nth-child(2n) { border-right: 1px solid var(--ink-100); }
        }
        .trust-num { font-family: var(--font-display); font-size: clamp(28px, 6vw, 40px); font-weight: 700; color: var(--indigo-900); line-height: 1; }
        .trust-label { font-size: 13px; font-weight: 600; color: var(--saffron-dark); margin-top: 4px; }
        .trust-sub { font-size: 11px; color: var(--ink-500); margin-top: 6px; line-height: 1.4; }
      `}</style>
    </section>
  );
}

function HomePillars() {
  useLang();
  const pillars = [
    {
      icon: '🌍', img: IMG.english_kids,
      title: t('home.pillars.p1.title'),
      sub: t('home.pillars.p1.sub'),
      desc: t('home.pillars.p1.desc'),
      tags: [t('home.pillars.tag.allages'), 'Cambridge', 'IELTS / TOEFL'],
      href: 'anglais.html',
      color: '#F4A24C',
    },
    {
      icon: '📚', img: IMG.college,
      title: t('home.pillars.p2.title'),
      sub: t('home.pillars.p2.sub'),
      desc: t('home.pillars.p2.desc'),
      tags: [t('home.pillars.tag.allmatter'), t('home.pillars.tag.progress'), t('home.pillars.tag.exams')],
      href: 'soutien.html',
      color: '#7FC8A9',
    },
    {
      icon: '🎨', img: IMG.arts,
      title: t('home.pillars.p3.title'),
      sub: t('home.pillars.p3.sub'),
      desc: t('home.pillars.p3.desc'),
      tags: ['+15', t('home.pillars.tag.indoor'), t('home.pillars.tag.allages')],
      href: 'ateliers.html',
      color: '#E8806B',
    },
  ];
  return (
    <section style={{background:'var(--cream)'}}>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">{t('home.pillars.eyebrow')}</span>
          <h2 className="h-display h2">{t('home.pillars.title')}</h2>
          <p className="lead" style={{maxWidth:600}}>{t('home.pillars.lead')}</p>
        </div>
        <div className="pillars-grid">
          {pillars.map((p,i)=>(
            <a href={p.href} key={i} className="pillar-card reveal">
              <div className="pillar-img">
                <img src={p.img} alt="" loading="lazy"/>
                <div className="pillar-icon" style={{background:p.color}}>{p.icon}</div>
              </div>
              <div className="pillar-body">
                <div className="pillar-sub">{p.sub}</div>
                <h3 className="h-display" style={{fontSize:24,fontWeight:600,marginTop:4}}>{p.title}</h3>
                <p style={{fontSize:14,color:'var(--ink-700)',marginTop:10,lineHeight:1.6}}>{p.desc}</p>
                <div style={{display:'flex',gap:6,flexWrap:'wrap',marginTop:14}}>
                  {p.tags.map(tag=><span key={tag} className="pill" style={{fontSize:11,padding:'4px 10px'}}>{tag}</span>)}
                </div>
                <div className="pillar-link">{t('home.pillars.discover')} <I.Arrow size={14}/></div>
              </div>
            </a>
          ))}
        </div>
      </div>
      <style>{`
        .pillars-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
        @media (min-width: 768px) { .pillars-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
        .pillar-card { background: white; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--ink-100); transition: transform .3s, box-shadow .3s; display: flex; flex-direction: column; }
        .pillar-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
        .pillar-img { position: relative; aspect-ratio: 16/10; overflow: hidden; }
        .pillar-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
        .pillar-card:hover .pillar-img img { transform: scale(1.06); }
        .pillar-icon { position: absolute; top: 14px; left: 14px; width: 44px; height: 44px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: var(--shadow-md); }
        .pillar-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
        .pillar-sub { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--saffron-dark); }
        .pillar-link { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--indigo-800); font-size: 14px; }
        .pillar-card:hover .pillar-link { gap: 10px; }
      `}</style>
    </section>
  );
}

function HomeQuiz() {
  useLang();
  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState({});
  const questions = [
    {
      q: t('home.quiz.q1'),
      key: "for",
      options: [
        { v: 'kid', label: t('home.quiz.q1.kid'), icon: '👧' },
        { v: 'teen', label: t('home.quiz.q1.teen'), icon: '🧑' },
        { v: 'adult', label: t('home.quiz.q1.adult'), icon: '👤' },
      ]
    },
    {
      q: t('home.quiz.q2'),
      key: "goal",
      options: [
        { v: 'lang', label: t('home.quiz.q2.lang'), icon: '🌍' },
        { v: 'school', label: t('home.quiz.q2.school'), icon: '📈' },
        { v: 'fun', label: t('home.quiz.q2.fun'), icon: '🎨' },
        { v: 'cert', label: t('home.quiz.q2.cert'), icon: '🎓' },
      ]
    },
    {
      q: t('home.quiz.q3'),
      key: "time",
      options: [
        { v: 'week', label: t('home.quiz.q3.week'), icon: '📅' },
        { v: 'wkend', label: t('home.quiz.q3.wkend'), icon: '🗓️' },
        { v: 'both', label: t('home.quiz.q3.both'), icon: '✨' },
      ]
    }
  ];

  function getResult() {
    const { for: f, goal: g } = answers;
    if (g === 'lang') return { title: t('home.quiz.r.lang'), sub: t('home.quiz.r.sub_lang_'+(f||'kid')), href: 'anglais.html', color: '#F4A24C' };
    if (g === 'school') return { title: t('home.quiz.r.school'), sub: t('home.quiz.r.sub_school_'+(f||'kid')), href: 'soutien.html', color: '#7FC8A9' };
    if (g === 'fun') return { title: t('home.quiz.r.fun'), sub: t('home.quiz.r.sub_fun'), href: 'ateliers.html', color: '#E8806B' };
    if (g === 'cert') return { title: t('home.quiz.r.cert'), sub: t('home.quiz.r.sub_cert'), href: 'anglais.html', color: '#3E4F8F' };
  }

  function pick(key, val) {
    const next = { ...answers, [key]: val };
    setAnswers(next);
    if (step < questions.length - 1) setStep(step+1);
    else setStep(questions.length);
  }

  function reset() { setAnswers({}); setStep(0); }

  return (
    <section style={{background:'var(--indigo-900)',color:'white',position:'relative',overflow:'hidden'}}>
      <div style={{position:'absolute',width:400,height:400,background:'#F4A24C',borderRadius:'50%',filter:'blur(120px)',opacity:.2,top:-100,right:-100}}></div>
      <div className="container" style={{position:'relative'}}>
        <div className="section-head reveal" style={{marginBottom:32}}>
          <span className="eyebrow" style={{color:'#F4A24C'}}>{t('home.quiz.eyebrow')}</span>
          <h2 className="h-display h2" style={{color:'white'}}>{t('home.quiz.title')}</h2>
        </div>

        <div className="quiz-card reveal">
          {step < questions.length ? (
            <React.Fragment>
              <div className="quiz-progress">
                {questions.map((_,i)=>(
                  <div key={i} className={`quiz-dot ${i<=step?'active':''}`}></div>
                ))}
                <span className="quiz-step-num">{t('home.quiz.step')} {step+1} / {questions.length}</span>
              </div>
              <h3 className="h-display" style={{fontSize:'clamp(22px,5vw,30px)',fontWeight:600,marginTop:16,color:'var(--indigo-900)'}}>{questions[step].q}</h3>
              <div className="quiz-options">
                {questions[step].options.map(o=>(
                  <button key={o.v} className="quiz-option" onClick={()=>pick(questions[step].key, o.v)}>
                    <span style={{fontSize:24}}>{o.icon}</span>
                    <span>{o.label}</span>
                    <I.Arrow/>
                  </button>
                ))}
              </div>
            </React.Fragment>
          ) : (
            <div className="quiz-result">
              <div className="quiz-confetti">🎉</div>
              <div style={{fontSize:13,fontWeight:700,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--saffron-dark)'}}>{t('home.quiz.r.label')}</div>
              <h3 className="h-display" style={{fontSize:'clamp(26px,6vw,36px)',fontWeight:700,marginTop:8,color:'var(--indigo-900)'}}>{getResult().title}</h3>
              <p style={{color:'var(--ink-700)',marginTop:8,fontSize:15}}>{getResult().sub}</p>
              <div style={{display:'flex',gap:10,flexWrap:'wrap',marginTop:24,justifyContent:'center'}}>
                <a href={getResult().href} className="btn btn-primary">{t('home.quiz.r.discover')}</a>
                <a href="contact.html" className="btn btn-dark">{t('home.quiz.r.book')}</a>
              </div>
              <button className="btn btn-link" onClick={reset} style={{marginTop:16}}>{t('home.quiz.r.redo')}</button>
            </div>
          )}
        </div>
      </div>
      <style>{`
        .quiz-card { background: white; color: var(--ink-900); border-radius: var(--r-2xl); padding: 28px 22px; max-width: 720px; margin: 0 auto; box-shadow: var(--shadow-xl); }
        @media (min-width: 768px) { .quiz-card { padding: 40px; } }
        .quiz-progress { display: flex; align-items: center; gap: 6px; }
        .quiz-dot { width: 28px; height: 4px; border-radius: 999px; background: var(--ink-100); transition: background .3s; }
        .quiz-dot.active { background: var(--saffron); }
        .quiz-step-num { margin-left: auto; font-size: 12px; color: var(--ink-500); font-weight: 600; }
        .quiz-options { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
        .quiz-option { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--cream); border-radius: var(--r-md); text-align: left; font-size: 15px; font-weight: 500; color: var(--indigo-900); border: 2px solid transparent; transition: all .2s; }
        .quiz-option > span:nth-child(2) { flex: 1; }
        .quiz-option:hover { background: var(--saffron-50); border-color: var(--saffron); transform: translateX(4px); }
        .quiz-result { text-align: center; padding: 12px 0; }
        .quiz-confetti { font-size: 48px; margin-bottom: 8px; animation: float 3s ease infinite; }
      `}</style>
    </section>
  );
}

function HomeWhy() {
  useLang();
  const items = [
    { num:'01', title: t('home.why.1.t'), desc: t('home.why.1.d'), icon:'⚖️' },
    { num:'02', title: t('home.why.2.t'), desc: t('home.why.2.d'), icon:'📘' },
    { num:'03', title: t('home.why.3.t'), desc: t('home.why.3.d'), icon:'🎯' },
    { num:'04', title: t('home.why.4.t'), desc: t('home.why.4.d'), icon:'⏱️' },
    { num:'05', title: t('home.why.5.t'), desc: t('home.why.5.d'), icon:'🎁' },
    { num:'06', title: t('home.why.6.t'), desc: t('home.why.6.d'), icon:'👩‍🏫' },
  ];
  return (
    <section>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">{t('home.why.eyebrow')}</span>
          <h2 className="h-display h2">{t('home.why.title')}</h2>
          <p className="lead">{t('home.why.lead')}</p>
        </div>
        <div className="why-grid">
          {items.map((it,i)=>(
            <div key={i} className="why-card reveal">
              <div className="why-num">{it.num}</div>
              <div className="why-icon">{it.icon}</div>
              <h4 className="h-display" style={{fontSize:18,fontWeight:600,marginTop:12,color:'var(--indigo-900)'}}>{it.title}</h4>
              <p style={{fontSize:14,color:'var(--ink-700)',lineHeight:1.6,marginTop:6}}>{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .why-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
        @media (min-width: 640px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
        .why-card { padding: 24px; background: white; border-radius: var(--r-lg); border: 1px solid var(--ink-100); position: relative; transition: all .3s; }
        .why-card:hover { border-color: var(--saffron); transform: translateY(-4px); box-shadow: var(--shadow-md); }
        .why-num { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--saffron-dark); letter-spacing: .1em; }
        .why-icon { font-size: 32px; margin-top: 4px; }
      `}</style>
    </section>
  );
}

function HomeTestimonials() {
  useLang();
  const tests = [
    { name: t('home.test.1.name'), role: t('home.test.1.role'), txt: t('home.test.1.txt'), avatar:'#F4A24C' },
    { name: t('home.test.2.name'), role: t('home.test.2.role'), txt: t('home.test.2.txt'), avatar:'#7FC8A9' },
    { name: t('home.test.3.name'), role: t('home.test.3.role'), txt: t('home.test.3.txt'), avatar:'#E8806B' },
  ];
  return (
    <section style={{background:'white'}}>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">{t('home.test.eyebrow')}</span>
          <h2 className="h-display h2">{t('home.test.title')}</h2>
        </div>
        <div className="test-grid">
          {tests.map((tt,i)=>(
            <div key={i} className="test-card reveal">
              <div style={{display:'flex',gap:1,color:'#F4A24C',marginBottom:14}}>
                {[1,2,3,4,5].map(s=><I.Star key={s} size={16}/>)}
              </div>
              <p className="h-display" style={{fontSize:18,lineHeight:1.5,fontWeight:500,color:'var(--indigo-900)'}}>« {tt.txt} »</p>
              <div style={{display:'flex',alignItems:'center',gap:10,marginTop:20,paddingTop:16,borderTop:'1px solid var(--ink-100)'}}>
                <div style={{width:40,height:40,borderRadius:'50%',background:tt.avatar,color:'white',display:'flex',alignItems:'center',justifyContent:'center',fontWeight:700}}>
                  {tt.name[0]}
                </div>
                <div>
                  <div style={{fontWeight:600,fontSize:14,color:'var(--indigo-900)'}}>{tt.name}</div>
                  <div style={{fontSize:12,color:'var(--ink-500)'}}>{tt.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .test-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
        @media (min-width: 768px) { .test-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
        .test-card { padding: 28px; background: var(--cream); border-radius: var(--r-xl); border: 1px solid var(--ink-100); }
      `}</style>
    </section>
  );
}

function HomeCTA() {
  useLang();
  return (
    <section style={{background:'var(--saffron)',color:'var(--indigo-900)',padding:'56px 0'}}>
      <div className="container" style={{textAlign:'center'}}>
        <div className="reveal">
          <div style={{display:'inline-flex',alignItems:'center',gap:8,padding:'8px 16px',background:'rgba(20,28,66,.1)',borderRadius:999,fontSize:12,fontWeight:700,letterSpacing:'.08em',textTransform:'uppercase'}}>
            {t('cta.guarantee')}
          </div>
          <h2 className="h-display h2" style={{marginTop:16,color:'var(--indigo-900)'}}>
            {t('cta.title')}
          </h2>
          <p className="lead" style={{color:'var(--indigo-800)',maxWidth:560,margin:'14px auto 0'}}>
            {t('cta.lead')}
          </p>
          <div style={{display:'flex',gap:10,justifyContent:'center',flexWrap:'wrap',marginTop:28}}>
            <a href="contact.html" className="btn btn-dark">{t('cta.book')}</a>
            <a href={FLC_WA} target="_blank" className="btn btn-light">{t('cta.wa')}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <React.Fragment>
      <FLCObserver/>
      <FLCHeader active="index.html"/>
      <main>
        <HomeHero/>
        <HomeTrust/>
        <HomePillars/>
        <HomeQuiz/>
        <HomeWhy/>
        <HomeTestimonials/>
        <HomeCTA/>
      </main>
      <FLCFooter/>
      <FLCSticky/>
      <FLCFab/>
    </React.Fragment>
  );
}

window.HomeCTA = HomeCTA;

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