// ============================================
// FLC — Coran (i18n)
// ============================================

function CoranPage() {
  useLang();
  return (
    <React.Fragment>
      <FLCObserver/>
      <FLCHeader active="coran.html"/>
      <main>
        <FLCPageHero
          pillText={t('cor.pill')}
          pillVariant="saffron"
          title={t('cor.title1')}
          emText={t('cor.title_em')}
          titleSuffix="."
          lead={t('cor.lead')}
          primaryCta={{ label: t('cor.cta'), href: 'contact.html' }}
          image={IMG.coran}
          imageBadge={{ icon: '☪️', label: 'Quran Club', value: 'Atelier hebdomadaire' }}
          stats={[
            { label: 'Âge', value: '6–14 ans', sub: 'Groupes par niveau', color: 'var(--saffron-dark)' },
            { label: 'Approche', value: 'Douce', sub: 'Mémorisation & sens', color: 'var(--mint-600)' }
          ]}
          blob1={{ color:'#F4A24C', w:340, h:340, top:-120, right:-100, opacity:0.45 }}
          blob2={{ color:'#1A2148', w:280, h:280, bottom:-100, left:-80, opacity:0.18 }}
          accent="var(--saffron-dark)"
        />

        <section style={{background:'var(--cream)'}}>
          <div className="container">
            <div className="section-head reveal">
              <span className="eyebrow">{t('cor.app.eyebrow')}</span>
              <h2 className="h-display h2">{t('cor.app.title')}</h2>
            </div>
            <div className="four-grid">
              {[
                {i:'📖',t:t('cor.p1.t'),d:t('cor.p1.d')},
                {i:'🧠',t:t('cor.p2.t'),d:t('cor.p2.d')},
                {i:'💡',t:t('cor.p3.t'),d:t('cor.p3.d')},
              ].map((p,i)=>(
                <div key={i} className="four-card reveal">
                  <div className="four-icon" style={{background:'#1A2148',color:'#F4A24C'}}>{p.i}</div>
                  <h4 className="h-display" style={{fontSize:20,fontWeight:600,marginTop:14,color:'var(--indigo-900)'}}>{p.t}</h4>
                  <p style={{fontSize:14,color:'var(--ink-700)',lineHeight:1.6,marginTop:8}}>{p.d}</p>
                </div>
              ))}
            </div>
          </div>
          <style>{`
            .four-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
            @media (min-width: 768px) { .four-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
            .four-card { padding: 28px; background: white; border-radius: var(--r-lg); border: 1px solid var(--ink-100); transition: all .3s; }
            .four-card:hover { transform: translateY(-4px); }
            .four-icon { width: 56px; height: 56px; border-radius: var(--r-md); background: var(--cream-warm); display: flex; align-items: center; justify-content: center; font-size: 28px; }
          `}</style>
        </section>

        <section style={{background:'white'}}>
          <div className="container">
            <div className="cor-grid">
              <div className="reveal">
                <span className="eyebrow">{t('cor.who.eyebrow')}</span>
                <h2 className="h-display h2" style={{marginTop:8}}>{t('cor.who.title')}</h2>
                <p className="lead" style={{marginTop:14}}>
                  {t('cor.who.lead')}
                </p>
                <ul style={{listStyle:'none',marginTop:20,display:'flex',flexDirection:'column',gap:12}}>
                  {[t('cor.w1'),t('cor.w2'),t('cor.w3'),t('cor.w4')].map((p,i)=>(
                    <li key={i} style={{display:'flex',gap:12,fontSize:15,lineHeight:1.5}}>
                      <span style={{flexShrink:0,width:24,height:24,borderRadius:'50%',background:'#1A2148',color:'#F4A24C',display:'flex',alignItems:'center',justifyContent:'center'}}><I.Check size={14}/></span>
                      {p}
                    </li>
                  ))}
                </ul>
              </div>
              <div className="reveal" style={{position:'relative'}}>
                <div style={{aspectRatio:'4/5',borderRadius:'var(--r-2xl)',overflow:'hidden',boxShadow:'var(--shadow-xl)'}}>
                  <img src={IMG.coran2} alt="Coran" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
                </div>
              </div>
            </div>
          </div>
          <style>{`
            .cor-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
            @media (min-width: 900px) { .cor-grid { grid-template-columns: 1.2fr 1fr; gap: 56px; } }
          `}</style>
        </section>

        <section style={{background:'var(--cream)'}}>
          <div className="container">
            <div style={{maxWidth:560,margin:'0 auto'}}>
              <div className="card reveal" style={{textAlign:'center',padding:36,background:'#1A2148',color:'white',border:'none'}}>
                <span className="pill" style={{background:'rgba(244,162,76,.2)',color:'#F4A24C',borderColor:'rgba(244,162,76,.3)'}}>{t('cor.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:'#F4A24C'}}>1 500</span>
                  <span style={{fontSize:15,color:'rgba(255,255,255,.6)'}}>{t('cor.price.unit')}</span>
                </div>
                <div style={{fontSize:13,color:'rgba(255,255,255,.6)',marginTop:6}}>{t('cor.price.note')}</div>
                <p style={{fontSize:14,color:'rgba(255,255,255,.7)',marginTop:18,fontStyle:'italic'}}>
                  {t('cor.price.engage')}
                </p>
                <a href="contact.html" className="btn btn-primary" style={{marginTop:24}}>{t('cor.price.book')}</a>
              </div>
            </div>
          </div>
        </section>

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