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

const CATEGORIES = [
  ['heart-pulse','Health','Understand patterns in your health and wellness information.','Available first'],
  ['graduation-cap','Learning','Help children learn in ways that adapt to their needs.','Direction'],
  ['messages-square','Communication','Make conversations easier to organize, understand and act on.','Direction'],
  ['sun','Everyday life','Turn scattered information into clearer choices.','Direction'],
];

const STEPS = [
  ['1','You choose what to connect','Connect only the devices and services you want to use.'],
  ['2','AILife looks for what matters','Each product analyzes the information relevant to its purpose and identifies useful patterns.'],
  ['3','You get a clear explanation','See simple summaries, timely alerts and practical next steps—without having to interpret charts on your own.'],
];

function HomePage({ go }) {
  return (
    <main>
      <section className="sec" style={{ paddingBottom:'var(--space-20)' }}><div className="wrap reveal">
        <h1 className="display" style={{ maxWidth:'14ch' }}>AI for everyday life.</h1>
        <p className="lead" style={{ marginTop:'var(--space-6)' }}>
          AILife creates simple products that connect the information you choose, find useful patterns
          and help you decide what to do next.
        </p>
        <div style={{ display:'flex', gap:'var(--space-4)', alignItems:'center', marginTop:'var(--space-8)' }}>
          <Button size="lg" onClick={() => go('waitlist')}>Join the waitlist</Button>
          <Button variant="quiet" iconAfter="arrow-right" onClick={() => go('nourishmom')}>Learn about NourishMom</Button>
        </div>
        <p style={{ marginTop:'var(--space-6)', font:'var(--text-body-sm)', color:'var(--text-muted)' }}>
          Our first product, NourishMom, is coming first to the UAE and Saudi Arabia.
        </p>
      </div></section>

      <section className="sec--compact" style={{ paddingBottom:'var(--section-y)' }}><div className="wrap">
        <SectionHead eyebrow="Products" title="One company. Focused products for real life."
          lead="AI is most useful when it solves a specific problem. That is why every AILife product is designed around a real need—not around the technology behind it." />
        <Card variant="raised" padding="lg" style={{ display:'grid', gridTemplateColumns:'1.1fr .9fr', gap:'var(--space-12)', alignItems:'center' }}>
          <div>
            <div style={{ display:'flex', gap:'var(--space-3)', alignItems:'center' }}>
              <span style={{ font:'var(--text-h4)' }}>NourishMom</span><Badge tone="brand">by AILife</Badge>
            </div>
            <h3 className="display--3" style={{ marginTop:'var(--space-4)' }}>See your glucose more clearly during pregnancy.</h3>
            <p className="prose" style={{ marginTop:'var(--space-4)' }}>
              NourishMom brings together glucose and selected wellness information, looks for patterns
              and explains them in simple language.
            </p>
            <p className="prose muted" style={{ marginTop:'var(--space-4)', font:'var(--text-body-sm)' }}>
              Connect a compatible glucose monitor or meter, Apple Health, sleep and activity data.
            </p>
            <div style={{ display:'flex', gap:'var(--space-2)', flexWrap:'wrap', marginTop:'var(--space-5)' }}>
              {['Continuous glucose monitor','Glucose meter','Apple Health','Sleep','Activity'].map(t => <Tag key={t}>{t}</Tag>)}
            </div>
            <div style={{ display:'flex', gap:'var(--space-4)', alignItems:'center', marginTop:'var(--space-6)' }}>
              <Button onClick={() => go('waitlist')}>Join the waitlist</Button>
              <Button variant="quiet" iconAfter="arrow-right" onClick={() => go('nourishmom')}>Learn about NourishMom</Button>
            </div>
          </div>
          <GlucoseReadout />
        </Card>
      </div></section>

      <section className="sec sec--tint"><div className="wrap">
        <SectionHead eyebrow="How AILife works" title="From scattered information to useful understanding." />
        <div className="grid-3">
          {STEPS.map(([n,t,d]) => (
            <div key={n}>
              <div className="step__num">{n}</div>
              <h4 style={{ font:'var(--text-h3)', marginTop:'var(--space-3)' }}>{t}</h4>
              <p className="prose" style={{ marginTop:'var(--space-3)', font:'var(--text-body-sm)' }}>{d}</p>
            </div>
          ))}
        </div>
      </div></section>

      <section className="sec"><div className="wrap grid-2">
        <div>
          <SectionHead eyebrow="Concrete example" title="Less data to decode. More clarity." />
        </div>
        <Card padding="lg" variant="flat">
          <div className="eyebrow">Daily summary · Tuesday</div>
          <p style={{ font:'var(--text-lead)', color:'var(--text-heading)', marginTop:'var(--space-4)' }}>
            Your glucose stayed within your selected range for most of the day. The largest rise followed
            breakfast for three days in a row. This may be worth discussing with your care team.
          </p>
          <p className="muted" style={{ font:'var(--text-body-sm)', marginTop:'var(--space-5)' }}>
            AILife does not simply show more numbers. It helps explain what those numbers may mean in context.
          </p>
        </Card>
      </div></section>

      <section className="sec--compact" style={{ paddingBottom:'var(--section-y)' }}><div className="wrap">
        <SectionHead eyebrow="Future direction" title="Starting with health. Built for more of life."
          lead="We will introduce each product only when it solves a clear problem and earns the trust its users place in it." />
        <div className="grid-4">
          {CATEGORIES.map(([icon,t,d,tag]) => (
            <Card key={t} padding="md" interactive={t === 'Health'} onClick={t === 'Health' ? () => go('nourishmom') : undefined}>
              <Icon name={icon} size={22} style={{ color:'var(--text-brand)' }} />
              <div style={{ display:'flex', alignItems:'center', gap:'var(--space-2)', marginTop:'var(--space-4)' }}>
                <h4 style={{ font:'var(--text-h4)' }}>{t}</h4>
                <Badge tone={tag === 'Direction' ? 'outline' : 'brand'}>{tag}</Badge>
              </div>
              <p className="muted" style={{ font:'var(--text-body-sm)', marginTop:'var(--space-2)' }}>{d}</p>
            </Card>
          ))}
        </div>
      </div></section>

      <section className="sec sec--ink"><div className="wrap grid-2">
        <div>
          <div className="eyebrow" style={{ color:'var(--fern-300)' }}>Trust</div>
          <h2 className="display--2" style={{ color:'var(--paper-0)', marginTop:'var(--space-4)' }}>Useful AI begins with trust.</h2>
          <p style={{ font:'var(--text-lead)', color:'var(--paper-3)', marginTop:'var(--space-5)', maxWidth:'46ch' }}>
            Your information is yours. You choose what to connect, what to share and what to delete.
          </p>
          <div style={{ marginTop:'var(--space-8)' }}>
            <Button variant="inverse" onClick={() => go('trust')}>Read our trust principles</Button>
          </div>
        </div>
        <ul style={{ listStyle:'none', margin:0, padding:0, display:'grid', gap:'var(--space-4)' }}>
          {['Clear permission before information is connected or shared',
            'Separate choices for service, storage, research and product improvement',
            'The ability to delete your information',
            'No hidden sponsored recommendations',
            'Human-readable explanations, not technical fine print'].map(t => (
            <li key={t} style={{ display:'flex', gap:'var(--space-3)', alignItems:'flex-start', color:'var(--paper-2)', font:'var(--text-body)' }}>
              <Icon name="check" size={18} style={{ color:'var(--fern-300)', marginTop:3 }} />{t}
            </li>
          ))}
        </ul>
      </div></section>

      <section className="sec"><div className="wrap" style={{ textAlign:'center' }}>
        <h2 className="display--2" style={{ maxWidth:'20ch', margin:'0 auto' }}>Be among the first to experience AILife.</h2>
        <p className="lead" style={{ margin:'var(--space-5) auto 0', maxWidth:'50ch' }}>
          Join the waitlist for product updates and early access opportunities, starting with NourishMom.
        </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-caption)', marginTop:'var(--space-4)' }}>No spam. Leave at any time.</p>
      </div></section>
    </main>
  );
}

function GlucoseReadout() {
  const bars = [62,58,70,88,96,74,66,60,64,72,80,68,58,54];
  return (
    <div className="readout">
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
        <div><div className="eyebrow">Time in range</div>
          <div style={{ font:'var(--text-metric)', color:'var(--text-heading)', fontVariantNumeric:'tabular-nums', marginTop:6 }}>
            82<span style={{ fontSize:22, color:'var(--text-muted)' }}>%</span></div></div>
        <Badge tone="in-range" dot>In range</Badge>
      </div>
      <div style={{ display:'flex', alignItems:'flex-end', gap:5, height:96, marginTop:'var(--space-6)' }}>
        {bars.map((h,i) => (
          <div key={i} style={{ flex:1, height: h + '%', borderRadius:4,
            background: h > 90 ? 'var(--status-above)' : 'var(--fern-300)' }} />
        ))}
      </div>
      <div className="bar" style={{ marginTop:'var(--space-6)' }}>
        <span style={{ width:'8%', background:'var(--status-below)' }} />
        <span style={{ width:'82%', background:'var(--status-in-range)' }} />
        <span style={{ width:'10%', background:'var(--status-above)' }} />
      </div>
      <div style={{ display:'flex', justifyContent:'space-between', marginTop:'var(--space-3)', font:'var(--text-mono-sm)', color:'var(--text-muted)' }}>
        <span>Below 8%</span><span>In range 82%</span><span>Above 10%</span>
      </div>
    </div>
  );
}

Object.assign(window, { HomePage, GlucoseReadout });