// v8 "Bloom Dream" — the "How it works" overview. The section the nav points to
// (#how): what Della is + the full stage strip (trying → toddler) + a chat CTA.
// (The "however works for you" channels live in their own section near the end.)

function DmHowItWorks({ p }) {
  const [ref, inView] = useReveal({ amount: 0.3 });
  const stages = [
  ['🌱', 'Trying', 'cycle day 14', p.butterSoft],
  ['🤍', 'First trimester', 'two lines', p.roseSoft],
  ['🤰', 'Third trimester', 'almost there', p.roseSoft],
  ['👶', 'Birth', 'hello, you', p.accentSoft],
  ['🍼', 'Newborn', 'night feeds', p.sageSoft],
  ['🧸', 'Toddler', 'first steps', p.sageSoft]];

  return (
    <section id="how" data-screen-label="how" style={{ position: 'relative', overflow: 'hidden', padding: '72px 0' }}>
      <FloatingMark size={56} top={70} left={'4%'} rotate={-9} dur={7.5} delay={0.3} />
      <Orb from="#EBC9BE" to="#DCA192" size={420} top={-90} right={-140} opacity={0.26} dur={18} />
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 40px', position: 'relative', zIndex: 2 }}>

        {/* What Della is */}
        <div style={{ textAlign: 'center', maxWidth: 780, margin: '0 auto' }}>
          <Reveal><div style={{ display: 'flex', justifyContent: 'center' }}><SoftEyebrow p={p} tone="sage">How it works</SoftEyebrow></div></Reveal>
          <Reveal delay={70}><DreamH p={p} size={44} style={{ marginTop: 18 }}>One friend, <DEm p={p}>every stage</DEm> of becoming a family.</DreamH></Reveal>
          <Reveal delay={130}><p style={{ fontFamily: dreamFonts.body, fontSize: 17, lineHeight: 1.6, color: p.inkSoft, margin: '18px auto 0', maxWidth: 640, fontWeight: 500 }}>Della is an AI companion who's with you from trying to conceive, through pregnancy, and into postpartum. She tracks your cycle, chats like a real friend, plans the week with you, helps your partner show up, and remembers your whole story — so you never start over, and never feel alone.</p></Reveal>
        </div>

        {/* Stage strip — trying → toddler */}
        <div ref={ref} style={{ display: 'grid', gridTemplateColumns: 'repeat(6,1fr)', gap: 14, margin: '46px 0 0' }}>
          {stages.map((s, i) =>
          <Reveal key={i} delay={i * 90}>
              <Glass p={p} pad={18} style={{ textAlign: 'center', height: '100%' }}>
                <div style={{ width: 64, height: 64, borderRadius: '50%', background: s[3], margin: '0 auto 12px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <DDBloom size={46} open={inView ? 0.16 + i * 0.168 : 0.1} glow={i === 5} />
                </div>
                <div style={{ fontSize: 22, marginBottom: 6 }}>{s[0]}</div>
                <div style={{ fontFamily: dreamFonts.display, fontSize: 15, fontWeight: 700, color: p.ink, lineHeight: 1.1 }}>{s[1]}</div>
                <div style={{ fontFamily: dreamFonts.mono, fontSize: 8.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: p.inkMute, marginTop: 5 }}>{s[2]}</div>
              </Glass>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { DmHowItWorks });