// ============================================
// FLC — Méthode (i18n)
// ============================================

function MethodePage() {
  useLang();
  const principes = [
    {n:'01',t:t('met.p1.t'),d:t('met.p1.d'),c:'#F4A24C'},
    {n:'02',t:t('met.p2.t'),d:t('met.p2.d'),c:'#3E4F8F'},
    {n:'03',t:t('met.p3.t'),d:t('met.p3.d'),c:'#7FC8A9'},
    {n:'04',t:t('met.p4.t'),d:t('met.p4.d'),c:'#E8806B'},
    {n:'05',t:t('met.p5.t'),d:t('met.p5.d'),c:'#F4A24C'},
    {n:'06',t:t('met.p6.t'),d:t('met.p6.d'),c:'#3E4F8F'},
  ];

  return (
    <React.Fragment>
      <FLCObserver/>
      <FLCHeader active="methode.html"/>
      <main>
        <FLCPageHero
          pillText={t('met.pill')}
          pillVariant="saffron"
          title={t('met.title1')}
          emText={t('met.title_em')}
          titleSuffix="."
          lead={t('met.lead')}
          primaryCta={{ label: t('ang.cta_test'), href: 'contact.html' }}
          image={IMG.teacher}
          imageBadge={{ icon: '🎯', label: 'Approche', value: 'Pédagogie active' }}
          stats={[
            { label: 'Méthode', value: 'CECRL', sub: 'Standard européen', color: 'var(--saffron-dark)' },
            { label: 'Garantie', value: '100%', sub: 'Satisfaction parentale', color: 'var(--mint-600)' }
          ]}
          blob1={{ color:'#F4A24C', w:340, h:340, top:-120, right:-80, opacity:0.4 }}
          blob2={{ color:'#3E4F8F', w:260, h:260, bottom:-80, left:-60, opacity:0.25 }}
        />

        <section style={{background:'var(--saffron)',color:'var(--indigo-900)',padding:'48px 0'}}>
          <div className="container" style={{textAlign:'center'}}>
            <div className="reveal" style={{display:'inline-flex',alignItems:'center',gap:14,padding:'18px 28px',background:'rgba(20,28,66,.08)',borderRadius:999}}>
              <span style={{fontSize:32}}>🛡️</span>
              <div style={{textAlign:'left'}}>
                <div style={{fontWeight:700,fontSize:18}}>{t('met.guar.t')}</div>
                <div style={{fontSize:13,opacity:.85}}>{t('met.guar.d')}</div>
              </div>
            </div>
          </div>
        </section>

        <section style={{background:'white'}}>
          <div className="container">
            <div className="section-head reveal">
              <span className="eyebrow">{t('met.head.eyebrow')}</span>
              <h2 className="h-display h2">{t('met.head.title')}</h2>
            </div>
            <div className="prin-grid">
              {principes.map((p,i)=>(
                <div key={i} className="prin-card reveal" style={{borderTopColor:p.c}}>
                  <div className="prin-num" style={{color:p.c}}>{p.n}</div>
                  <h4 className="h-display" style={{fontSize:20,fontWeight:600,marginTop:6,color:'var(--indigo-900)'}}>{p.t}</h4>
                  <p style={{fontSize:14,color:'var(--ink-700)',lineHeight:1.6,marginTop:10}}>{p.d}</p>
                </div>
              ))}
            </div>
          </div>
          <style>{`
            .prin-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
            @media (min-width: 640px) { .prin-grid { grid-template-columns: repeat(2, 1fr); } }
            @media (min-width: 1024px) { .prin-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
            .prin-card { padding: 26px; background: var(--cream); border-radius: var(--r-lg); border-top: 4px solid; transition: all .3s; }
            .prin-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
            .prin-num { font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 1; }
          `}</style>
        </section>

        <section style={{background:'var(--indigo-900)',color:'white'}}>
          <div className="container">
            <div style={{maxWidth:760,margin:'0 auto',textAlign:'center'}} className="reveal">
              <span className="eyebrow" style={{color:'#F4A24C'}}>{t('met.eth.eyebrow')}</span>
              <h2 className="h-display h2" style={{color:'white',marginTop:10}}>{t('met.eth.title')}</h2>
              <p className="lead" style={{color:'rgba(255,255,255,.75)',marginTop:14,fontSize:17,lineHeight:1.7,whiteSpace:'pre-line'}}>
                {t('met.eth.body')}
              </p>
              <div style={{display:'flex',gap:12,justifyContent:'center',flexWrap:'wrap',marginTop:32}}>
                {[t('met.v1'),t('met.v2'),t('met.v3'),t('met.v4'),t('met.v5')].map(v=>(
                  <span key={v} className="pill" style={{background:'rgba(244,162,76,.15)',color:'#F4A24C',borderColor:'rgba(244,162,76,.2)',padding:'10px 18px',fontSize:13}}>{v}</span>
                ))}
              </div>
            </div>
          </div>
        </section>

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