// ============================================
// FLC — Langues (Français + Espagnol) — i18n
// ============================================

function LanguesPage() {
  useLang();
  const langs = [
    {
      key:'fr',
      lang: t('lng.fr.lang'),
      flag:'🇫🇷',
      img: IMG.reading,
      color:'#3E4F8F',
      tagline: t('lng.fr.tag'),
      desc: t('lng.fr.desc'),
      points:[t('lng.fr.p1'), t('lng.fr.p2'), t('lng.fr.p3'), t('lng.fr.p4'), t('lng.fr.p5')],
      certs:['DELF Junior','DELF Adultes','DALF C1/C2','TCF']
    },
    {
      key:'es',
      lang: t('lng.es.lang'),
      flag:'🇪🇸',
      img: IMG.smile,
      color:'#E8806B',
      tagline: t('lng.es.tag'),
      desc: t('lng.es.desc'),
      points:[t('lng.es.p1'), t('lng.es.p2'), t('lng.es.p3'), t('lng.es.p4'), t('lng.es.p5')],
      certs:['DELE A2','DELE B1','DELE B2','DELE C1']
    }
  ];

  return (
    <React.Fragment>
      <FLCObserver/>
      <FLCHeader active="langues.html"/>
      <main>
        <FLCPageHero
          pillText={t('lng.pill')}
          pillVariant="indigo"
          title={t('lng.title')}
          emText={t('lng.title_em')}
          titleSuffix="."
          lead={t('lng.lead')}
          primaryCta={{ label: t('lng.cta_test'), href: 'contact.html' }}
          secondaryCta={{ label: t('lng.cta_eng'), href: 'anglais.html' }}
          image={IMG.group}
          imageBadge={{ icon: '🗣️', label: 'Conversation', value: 'Locuteurs natifs' }}
          stats={[
            { label: 'Langues', value: '2', sub: 'Français · Espagnol', color: 'var(--coral)' },
            { label: 'Niveaux', value: 'A1→B2', sub: 'Adaptés à chacun', color: 'var(--indigo-700)' }
          ]}
          blob1={{ color:'#3E4F8F', w:320, h:320, top:-100, right:-80, opacity:0.35 }}
          blob2={{ color:'#E8806B', w:280, h:280, bottom:-100, left:-80, opacity:0.3 }}
        />

        {langs.map((l,i)=>(
          <section key={l.key} style={{background: i%2===0 ? 'white' : 'var(--cream)'}}>
            <div className="container">
              <div className="lang-grid">
                <div className="lang-img reveal" style={{order: i%2===0 ? 1 : 2}}>
                  <img src={l.img} alt={l.lang}/>
                  <div className="lang-flag" style={{background:l.color}}>{l.flag}</div>
                </div>
                <div className="reveal" style={{order: i%2===0 ? 2 : 1}}>
                  <span className="eyebrow" style={{color:l.color}}>{l.lang}</span>
                  <h2 className="h-display h2" style={{marginTop:8}}>{l.tagline}</h2>
                  <p className="lead" style={{marginTop:14}}>{l.desc}</p>
                  <ul style={{listStyle:'none',marginTop:24,display:'flex',flexDirection:'column',gap:10}}>
                    {l.points.map((p,j)=>(
                      <li key={j} 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:l.color+'22',color:l.color,display:'flex',alignItems:'center',justifyContent:'center'}}><I.Check size={13}/></span>
                        {p}
                      </li>
                    ))}
                  </ul>
                  <div style={{marginTop:24,padding:18,background:'var(--cream-warm)',borderRadius:'var(--r-md)',border:'1px solid var(--ink-100)'}}>
                    <div style={{fontSize:11,fontWeight:700,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--ink-500)',marginBottom:10}}>{t('lng.cert_label')}</div>
                    <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
                      {l.certs.map(c=><span key={c} className="pill" style={{fontSize:12}}>{c}</span>)}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <style>{`
              .lang-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
              @media (min-width: 900px) { .lang-grid { grid-template-columns: 1fr 1.1fr; gap: 56px; } }
              .lang-img { position: relative; aspect-ratio: 4/3; border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--shadow-lg); }
              .lang-img img { width: 100%; height: 100%; object-fit: cover; }
              .lang-flag { position: absolute; top: 16px; right: 16px; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: var(--shadow-md); }
            `}</style>
          </section>
        ))}

        <section style={{background:'white'}}>
          <div className="container">
            <div className="section-head reveal">
              <span className="eyebrow">{t('lng.price.eyebrow')}</span>
              <h2 className="h-display h2">{t('lng.price.title')}</h2>
            </div>
            <div style={{maxWidth:520,margin:'0 auto'}} className="reveal">
              <div className="card" style={{textAlign:'center',padding:36}}>
                <span className="pill pill-saffron">{t('lng.price.pill')}</span>
                <div style={{display:'flex',alignItems:'baseline',gap:8,justifyContent:'center',marginTop:18}}>
                  <span style={{fontFamily:'var(--font-display)',fontSize:56,fontWeight:700,color:'var(--indigo-900)'}}>2 800</span>
                  <span style={{fontSize:15,color:'var(--ink-500)'}}>{t('lng.price.unit')}</span>
                </div>
                <div style={{fontSize:13,color:'var(--mint-600)',fontWeight:600,marginTop:6}}>{t('lng.price.eq')}</div>
                <ul style={{listStyle:'none',marginTop:24,display:'flex',flexDirection:'column',gap:10,fontSize:14,textAlign:'left'}}>
                  <li style={{display:'flex',gap:10}}><I.Check size={16}/> {t('lng.price.l1')}</li>
                  <li style={{display:'flex',gap:10}}><I.Check size={16}/> {t('lng.price.l2')}</li>
                  <li style={{display:'flex',gap:10}}><I.Check size={16}/> {t('lng.price.l3')}</li>
                  <li style={{display:'flex',gap:10}}><I.Check size={16}/> {t('lng.price.l4')}</li>
                </ul>
                <a href="contact.html" className="btn btn-primary" style={{marginTop:24,width:'100%'}}>{t('lng.price.book')}</a>
              </div>
            </div>
          </div>
        </section>

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