/* Shared site chrome for the Prompt Queen AI website UI kit.
   Loaded via <script type="text/babel" src="chrome.jsx"> — exports to window. */
const { Logo, Icon, Button, EmailCapture } = window.PromptQueenAIDesignSystem_df419b;

function SiteNav({ active = 'home' }) {
  const links = [
    ['news', 'AI news', 'news.html'],
    ['reviews', 'Reviews', 'review.html'],
    ['hub', 'Learning Hub', 'hub.html'],
    ['blog', 'Blog', 'article.html'],
  ];
  return (
    <header style={{ background: 'var(--bg-page)', borderBottom: '1px solid var(--border-subtle)', position: 'sticky', top: 0, zIndex: 50 }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 32px', height: 72, display: 'flex', alignItems: 'center', gap: 32 }}>
        <a href="index.html" style={{ textDecoration: 'none' }}><Logo scale={0.75} /></a>
        <nav style={{ display: 'flex', gap: 26, marginLeft: 'auto', alignItems: 'center' }}>
          {links.map(([id, label, href]) => (
            <a key={id} href={href} style={{
              fontFamily: 'var(--font-sans)', fontSize: 'var(--text-body-sm)', textDecoration: 'none',
              fontWeight: active === id ? 600 : 500,
              color: active === id ? 'var(--text-accent)' : 'var(--text-body)',
              borderBottom: active === id ? '2px solid var(--cerise-500)' : '2px solid transparent',
              paddingBottom: 2,
            }}>{label}</a>
          ))}
        </nav>
        <Button size="sm">Join the Brief</Button>
      </div>
    </header>
  );
}

function SiteFooter() {
  const col = { display: 'flex', flexDirection: 'column', gap: 10, fontFamily: 'var(--font-sans)', fontSize: 14 };
  const a = { color: 'var(--text-on-ink-muted)', textDecoration: 'none' };
  const h = { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--gold-300)', marginBottom: 4 };
  return (
    <footer style={{ background: 'var(--surface-ink)', color: 'var(--text-on-ink)', marginTop: 96 }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '64px 32px 40px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Logo tone="light" scale={0.8} />
            <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.65, color: 'var(--text-on-ink-muted)', maxWidth: 320 }}>
              AI, decoded for ambitious women. Learn it, use it, get paid for it.
            </p>
          </div>
          <div style={col}><span style={h}>Learn</span><a style={a} href="hub.html">Learning Hub</a><a style={a} href="lesson.html">Start Level 1</a><a style={a} href="#">Prompt library</a></div>
          <div style={col}><span style={h}>Read</span><a style={a} href="news.html">AI news</a><a style={a} href="review.html">Tool reviews</a><a style={a} href="article.html">Blog</a></div>
          <div style={col}><span style={h}>Company</span><a style={a} href="#">About</a><a style={a} href="#">Advertise</a><a style={a} href="#">Contact</a></div>
        </div>
        <div style={{ borderTop: '1px solid var(--border-ink)', marginTop: 48, paddingTop: 24, display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-on-ink-muted)' }}>© 2026 Prompt Queen AI</span>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--text-on-ink-muted)' }}>Some links are affiliate links. We only recommend what we'd pay for ourselves.</span>
        </div>
      </div>
    </footer>
  );
}

function Overline({ children, gold }) {
  return <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-overline)', fontWeight: 500, letterSpacing: 'var(--tracking-overline)', textTransform: 'uppercase', color: gold ? 'var(--text-gold)' : 'var(--text-accent)' }}>{children}</div>;
}

function SectionHead({ overline, title, action, href }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, marginBottom: 32 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {overline && <Overline>{overline}</Overline>}
        <h2 style={{ fontSize: 'var(--text-h2)', lineHeight: 'var(--leading-heading)' }}>{title}</h2>
      </div>
      {action && <a href={href || '#'} style={{ fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600, color: 'var(--text-heading)', textDecoration: 'none', whiteSpace: 'nowrap', paddingBottom: 4 }}>{action} <span style={{ color: 'var(--text-accent)' }}>→</span></a>}
    </div>
  );
}

Object.assign(window, { SiteNav, SiteFooter, Overline, SectionHead });