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

const SEES = [
  'How often readings were within your selected range',
  'When the largest changes occurred',
  'Patterns that repeat across several days',
  'Missing readings or interrupted data',
  'Changes that may be worth discussing with your care team',
];

const STEPS = [
  ['plug','Connect','Choose the supported devices, services or information you want an AILife product to use.'],
  ['search','Understand','The product organizes the information and looks for changes, relationships and repeated patterns.'],
  ['compass','Decide','Receive a clear summary, an alert when appropriate and a suggested next step.'],
  ['sliders-horizontal','Stay in control','Review permissions, disconnect a source or delete your information through clear account controls.'],
];

function NourishMomPage({ go }) {
  const [tab, setTab] = React.useState('Overview');
  return (
    <main>
      <section className="sec"><div className="wrap grid-2">
        <div>
          <Badge tone="brand">NourishMom by AILife</Badge>
          <h1 className="display--2" style={{ marginTop:'var(--space-5)' }}>Understand your glucose patterns during pregnancy.</h1>
          <p className="lead" style={{ marginTop:'var(--space-5)' }}>
            NourishMom brings together glucose and selected wellness information, identifies patterns
            and explains what may deserve your attention.
          </p>
          <div style={{ marginTop:'var(--space-8)' }}><Button size="lg" onClick={() => go('waitlist')}>Join the waitlist</Button></div>
          <p className="muted" style={{ font:'var(--text-body-sm)', marginTop:'var(--space-4)' }}>Coming first to the UAE and Saudi Arabia.</p>
        </div>
        <GlucoseReadout />
      </div></section>

      <section className="sec--compact sec--tint" style={{ padding:'var(--section-y) 0' }}><div className="wrap">
        <SectionHead eyebrow="How it works" title="Helpful answers begin with the right information." />
        <div className="grid-4">
          {STEPS.map(([icon,t,d]) => (
            <Card key={t} padding="md">
              <Icon name={icon} size={22} style={{ color:'var(--text-brand)' }} />
              <h4 style={{ font:'var(--text-h4)', marginTop:'var(--space-4)' }}>{t}</h4>
              <p className="muted" style={{ font:'var(--text-body-sm)', marginTop:'var(--space-2)' }}>{d}</p>
            </Card>
          ))}
        </div>
      </div></section>

      <section className="sec"><div className="wrap">
        <Tabs items={['Overview','What you can see','Limits']} value={tab} onChange={setTab} />
        <div style={{ marginTop:'var(--space-8)' }}>
          {tab === 'Overview' && (
            <div className="grid-2">
              <div>
                <h3 className="display--3">Your day, explained simply.</h3>
                <p className="prose" style={{ marginTop:'var(--space-4)' }}>
                  Glucose readings can create a lot of numbers. NourishMom helps organize them into a useful daily picture.
                </p>
              </div>
              <div>
                <div className="eyebrow">Sources you can connect</div>
                <div style={{ display:'flex', gap:'var(--space-2)', flexWrap:'wrap', marginTop:'var(--space-4)' }}>
                  {['Continuous glucose monitors','Glucose meters','Apple Health','Smartwatches','Sleep tracking','Activity tracking'].map(t =>
                    <Tag key={t}>{t}</Tag>)}
                </div>
              </div>
            </div>
          )}
          {tab === 'What you can see' && (
            <ul style={{ listStyle:'none', margin:0, padding:0, display:'grid', gap:'var(--space-3)', maxWidth:'62ch' }}>
              {SEES.map(t => (
                <li key={t} style={{ display:'flex', gap:'var(--space-3)', font:'var(--text-body)' }}>
                  <Icon name="check" size={18} style={{ color:'var(--text-brand)', marginTop:3 }} />{t}
                </li>
              ))}
            </ul>
          )}
          {tab === 'Limits' && (
            <Card variant="tinted" padding="lg" style={{ maxWidth:'70ch' }}>
              <h3 style={{ font:'var(--text-h3)' }}>Designed to support—not replace—your care.</h3>
              <p className="prose" style={{ marginTop:'var(--space-4)' }}>
                NourishMom provides wellness and educational information. It does not diagnose conditions,
                prescribe treatment, change medication or replace your doctor or care team.
              </p>
              <p className="prose" style={{ marginTop:'var(--space-4)' }}>
                If a reading concerns you or you feel unwell, follow the guidance provided by your qualified
                healthcare professional or contact emergency services where appropriate.
              </p>
            </Card>
          )}
        </div>
      </div></section>

      <section className="sec--compact" style={{ paddingBottom:'var(--section-y)' }}><div className="wrap" style={{ textAlign:'center' }}>
        <h2 className="display--2" style={{ maxWidth:'20ch', margin:'0 auto' }}>Join the NourishMom waitlist.</h2>
        <p className="lead" style={{ margin:'var(--space-5) auto 0', maxWidth:'46ch' }}>
          Be the first to hear about availability and early access in the UAE and Saudi Arabia.
        </p>
        <div style={{ marginTop:'var(--space-8)' }}><Button size="lg" onClick={() => go('waitlist')}>Join the waitlist</Button></div>
      </div></section>
    </main>
  );
}
Object.assign(window, { NourishMomPage });