// SOMUM site chrome — Header (with brand mark + persona-aware CTA), Footer, helpers
// Refonte mai 2026

function SiteStyles({ accent = 'teal' }) {
  const T = SOMUM_TOKENS;
  const a = _accentTriple(accent);
  const css = `
    .v1 { background: ${T.cream}; color: ${T.ink}; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
    .v1-serif { font-family: 'Newsreader', Georgia, serif; font-optical-sizing: auto; }
    .v1-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
    .v1-eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: ${T.inkSoft}; }
    .v1-rule { display: inline-block; width: 28px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 12px; opacity: 0.5; }
    .v1-btn-primary { background: ${a.color}; color: white; padding: 16px 28px; border-radius: 999px; font-weight: 600; font-size: 14px; letter-spacing: 0.02em; border: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
    .v1-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px ${a.color}30; }
    .v1-btn-ghost { background: transparent; color: ${T.ink}; padding: 16px 0; border: none; cursor: pointer; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
    .v1-btn-ghost:hover { color: ${a.color}; }
    .v1-btn-outline { background: transparent; color: ${T.ink}; padding: 14px 24px; border: 1px solid ${T.outline}; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all .2s ease; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
    .v1-btn-outline:hover { border-color: ${a.color}; color: ${a.color}; }
    .v1-link { color: ${a.color}; font-weight: 600; font-size: 13px; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; }
    .v1-link:hover { gap: 12px; transition: gap .2s ease; }
    .v1-card { background: white; border: 1px solid ${T.outline}40; border-radius: 24px; padding: 40px; box-shadow: 0 1px 0 rgba(0,103,103,0.04), 0 20px 40px -28px rgba(0,103,103,0.18); }
    .v1-chip { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: ${a.color}14; color: ${a.color}; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
    .v1-input { flex: 1; border: none; background: transparent; padding: 14px 20px; font-size: 15px; outline: none; font-family: 'Plus Jakarta Sans'; color: ${T.ink}; }
    .v1-input::placeholder { color: ${T.inkSoft}90; }
    .somum-mark { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 700; letter-spacing: 0.16em; }
  `;
  return <style>{css}</style>;
}

function SomumLogo({ size = 44, dark = false }) {
  const T = SOMUM_TOKENS;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <img src="assets/logo.png" alt="SOMUM" style={{ width: size, height: size, borderRadius: '50%', display: 'block' }} />
      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
        <div className="somum-mark" style={{ fontSize: 18, color: dark ? T.cream : T.ink }}>SOMUM</div>
        <div className="v1-mono" style={{ fontSize: 9, color: dark ? T.tealPale : T.inkSoft, letterSpacing: '0.16em', textTransform: 'uppercase', marginTop: 4 }}>Discipline Positive</div>
      </div>
    </div>
  );
}

function SiteHeader({ lang = 'fr', accent = 'teal', activePage }) {
  const t = COPY[lang];
  const T = SOMUM_TOKENS;
  const a = _accentTriple(accent);
  const isMobile = useIsMobile();        // < 768px  → hamburger
  const isTablet = useIsMobile(1025);    // < 1025px → compact nav
  const isCompact = isTablet && !isMobile; // 768–1024px tablet range
  const [menuOpen, setMenuOpen] = React.useState(false);

  return (
    <header style={{ borderBottom: `1px solid ${T.outline}30`, background: T.cream, position: 'sticky', top: 0, zIndex: 50 }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: isMobile ? '14px 20px' : isCompact ? '18px 20px' : '18px 40px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
        <a href="index.html" style={{ textDecoration: 'none', color: T.ink, flex: '0 0 auto' }}>
          <SomumLogo size={isMobile ? 36 : 44} />
        </a>
        {!isMobile && (
          <nav style={{ display: 'flex', alignItems: 'center', gap: isCompact ? 10 : 26, flex: 1, justifyContent: 'center', overflow: 'hidden' }}>
            {t.nav.map((n, i) => {
              const isActive = (activePage === 'home' && n.href === 'index.html')
                || (activePage === 'parents' && n.href === 'parents.html')
                || (activePage === 'ecoles' && n.href === 'ecoles.html')
                || (activePage === 'entreprises' && n.href === 'entreprises.html')
                || (activePage === 'methode' && n.href === 'methode.html')
                || (activePage === 'about' && n.href === 'about.html')
                || (activePage === 'blog' && n.href === 'blog.html')
                || (activePage === 'contact' && n.href === 'contact.html');
              return (
                <a key={i} href={n.href} style={{ fontSize: isCompact ? 11.5 : 13.5, color: T.ink, textDecoration: 'none', fontWeight: isActive ? 600 : 400, borderBottom: isActive ? `2px solid ${a.color}` : '2px solid transparent', paddingBottom: 3, whiteSpace: 'nowrap' }}>
                  {n.label}
                </a>
              );
            })}
          </nav>
        )}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: '0 0 auto' }}>
          {!isMobile && !isCompact && <div className="v1-mono" style={{ fontSize: 11, color: T.inkSoft, letterSpacing: '0.14em' }}>{lang.toUpperCase()} / {lang === 'fr' ? 'EN' : 'FR'}</div>}
          {!isMobile && <a href={SOMUM_BOOKING.parents} target="_blank" rel="noopener" className="v1-btn-primary" style={{ padding: isCompact ? '10px 16px' : '11px 20px', fontSize: isCompact ? 12 : 13, whiteSpace: 'nowrap', flexShrink: 0 }}>{t.cta}</a>}
          {isMobile && (
            <button onClick={() => setMenuOpen(!menuOpen)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 8, color: T.ink, display: 'flex', alignItems: 'center' }}>
              {menuOpen
                ? <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                : <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
              }
            </button>
          )}
        </div>
      </div>
      {isMobile && menuOpen && (
        <div style={{ background: T.cream, borderTop: `1px solid ${T.outline}30`, padding: '16px 20px 24px' }}>
          <nav style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {t.nav.map((n, i) => (
              <a key={i} href={n.href} onClick={() => setMenuOpen(false)} style={{ fontSize: 16, color: T.ink, textDecoration: 'none', fontWeight: 500, padding: '12px 0', borderBottom: `1px solid ${T.outline}30` }}>
                {n.label}
              </a>
            ))}
          </nav>
          <a href={SOMUM_BOOKING.parents} target="_blank" rel="noopener" className="v1-btn-primary" style={{ marginTop: 20, width: '100%', justifyContent: 'center', padding: '14px 20px', fontSize: 14 }}>{t.cta}</a>
        </div>
      )}
    </header>
  );
}

function SiteFooter({ lang = 'fr', accent = 'teal' }) {
  const t = COPY[lang];
  const T = SOMUM_TOKENS;
  const isMobile = useIsMobile();
  const navItems = t.nav;
  const practiceItems = lang === 'fr'
    ? [{ label: 'La méthode', href: 'methode.html' }, { label: 'Tarifs', href: 'coaching.html' }, { label: 'FAQ', href: 'faq.html' }, { label: 'Mentions légales', href: 'legal.html' }]
    : [{ label: 'The method', href: 'methode.html' }, { label: 'Pricing', href: 'coaching.html' }, { label: 'FAQ', href: 'faq.html' }, { label: 'Legal', href: 'legal.html' }];

  return (
    <footer style={{ background: T.ink, color: T.cream, padding: isMobile ? '48px 20px 32px' : '64px 48px 36px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : '2fr 1fr 1fr 1.2fr', gap: isMobile ? 32 : 48, marginBottom: 48 }}>
          <div>
            <SomumLogo size={44} dark />
            <p style={{ fontSize: 14, opacity: 0.7, lineHeight: 1.65, maxWidth: 340, margin: '20px 0 0' }}>{t.footerTag}</p>
            <div className="v1-mono" style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: T.tealPale, marginTop: 24, opacity: 0.7 }}>{t.contact.zones}</div>
          </div>
          <div>
            <div className="v1-mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: T.tealPale, marginBottom: 18 }}>{lang === 'fr' ? 'Navigation' : 'Navigation'}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
              {navItems.map((n, j) => <a key={j} href={n.href} style={{ fontSize: 13.5, opacity: 0.72, textDecoration: 'none', color: T.cream }}>{n.label}</a>)}
            </div>
          </div>
          <div>
            <div className="v1-mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: T.tealPale, marginBottom: 18 }}>{lang === 'fr' ? 'Pratique' : 'Practice'}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
              {practiceItems.map((it, j) => <a key={j} href={it.href} style={{ fontSize: 13.5, opacity: 0.72, textDecoration: 'none', color: T.cream }}>{it.label}</a>)}
            </div>
          </div>
          <div>
            <div className="v1-mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: T.tealPale, marginBottom: 18 }}>Contact</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
              <a href={`mailto:${t.contact.email}`} style={{ fontSize: 13.5, opacity: 0.72, textDecoration: 'none', color: T.cream }}>{t.contact.email}</a>
              <a href={`tel:${t.contact.phone.replace(/\s/g, '')}`} style={{ fontSize: 13.5, opacity: 0.72, textDecoration: 'none', color: T.cream }}>{t.contact.phone}</a>
              <a href="https://www.instagram.com/somum_parental_coaching" target="_blank" rel="noopener" style={{ fontSize: 13.5, opacity: 0.72, textDecoration: 'none', color: T.cream }}>Instagram</a>
              <a href="#" style={{ fontSize: 13.5, opacity: 0.72, textDecoration: 'none', color: T.cream }}>LinkedIn</a>
            </div>
          </div>
        </div>
        <div style={{ borderTop: '1px solid rgba(252,249,245,0.12)', paddingTop: 24, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
          <div className="v1-mono" style={{ fontSize: 10.5, letterSpacing: '0.14em', opacity: 0.5, textTransform: 'uppercase' }}>© 2026 SOMUM Coaching · Luxembourg</div>
          <div className="v1-mono" style={{ fontSize: 10.5, letterSpacing: '0.14em', opacity: 0.5, textTransform: 'uppercase' }}>{lang === 'fr' ? 'Discipline Positive · Coopération · Respect' : 'Positive Discipline · Cooperation · Respect'}</div>
        </div>
      </div>
    </footer>
  );
}

function PageHero({ lang, accent, eyebrow, title, lede, kicker }) {
  const T = SOMUM_TOKENS;
  const a = _accentTriple(accent);
  const isMobile = useIsMobile();
  return (
    <section style={{ background: T.cream, padding: isMobile ? '56px 20px 40px' : '88px 48px 80px', borderBottom: `1px solid ${T.outline}30` }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <div className="v1-eyebrow" style={{ marginBottom: 28 }}><span className="v1-rule"></span>{eyebrow}</div>
        <h1 className="v1-serif" style={{ fontSize: isMobile ? 36 : 84, lineHeight: 1.02, letterSpacing: '-0.025em', fontWeight: 500, margin: '0 0 28px', maxWidth: '16ch', textWrap: 'balance' }}>
          {kicker ? (
            <React.Fragment>
              {kicker}{' '}
              <em style={{ fontStyle: 'italic', color: a.color, fontWeight: 400 }}>{title}</em>
            </React.Fragment>
          ) : title}
        </h1>
        {lede && <p style={{ fontSize: isMobile ? 16 : 20, lineHeight: 1.55, color: T.inkSoft, maxWidth: 680, margin: 0, textWrap: 'pretty' }}>{lede}</p>}
      </div>
    </section>
  );
}

function SitePage({ lang = 'fr', accent = 'teal', activePage, children }) {
  return (
    <div className="v1" style={{ width: '100%', minHeight: '100vh' }}>
      <SiteStyles accent={accent} />
      <SiteHeader lang={lang} accent={accent} activePage={activePage} />
      {children}
      <SiteFooter lang={lang} accent={accent} />
    </div>
  );
}

Object.assign(window, { SiteStyles, SomumLogo, SiteHeader, SiteFooter, PageHero, SitePage });