// ============================================
// FLC — Anglais page (i18n)
// ============================================

function AnglaisHero() {
  useLang();
  return (
    <FLCPageHero
      pillText={t('ang.pill')}
      pillVariant="saffron"
      title={t('ang.title1')}
      emText={t('ang.title_em')}
      titleSuffix="."
      lead={t('ang.lead')}
      primaryCta={{ label: t('ang.cta_test'), href: 'contact.html' }}
      secondaryCta={{ label: t('ang.cta_prog'), href: '#programme' }}
      image={IMG.cambridge}
      imageBadge={{ icon: '🎓', label: 'Cambridge', value: 'Préparation officielle' }}
      stats={[
        { label: 'CECRL', value: 'A1 → B2', sub: 'Tous niveaux', color: 'var(--saffron-dark)' },
        { label: 'Élèves/groupe', value: '6–10', sub: 'Suivi personnalisé', color: 'var(--mint-600)' }
      ]}
      blob1={{ color:'#F4A24C', w:340, h:340, top:-120, right:-100, opacity:0.45 }}
      blob2={{ color:'#7FC8A9', w:260, h:260, bottom:-80, left:-60, opacity:0.35 }}
      accent="var(--saffron-dark)"
    />
  );
}

function AnglaisMethod() {
  useLang();
  const items = [
    { icon:'🗣️', title: t('ang.method.s.title'), desc: t('ang.method.s.desc') },
    { icon:'👂', title: t('ang.method.l.title'), desc: t('ang.method.l.desc') },
    { icon:'📖', title: t('ang.method.r.title'), desc: t('ang.method.r.desc') },
    { icon:'✍️', title: t('ang.method.w.title'), desc: t('ang.method.w.desc') },
  ];
  return (
    <section style={{background:'white'}}>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">{t('ang.method.eyebrow')}</span>
          <h2 className="h-display h2">{t('ang.method.title')}</h2>
          <p className="lead">{t('ang.method.lead')}</p>
        </div>
        <div className="four-grid">
          {items.map((it,i)=>(
            <div key={i} className="four-card reveal">
              <div className="four-icon">{it.icon}</div>
              <h4 className="h-display" style={{fontSize:20,fontWeight:600,marginTop:14,color:'var(--indigo-900)'}}>{it.title}</h4>
              <p style={{fontSize:14,color:'var(--ink-700)',lineHeight:1.6,marginTop:8}}>{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .four-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
        @media (min-width: 640px) { .four-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (min-width: 1024px) { .four-grid { grid-template-columns: repeat(4, 1fr); } }
        .four-card { padding: 26px; background: var(--cream); border-radius: var(--r-lg); border: 1px solid var(--ink-100); transition: all .3s; }
        .four-card:hover { transform: translateY(-4px); border-color: var(--saffron); }
        .four-icon { width: 56px; height: 56px; border-radius: var(--r-md); background: white; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: var(--shadow-sm); }
      `}</style>
    </section>
  );
}

function AnglaisPrograms() {
  useLang();
  const [tab, setTab] = React.useState('kids');
  const data = {
    kids: {
      label: t('ang.prog.kids.label'),
      img: IMG.english_kids,
      title: t('ang.prog.kids.title'),
      books: t('ang.prog.kids.books'),
      desc: t('ang.prog.kids.desc'),
      points: [t('ang.prog.kids.p1'), t('ang.prog.kids.p2'), t('ang.prog.kids.p3'), t('ang.prog.kids.p4'), t('ang.prog.kids.p5')]
    },
    teens: {
      label: t('ang.prog.teens.label'),
      img: IMG.english_teens,
      title: t('ang.prog.teens.title'),
      books: t('ang.prog.teens.books'),
      desc: t('ang.prog.teens.desc'),
      points: [t('ang.prog.teens.p1'), t('ang.prog.teens.p2'), t('ang.prog.teens.p3'), t('ang.prog.teens.p4'), t('ang.prog.teens.p5')]
    },
    adults: {
      label: t('ang.prog.adults.label'),
      img: IMG.english_adults,
      title: t('ang.prog.adults.title'),
      books: t('ang.prog.adults.books'),
      desc: t('ang.prog.adults.desc'),
      points: [t('ang.prog.adults.p1'), t('ang.prog.adults.p2'), t('ang.prog.adults.p3'), t('ang.prog.adults.p4'), t('ang.prog.adults.p5')]
    }
  };
  const d = data[tab];
  return (
    <section id="programme" style={{background:'var(--cream)'}}>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">{t('ang.prog.eyebrow')}</span>
          <h2 className="h-display h2">{t('ang.prog.title')}</h2>
        </div>
        <div className="tabs reveal">
          {Object.keys(data).map(k=>(
            <button key={k} className={`tab ${tab===k?'active':''}`} onClick={()=>setTab(k)}>
              {data[k].label}
            </button>
          ))}
        </div>
        <div className="tab-content reveal">
          <div className="tab-img">
            <img src={d.img} alt=""/>
            <div className="tab-img-overlay">
              <div style={{fontSize:11,fontWeight:700,letterSpacing:'.1em',textTransform:'uppercase',opacity:.85}}>{t('ang.book_used')}</div>
              <div style={{fontWeight:600,marginTop:4}}>{d.books}</div>
            </div>
          </div>
          <div className="tab-body">
            <h3 className="h-display" style={{fontSize:26,fontWeight:600,color:'var(--indigo-900)'}}>{d.title}</h3>
            <p style={{color:'var(--ink-700)',marginTop:10,fontSize:15,lineHeight:1.6}}>{d.desc}</p>
            <ul style={{listStyle:'none',marginTop:20,display:'flex',flexDirection:'column',gap:10}}>
              {d.points.map((p,i)=>(
                <li key={i} style={{display:'flex',gap:12,fontSize:14,color:'var(--ink-900)',lineHeight:1.5}}>
                  <span style={{flexShrink:0,width:22,height:22,borderRadius:'50%',background:'var(--mint-50)',color:'var(--mint-600)',display:'flex',alignItems:'center',justifyContent:'center'}}><I.Check size={13}/></span>
                  {p}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
      <style>{`
        .tabs { display: flex; gap: 6px; padding: 6px; background: white; border-radius: 999px; border: 1px solid var(--ink-100); margin: 0 auto 32px; max-width: fit-content; overflow-x: auto; flex-wrap: wrap; justify-content: center; }
        .tab { padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-700); white-space: nowrap; transition: all .2s; }
        .tab:hover { color: var(--indigo-900); }
        .tab.active { background: var(--indigo-900); color: white; }
        .tab-content { display: grid; grid-template-columns: 1fr; gap: 28px; background: white; padding: 24px; border-radius: var(--r-2xl); box-shadow: var(--shadow-md); }
        @media (min-width: 900px) { .tab-content { grid-template-columns: 1fr 1.2fr; gap: 36px; padding: 32px; } }
        .tab-img { position: relative; aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden; }
        .tab-img img { width: 100%; height: 100%; object-fit: cover; }
        .tab-img-overlay { position: absolute; bottom: 12px; left: 12px; right: 12px; background: rgba(20,28,66,.92); color: white; padding: 12px 14px; border-radius: var(--r-md); backdrop-filter: blur(10px); }
        .tab-body { padding: 8px 0; }
      `}</style>
    </section>
  );
}

function CECRL() {
  useLang();
  const levels = [
    { code:'A1', name: t('ang.cecrl.a1'), desc: t('ang.cecrl.a1d'), color:'#FFE4C4' },
    { code:'A2', name: t('ang.cecrl.a2'), desc: t('ang.cecrl.a2d'), color:'#FFCC99' },
    { code:'B1', name: t('ang.cecrl.b1'), desc: t('ang.cecrl.b1d'), color:'#F4A24C' },
    { code:'B2', name: t('ang.cecrl.b2'), desc: t('ang.cecrl.b2d'), color:'#E08A2D' },
  ];
  return (
    <section style={{background:'white'}}>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">{t('ang.cecrl.eyebrow')}</span>
          <h2 className="h-display h2">{t('ang.cecrl.title')}</h2>
          <p className="lead">{t('ang.cecrl.lead')}</p>
        </div>
        <div className="cecrl reveal">
          {levels.map((l,i)=>(
            <div key={l.code} className="cecrl-step" style={{background:l.color}}>
              <div className="cecrl-code">{l.code}</div>
              <div className="cecrl-name">{l.name}</div>
              <div className="cecrl-desc">{l.desc}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .cecrl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        @media (min-width: 768px) { .cecrl { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
        .cecrl-step { padding: 22px 18px; border-radius: var(--r-lg); position: relative; color: var(--indigo-900); }
        .cecrl-code { font-family: var(--font-display); font-size: 36px; font-weight: 700; line-height: 1; }
        .cecrl-name { font-weight: 700; font-size: 15px; margin-top: 8px; }
        .cecrl-desc { font-size: 13px; color: rgba(20,28,66,.75); margin-top: 4px; line-height: 1.4; }
      `}</style>
    </section>
  );
}

function VolumeHoraire() {
  useLang();
  return (
    <section style={{background:'var(--indigo-900)',color:'white'}}>
      <div className="container">
        <div style={{display:'grid',gridTemplateColumns:'1fr',gap:32,alignItems:'center'}} className="vh-grid">
          <div className="reveal">
            <span className="eyebrow" style={{color:'#F4A24C'}}>{t('ang.vh.eyebrow')}</span>
            <h2 className="h-display h2" style={{color:'white',marginTop:10}}>{t('ang.vh.title')}</h2>
            <p className="lead" style={{color:'rgba(255,255,255,.75)',marginTop:14}}>
              {t('ang.vh.lead_a')}<strong style={{color:'#F4A24C'}}>{t('ang.vh.lead_em')}</strong>{t('ang.vh.lead_b')}
            </p>
            <div style={{marginTop:28,padding:24,background:'rgba(255,255,255,.05)',borderRadius:'var(--r-lg)',border:'1px solid rgba(255,255,255,.1)'}}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
                <span style={{fontSize:13,color:'rgba(255,255,255,.6)'}}>{t('ang.vh.annual')}</span>
                <span style={{fontFamily:'var(--font-display)',fontSize:32,fontWeight:700,color:'#F4A24C'}}>3 000 DH</span>
              </div>
              <div style={{height:1,background:'rgba(255,255,255,.1)',margin:'14px 0'}}></div>
              <div style={{display:'flex',justifyContent:'space-between',fontSize:14}}>
                <span>{t('ang.vh.div')}</span>
                <span style={{fontWeight:700,color:'#7FC8A9'}}>{t('ang.vh.peer')}</span>
              </div>
              <div style={{fontSize:12,color:'rgba(255,255,255,.5)',marginTop:10,fontStyle:'italic'}}>
                {t('ang.vh.note')}
              </div>
            </div>
          </div>
          <div className="reveal">
            <div className="vh-bars">
              <div className="vh-bar-row">
                <div className="vh-label">{t('ang.vh.flc')}</div>
                <div className="vh-bar"><div className="vh-fill flc" style={{width:'100%'}}>115h</div></div>
              </div>
              <div className="vh-bar-row">
                <div className="vh-label">{t('ang.vh.market')}</div>
                <div className="vh-bar"><div className="vh-fill mkt" style={{width:'65%'}}>~75h</div></div>
              </div>
              <div className="vh-bar-row">
                <div className="vh-label">{t('ang.vh.classic')}</div>
                <div className="vh-bar"><div className="vh-fill cls" style={{width:'35%'}}>~40h</div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (min-width: 900px) { .vh-grid { grid-template-columns: 1fr 1fr !important; gap: 64px !important; } }
        .vh-bars { display: flex; flex-direction: column; gap: 18px; }
        .vh-label { font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 6px; }
        .vh-bar { height: 44px; background: rgba(255,255,255,.06); border-radius: var(--r-md); overflow: hidden; }
        .vh-fill { height: 100%; display: flex; align-items: center; padding: 0 16px; font-weight: 700; color: var(--indigo-900); border-radius: var(--r-md); }
        .vh-fill.flc { background: linear-gradient(90deg, #F4A24C, #FFCC99); }
        .vh-fill.mkt { background: rgba(255,255,255,.4); color: white; }
        .vh-fill.cls { background: rgba(255,255,255,.2); color: white; }
      `}</style>
    </section>
  );
}

function AnglaisActivities() {
  useLang();
  const indoor = [t('ang.act.in1'), t('ang.act.in2'), t('ang.act.in3'), t('ang.act.in4'), t('ang.act.in5'), t('ang.act.in6')];
  const outdoor = [t('ang.act.out1'), t('ang.act.out2'), t('ang.act.out3'), t('ang.act.out4'), t('ang.act.out5'), t('ang.act.out6')];
  return (
    <section>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">{t('ang.act.eyebrow')}</span>
          <h2 className="h-display h2">{t('ang.act.title')}</h2>
          <p className="lead">{t('ang.act.lead')}</p>
        </div>
        <div className="act-grid">
          <div className="act-card reveal">
            <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:18}}>
              <div style={{width:48,height:48,borderRadius:12,background:'var(--saffron-50)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:24}}>🏠</div>
              <h3 className="h-display" style={{fontSize:22,fontWeight:600,color:'var(--indigo-900)'}}>{t('ang.act.indoor')}</h3>
            </div>
            <ul style={{listStyle:'none',display:'flex',flexDirection:'column',gap:10}}>
              {indoor.map(a=>(
                <li key={a} style={{display:'flex',gap:10,alignItems:'center',fontSize:14}}>
                  <span style={{color:'var(--saffron-dark)'}}><I.Check size={16}/></span>{a}
                </li>
              ))}
            </ul>
          </div>
          <div className="act-card reveal">
            <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:18}}>
              <div style={{width:48,height:48,borderRadius:12,background:'var(--mint-50)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:24}}>🌳</div>
              <h3 className="h-display" style={{fontSize:22,fontWeight:600,color:'var(--indigo-900)'}}>{t('ang.act.outdoor')}</h3>
            </div>
            <ul style={{listStyle:'none',display:'flex',flexDirection:'column',gap:10}}>
              {outdoor.map(a=>(
                <li key={a} style={{display:'flex',gap:10,alignItems:'center',fontSize:14}}>
                  <span style={{color:'var(--mint-600)'}}><I.Check size={16}/></span>{a}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
      <style>{`
        .act-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
        @media (min-width: 768px) { .act-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
        .act-card { padding: 28px; background: white; border-radius: var(--r-xl); border: 1px solid var(--ink-100); }
      `}</style>
    </section>
  );
}

function AnglaisCert() {
  useLang();
  const certs = [
    { name:'Cambridge YLE', for: t('ang.cert.c1.for'), levels:'Starters · Movers · Flyers' },
    { name:'KET / PET / FCE', for: t('ang.cert.c2.for'), levels:'A2 · B1 · B2' },
    { name:'IELTS', for: t('ang.cert.c3.for'), levels: t('ang.cert.c3.lvl') },
    { name:'TOEFL iBT', for: t('ang.cert.c4.for'), levels: t('ang.cert.c4.lvl') },
  ];
  return (
    <section style={{background:'var(--cream-warm)'}}>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">{t('ang.cert.eyebrow')}</span>
          <h2 className="h-display h2">{t('ang.cert.title')}</h2>
        </div>
        <div className="cert-grid">
          {certs.map((c,i)=>(
            <div key={i} className="cert-card reveal">
              <div style={{fontSize:32,marginBottom:12}}>🎓</div>
              <div className="h-display" style={{fontSize:18,fontWeight:600,color:'var(--indigo-900)'}}>{c.name}</div>
              <div style={{fontSize:13,color:'var(--ink-700)',marginTop:6}}>{c.for}</div>
              <div style={{fontSize:12,color:'var(--saffron-dark)',fontWeight:600,marginTop:4}}>{c.levels}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .cert-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
        @media (min-width: 768px) { .cert-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
        .cert-card { padding: 22px; background: white; border-radius: var(--r-lg); border: 1px solid var(--ink-100); transition: all .3s; }
        .cert-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
      `}</style>
    </section>
  );
}

function AnglaisPricing() {
  useLang();
  return (
    <section style={{background:'white'}}>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">{t('ang.price.eyebrow')}</span>
          <h2 className="h-display h2">{t('ang.price.title')}</h2>
        </div>
        <div className="price-grid">
          <div className="price-card reveal">
            <span className="pill">{t('ang.price.tri')}</span>
            <h3 className="h-display" style={{fontSize:24,fontWeight:600,marginTop:14,color:'var(--indigo-900)'}}>{t('ang.price.tri.title')}</h3>
            <div style={{display:'flex',alignItems:'baseline',gap:6,marginTop:18}}>
              <span style={{fontFamily:'var(--font-display)',fontSize:48,fontWeight:700,color:'var(--indigo-900)'}}>1 200</span>
              <span style={{fontSize:14,color:'var(--ink-500)'}}>{t('ang.price.tri.unit')}</span>
            </div>
            <div style={{fontSize:12,color:'var(--ink-500)',marginTop:6}}>{t('ang.price.tri.eq')}</div>
            <ul style={{listStyle:'none',marginTop:24,display:'flex',flexDirection:'column',gap:10,fontSize:14}}>
              <li style={{display:'flex',gap:10}}><I.Check size={16}/> {t('ang.price.l1')}</li>
              <li style={{display:'flex',gap:10}}><I.Check size={16}/> {t('ang.price.l2')}</li>
              <li style={{display:'flex',gap:10}}><I.Check size={16}/> {t('ang.price.l3')}</li>
              <li style={{display:'flex',gap:10}}><I.Check size={16}/> {t('ang.price.l4')}</li>
            </ul>
          </div>
          <div className="price-card price-feat reveal">
            <div className="price-badge">{t('ang.price.feat')}</div>
            <span className="pill pill-saffron">{t('ang.price.ann')}</span>
            <h3 className="h-display" style={{fontSize:24,fontWeight:600,marginTop:14,color:'var(--indigo-900)'}}>{t('ang.price.ann.title')}</h3>
            <div style={{display:'flex',alignItems:'baseline',gap:6,marginTop:18}}>
              <span style={{fontFamily:'var(--font-display)',fontSize:48,fontWeight:700,color:'var(--indigo-900)'}}>3 000</span>
              <span style={{fontSize:14,color:'var(--ink-500)'}}>{t('ang.price.ann.unit')}</span>
            </div>
            <div style={{fontSize:12,color:'var(--mint-600)',fontWeight:600,marginTop:6}}>{t('ang.price.ann.eq')}</div>
            <ul style={{listStyle:'none',marginTop:24,display:'flex',flexDirection:'column',gap:10,fontSize:14}}>
              <li style={{display:'flex',gap:10}}><I.Check size={16}/> {t('ang.price.l1')}</li>
              <li style={{display:'flex',gap:10}}><I.Check size={16}/> {t('ang.price.l5')}</li>
              <li style={{display:'flex',gap:10}}><I.Check size={16}/> {t('ang.price.l6')}</li>
              <li style={{display:'flex',gap:10}}><I.Check size={16}/> {t('ang.price.l4')}</li>
              <li style={{display:'flex',gap:10}}><I.Check size={16}/> {t('ang.price.l7')}</li>
            </ul>
            <a href="contact.html" className="btn btn-primary" style={{marginTop:24,width:'100%'}}>{t('ang.price.book')}</a>
          </div>
        </div>
      </div>
      <style>{`
        .price-grid { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 880px; margin: 0 auto; }
        @media (min-width: 768px) { .price-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
        .price-card { padding: 32px; background: var(--cream); border-radius: var(--r-2xl); border: 2px solid var(--ink-100); position: relative; }
        .price-feat { background: white; border-color: var(--saffron); box-shadow: var(--shadow-lg); }
        .price-badge { position: absolute; top: -14px; left: 24px; background: var(--saffron); color: var(--indigo-900); padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; }
      `}</style>
    </section>
  );
}

function AnglaisPage() {
  return (
    <React.Fragment>
      <FLCObserver/>
      <FLCHeader active="anglais.html"/>
      <main>
        <AnglaisHero/>
        <AnglaisMethod/>
        <AnglaisPrograms/>
        <CECRL/>
        <VolumeHoraire/>
        <AnglaisActivities/>
        <AnglaisCert/>
        <AnglaisPricing/>
        <HomeCTA/>
      </main>
      <FLCFooter/>
      <FLCSticky/>
      <FLCFab/>
    </React.Fragment>
  );
}

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