/* chrome.jsx — shared Nav, PageHero, Footer for all AI Report Radar pages */

const NAV_ITEMS = [
  { key: 'news', label: 'News', href: 'news.html' },
  { key: 'tools', label: 'Tools', href: 'tools.html' },
  { key: 'models', label: 'Models', href: 'models.html' },
  { key: 'github', label: 'GitHub', href: 'github.html' },
  { key: 'timeline', label: 'Timeline', href: 'timeline.html' },
  { key: 'credits', label: 'Credits', href: 'index.html#credits' },
  { key: 'funding', label: 'Funding', href: 'index.html#funding' },
];

function Nav({ active }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div className="nav">
      <div className="wrap" style={{ padding: '0 20px' }}>
        <div className="nav-pill">
          <a className="logo" href="index.html"><span className="logo-mark"></span>AI Report Radar</a>
          <div className="nav-links">
            {NAV_ITEMS.map((n) => (
              <a key={n.key} className={'nav-link' + (active === n.key ? ' active' : '')} href={n.href}>{n.label}</a>
            ))}
          </div>
          <a className="btn ghost" href="#" style={{ padding: '9px 16px' }}>Sign in</a>
          <a className="btn primary" href="index.html#cta">Get started</a>
          <button className="nav-burger" aria-label="Menu" aria-expanded={open} onClick={() => setOpen(!open)}>
            <span></span><span></span><span></span>
          </button>
        </div>
        {open && (
          <div className="nav-menu">
            {NAV_ITEMS.map((n) => (
              <a key={n.key} className={'nav-menu-link' + (active === n.key ? ' active' : '')} href={n.href}>{n.label}</a>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

/* Compact page hero with mini aurora */
function PageHero({ eyebrow, title, sub, children }) {
  return (
    <header className="page-hero">
      <div className="aurora">
        <div className="blob b1" style={{ width: 520, height: 520, top: -300, left: -120 }}></div>
        <div className="blob b2" style={{ width: 460, height: 460, top: -260, right: -100 }}></div>
        <div className="blob b3" style={{ width: 380, height: 380, bottom: -260, left: '40%' }}></div>
      </div>
      <div className="hero-fade" style={{ background: 'linear-gradient(180deg, rgba(253,253,254,.3), transparent 40%, var(--bg) 96%)' }}></div>
      <div className="wrap page-hero-inner">
        <span className="sec-eyebrow grad-text"><span className="dot"></span>{eyebrow}</span>
        <h1>{title}</h1>
        {sub && <p className="page-sub">{sub}</p>}
        {children}
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <a className="logo" href="index.html"><span className="logo-mark"></span>AI Report Radar</a>
            <p>The definitive radar for discovering, tracking and understanding everything happening in artificial intelligence.</p>
          </div>
          <div className="foot-cols">
            <div className="foot-col">
              <span className="t">Platform</span>
              <a href="news.html">AI News</a><a href="tools.html">Tool Directory</a><a href="models.html">Model Hub</a><a href="github.html">GitHub Radar</a>
            </div>
            <div className="foot-col">
              <span className="t">Intelligence</span>
              <a href="index.html#funding">Funding</a><a href="index.html#credits">Free Credits</a><a href="timeline.html">AI Timeline</a><a href="news.html">Research</a>
            </div>
            <div className="foot-col">
              <span className="t">Company</span>
              <a href="index.html">About</a><a href="index.html">API</a><a href="index.html">Changelog</a><a href="index.html">Contact</a>
            </div>
          </div>
        </div>
        <div className="foot-base">
          <span>© 2026 AI Report Radar</span>
          <span>Refreshed continuously · All data illustrative</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, PageHero, Footer });