const { Button, IconButton } = window.BowcareDesignSystem_68307b;
const { WRAP, Hero, HowItWorks, AudienceTabs, Faq, AccessibilityStatement, SignUp, SiteFooter } = window;

const NAV = [
  { id: 'how', label: 'How it works' },
  { id: 'who', label: 'Who it is for' },
  { id: 'faq', label: 'Questions' },
  { id: 'access', label: 'Accessibility' },
];

function SiteHeader({ active, onNav }) {
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 30, background: 'var(--paper-0)', borderBottom: '1px solid var(--border-hairline)' }}>
      <div style={{ ...WRAP, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, minHeight: 80, flexWrap: 'wrap', padding: '12px 40px' }}>
        <a href="#top" aria-label="Bowcare — home" style={{ display: 'inline-flex', alignItems: 'center', gap: 12, minHeight: 48, textDecoration: 'none', flex: '0 0 auto' }}>
          <img src="assets/logo-mark.png" alt="" width="44" height="39" style={{ display: 'block' }} />
          <span style={{ font: 'var(--weight-medium) 30px/1 var(--font-serif-display)', letterSpacing: '-0.02em', color: 'var(--sage-600)' }}>Bowcare</span>
        </a>
        <nav aria-label="Main" style={{ display: 'flex', gap: 4, alignItems: 'center', flexWrap: 'wrap', minWidth: 0, flex: '1 1 auto', justifyContent: 'center' }}>
          {NAV.map((n) => (
            <a key={n.id} href={'#' + n.id} aria-current={active === n.id ? 'page' : undefined}
              onClick={() => onNav(n.id)}
              style={{
                display: 'inline-flex', alignItems: 'center', minHeight: 48, padding: '0 16px',
                font: 'var(--text-label)', textDecoration: 'none', borderRadius: 'var(--radius-pill)', whiteSpace: 'nowrap',
                color: active === n.id ? 'var(--sage-700)' : 'var(--text-body)',
                background: active === n.id ? 'var(--sage-50)' : 'transparent',
                transition: 'var(--transition-control)',
              }}>
              {n.label}
            </a>
          ))}
        </nav>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center', flex: '0 0 auto' }}>
          <a href="/app" style={{
            display: 'inline-flex', alignItems: 'center', minHeight: 48, padding: '0 16px',
            font: 'var(--text-label)', textDecoration: 'none', borderRadius: 'var(--radius-pill)',
            whiteSpace: 'nowrap', color: 'var(--text-body)', transition: 'var(--transition-control)',
          }}>See the app</a>
          <Button tone="quiet" size="small">Sign in</Button>
          <Button size="small" onClick={() => onNav('start')}>Get started</Button>
        </div>
      </div>
    </header>
  );
}

function BowcareSite() {
  const [active, setActive] = React.useState('how');
  const jump = (id) => {
    setActive(id);
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 88, behavior: 'smooth' });
  };
  return (
    <div id="top">
      <a href="#main" style={{ position: 'absolute', left: -9999, top: 8, zIndex: 60, display: 'inline-flex', alignItems: 'center', minHeight: 48, padding: '0 16px' }}
        onFocus={(e) => Object.assign(e.target.style, { left: '16px', display: 'inline-flex', alignItems: 'center', minHeight: '48px', padding: '0 16px', background: 'var(--sage-500)', color: 'var(--paper-0)', borderRadius: 'var(--radius-sm)', font: 'var(--text-label)', textDecoration: 'none' })}
        onBlur={(e) => Object.assign(e.target.style, { left: '-9999px' })}>
        Skip to main content
      </a>
      <SiteHeader active={active} onNav={jump} />
      <main id="main">
        <Hero onGetStarted={() => jump('start')} />
        <HowItWorks />
        <AudienceTabs />
        <Faq />
        <AccessibilityStatement />
        <SignUp />
      </main>
      <SiteFooter />
    </div>
  );
}

Object.assign(window, { BowcareSite });