// v8 "Bloom Dream" — sections part 2: partner showpiece, stage bloom dial,
// bento features grid.

function DmPartner({ p }) {
  const reduced = useReducedMotion();
  const [ref, inView] = useReveal({ amount: 0.3 });
  const pp = dreamPhone(p);
  const [phase, setPhase] = React.useState(reduced ? 3 : 0);
  React.useEffect(() => {if (reduced || !inView) return;let t = [];
    const loop = () => {setPhase(0);t.push(setTimeout(() => setPhase(1), 700));t.push(setTimeout(() => setPhase(2), 1900));t.push(setTimeout(() => setPhase(3), 3100));t.push(setTimeout(loop, 6400));};
    loop();return () => t.forEach(clearTimeout);}, [reduced, inView]);
  const base = [{ t: 'Book the glucose test', d: true }, { t: 'Call the doula back', d: false }, { t: 'Pack the hospital bag', d: false }];
  return (
    <section id="partner" data-screen-label="partner" style={{ position: 'relative', overflow: 'hidden', padding: '110px 0' }}>
      <FloatingMark size={56} top={72} left={'4%'} rotate={-9} dur={7.5} delay={0.3} />
      <Orb from="#E2EBD2" to="#B8C89A" size={460} top={-100} right={-140} opacity={0.4} dur={19} />
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 40px', position: 'relative', zIndex: 2 }}>
        <div style={{ textAlign: 'center', maxWidth: 'none', margin: '0 auto' }}>
          <Reveal><SoftEyebrow p={p} tone="sage">She brings your partner in</SoftEyebrow></Reveal>
          <Reveal delay={70}><p style={{ fontFamily: dreamFonts.serif, fontStyle: 'italic', fontSize: 20, color: p.sageInk, margin: '18px 0 12px' }}>Because you shouldn't have to carry this or explain it - alone.</p></Reveal>
          <Reveal delay={120}><DreamH p={p} size={44} style={{ whiteSpace: 'nowrap' }}><span style={{ color: '#101010' }}>Your Partner doesn't even need the app.</span><br /><DEm p={p} color={p.sage}>A text is all it takes — and Della looks after them, too.</DEm></DreamH></Reveal>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 50, alignItems: 'center', margin: '64px 0 0' }}>
          <Reveal>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18, maxWidth: 450 }}>
              <Glass p={p} pad={22}>
                <div style={{ fontFamily: dreamFonts.display, fontSize: 12, fontWeight: 700, letterSpacing: '0.04em', color: p.accent, marginBottom: 8 }}>SHE REACHES OUT FOR YOU</div>
                <p style={{ fontFamily: dreamFonts.body, fontSize: 16, lineHeight: 1.55, color: p.inkSoft, margin: 0, fontWeight: 500 }}>When you're low on words or energy, Della reaches out to your partner with what you need — so you can just breathe. </p>
              </Glass>
              <Glass p={p} pad={22}>
                <div style={{ fontFamily: dreamFonts.display, fontSize: 12, fontWeight: 700, letterSpacing: '0.04em', color: p.sage, marginBottom: 8 }}>AND HE CAN TALK TO HER</div>
                <p style={{ fontFamily: dreamFonts.body, fontSize: 16, lineHeight: 1.55, color: p.inkSoft, margin: 0, fontWeight: 500 }}>Your partner can talk to Della too — about their own worries and what becoming a parent feels like. It's scary and magical for them, too. </p>
              </Glass>
            </div>
          </Reveal>
          <Reveal delay={120} style={{ display: 'flex', justifyContent: 'center' }}>
            <Floaty dur={7} dist={9}>
              <PhoneFrame p={pp} width={258} header="Della" tilt={2}>
                <span style={{ fontFamily: dreamFonts.mono, fontSize: 8, letterSpacing: '0.16em', textTransform: 'uppercase', color: p.inkMute, textAlign: 'center', margin: '0 auto 2px' }}>Della → Sam</span>
                <Bubble who="della" p={pp} at="6:40 PM" shown>Hey Sam — she's had a rough day and would love mango ice cream and zero questions tonight. 🥭</Bubble>
                <Bubble who="partner" p={pp} shown>on it. anything else she needs?</Bubble>
                <Bubble who="della" p={pp} at="6:41 PM" shown>just softness. and honestly — how are <em>you</em> holding up? you're allowed to be tired too. 💛</Bubble>
              </PhoneFrame>
            </Floaty>
          </Reveal>
        </div>

        {/* For the partner, too — four pillars (merged from the old "other parent" section) */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 18, marginTop: 48 }}>
          {[
          ['🎓', p.butterSoft, 'Trains them in fatherhood', 'Small daily lessons so they show up prepared, not panicked.'],
          ['💌', p.accentSoft, 'Briefs them on her, daily', "How she slept, what hurts, what she needs but won't ask for."],
          ['🌹', p.sageSoft, 'Plans the small wins', 'A heat pack, flowers, a date night — the gestures that land.'],
          ['🛡️', p.lilacSoft, 'Supports the partner, too', "Checks in on them privately — they're an equal player."]].
          map((pl, i) =>
          <Reveal key={i} delay={i * 90}>
              <div style={{ background: p.card, borderRadius: 24, padding: 22, border: `1px solid ${p.rule}`, boxShadow: p.shadowSoft, display: 'flex', flexDirection: 'column', gap: 10, height: '100%' }}>
                <div style={{ width: 42, height: 42, borderRadius: '50%', background: pl[1], display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 21 }}>{pl[0]}</div>
                <h3 style={{ fontFamily: dreamFonts.display, fontSize: 17, fontWeight: 700, letterSpacing: '-0.01em', color: p.ink, margin: 0, lineHeight: 1.15 }}>{pl[2]}</h3>
                <p style={{ fontFamily: dreamFonts.body, fontSize: 13, lineHeight: 1.5, color: p.inkSoft, margin: 0, fontWeight: 500 }}>{pl[3]}</p>
              </div>
            </Reveal>
          )}
        </div>

        {/* Household list showpiece */}
        <Reveal>
          <div ref={ref} style={{ marginTop: 56 }}>
            <div style={{ textAlign: 'center', maxWidth: 620, margin: '0 auto 26px' }}>
              <SoftEyebrow p={p} tone="sage">One shared to-do list</SoftEyebrow>
              <DreamH p={p} size={30} style={{ marginTop: 12 }}>Keep track, plan, and <DEm p={p} color={p.sage}>share the load.</DEm></DreamH>
            </div>
            <Glass p={p} pad={42} radius={36}>
              <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 46, alignItems: 'center' }}>
                <div style={{ display: 'flex', justifyContent: 'center' }}>
                  <PhoneFrame p={pp} width={238} header="Della" glow={false} tilt={-2}>
                    <span style={{ fontFamily: dreamFonts.mono, fontSize: 8, letterSpacing: '0.16em', textTransform: 'uppercase', color: p.inkMute, textAlign: 'center', margin: '0 auto 2px' }}>Sam's phone · WhatsApp</span>
                    <Bubble who="partner" p={pp} at="7:02 PM" shown={phase >= 1}>add "pick up her prenatal vitamins" to her list.</Bubble>
                    {phase === 1 && <TypingBubble p={pp} />}
                    <Bubble who="della" p={pp} at="7:02 PM" shown={phase >= 2}>done 💛 added it to Maya's list and tagged it from you.</Bubble>
                  </PhoneFrame>
                </div>
                <div>
                  <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 16 }}>
                    <span style={{ fontFamily: dreamFonts.display, fontSize: 24, fontWeight: 700, color: p.ink }}>Maya's list</span>
                    <span style={{ fontFamily: dreamFonts.mono, fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase', color: p.sage }}>household · shared</span>
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                    <DmTodo p={p} text="Pick up her prenatal vitamins" by="Sam" landed={phase >= 3} isNew />
                    {base.map((it, i) => <DmTodo key={i} p={p} text={it.t} done={it.d} />)}
                  </div>
                </div>
              </div>
              <p style={{ fontFamily: dreamFonts.body, fontSize: 16, lineHeight: 1.6, color: p.inkSoft, margin: '30px auto 0', maxWidth: 740, textAlign: 'center', fontWeight: 500 }}>
                Your partner texts Della — <strong style={{ color: p.ink }}>no app, no download.</strong> She adds it to your list.<br />A household to-do list, shared mental load, shared responsibilities.
              </p>
            </Glass>
          </div>
        </Reveal>
      </div>
    </section>);

}
function DmTodo({ p, text, done, by, landed = true, isNew = false }) {
  const reduced = useReducedMotion();
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, background: isNew ? 'rgba(246,182,164,0.18)' : 'rgba(255,255,255,0.6)',
      border: `1px solid ${isNew && landed ? p.accentSoft : p.rule}`, borderRadius: 16, padding: '13px 16px',
      opacity: isNew ? landed ? 1 : 0 : 1, transform: isNew ? landed ? 'translateY(0)' : 'translateY(-12px)' : 'none',
      maxHeight: isNew ? landed ? 70 : 0 : 70, transition: reduced ? 'none' : 'opacity 520ms ease, transform 520ms cubic-bezier(.2,.8,.2,1), max-height 520ms ease', overflow: 'hidden' }}>
      <span style={{ width: 22, height: 22, borderRadius: '50%', flexShrink: 0, border: `2px solid ${done ? p.sage : p.ruleStrong}`,
        background: done ? p.sage : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 12 }}>{done ? '✓' : ''}</span>
      <span style={{ flex: 1, fontFamily: dreamFonts.body, fontSize: 15, fontWeight: 700, color: done ? p.inkMute : p.ink, textDecoration: done ? 'line-through' : 'none' }}>{text}</span>
      {by && <span style={{ fontFamily: dreamFonts.mono, fontSize: 9, letterSpacing: '0.1em', textTransform: 'uppercase', color: p.accentDeep, background: 'rgba(246,182,164,0.4)', padding: '4px 9px', borderRadius: 999, whiteSpace: 'nowrap' }}>✓ {by}</span>}
    </div>);

}

// Stage bloom — a radial dial that opens the flower.
function DmStages({ p }) {
  const reduced = useReducedMotion();
  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: '110px 0' }}>
      <FloatingMark size={58} bottom={54} right={'5%'} rotate={12} dur={8} delay={0.5} />
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 40px', position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'end', marginBottom: 56 }}>
          <div>
            <Reveal><SoftEyebrow p={p} tone="butter">One friend, every stage</SoftEyebrow></Reveal>
            <Reveal delay={70}><DreamH p={p} size={46} style={{ marginTop: 18 }}>She was there before the two lines. She'll be there for the <DEm p={p} color="#C9952E">first steps.</DEm></DreamH></Reveal>
          </div>
          <Reveal delay={120}><p style={{ fontFamily: dreamFonts.body, fontSize: 16.5, lineHeight: 1.6, color: p.inkSoft, margin: 0, maxWidth: 460, justifySelf: 'end', fontWeight: 500 }}>Della remembers your partner's name, the symptom from three weeks ago, the birth plan you're scared to say out loud. You never start over, and you never get handed off to a different app - and why should you? Friends don't leave! </p></Reveal>
        </div>
        <div ref={ref} style={{ display: 'grid', gridTemplateColumns: 'repeat(6,1fr)', gap: 14 }}>
          {stages.map((s, i) =>
          <Reveal key={i} delay={i * 100}>
              <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>);

}

// Compact "tiny points about Della" grid.
function DmFeatures({ p }) {
  const cards = [
  ['💬', 'Talks like a real friend', 'GIFs, opinions, your vibe', p.roseSoft],
  ['🧠', 'Remembers everything', 'every chat, every stage', p.sageSoft],
  ['💌', 'Reaches out first', 'gentle, well-timed check-ins', p.butterSoft],
  ['📔', 'Keeps the good moments', 'a journal you don’t write', p.lilacSoft],
  ['👫', 'Brings your partner in', 'your list, shared', p.accentSoft],
  ['📋', 'Gets things done', 'lists, plans, appointments', p.sageSoft],
  ['🤍', 'Loss-aware by default', 'no platitudes, no silver linings — just here', p.roseSoft],
  ['🌍', 'Speaks your language', '“ay mami, totally normal”', p.butterSoft],
  ['👪', 'Keeps family in the loop', 'sister, grandma-to-be — your village, closer', p.butterSoft],
  ['🌥️', 'Nudges your partner', 'a soft check-in when you seem low', p.sageSoft],
  ['🤍', 'A caring heads-up', 'PDD-aware — flagged with your consent', p.roseSoft],
  ['🩺', 'Preps you for appointments', 'questions to ask, notes to bring', p.lilacSoft]];

  return (
    <section id="features" data-screen-label="features" style={{ position: 'relative', overflow: 'hidden', padding: '82px 0' }}>
      <FloatingMark size={54} top={60} left={'4%'} rotate={-11} dur={7} delay={0.2} />
      <Orb from="#EBC9BE" to="#DCA192" size={380} top={50} right={-150} opacity={0.3} dur={18} />
      <div style={{ maxWidth: 1060, margin: '0 auto', padding: '0 40px', position: 'relative', zIndex: 2 }}>
        <div style={{ maxWidth: 900, marginBottom: 34 }}>
          <Reveal><SoftEyebrow p={p} tone="coral">What Della does</SoftEyebrow></Reveal>
          <Reveal delay={70}><DreamH p={p} size={44} style={{ marginTop: 16, whiteSpace: 'nowrap' }}><span style={{ color: '#101010' }}>This is not a pregnancy or period tracking app.</span><br /><DEm p={p}>Della is a friend, right by your side.</DEm></DreamH></Reveal>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12 }}>
          {cards.map((c, i) =>
          <Reveal key={i} delay={i % 4 * 50}>
              <DmFeatCard c={c} p={p} />
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}
function DmFeatCard({ c, p }) {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
    style={{ height: '100%', display: 'flex', gap: 11, alignItems: 'flex-start',
      background: p.glass, backdropFilter: 'blur(12px)', border: `1px solid ${h ? p.accentSoft : p.glassEdge}`,
      borderRadius: 18, padding: '13px 14px',
      transform: h ? 'translateY(-3px)' : 'translateY(0)', boxShadow: h ? p.shadowSoft : 'none',
      transition: 'transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms ease, border-color 200ms ease' }}>
      <div style={{ width: 34, height: 34, borderRadius: '50%', background: c[3], flexShrink: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 17 }}>{c[0]}</div>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontFamily: dreamFonts.display, fontSize: 14.5, fontWeight: 700, color: p.ink, lineHeight: 1.18 }}>{c[1]}</div>
        <div style={{ fontFamily: dreamFonts.body, fontSize: 12.5, lineHeight: 1.4, color: p.inkSoft, marginTop: 2, fontWeight: 500 }}>{c[2]}</div>
      </div>
    </div>);

}

Object.assign(window, { DmPartner, DmStages, DmFeatures });