// ============================================
// FLC — Ateliers parascolaires (i18n)
// ============================================

function AteliersPage() {
  useLang();
  const [filter, setFilter] = React.useState('all');
  const ateliers = [
    {cat:'kids', img:IMG.cooking, title:t('atl.k1.t'), desc:t('atl.k1.d'), icon:'👨‍🍳'},
    {cat:'kids', img:IMG.drama, title:t('atl.k2.t'), desc:t('atl.k2.d'), icon:'🎭'},
    {cat:'kids', img:IMG.boardgames, title:t('atl.k3.t'), desc:t('atl.k3.d'), icon:'🎲'},
    {cat:'kids', img:IMG.arts, title:t('atl.k4.t'), desc:t('atl.k4.d'), icon:'🎨'},
    {cat:'kids', img:IMG.calligraphie, title:t('atl.k5.t'), desc:t('atl.k5.d'), icon:'✒️'},
    {cat:'kids', img:IMG.horse, title:t('atl.k6.t'), desc:t('atl.k6.d'), icon:'🐎'},
    {cat:'kids', img:IMG.sports, title:t('atl.k7.t'), desc:t('atl.k7.d'), icon:'⚽'},
    {cat:'kids', img:IMG.treasure, title:t('atl.k8.t'), desc:t('atl.k8.d'), icon:'🗺️'},
    {cat:'teens', img:IMG.cinema, title:t('atl.t1.t'), desc:t('atl.t1.d'), icon:'🎬'},
    {cat:'teens', img:IMG.debate, title:t('atl.t2.t'), desc:t('atl.t2.d'), icon:'💬'},
    {cat:'teens', img:IMG.coffee, title:t('atl.t3.t'), desc:t('atl.t3.d'), icon:'☕'},
    {cat:'teens', img:IMG.photo, title:t('atl.t4.t'), desc:t('atl.t4.d'), icon:'📸'},
    {cat:'teens', img:IMG.mode, title:t('atl.t5.t'), desc:t('atl.t5.d'), icon:'🧵'},
    {cat:'teens', img:IMG.crochet, title:t('atl.t6.t'), desc:t('atl.t6.d'), icon:'🧶'},
    {cat:'teens', img:IMG.ecriture, title:t('atl.t7.t'), desc:t('atl.t7.d'), icon:'✍️'},
  ];
  const filtered = filter==='all' ? ateliers : ateliers.filter(a=>a.cat===filter);

  return (
    <React.Fragment>
      <FLCObserver/>
      <FLCHeader active="ateliers.html"/>
      <main>
        <FLCPageHero
          pillText={t('atl.pill')}
          pillVariant="coral"
          title={t('atl.title1')}
          emText={t('atl.title_em')}
          titleSuffix="."
          lead={t('atl.lead')}
          primaryCta={{ label: t('atl.cta1'), href: 'contact.html' }}
          secondaryCta={{ label: t('atl.cta2'), href: 'coran.html' }}
          image={IMG.cooking}
          imageBadge={{ icon: '✨', label: 'Ateliers', value: 'Créatifs · Sportifs · Linguistiques' }}
          stats={[
            { label: 'Ateliers', value: '15+', sub: 'Univers à explorer', color: 'var(--coral)' },
            { label: 'Âges', value: '6–18', sub: 'Pour tous', color: 'var(--saffron-dark)' }
          ]}
          blob1={{ color:'#E8806B', w:340, h:340, top:-120, right:-100, opacity:0.4 }}
          blob2={{ color:'#F4A24C', w:260, h:260, bottom:-80, left:-60, opacity:0.35 }}
          accent="var(--coral)"
        />

        <section style={{background:'var(--cream)'}}>
          <div className="container">
            <div className="section-head reveal">
              <span className="eyebrow">{t('atl.cat.eyebrow')}</span>
              <h2 className="h-display h2">{t('atl.cat.title')}</h2>
            </div>
            <div className="tabs reveal">
              <button className={`tab ${filter==='all'?'active':''}`} onClick={()=>setFilter('all')}>{t('atl.f.all')}</button>
              <button className={`tab ${filter==='kids'?'active':''}`} onClick={()=>setFilter('kids')}>{t('atl.f.kids')}</button>
              <button className={`tab ${filter==='teens'?'active':''}`} onClick={()=>setFilter('teens')}>{t('atl.f.teens')}</button>
            </div>
            <div className="atel-grid">
              {filtered.map((a,i)=>(
                <div key={a.title} className="atel-card reveal">
                  <div className="atel-img">
                    <img src={a.img} alt={a.title} loading="lazy"/>
                    <div className="atel-icon">{a.icon}</div>
                  </div>
                  <div className="atel-body">
                    <h4 className="h-display" style={{fontSize:18,fontWeight:600,color:'var(--indigo-900)'}}>{a.title}</h4>
                    <p style={{fontSize:13,color:'var(--ink-700)',marginTop:6,lineHeight:1.5}}>{a.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <style>{`
            .atel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
            @media (min-width: 768px) { .atel-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
            @media (min-width: 1024px) { .atel-grid { grid-template-columns: repeat(4, 1fr); } }
            .atel-card { background: white; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--ink-100); transition: all .3s; }
            .atel-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
            .atel-img { position: relative; aspect-ratio: 1.3/1; overflow: hidden; }
            .atel-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
            .atel-card:hover .atel-img img { transform: scale(1.08); }
            .atel-icon { position: absolute; top: 10px; left: 10px; width: 36px; height: 36px; border-radius: 10px; background: white; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: var(--shadow-sm); }
            .atel-body { padding: 14px; }
          `}</style>
        </section>

        <section style={{background:'white'}}>
          <div className="container">
            <div className="section-head reveal">
              <span className="eyebrow">{t('atl.price.eyebrow')}</span>
              <h2 className="h-display h2">{t('atl.price.title')}</h2>
            </div>
            <div className="price-grid" style={{maxWidth:880,margin:'0 auto'}}>
              <div className="card reveal" style={{textAlign:'center'}}>
                <span className="pill">{t('atl.p1.pill')}</span>
                <div style={{display:'flex',alignItems:'baseline',gap:6,justifyContent:'center',marginTop:14}}>
                  <span style={{fontFamily:'var(--font-display)',fontSize:42,fontWeight:700,color:'var(--indigo-900)'}}>1 200</span>
                  <span style={{fontSize:14,color:'var(--ink-500)'}}>{t('atl.p1.unit')}</span>
                </div>
                <div style={{fontSize:12,color:'var(--ink-500)',marginTop:4}}>{t('atl.p1.note')}</div>
              </div>
              <div className="card reveal" style={{textAlign:'center',background:'var(--saffron-50)',borderColor:'var(--saffron)'}}>
                <span className="pill pill-saffron">{t('atl.p2.pill')}</span>
                <div style={{display:'flex',alignItems:'baseline',gap:6,justifyContent:'center',marginTop:14}}>
                  <span style={{fontFamily:'var(--font-display)',fontSize:42,fontWeight:700,color:'var(--indigo-900)'}}>2 000</span>
                  <span style={{fontSize:14,color:'var(--ink-500)'}}>{t('atl.p1.unit')}</span>
                </div>
                <div style={{fontSize:12,color:'var(--mint-600)',fontWeight:600,marginTop:4}}>{t('atl.p2.note')}</div>
              </div>
              <div className="card reveal" style={{textAlign:'center'}}>
                <span className="pill">{t('atl.p3.pill')}</span>
                <div style={{display:'flex',alignItems:'baseline',gap:6,justifyContent:'center',marginTop:14}}>
                  <span style={{fontFamily:'var(--font-display)',fontSize:42,fontWeight:700,color:'var(--indigo-900)'}}>2 700</span>
                  <span style={{fontSize:14,color:'var(--ink-500)'}}>{t('atl.p1.unit')}</span>
                </div>
                <div style={{fontSize:12,color:'var(--mint-600)',fontWeight:600,marginTop:4}}>{t('atl.p3.note')}</div>
              </div>
            </div>
          </div>
          <style>{`
            .price-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
            @media (min-width: 768px) { .price-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
          `}</style>
        </section>

        <HomeCTA/>
      </main>
      <FLCFooter/>
      <FLCSticky/>
      <FLCFab/>
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<AteliersPage/>);