const { Button, Wordmark, Icon, Card, Badge } = window.AILifeDesignSystem_20a7b9;

function Nav({ page, go }) {
  const links = [['products','Products'],['nourishmom','How it works'],['trust','Trust'],['about','About']];
  return (
    <header className="nav"><div className="wrap nav__inner">
      <Wordmark size={21} as="button" onClick={() => go('home')} style={{ background:'none', border:0, cursor:'pointer', padding:0 }} />
      <nav className="nav__links">
        {links.map(([k,l]) => <button key={k} className="nav__link" data-active={page===k} onClick={() => go(k)}>{l}</button>)}
        <Button size="sm" onClick={() => go('waitlist')}>Join the waitlist</Button>
      </nav>
    </div></header>
  );
}

function Footer({ go }) {
  return (
    <footer className="foot"><div className="wrap">
      <div style={{ display:'flex', justifyContent:'space-between', gap:'var(--space-12)', flexWrap:'wrap' }}>
        <div style={{ maxWidth:'34ch' }}>
          <Wordmark size={20} />
          <p className="prose" style={{ marginTop:'var(--space-3)', font:'var(--text-body-sm)', color:'var(--text-muted)' }}>
            Practical AI for everyday life.
          </p>
        </div>
        <div className="foot__links" style={{ maxWidth:'42ch' }}>
          {['Products','How it works','Trust & Privacy','About','Partners','Contact','Terms','Privacy'].map(l =>
            <span key={l} onClick={() => go('trust')}>{l}</span>)}
        </div>
      </div>
      <p style={{ marginTop:'var(--space-10)', font:'var(--text-caption)', color:'var(--text-faint)', maxWidth:'80ch' }}>
        NourishMom provides wellness and educational information. It does not diagnose a condition, prescribe treatment,
        change medication or replace a qualified healthcare professional.
      </p>
    </div></footer>
  );
}

function SectionHead({ eyebrow, title, lead, align = 'left' }) {
  return (
    <div style={{ maxWidth: align === 'center' ? '38ch' : '46ch', margin: align === 'center' ? '0 auto' : 0,
                  textAlign: align, marginBottom: 'var(--space-12)' }}>
      {eyebrow && <div className="eyebrow" style={{ marginBottom:'var(--space-4)' }}>{eyebrow}</div>}
      <h2 className="display--3">{title}</h2>
      {lead && <p className="lead" style={{ marginTop:'var(--space-4)' }}>{lead}</p>}
    </div>
  );
}

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