// ============================================
// FLC — Tarifs (i18n)
// ============================================

function TarifsPage() {
  useLang();
  const sections = [
    {
      title:t('tar.s1.title'),
      icon:'🌍',
      color:'#F4A24C',
      items:[
        {prog:t('tar.s1.i1.p'),annual:'3 000 DH',trim:'1 200 DH '+t('tar.x3'),note:t('tar.s1.i1.n')},
        {prog:t('tar.s1.i2.p'),annual:'2 800 DH',trim:'1 100 DH '+t('tar.x3'),note:t('tar.s1.i2.n')},
        {prog:t('tar.s1.i3.p'),annual:'2 800 DH',trim:'1 100 DH '+t('tar.x3'),note:t('tar.s1.i3.n')},
        {prog:t('tar.s1.i4.p'),annual:'5 200 DH',trim:t('tar.dash'),note:t('tar.s1.i4.n')},
      ]
    },
    {
      title:t('tar.s2.title'),
      icon:'📚',
      color:'#7FC8A9',
      items:[
        {prog:t('tar.s2.i1.p'),annual:'1 800 DH',trim:'700 DH '+t('tar.x3'),note:t('tar.s2.i1.n')},
        {prog:t('tar.s2.i2.p'),annual:'2 400 DH',trim:'900 DH '+t('tar.x3'),note:t('tar.s2.i2.n')},
        {prog:t('tar.s2.i3.p'),annual:'3 200 DH',trim:'1 200 DH '+t('tar.x3'),note:t('tar.s2.i3.n')},
        {prog:t('tar.s2.i4.p'),annual:'2 000 DH',trim:t('tar.dash'),note:t('tar.s2.i4.n')},
        {prog:t('tar.s2.i5.p'),annual:'2 500 DH',trim:t('tar.dash'),note:t('tar.s2.i5.n')},
      ]
    },
    {
      title:t('tar.s3.title'),
      icon:'🎨',
      color:'#E8806B',
      items:[
        {prog:t('tar.s3.i1.p'),annual:'1 200 DH',trim:t('tar.dash'),note:t('tar.s3.i1.n')},
        {prog:t('tar.s3.i2.p'),annual:'2 000 DH',trim:t('tar.dash'),note:t('tar.s3.i2.n')},
        {prog:t('tar.s3.i3.p'),annual:'2 700 DH',trim:t('tar.dash'),note:t('tar.s3.i3.n')},
        {prog:t('tar.s3.i4.p'),annual:'1 500 DH',trim:t('tar.dash'),note:t('tar.s3.i4.n')},
      ]
    }
  ];

  const reductions = [
    {i:'👨‍👩‍👧',t:t('tar.r1.t'),v:'−10%'},
    {i:'👨‍👩‍👧‍👦',t:t('tar.r2.t'),v:'−15%'},
    {i:'🎁',t:t('tar.r3.t'),v:t('tar.r3.v')},
    {i:'🤝',t:t('tar.r4.t'),v:t('tar.r4.v')},
  ];

  return (
    <React.Fragment>
      <FLCObserver/>
      <FLCHeader active="tarifs.html"/>
      <main>
        <FLCPageHero
          pillText={t('tar.pill')}
          pillVariant="saffron"
          title={t('tar.title1')}
          emText={t('tar.title_em')}
          titleSuffix="."
          lead={t('tar.lead')}
          primaryCta={{ label: t('ang.cta_test'), href: 'contact.html' }}
          image={IMG.diploma}
          imageBadge={{ icon: '🎁', label: 'Tarifs', value: 'Transparents · Sans surprise' }}
          stats={[
            { label: 'Test gratuit', value: 'Offert', sub: 'Aucun engagement', color: 'var(--saffron-dark)' },
            { label: 'Réductions', value: 'Famille', sub: '−10% dès le 2e enfant', color: 'var(--mint-600)' }
          ]}
          blob1={{ color:'#F4A24C', w:340, h:340, top:-120, right:-100, opacity:0.4 }}
          blob2={{ color:'#7FC8A9', w:260, h:260, bottom:-80, left:-60, opacity:0.3 }}
        />

        {sections.map((s,si)=>(
          <section key={si} style={{background: si%2===0 ? 'white' : 'var(--cream)'}}>
            <div className="container">
              <div style={{display:'flex',alignItems:'center',gap:14,marginBottom:28}} className="reveal">
                <div style={{width:56,height:56,borderRadius:'var(--r-md)',background:s.color+'22',color:s.color,display:'flex',alignItems:'center',justifyContent:'center',fontSize:28}}>{s.icon}</div>
                <h2 className="h-display h2">{s.title}</h2>
              </div>
              <div className="tarif-table reveal">
                <div className="tarif-head">
                  <div>{t('tar.h.prog')}</div>
                  <div>{t('tar.h.annual')}</div>
                  <div className="hide-mobile">{t('tar.h.trim')}</div>
                  <div className="hide-mobile">{t('tar.h.det')}</div>
                </div>
                {s.items.map((item,i)=>(
                  <div key={i} className="tarif-row">
                    <div>
                      <div style={{fontWeight:600,color:'var(--indigo-900)'}}>{item.prog}</div>
                      <div className="show-mobile" style={{fontSize:12,color:'var(--ink-500)',marginTop:2}}>{item.note}</div>
                    </div>
                    <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:18,color:'var(--indigo-900)'}}>{item.annual}</div>
                    <div className="hide-mobile" style={{color:'var(--ink-700)'}}>{item.trim}</div>
                    <div className="hide-mobile" style={{fontSize:13,color:'var(--ink-500)'}}>{item.note}</div>
                  </div>
                ))}
              </div>
            </div>
            <style>{`
              .tarif-table { background: white; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--ink-100); }
              .tarif-head, .tarif-row { display: grid; grid-template-columns: 2fr 1fr; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--ink-100); }
              @media (min-width: 768px) {
                .tarif-head, .tarif-row { grid-template-columns: 2fr 1fr 1fr 2fr; padding: 18px 24px; }
              }
              .tarif-head { background: var(--cream-warm); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
              .tarif-row:last-child { border-bottom: none; }
              .tarif-row:hover { background: var(--cream); }
              .show-mobile { display: block; }
              .hide-mobile { display: none; }
              @media (min-width: 768px) {
                .show-mobile { display: none; }
                .hide-mobile { display: block; }
              }
            `}</style>
          </section>
        ))}

        <section style={{background:'var(--saffron-50)'}}>
          <div className="container">
            <div className="section-head reveal">
              <span className="eyebrow">{t('tar.red.eyebrow')}</span>
              <h2 className="h-display h2">{t('tar.red.title')}</h2>
            </div>
            <div className="red-grid">
              {reductions.map((r,i)=>(
                <div key={i} className="red-card reveal">
                  <div style={{fontSize:36}}>{r.i}</div>
                  <div className="h-display" style={{fontSize:24,fontWeight:700,color:'var(--saffron-dark)',marginTop:8}}>{r.v}</div>
                  <div style={{fontSize:14,color:'var(--ink-700)',marginTop:4}}>{r.t}</div>
                </div>
              ))}
            </div>
          </div>
          <style>{`
            .red-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
            @media (min-width: 768px) { .red-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
            .red-card { padding: 24px; background: white; border-radius: var(--r-lg); text-align: center; border: 1px solid var(--ink-100); }
          `}</style>
        </section>

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