// ============================================
// FLC — Shared header, footer, sticky CTA, FAB
// ============================================

(function(){
  // Inject head fonts if not present
  if (!document.querySelector('link[data-flc-fonts]')) {
    const l1 = document.createElement('link');
    l1.rel = 'preconnect'; l1.href = 'https://fonts.googleapis.com';
    document.head.appendChild(l1);
    const l2 = document.createElement('link');
    l2.rel = 'preconnect'; l2.href = 'https://fonts.gstatic.com'; l2.crossOrigin = '';
    document.head.appendChild(l2);
    const l3 = document.createElement('link');
    l3.rel = 'stylesheet';
    l3.href = 'https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap';
    l3.dataset.flcFonts = '1';
    document.head.appendChild(l3);
  }
})();

// ============================================
// Hierarchical menu structure (used by both desktop mega-menu + mobile drawer)
// matchPaths = which active prop values mark this top-level as active
// ============================================
const FLC_MENU = [
  { type: 'link', key: 'nav.home', icon: '🏠', href: 'index.html', match: ['index.html'] },
  {
    type: 'mega', key: 'mm.support', icon: '📚', match: ['soutien.html'],
    href: 'soutien.html',
    desc: 'mm.support.desc',
    cols: [
      { label: 'mm.support', items: [
        { key: 'mm.support.primaire', href: 'soutien.html#primaire' },
        { key: 'mm.support.college', href: 'soutien.html#college' },
        { key: 'mm.support.lycee', href: 'soutien.html#lycee' },
      ]},
      { label: 'mm.support.particuliers', items: [
        { key: 'mm.support.maroc', href: 'soutien.html#particuliers' },
        { key: 'mm.support.fr', href: 'soutien.html#particuliers' },
      ]},
    ],
  },
  {
    type: 'mega', key: 'mm.lang', icon: '🌍', match: ['anglais.html', 'langues.html'],
    desc: 'mm.lang.desc',
    cols: [
      { label: 'mm.lang', items: [
        { key: 'mm.lang.en', href: 'anglais.html', badge: 'Cambridge' },
        { key: 'mm.lang.fr', href: 'langues.html#fr' },
        { key: 'mm.lang.es', href: 'langues.html#es' },
      ]},
    ],
  },
  {
    type: 'mega', key: 'mm.aca', icon: '✨', match: ['ateliers.html', 'coran.html'],
    href: 'ateliers.html',
    desc: 'mm.aca.desc',
    cols: [
      { label: 'mm.aca.creative', items: [
        { key: 'mm.aca.dessin', href: 'ateliers.html#dessin' },
        { key: 'mm.aca.musique', href: 'ateliers.html#musique', soon: true },
        { key: 'mm.aca.calligraphie', href: 'ateliers.html#calligraphie' },
        { key: 'mm.aca.mode', href: 'ateliers.html#mode' },
      ]},
      { label: 'mm.aca.tech', items: [
        { key: 'mm.aca.robotique', href: 'ateliers.html#robotique', soon: true },
      ]},
      { label: 'mm.aca.spirit', items: [
        { key: 'mm.aca.coran', href: 'coran.html' },
      ]},
      { label: 'mm.aca.guide', items: [
        { key: 'mm.aca.summer', href: 'ateliers.html#summer', soon: true },
        { key: 'mm.aca.prepa', href: 'ateliers.html#prepa', soon: true },
        { key: 'mm.aca.orient', href: 'ateliers.html#orient', soon: true },
        { key: 'mm.aca.leaders', href: 'ateliers.html#leaders', soon: true },
      ]},
    ],
  },
  { type: 'link', key: 'mm.method', icon: '⚡', href: 'methode.html', match: ['methode.html'] },
  { type: 'link', key: 'mm.pricing', icon: '💰', href: 'tarifs.html', match: ['tarifs.html'] },
  {
    type: 'mega', key: 'mm.more', icon: '➕', match: [],
    cols: [
      { label: 'mm.more', items: [
        { key: 'mm.more.formation', href: 'contact.html#formation', soon: true },
        { key: 'mm.more.location', href: 'contact.html#location', soon: true },
        { key: 'mm.more.faq', href: 'methode.html#faq' },
      ]},
    ],
  },
];

const FLC_PHONE = 'tel:+212651506400';
const FLC_WA = 'https://wa.me/212651506400?text=Bonjour%20FLC%2C%20je%20souhaite%20r%C3%A9server%20mon%20test%20gratuit';

function FLCHeader({active}) {
  const [open, setOpen] = React.useState(false);
  const [openSub, setOpenSub] = React.useState(null);
  const [hover, setHover] = React.useState(null);
  const [lang] = useLang();
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const isItemActive = (item) => item.match && item.match.includes(active);

  // Close dropdown when clicking outside
  React.useEffect(() => {
    if (!hover) return;
    const onDocClick = (e) => {
      if (!e.target.closest('.nav-mega-wrap')) setHover(null);
    };
    const onEsc = (e) => { if (e.key === 'Escape') setHover(null); };
    document.addEventListener('keydown', onEsc);
    return () => { document.removeEventListener('keydown', onEsc); };
  }, [hover]);

  return (
    <React.Fragment>
      <nav className="nav">
        <div className="container nav-inner">
          <a href="index.html" className="logo" aria-label="Future Learning Center">
            <img src="assets/flc-logo.png" alt="FLC · Future Learning Center" className="logo-img no-flip"/>
          </a>
          <div className="nav-links-desk">
            {FLC_MENU.map((item, idx) => (
              item.type === 'link' ? (
                <a key={idx} href={item.href} className={isItemActive(item) ? 'active' : ''}>
                  {t(item.key)}
                </a>
              ) : (
                <div
                  key={idx}
                  className="nav-mega-wrap"
                  onMouseEnter={() => setHover(idx)}
                  onMouseLeave={() => setHover(null)}
                >
                  <button
                    type="button"
                    className={`nav-mega-trigger ${isItemActive(item) ? 'active' : ''} ${hover===idx?'open':''}`}
                    onClick={() => setHover(hover === idx ? null : idx)}
                  >
                    {t(item.key)}
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="no-flip" style={{marginLeft:4,transition:'transform .2s',transform: hover===idx?'rotate(180deg)':'none'}}><path d="M6 9l6 6 6-6"/></svg>
                  </button>
                  {hover === idx && (
                    <div className="nav-mega" onClick={() => setHover(null)}>
                      <div className="nav-mega-inner" style={{gridTemplateColumns: `repeat(${Math.min(item.cols.length, 4)}, minmax(180px, 1fr))`}}>
                        {item.cols.map((col, ci) => (
                          <div key={ci} className="nav-mega-col">
                            <div className="nav-mega-col-label">{t(col.label)}</div>
                            <ul>
                              {col.items.map((sub, si) => (
                                <li key={si}>
                                  <a href={sub.href} className={sub.soon ? 'is-soon' : ''}>
                                    <span>{t(sub.key)}</span>
                                    {sub.badge && <span className="nav-mega-badge">{sub.badge}</span>}
                                    {sub.soon && <span className="nav-mega-soon">{t('mm.soon')}</span>}
                                  </a>
                                </li>
                              ))}
                            </ul>
                          </div>
                        ))}
                      </div>
                      {item.href && (
                        <div className="nav-mega-foot">
                          <a href={item.href} className="nav-mega-foot-link">
                            {lang==='ar' ? 'عرض الصفحة الكاملة' : 'Voir la page complète'} →
                          </a>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              )
            ))}
          </div>
          <LangToggle />
          <a href="contact.html" className="btn btn-primary nav-cta">{t('nav.cta')}</a>
          <button className="nav-toggle" onClick={()=>setOpen(!open)} aria-label="Menu">
            {open
              ? <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
              : <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
            }
          </button>
        </div>
      </nav>
      {open && (
        <div className="nav-mobile">
          {FLC_MENU.map((item, idx) => (
            item.type === 'link' ? (
              <a key={idx} href={item.href} className={`nav-mobile-link ${isItemActive(item)?'active':''}`} onClick={()=>setOpen(false)}>
                <span style={{display:'flex',alignItems:'center',gap:14}}>
                  <span style={{fontSize:20}}>{item.icon}</span>
                  {t(item.key)}
                </span>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="arrow-rtl"><path d="M9 18l6-6-6-6"/></svg>
              </a>
            ) : (
              <div key={idx} className={`nav-mobile-group ${openSub===idx?'open':''}`}>
                <button type="button" className={`nav-mobile-link nav-mobile-trigger ${isItemActive(item)?'active':''}`} onClick={()=>setOpenSub(openSub===idx?null:idx)}>
                  <span style={{display:'flex',alignItems:'center',gap:14}}>
                    <span style={{fontSize:20}}>{item.icon}</span>
                    {t(item.key)}
                  </span>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" className="no-flip" style={{transition:'transform .25s',transform: openSub===idx?'rotate(180deg)':'none'}}><path d="M6 9l6 6 6-6"/></svg>
                </button>
                {openSub === idx && (
                  <div className="nav-mobile-sub">
                    {item.href && (
                      <a href={item.href} className="nav-mobile-sub-all" onClick={()=>setOpen(false)}>
                        {lang==='ar' ? '◇ عرض الكل' : '◇ Tout voir'} →
                      </a>
                    )}
                    {item.cols.map((col, ci) => (
                      <div key={ci} className="nav-mobile-sub-col">
                        <div className="nav-mobile-sub-label">{t(col.label)}</div>
                        {col.items.map((sub, si) => (
                          <a key={si} href={sub.href} className={`nav-mobile-sub-link ${sub.soon?'is-soon':''}`} onClick={()=>setOpen(false)}>
                            <span>{t(sub.key)}</span>
                            {sub.badge && <span className="nav-mega-badge">{sub.badge}</span>}
                            {sub.soon && <span className="nav-mega-soon">{t('mm.soon')}</span>}
                          </a>
                        ))}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            )
          ))}
          <a href="contact.html" className={`nav-mobile-link ${active==='contact.html'?'active':''}`} onClick={()=>setOpen(false)}>
            <span style={{display:'flex',alignItems:'center',gap:14}}>
              <span style={{fontSize:20}}>✉️</span>
              {t('nav.contact')}
            </span>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="arrow-rtl"><path d="M9 18l6-6-6-6"/></svg>
          </a>
          <LangToggle />
          <a href="contact.html" className="btn btn-primary nav-mobile-cta" onClick={()=>setOpen(false)}>
            {t('nav.cta_full')}
          </a>
          <div className="nav-mobile-foot">
            <a href={FLC_PHONE} className="mob-call">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" className="no-flip"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/></svg>
              {t('sticky.call')}
            </a>
            <a href={FLC_WA} target="_blank" className="mob-wa">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="no-flip"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487 2.981 1.286 2.981.857 3.518.804.537-.054 1.758-.719 2.006-1.413.247-.694.247-1.288.173-1.412-.075-.124-.272-.198-.57-.347zM12.05 21.785h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884z"/></svg>
              {t('sticky.wa')}
            </a>
          </div>
        </div>
      )}
    </React.Fragment>
  );
}

function FLCFooter() {
  useLang(); // re-render on lang change
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div>
            <div className="footer-logo">
              <div className="footer-logo-pill">
                <img src="assets/flc-logo.png" alt="FLC · Future Learning Center" className="no-flip"/>
              </div>
              <div>
                <div className="footer-logo-sub">{getLang()==='ar' ? 'طنجة · ' + t('footer.tagline') : 'Tanger · ' + t('footer.tagline')}</div>
              </div>
            </div>
            <p className="footer-tag">{t('footer.tag')}</p>
          </div>
          <div className="footer-cols">
            <div>
              <h5>{t('footer.programs')}</h5>
              <ul>
                <li><a href="anglais.html">{t('nav.english')}</a></li>
                <li><a href="langues.html">{t('navmob.languages')}</a></li>
                <li><a href="soutien.html">{t('navmob.support')}</a></li>
                <li><a href="ateliers.html">{t('nav.workshops')}</a></li>
                <li><a href="coran.html">{t('navmob.quran')}</a></li>
              </ul>
            </div>
            <div>
              <h5>{t('footer.center')}</h5>
              <ul>
                <li><a href="methode.html">{t('navmob.method')}</a></li>
                <li><a href="tarifs.html">{t('nav.pricing')}</a></li>
                <li><a href="contact.html">{t('nav.contact')}</a></li>
              </ul>
            </div>
            <div>
              <h5>{t('footer.contact_h')}</h5>
              <ul>
                <li>{t('footer.address1')}</li>
                <li>{t('footer.address2')}</li>
                <li>{t('footer.hours1')}</li>
                <li>{t('footer.hours2')}</li>
              </ul>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>{t('footer.copy')}</span>
          <span>{t('footer.location')}</span>
        </div>
      </div>
    </footer>
  );
}

function FLCSticky() {
  useLang();
  return (
    <div className="sticky-cta">
      <a href={FLC_PHONE} className="sticky-call">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" className="no-flip"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/></svg>
        {t('sticky.call')}
      </a>
      <a href={FLC_WA} target="_blank" className="sticky-wa">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="no-flip"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487 2.981 1.286 2.981.857 3.518.804.537-.054 1.758-.719 2.006-1.413.247-.694.247-1.288.173-1.412-.075-.124-.272-.198-.57-.347zM12.05 21.785h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884z"/></svg>
        {t('sticky.wa')}
      </a>
      <a href="contact.html" className="sticky-book">{t('sticky.book')}</a>
    </div>
  );
}

function FLCFab() {
  return (
    <a href={FLC_WA} target="_blank" className="fab-whatsapp" aria-label="WhatsApp">
      <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487 2.981 1.286 2.981.857 3.518.804.537-.054 1.758-.719 2.006-1.413.247-.694.247-1.288.173-1.412-.075-.124-.272-.198-.57-.347zM12.05 21.785h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884z"/></svg>
    </a>
  );
}

// Reveal-on-scroll observer
function FLCObserver() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
    }, { threshold: 0.1 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
  return null;
}

// Helper: shared inline icons
const I = {
  Check: ({size=18}) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>,
  Arrow: ({size=16}) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>,
  Star: ({size=16}) => <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>,
  Plus: ({size=20}) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>,
  Sparkle: ({size=16}) => <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.7 5.3L19 9l-5.3 1.7L12 16l-1.7-5.3L5 9l5.3-1.7z"/></svg>,
};

window.FLCHeader = FLCHeader;
window.FLCFooter = FLCFooter;
window.FLCSticky = FLCSticky;
window.FLCFab = FLCFab;
window.FLCObserver = FLCObserver;
window.FLC_MENU = FLC_MENU;
window.FLC_PHONE = FLC_PHONE;
window.FLC_WA = FLC_WA;
window.I = I;

// ============================================
// FLCPageHero — beautiful reusable hero (mirrors HomeHero style)
// Props:
//   pillIcon, pillText, pillVariant ('saffron'|'mint'|'coral'|'indigo')
//   title (string with optional <em> via emText), emText, titleSuffix
//   lead (string)
//   primaryCta { label, href }, secondaryCta { label, href }
//   image (url), imageBadge { icon, label, value }
//   stats: [{ icon?, label, value, sub? }]  // up to 2 floating cards
//   blob1, blob2: { color, w, h, top, right, bottom, left, opacity }
//   accent (color used for em + checks; default saffron-dark)
// ============================================
function FLCPageHero(props) {
  useLang();
  const {
    pillIcon, pillText, pillVariant = 'saffron',
    title, emText, titleSuffix,
    lead,
    primaryCta, secondaryCta,
    image, imageBadge, stats = [],
    blob1, blob2,
    accent = 'var(--saffron-dark)',
  } = props;

  const pillClass = {
    saffron: 'pill pill-saffron',
    mint: 'pill pill-mint',
    coral: 'pill',
    indigo: 'pill',
  }[pillVariant] || 'pill pill-saffron';

  const defaultBlob1 = { color: '#F4A24C', w: 340, h: 340, top: -120, right: -100 };
  const defaultBlob2 = { color: '#7FC8A9', w: 280, h: 280, bottom: -100, left: -80 };
  const b1 = { ...defaultBlob1, ...(blob1 || {}) };
  const b2 = { ...defaultBlob2, ...(blob2 || {}) };

  return (
    <section className="flc-phero" style={{paddingTop: 32}}>
      <div className="flc-phero-blob" style={{background:b1.color,width:b1.w,height:b1.h,top:b1.top,right:b1.right,bottom:b1.bottom,left:b1.left,opacity:b1.opacity ?? 0.45}}></div>
      <div className="flc-phero-blob" style={{background:b2.color,width:b2.w,height:b2.h,top:b2.top,right:b2.right,bottom:b2.bottom,left:b2.left,opacity:b2.opacity ?? 0.4}}></div>
      <div className="container flc-phero-content">
        <div className={`flc-phero-grid ${image ? 'with-image' : 'no-image'}`}>
          <div className="flc-phero-copy">
            {pillText && (
              <span className={pillClass} style={{animation:'pulse 2.5s infinite'}}>
                {pillIcon && <span style={{marginRight:6}}>{pillIcon}</span>}
                {pillText}
              </span>
            )}
            <h1 className="h-display h1" style={{marginTop:14}}>
              {title}
              {emText && <em style={{fontStyle:'italic',color:accent}}> {emText}</em>}
              {titleSuffix && <React.Fragment> {titleSuffix}</React.Fragment>}
            </h1>
            {lead && (
              <p className="lead" style={{marginTop:14,maxWidth:560}}>{lead}</p>
            )}
            {(primaryCta || secondaryCta) && (
              <div style={{display:'flex',gap:10,flexWrap:'wrap',marginTop:24}}>
                {primaryCta && <a href={primaryCta.href} className="btn btn-primary">{primaryCta.label}</a>}
                {secondaryCta && <a href={secondaryCta.href} className="btn btn-ghost">{secondaryCta.label}</a>}
              </div>
            )}
          </div>

          {image && (
            <div className="flc-phero-visual">
              <div className="flc-phero-photo">
                <img src={image} alt="" loading="lazy"/>
                {imageBadge && (
                  <div className="flc-phero-photo-badge">
                    {imageBadge.icon && <span style={{fontSize:20}}>{imageBadge.icon}</span>}
                    <div>
                      {imageBadge.label && <div style={{fontSize:11,color:'var(--ink-500)',fontWeight:600}}>{imageBadge.label}</div>}
                      {imageBadge.value && <div style={{fontWeight:700,fontSize:14,color:'var(--indigo-900)'}}>{imageBadge.value}</div>}
                    </div>
                  </div>
                )}
              </div>
              {stats[0] && (
                <div className="flc-phero-stat flc-phero-stat-1">
                  <div className="flc-phero-stat-label" style={{color: stats[0].color || 'var(--ink-500)'}}>{stats[0].label}</div>
                  <div className="flc-phero-stat-value">{stats[0].value}</div>
                  {stats[0].sub && <div className="flc-phero-stat-sub">{stats[0].sub}</div>}
                </div>
              )}
              {stats[1] && (
                <div className="flc-phero-stat flc-phero-stat-2">
                  <div className="flc-phero-stat-label" style={{color: stats[1].color || 'var(--mint-600)'}}>{stats[1].label}</div>
                  <div className="flc-phero-stat-value">{stats[1].value}</div>
                  {stats[1].sub && <div className="flc-phero-stat-sub">{stats[1].sub}</div>}
                </div>
              )}
            </div>
          )}
        </div>
      </div>
      <style>{`
        .flc-phero {
          position: relative;
          padding: 32px 0 56px;
          background: linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%);
          overflow: hidden;
        }
        @media (min-width: 768px) { .flc-phero { padding: 56px 0 88px; } }
        .flc-phero-blob {
          position: absolute;
          border-radius: 50%;
          filter: blur(80px);
          pointer-events: none;
        }
        .flc-phero-content { position: relative; z-index: 1; }
        .flc-phero-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 36px;
          align-items: center;
        }
        @media (min-width: 900px) {
          .flc-phero-grid.with-image { grid-template-columns: 1.05fr 1fr; gap: 56px; }
        }
        .flc-phero-grid.no-image { max-width: 720px; }
        .flc-phero-copy h1 { color: var(--indigo-900); }

        /* Visual */
        .flc-phero-visual { position: relative; aspect-ratio: 4/3.4; }
        .flc-phero-photo {
          position: absolute; inset: 0;
          border-radius: var(--r-2xl);
          overflow: hidden;
          box-shadow: var(--shadow-xl);
        }
        .flc-phero-photo img {
          width: 100%; height: 100%; object-fit: cover;
          transition: transform 8s ease;
        }
        .flc-phero-visual:hover .flc-phero-photo img { transform: scale(1.05); }
        .flc-phero-photo-badge {
          position: absolute;
          bottom: 16px; left: 16px;
          background: white;
          padding: 10px 14px;
          border-radius: var(--r-md);
          display: flex;
          align-items: center;
          gap: 10px;
          box-shadow: var(--shadow-md);
        }
        html[dir="rtl"] .flc-phero-photo-badge { left: auto; right: 16px; }

        .flc-phero-stat {
          position: absolute;
          background: white;
          padding: 14px 18px;
          border-radius: var(--r-lg);
          box-shadow: var(--shadow-lg);
          animation: float 6s ease-in-out infinite;
          min-width: 130px;
        }
        .flc-phero-stat-1 { top: 8%; right: -8px; animation-delay: 0s; }
        .flc-phero-stat-2 { bottom: 22%; right: -16px; animation-delay: 2s; }
        @media (min-width: 900px) {
          .flc-phero-stat-1 { right: -28px; }
          .flc-phero-stat-2 { right: -36px; }
        }
        html[dir="rtl"] .flc-phero-stat-1 { right: auto; left: -8px; }
        html[dir="rtl"] .flc-phero-stat-2 { right: auto; left: -16px; }
        @media (min-width: 900px) {
          html[dir="rtl"] .flc-phero-stat-1 { left: -28px; }
          html[dir="rtl"] .flc-phero-stat-2 { left: -36px; }
        }
        .flc-phero-stat-label {
          font-size: 11px;
          font-weight: 700;
          letter-spacing: 0.08em;
          text-transform: uppercase;
        }
        .flc-phero-stat-value {
          font-family: var(--font-display);
          font-size: 28px;
          font-weight: 700;
          color: var(--indigo-900);
          margin: 4px 0;
          line-height: 1;
        }
        .flc-phero-stat-sub {
          font-size: 12px;
          color: var(--ink-700);
          line-height: 1.3;
          max-width: 130px;
        }
      `}</style>
    </section>
  );
}
window.FLCPageHero = FLCPageHero;

// Image library — Unsplash (royalty-free) + emoji fallback
window.IMG = {
  hero: 'https://images.unsplash.com/photo-1529390079861-591de354faf5?w=1400&q=80',  // students smiling
  classroom: 'https://images.unsplash.com/photo-1577896851231-70ef18881754?w=1200&q=80', // small classroom
  english_kids: 'https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=1200&q=80',
  english_teens: 'https://images.unsplash.com/photo-1571260899304-425eee4c7efc?w=1200&q=80',
  english_adults: 'https://images.unsplash.com/photo-1521737711867-e3b97375f902?w=1200&q=80',
  cambridge: 'https://images.unsplash.com/photo-1532012197267-da84d127e765?w=1200&q=80',
  cooking: 'https://images.unsplash.com/photo-1544025162-d76694265947?w=900&q=80',
  drama: 'https://images.unsplash.com/photo-1503095396549-807759245b35?w=900&q=80',
  boardgames: 'https://images.unsplash.com/photo-1610890716171-6b1bb98ffd09?w=900&q=80',
  cinema: 'https://images.unsplash.com/photo-1489599559548-7ec1c1ad8e89?w=900&q=80',
  debate: 'https://images.unsplash.com/photo-1517048676732-d65bc937f952?w=900&q=80',
  arts: 'https://images.unsplash.com/photo-1513364776144-60967b0f800f?w=900&q=80',
  horse: 'https://images.unsplash.com/photo-1553284965-5dcb46377e83?w=900&q=80',
  sports: 'https://images.unsplash.com/photo-1526232636376-934e9b794a78?w=900&q=80',
  treasure: 'https://images.unsplash.com/photo-1518709268805-4e9042af9f23?w=900&q=80',
  coffee: 'https://images.unsplash.com/photo-1521017432531-fbd92d768814?w=900&q=80',
  photo: 'https://images.unsplash.com/photo-1508921912186-1d1a45ebb3c1?w=900&q=80',
  primaire: 'https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?w=1200&q=80',
  college: 'https://images.unsplash.com/photo-1427504494785-3a9ca7044f45?w=1200&q=80',
  lycee: 'https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=1200&q=80',
  maths: 'https://images.unsplash.com/photo-1635070041078-e363dbe005cb?w=900&q=80',
  science: 'https://images.unsplash.com/photo-1532094349884-543bc11b234d?w=900&q=80',
  reading: 'https://images.unsplash.com/photo-1509062522246-3755977927d7?w=900&q=80',
  ecriture: 'https://images.unsplash.com/photo-1455390582262-044cdead277a?w=900&q=80',
  mode: 'https://images.unsplash.com/photo-1558769132-cb1aea458c5e?w=900&q=80',
  calligraphie: 'https://images.unsplash.com/photo-1517832606299-7ae9b720a186?w=900&q=80',
  crochet: 'https://images.unsplash.com/photo-1598618443855-232ee0f819f6?w=900&q=80',
  coran: 'https://images.unsplash.com/photo-1609599006353-e629aaabfeae?w=1200&q=80',
  coran2: 'https://images.unsplash.com/photo-1564769625392-651b2c41b186?w=1200&q=80',
  teacher: 'https://images.unsplash.com/photo-1544717297-fa95b6ee9643?w=900&q=80',
  team: 'https://images.unsplash.com/photo-1524178232363-1fb2b075b655?w=1200&q=80',
  group: 'https://images.unsplash.com/photo-1543269865-cbf427effbad?w=1200&q=80',
  smile: 'https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?w=900&q=80',
  laptop: 'https://images.unsplash.com/photo-1531482615713-2afd69097998?w=900&q=80',
  diploma: 'https://images.unsplash.com/photo-1606761568499-6d2451b23c66?w=1200&q=80',
  parents_real: 'https://images.unsplash.com/photo-1543269664-7eef42226a21?w=900&q=80',
  tanger: 'https://images.unsplash.com/photo-1539020140153-e479b8c2a52a?w=1200&q=80',
  parents: 'https://images.unsplash.com/photo-1602052793312-b99c2a9ee797?w=900&q=80',
};