// Madrona — shared site chrome: Nav, Footer, theme toggle, layout helpers.
// Loaded after the DS bundle + icons.jsx on every page.
(function () {
const CDS = window.MadronaDesignSystem_c8327b;
const { Button } = CDS;

const MAX = 1180;
const container = { maxWidth: MAX, margin: '0 auto', padding: '0 28px' };

// Dotted runner-grid textures
const DOT_LIGHT = 'radial-gradient(circle at 1px 1px, var(--ink-100) 1px, transparent 0) 0 0 / 22px 22px';
const DOT_DARK = 'radial-gradient(circle at 1px 1px, rgba(255,255,255,0.07) 1px, transparent 0) 0 0 / 24px 24px';

/* ---------------- THEME ---------------- */
function getTheme() {
  try { return localStorage.getItem('madrona-theme') || 'light'; } catch (e) { return 'light'; }
}
function applyTheme(t) {
  document.documentElement.setAttribute('data-theme', t);
  try { localStorage.setItem('madrona-theme', t); } catch (e) {}
}
function useTheme() {
  const [theme, setTheme] = React.useState(getTheme());
  React.useEffect(() => { applyTheme(theme); }, [theme]);
  return [theme, () => setTheme((t) => (t === 'dark' ? 'light' : 'dark'))];
}

/* ---------------- EYEBROW ---------------- */
function Eyebrow({ children, dark, style = {} }) {
  return (
    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase', color: dark ? 'var(--madrona-300)' : 'var(--color-brand)', ...style }}>{children}</div>
  );
}

/* ---------------- SECTION HEAD ---------------- */
function SectionHead({ eyebrow, title, sub, dark, center = true, maxW = 640, style = {} }) {
  return (
    <div style={{ textAlign: center ? 'center' : 'left', maxWidth: center ? maxW : 'none', margin: center ? '0 auto' : 0, ...style }}>
      {eyebrow && <Eyebrow dark={dark}>{eyebrow}</Eyebrow>}
      <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 38, lineHeight: 1.08, letterSpacing: '-0.025em', fontWeight: 700, marginTop: 14, color: dark ? 'var(--ink-25)' : 'var(--text-strong)' }}>{title}</h2>
      {sub && <p style={{ fontSize: 17, lineHeight: 1.55, color: dark ? 'rgba(242,245,241,0.72)' : 'var(--text-muted)', marginTop: 16, maxWidth: center ? 560 : 620, marginInline: center ? 'auto' : 0 }}>{sub}</p>}
    </div>
  );
}

/* ---------------- NAV ---------------- */
const NAV_LINKS = [
  { id: 'teams', label: 'For teams', href: 'for-teams.html' },
  { id: 'providers', label: 'For providers', href: 'for-providers.html' },
  { id: 'pricing', label: 'Pricing', href: 'pricing.html' },
  { id: 'how', label: 'How it works', href: 'how-it-works.html' },
  { id: 'docs', label: 'Docs', href: 'docs.html' },
];

function Nav({ active }) {
  const [theme, toggle] = useTheme();
  const [open, setOpen] = React.useState(false);
  const link = (on) => ({ fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: on ? 600 : 500, color: on ? 'var(--text-strong)' : 'var(--text-body)', textDecoration: 'none', cursor: 'pointer', whiteSpace: 'nowrap' });
  const iconBtn = { width: 36, height: 36, borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)', background: 'transparent', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: 'var(--text-body)', flex: 'none' };
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 100, background: 'color-mix(in srgb, var(--surface-page) 82%, transparent)', backdropFilter: 'blur(12px)', borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ ...container, height: 64, display: 'flex', alignItems: 'center', gap: 28 }}>
        <a href="index.html" style={{ display: 'inline-flex', flex: 'none' }}>
          <img src={theme === 'dark' ? 'assets/madrona-logo-inverse.svg' : 'assets/madrona-logo.svg'} alt="Madrona" style={{ height: 28 }} />
        </a>
        <nav style={{ display: 'flex', gap: 22, alignItems: 'center', marginLeft: 4 }} className="mad-navlinks">
          {NAV_LINKS.map((l) => <a key={l.id} href={l.href} style={link(active === l.id)}>{l.label}</a>)}
        </nav>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 10, alignItems: 'center' }}>
          <button onClick={toggle} title="Toggle theme" style={iconBtn}><Icon name={theme === 'dark' ? 'sun' : 'moon'} size={17} /></button>
          <a href="auth.html" style={{ ...link(false), fontWeight: 600 }} className="mad-signin">Sign in</a>
          <a href="auth.html" style={{ textDecoration: 'none' }}>
            <Button variant="primary" size="sm" iconLeft={<Icon name="github" size={16} />} style={{ whiteSpace: 'nowrap' }}>Connect GitHub</Button>
          </a>
        </div>
      </div>
    </header>
  );
}

/* ---------------- CTA BAND ---------------- */
function CtaBand({ title, sub, primary, primaryIcon = 'arrowRight', primaryHref = 'auth.html', secondary, secondaryHref = 'how-it-works.html', providerCta = false }) {
  return (
    <section style={{ ...container, padding: '84px 28px' }}>
      <div style={{ background: 'var(--evergreen-700)', borderRadius: 'var(--radius-2xl)', padding: '60px 48px', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, background: DOT_DARK }} />
        <img src="assets/madrona-branch.svg" alt="" style={{ position: 'absolute', left: -50, bottom: -70, height: 360, opacity: 0.9, pointerEvents: 'none' }} />
        <img src="assets/madrona-branch.svg" alt="" style={{ position: 'absolute', right: -50, top: -120, height: 320, opacity: 0.5, transform: 'scaleX(-1) rotate(12deg)', pointerEvents: 'none' }} />
        <div style={{ position: 'relative' }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 40, letterSpacing: '-0.025em', fontWeight: 700, color: 'var(--ink-25)', maxWidth: 600, margin: '0 auto', lineHeight: 1.08 }}>{title}</h2>
          {sub && <p style={{ fontSize: 16.5, color: 'rgba(242,245,241,0.74)', marginTop: 16, maxWidth: 480, marginInline: 'auto', lineHeight: 1.55 }}>{sub}</p>}
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 30, flexWrap: 'wrap' }}>
            <a href={primaryHref} style={{ textDecoration: 'none' }}>
              <Button variant={providerCta ? 'provider' : 'primary'} size="lg" iconRight={<Icon name={primaryIcon} size={18} />}>{primary}</Button>
            </a>
            {secondary && (
              <a href={secondaryHref} style={{ textDecoration: 'none' }}>
                <Button variant="ghost" size="lg" style={{ color: 'var(--ink-25)' }} iconRight={<Icon name="arrowRight" size={18} />}>{secondary}</Button>
              </a>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- FOOTER ---------------- */
function Footer() {
  const [theme] = useTheme();
  const col = (h, items) => (
    <div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-subtle)', marginBottom: 14 }}>{h}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
        {items.map((i) => <a key={i.label} href={i.href} style={{ fontSize: 14, color: 'var(--text-body)', textDecoration: 'none', cursor: 'pointer' }}>{i.label}</a>)}
      </div>
    </div>
  );
  return (
    <footer style={{ borderTop: '1px solid var(--border-subtle)', background: 'var(--surface-card)' }}>
      <div style={{ ...container, padding: '52px 28px', display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 32 }}>
        <div>
          <img src={theme === 'dark' ? 'assets/madrona-logo-inverse.svg' : 'assets/madrona-logo.svg'} alt="Madrona" style={{ height: 26 }} />
          <p style={{ fontSize: 13.5, color: 'var(--text-muted)', marginTop: 14, maxWidth: 250, lineHeight: 1.55 }}>The secure marketplace for CI runners. Cheaper CI. Paid compute.</p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 16, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-subtle)' }}>
            <span style={{ width: 7, height: 7, borderRadius: 999, background: 'var(--color-success)' }} />all systems operational
          </div>
        </div>
        {col('Product', [{ label: 'For teams', href: 'for-teams.html' }, { label: 'For providers', href: 'for-providers.html' }, { label: 'Pricing', href: 'pricing.html' }, { label: 'Security', href: 'security.html' }])}
        {col('Developers', [{ label: 'Docs', href: 'docs.html' }, { label: 'How it works', href: 'how-it-works.html' }, { label: 'Agent install', href: 'docs.html' }, { label: 'Runner policies', href: 'security.html' }])}
        {col('Company', [{ label: 'About', href: 'about.html' }, { label: 'Trust', href: 'security.html' }, { label: 'Sign in', href: 'auth.html' }, { label: 'Contact', href: 'about.html' }])}
      </div>
      <div style={{ ...container, padding: '0 28px 36px', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-subtle)', flexWrap: 'wrap', gap: 8 }}>
        <span>© 2026 Madrona, Inc.</span>
        <span>Put idle compute to work.</span>
      </div>
    </footer>
  );
}

Object.assign(window, { MAX, container, DOT_LIGHT, DOT_DARK, useTheme, applyTheme, getTheme, Eyebrow, SectionHead, Nav, Footer, CtaBand });
})();