// Shared chrome for legal/help/support subpages.
// Provides: <LegalNav />, <LegalFooter />, and a <LegalShell title eyebrow lastUpdated>...</LegalShell>
// that wraps a typical text-heavy doc.

const LegalNav = () => {
  const { t, lang, setLang } = useI18n();
  const { theme, toggle: toggleTheme } = useTheme();
  return (
    <div className="nav-wrap">
      <div className="container nav">
        <a href="/" className="nav-brand">
          <LumynaxMark size={30} halo={true} />
          <div className="nav-wordmark"><span className="lumy">Lumy</span><span className="nax">nax</span></div>
        </a>
        <nav className="nav-links" aria-label="Primary">
          <a href="/#features">{t('nav.features')}</a>
          <a href="/#personas">{t('nav.personas')}</a>
          <a href="/#pricing">{t('nav.pricing')}</a>
          <a href="/#faq">{t('nav.faq')}</a>
        </nav>
        <div className="nav-right">
          <div className="pill-toggle" role="group" aria-label="Language">
            <button className={lang === 'tr' ? 'on' : ''} onClick={() => { window.localStorage.setItem('lumynax-lang', 'tr'); window.location.href = '/'; }}>TR</button>
            <button className={lang === 'en' ? 'on' : ''} onClick={() => { window.localStorage.setItem('lumynax-lang', 'en'); window.location.href = '/en/'; }}>EN</button>
          </div>
          <button className="icon-btn" onClick={toggleTheme} aria-label="Toggle theme">
            {theme === 'dark' ? <Ic.Sun2 s={16}/> : <Ic.Moon2 s={16}/>}
          </button>
          <a href="/#download" className="btn btn-primary">{t('nav.download')}</a>
        </div>
      </div>
    </div>
  );
};

const LegalFooter = () => {
  const { t, lang } = useI18n();
  const tr = lang === 'tr';
  return (
    <footer style={{ marginTop: 80 }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 18 }}>
          <a href="/" className="nav-brand" style={{ textDecoration: 'none' }}>
            <LumynaxMark size={26} halo={true} />
            <div className="nav-wordmark" style={{ fontSize: 18 }}>
              <span className="lumy">Lumy</span><span className="nax">nax</span>
            </div>
          </a>
          <div style={{ display: 'flex', gap: 20, fontSize: 13.5, color: 'var(--text-secondary)', fontWeight: 600, flexWrap: 'wrap' }}>
            <a href="/legal/privacy.html">{tr ? 'Gizlilik' : 'Privacy'}</a>
            <a href="/legal/terms.html">{tr ? 'Şartlar' : 'Terms'}</a>
            <a href="/legal/help.html">{tr ? 'Yardım' : 'Help'}</a>
            <a href="/legal/support.html">{tr ? 'Destek' : 'Support'}</a>
            <a href="/legal/about.html">{tr ? 'Hakkımızda' : 'About'}</a>
          </div>
          <div style={{ fontSize: 12.5, color: 'var(--text-muted)' }}>{t('footer.bottom_left')}</div>
        </div>
      </div>
    </footer>
  );
};

const LegalShell = ({ eyebrow, title, lastUpdated, children }) => (
  <div style={{ background: 'var(--bg-page)', color: 'var(--text-primary)', minHeight: '100vh' }}>
    <LegalNav />
    <main className="container" style={{ maxWidth: 820, padding: '60px 28px 40px' }}>
      <div className="section-eyebrow" style={{ marginBottom: 14 }}>{eyebrow}</div>
      <h1 style={{
        fontSize: 'clamp(36px, 4.5vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.03em',
        fontWeight: 900, margin: '0 0 16px', textWrap: 'balance',
      }}>{title}</h1>
      {lastUpdated && (
        <div style={{ fontSize: 13, color: 'var(--text-muted)', fontWeight: 600, marginBottom: 40 }}>
          {lastUpdated}
        </div>
      )}
      <div className="legal-body">{children}</div>
    </main>
    <LegalFooter />
  </div>
);

Object.assign(window, { LegalNav, LegalFooter, LegalShell });