// v8 "Bloom Dream" — sections part 3: journal, conversations, channels,
// story teaser, final CTA, footer.

function DmJournal({ p }) {
  const pages = [
  { title: 'First look.', sub: '20-week scan. She waved.', stamp: 'April · 2026', rotate: -1.2, photos: [{ img: 'assets/journal/ultrasound.png', cap: '20-week scan', tilt: -2.5 }, { img: 'assets/journal/kicks-comic.png', cap: 'saved this', tilt: 1.8 }] },
  { title: 'Getting ready.', sub: 'Three pairs of socks. A little zoo on the wall.', stamp: 'June · 2026', rotate: 0, photos: [{ img: 'assets/journal/baby-socks.png', cap: 'tiniest socks', tilt: -3 }, { img: 'assets/journal/nursery.png', cap: 'your room', tilt: 2 }, { img: 'assets/journal/baby-feet.png', cap: 'those toes 🥹', tilt: -1.5, span: 2 }] },
  { title: 'Day one.', sub: '9 lbs 2 oz. The longest, fastest day of our lives.', stamp: 'July · 2026', rotate: 1.3, photos: [{ img: 'assets/journal/newborn.png', cap: 'july 14, 5:48am', tilt: -1, span: 2, wide: true }] }];

  return (
    <section id="journal" data-screen-label="journal" style={{ position: 'relative', overflow: 'hidden', padding: '110px 0' }}>
      <FloatingMark size={58} bottom={60} right={'6%'} rotate={11} dur={8} delay={0.3} />
      <Orb from="#FBE6B0" to="#F0C45A" size={400} top={40} left={-150} opacity={0.3} dur={19} />
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 40px', position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 40, alignItems: 'end', marginBottom: 46 }}>
          <div>
            <Reveal><SoftEyebrow p={p} tone="butter">The keepsake</SoftEyebrow></Reveal>
            <Reveal delay={70}><DreamH p={p} size={46} style={{ marginTop: 18 }}>Della helps put together<br />that precious <DEm p={p} color="#C9952E">keepsake</DEm>. </DreamH></Reveal>
          </div>
          <Reveal delay={120}><p style={{ fontFamily: dreamFonts.body, fontSize: 16, lineHeight: 1.6, color: p.inkSoft, margin: 0, maxWidth: 470, justifySelf: 'end', fontWeight: 500 }}>Della quietly notices the happy moments - the first ultrasound photo, the one-liner you sent at 2am, the first onesie folded on the dresser, and turns them into a scrapbook. Print it as a hardback for your baby's first birthday or read it when you're 50 and reminisce those days!!</p></Reveal>
        </div>
        <Reveal>
          <Glass p={p} pad={44} radius={36}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }}>
              {pages.map((pg, i) => <Reveal key={i} delay={i * 120}><DmScrap pg={pg} idx={i} total={pages.length} p={p} /></Reveal>)}
            </div>
            <div style={{ marginTop: 34, paddingTop: 26, borderTop: `1px dashed ${p.ruleStrong}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 28, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', gap: 13, alignItems: 'center' }}>
                <DellaAvatar size={34} bg={p.accentSoft} fg={p.accentDeep} />
                <span style={{ fontFamily: dreamFonts.serif, fontSize: 18, fontStyle: 'italic', color: p.ink, maxWidth: 500 }}>"I pulled 38 photos and 12 voice notes from this year. Want to see the draft before we print?"</span>
              </div>
            </div>
          </Glass>
        </Reveal>
      </div>
    </section>);

}
function DmScrap({ pg, idx, total, p }) {
  return (
    <div style={{ background: '#FFFDF8', borderRadius: 14, padding: '18px 16px 22px', transform: `rotate(${pg.rotate}deg)`, boxShadow: '0 24px 46px -24px rgba(120,80,60,0.3)', minHeight: 420, position: 'relative' }}>
      <span style={{ position: 'absolute', top: 13, right: 16, fontFamily: dreamFonts.mono, fontSize: 8.5, letterSpacing: '0.2em', color: p.inkMute }}>{String(idx + 1).padStart(2, '0')} / {String(total).padStart(2, '0')}</span>
      <div style={{ fontFamily: dreamFonts.mono, fontSize: 9, letterSpacing: '0.2em', color: p.inkMute, textTransform: 'uppercase', marginBottom: 8 }}>{pg.stamp}</div>
      <div style={{ fontFamily: dreamFonts.display, fontSize: 21, fontWeight: 700, color: p.ink, lineHeight: 1.05 }}>{pg.title}</div>
      <div style={{ fontFamily: dreamFonts.serif, fontStyle: 'italic', fontSize: 15, color: p.inkSoft, lineHeight: 1.3, margin: '4px 0 16px' }}>{pg.sub}</div>
      <div style={{ display: 'grid', gridTemplateColumns: pg.photos.length === 1 ? '1fr' : '1fr 1fr', gap: 12 }}>
        {pg.photos.map((ph, i) =>
        <div key={i} style={{ gridColumn: ph.span && ph.span > 1 ? '1 / -1' : 'auto', transform: `rotate(${ph.tilt}deg)`, position: 'relative' }}>
            <span style={{ position: 'absolute', top: -7, left: '50%', transform: 'translateX(-50%) rotate(-4deg)', width: 38, height: 13, background: 'rgba(232,118,90,0.4)', borderRadius: 2, zIndex: 3 }} />
            <div style={{ background: '#fff', padding: 5, paddingBottom: 18, boxShadow: '0 8px 16px -6px rgba(120,80,60,0.25)' }}>
              <div style={{ aspectRatio: ph.wide ? '16/11' : '1/1', overflow: 'hidden', background: '#F3E6DA' }}>
                <img src={ph.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              </div>
              <div style={{ position: 'absolute', bottom: 2, left: 0, right: 0, textAlign: 'center', fontFamily: dreamFonts.serif, fontStyle: 'italic', fontSize: 13, color: p.inkSoft }}>{ph.cap}</div>
            </div>
          </div>
        )}
      </div>
    </div>);

}

function DmConversations({ p }) {
  const reduced = useReducedMotion();const pp = dreamPhone(p);
  const tabs = [
  { id: 'preg', stage: 'First Trimester', pull: 'napping is not lazy — it\u2019s necessary.', turns: [{ who: 'me', at: '9:12', text: "is it normal to feel this exhausted at 8 weeks?" }, { who: 'della', at: '9:12', text: "ugh yes, first-trimester fatigue is NO joke. your body is building a whole new organ. napping is not lazy — it's necessary 😴" }, { who: 'me', at: '9:13', text: "ok that actually helps lol" }, { who: 'della', at: '9:13', text: "try eating something small before you even get out of bed. i'll remind you 💛" }] },
  { id: 'es', stage: 'Spanish + English', pull: 'no te preocupes — that\u2019s totally normal.', turns: [{ who: 'me', at: '11:04', text: "Della tengo náuseas all day and i'm scared something's wrong" }, { who: 'della', at: '11:04', text: "ay mami, no te preocupes — that's totally normal en el primer trimestre. ¿snack ideas que ayudan?" }, { who: 'me', at: '11:05', text: "sí porfa 🙏" }, { who: 'della', at: '11:05', text: "saltines antes de levantarte, ginger tea, comidas pequeñas 💛" }] },
  { id: 'post', stage: 'Postpartum', pull: 'enjoy every moment\u201D is the worst advice.', turns: [{ who: 'me', at: '22:04', text: "everyone keeps saying enjoy every moment and i just want to cry" }, { who: 'della', at: '22:04', text: "first — \"enjoy every moment\" is the WORST advice. some moments are genuinely hard, and that's allowed ♡" }, { who: 'me', at: '22:06', text: "i feel like i should be happier though" }, { who: 'della', at: '22:06', text: "you're not failing. can we mention how you're feeling to your OB together?" }] },
  { id: 'partner', stage: 'Partner hand-off', pull: 'I\u2019ll show you before I hit send.', turns: [{ who: 'me', at: '6:41', text: "i'm too wrecked to explain to Sam what i need tonight. can you text him?" }, { who: 'della', at: '6:41', text: "on it. the night feed AND dishes, or pick one?" }, { who: 'me', at: '6:42', text: "both. but say it kindly tonight" }, { who: 'della', at: '6:42', text: "got it — i'll show you before i hit send 💛" }] }];

  const [active, setActive] = React.useState(0);const [vis, setVis] = React.useState(reduced ? 99 : 0);
  React.useEffect(() => {if (reduced) {setVis(99);return;}setVis(0);const n = tabs[active].turns.length;let t = [];for (let i = 1; i <= n; i++) t.push(setTimeout(() => setVis(i), 260 + i * 470));return () => t.forEach(clearTimeout);}, [active, reduced]);
  const tab = tabs[active];
  return (
    <section id="conversations" data-screen-label="conversations" style={{ position: 'relative', overflow: 'hidden', padding: '110px 0' }}>
      <FloatingMark size={54} top={70} left={'5%'} rotate={-9} dur={7} delay={0.2} />
      <div style={{ maxWidth: 1060, margin: '0 auto', padding: '0 40px', position: 'relative', zIndex: 2 }}>
        <div style={{ textAlign: 'center', maxWidth: 'none', margin: '0 auto 36px' }}>
          <Reveal><SoftEyebrow p={p} tone="lilac">Real conversations</SoftEyebrow></Reveal>
          <Reveal delay={70}><DreamH p={p} size={46} style={{ marginTop: 18, whiteSpace: 'nowrap' }}>This is what Della <DEm p={p} color="#8A6FB0">actually</DEm> sounds like.</DreamH></Reveal>
        </div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 24, flexWrap: 'wrap', justifyContent: 'center' }}>
          {tabs.map((t, i) => {const a = active === i;return (
              <button key={t.id} onClick={() => setActive(i)} style={{ padding: '10px 18px', borderRadius: 999, cursor: 'pointer', border: `1px solid ${a ? 'transparent' : p.glassEdge}`, background: a ? p.accent : p.glass, color: a ? p.accentInk : p.inkSoft, fontFamily: dreamFonts.display, fontSize: 14, fontWeight: 700, transition: 'all 160ms', backdropFilter: 'blur(8px)' }}>{t.stage}</button>);
          })}
        </div>
        <Glass p={p} pad={40} radius={34} style={{ display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 46, alignItems: 'center', minHeight: 380 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 15 }}>
            {tab.turns.map((t, i) => <DmConvRow key={`${active}-${i}`} t={t} p={p} shown={i < vis} reduced={reduced} />)}
            {!reduced && vis < tab.turns.length && <span style={{ alignSelf: 'flex-start' }}><TypingBubble p={pp} /></span>}
          </div>
          <div style={{ borderLeft: `2px solid ${p.accent}`, paddingLeft: 28 }}>
            <div style={{ fontFamily: dreamFonts.mono, fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: p.accent, marginBottom: 14 }}>Della says</div>
            <div style={{ fontFamily: dreamFonts.serif, fontSize: 30, fontWeight: 500, fontStyle: 'italic', lineHeight: 1.18, letterSpacing: '-0.02em', color: p.ink, textWrap: 'balance' }}>“{tab.pull}”</div>
          </div>
        </Glass>
      </div>
    </section>);

}
function DmConvRow({ t, p, shown, reduced }) {
  const isDella = t.who === 'della';
  return (
    <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', opacity: shown ? 1 : 0, transform: shown ? 'translateY(0)' : 'translateY(8px)', transition: reduced ? 'none' : 'opacity 420ms ease, transform 420ms cubic-bezier(.2,.8,.2,1)' }}>
      <div style={{ flexShrink: 0, width: 30, paddingTop: 2 }}>
        {isDella ? <DellaAvatar size={30} bg={p.accentSoft} fg={p.accentDeep} /> : <div style={{ width: 28, height: 28, borderRadius: '50%', border: `1px solid ${p.ruleStrong}`, background: 'rgba(255,255,255,0.6)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: dreamFonts.display, fontSize: 12, fontWeight: 700, color: p.ink }}>M</div>}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'baseline', marginBottom: 3 }}>
          <span style={{ fontFamily: dreamFonts.display, fontSize: 13.5, fontWeight: 700, color: isDella ? p.accentDeep : p.ink }}>{isDella ? 'Della' : 'Maya'}</span>
          <span style={{ fontFamily: dreamFonts.mono, fontSize: 9, color: p.inkMute }}>{t.at}</span>
        </div>
        <div style={{ fontFamily: dreamFonts.body, fontSize: 14.5, lineHeight: 1.55, color: p.ink, fontWeight: 500 }}>{t.text}</div>
      </div>
    </div>);

}

function DmChannels({ p }) {
  const cards = [
  { tag: 'Web App', emoji: '📱', bg: p.accentSoft, title: 'Use the web app', body: 'The full experience — your whole journey in one calm home.', soon: 'iOS & Android apps · coming soon' },
  { tag: 'Text', emoji: '✉️', bg: p.butterSoft, title: 'Just text her', body: 'A normal text message. No app to download, nothing new to learn.' },
  { tag: 'WhatsApp', emoji: '💬', bg: p.sageSoft, title: 'On WhatsApp', body: 'The same Della, right in the app you already use all day.' }];

  return (
    <section id="channels" data-screen-label="channels" style={{ position: 'relative', overflow: 'hidden', padding: '110px 0' }}>
      <FloatingMark size={56} bottom={60} right={'6%'} rotate={10} dur={8} delay={0.5} />
      <div style={{ maxWidth: 1080, margin: '0 auto', padding: '0 40px', position: 'relative', zIndex: 2 }}>
        <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 48px' }}>
          <Reveal><SoftEyebrow p={p} tone="sage">Your way</SoftEyebrow></Reveal>
          <Reveal delay={70}><DreamH p={p} size={50} style={{ marginTop: 18 }}>Reach Della <DEm p={p} color={p.sage}>however works for you.</DEm></DreamH></Reveal>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>
          {cards.map((c, i) =>
          <Reveal key={i} delay={i * 110}>
              <Glass p={p} pad={30} style={{ height: '100%', display: 'flex', flexDirection: 'column', gap: 0 }}>
                <Puff emoji={c.emoji} bg={c.bg} size={52} style={{ marginBottom: 18 }} />
                <div style={{ fontFamily: dreamFonts.mono, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: p.inkMute, marginBottom: 5 }}>{c.tag}</div>
                <div style={{ fontFamily: dreamFonts.display, fontSize: 22, fontWeight: 700, color: p.ink, lineHeight: 1.12, marginBottom: 9 }}>{c.title}</div>
                <p style={{ fontFamily: dreamFonts.body, fontSize: 14.5, lineHeight: 1.55, color: p.inkSoft, margin: 0, fontWeight: 500, flex: 1 }}>{c.body}</p>
                {c.soon &&
              <div style={{ marginTop: 18, alignSelf: 'flex-start', display: 'inline-flex', alignItems: 'center', gap: 7,
                padding: '7px 13px', borderRadius: 999, background: 'rgba(132,160,111,0.16)', color: p.sageInk,
                fontFamily: dreamFonts.display, fontSize: 12, fontWeight: 700, letterSpacing: '0.02em' }}>
                    <span style={{ width: 7, height: 7, borderRadius: '50%', background: p.sage }} />{c.soon}
                  </div>
              }
              </Glass>
            </Reveal>
          )}
        </div>
        <Reveal delay={120}>
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 44 }}>
            <PillBtn href="https://app.mydailydoula.com" p={p} pulse style={{ fontSize: 16.5, padding: '17px 36px' }}>Chat with Della →</PillBtn>
          </div>
        </Reveal>
      </div>
    </section>);

}

// A tiny handwritten stage label.
function StoryLabel({ children, p }) {
  return <div style={{ fontFamily: "'Caveat', cursive", fontSize: 27, fontWeight: 600, color: p.accent, marginBottom: 10, lineHeight: 1 }}>{children}</div>;
}
// A soft quote-bubble used inside story scenes.
function StoryBubble({ children, p, who = 'me', style = {} }) {
  const isDella = who === 'della';
  const bg = isDella ? p.card : who === 'him' ? '#E4EBDA' : '#FBE6DE';
  const fg = isDella ? p.ink : p.inkSoft;
  const radius = who === 'him' ? '16px 16px 16px 5px' : '16px 16px 5px 16px';
  return (
    <div style={{ maxWidth: 230, background: bg, color: fg, borderRadius: radius, padding: '10px 14px',
      fontFamily: dreamFonts.body, fontSize: 13.5, lineHeight: 1.45, fontWeight: 500,
      border: `1px solid ${p.rule}`, boxShadow: '0 8px 20px -14px rgba(120,80,60,0.4)', ...style }}>{children}</div>);
}

function DmStory({ p }) {
  return (
    <section id="story" data-screen-label="story" style={{ position: 'relative', overflow: 'hidden', padding: '110px 0' }}>
      <FloatingMark size={54} top={80} right={'5%'} rotate={-11} dur={7.5} delay={0.4} />
      <Orb from="#F6D2D6" to="#E3B3A6" size={460} top={120} right={-160} opacity={0.32} dur={20} />
      <Orb from="#E2EBD2" to="#C7D6B2" size={420} bottom={40} left={-150} opacity={0.3} dur={22} delay={1} />
      <div style={{ maxWidth: 1000, margin: '0 auto', padding: '0 40px', position: 'relative', zIndex: 2 }}>

        {/* Header */}
        <div style={{ textAlign: 'center', maxWidth: 700, margin: '0 auto 70px' }}>
          <Reveal><div style={{ display: 'flex', justifyContent: 'center' }}><SoftEyebrow p={p} tone="coral">Our story</SoftEyebrow></div></Reveal>
          <Reveal delay={70}><DreamH p={p} size={46} style={{ marginTop: 20 }}>Della was born at 4am, <DEm p={p}>while rocking our baby back to sleep.</DEm></DreamH></Reveal>
          <Reveal delay={140}><p style={{ fontFamily: dreamFonts.body, fontSize: 17, lineHeight: 1.6, color: p.inkSoft, margin: '20px auto 0', maxWidth: 540, fontWeight: 500 }}>We didn't set out to build a company. We were just two extremely tired new parents who needed the support of a friend to help us understand and truly enjoy the parenthood journey!!</p></Reveal>
        </div>

        {/* Beat 1 — the gap */}
        <Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 54, alignItems: 'center', marginBottom: 30 }}>
            <div style={{ position: 'relative', background: p.glass, backdropFilter: 'blur(12px)', border: `1px solid ${p.glassEdge}`, borderRadius: 28, padding: '34px 30px', boxShadow: p.shadowSoft }}>
              <span style={{ position: 'absolute', top: 14, right: 18, fontFamily: dreamFonts.mono, fontSize: 9, letterSpacing: '0.18em', color: p.inkMute }}>2:00 AM</span>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, alignItems: 'start' }}>
                <ThoughtCloud p={p} tone="coral" items={['is this normal at 8 weeks?', '37 tabs open', 'which app??', 'ask the chatbot again']} />
                <ThoughtCloud p={p} tone="sage" side="right" items={['how do I even help?', 'is she okay?', 'what do I do?']} />
              </div>
              <div style={{ textAlign: 'center', marginTop: 18, fontFamily: "'Caveat', cursive", fontSize: 22, color: p.inkMute }}>…a whole screen between us</div>
            </div>
            <div>
              <StoryLabel p={p}>while we were pregnant</StoryLabel>
              <p style={{ fontFamily: dreamFonts.body, fontSize: 17, lineHeight: 1.65, color: p.inkSoft, margin: 0, fontWeight: 500 }}>We spent our nights googling, asking ChatGPT, downloading app after app. All of it clinical, bland, half-finished or just robotic? I typed for hours and still felt alone, we were side by side, on our phones typing, but never really felt like we were doing this <DEm p={p}>together.</DEm></p>
            </div>
          </div>
        </Reveal>

        {/* Beat 2 — held */}
        <Reveal delay={80}>
          <div style={{ display: 'grid', gridTemplateColumns: '0.95fr 1.05fr', gap: 54, alignItems: 'center', marginBottom: 30 }}>
            <div style={{ order: 2 }}>
              <div style={{ position: 'relative', background: 'linear-gradient(160deg,#FDEDE4,#F0D2C6)', border: `1px solid ${p.glassEdge}`, borderRadius: 28, padding: '34px 30px', boxShadow: p.shadowSoft, overflow: 'hidden' }}>
                <span style={{ position: 'absolute', top: 14, right: 18, fontFamily: dreamFonts.mono, fontSize: 9, letterSpacing: '0.18em', color: p.inkMute }}>WEEK 1 HOME</span>
                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-end', gap: 14, marginBottom: 18 }}>
                  <AvatarDisc size={84} from="#EBBCB0" to="#C47060" ring="#F6D2D6" glyph="🤍" caption="me" p={p} />
                  <Puff emoji="👶" bg="#FBE6B0" size={48} style={{ marginBottom: 16 }} />
                  <AvatarDisc size={84} from="#A8C08F" to="#84A06F" ring="#D7E2C8" glyph="🫶" caption="Akhil" p={p} />
                </div>
                <div style={{ display: 'flex', justifyContent: 'center' }}>
                  <StoryBubble p={p}>“i don't need a tracker tonight. i just need you close. 🤍”</StoryBubble>
                </div>
              </div>
            </div>
            <div style={{ order: 1 }}>
              <StoryLabel p={p}>then our baby was born</StoryLabel>
              <p style={{ fontFamily: dreamFonts.body, fontSize: 17, lineHeight: 1.65, color: p.inkSoft, margin: 0, fontWeight: 500 }}>Post-delivery recovery was the hardest thing I've done. I was lost. He wanted to help so bad but he just didn't know how - I had no energy to explain. I didn't need advice. I just needed to feel <DEm p={p}>held.</DEm></p>
            </div>
          </div>
        </Reveal>

        {/* Beat 3 — the 4am decision */}
        <Reveal delay={80}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 54, alignItems: 'center', marginBottom: 64 }}>
            <div style={{ position: 'relative', background: 'linear-gradient(160deg,#2E3F46,#3C5158)', borderRadius: 28, padding: '34px 30px', boxShadow: p.shadow, overflow: 'hidden' }}>
              <span style={{ position: 'absolute', top: 14, right: 18, fontFamily: dreamFonts.mono, fontSize: 9, letterSpacing: '0.18em', color: 'rgba(246,233,221,0.6)' }}>4:00 AM</span>
              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 12, marginBottom: 18 }}>
                <Puff emoji="🌙" bg="rgba(234,223,240,0.9)" size={40} />
                <Puff emoji="👶" bg="rgba(246,210,214,0.95)" size={52} />
                <Puff emoji="🐶" bg="rgba(215,226,200,0.95)" size={44} />
              </div>
              <div style={{ display: 'flex', justifyContent: 'center' }}>
                <StoryBubble p={p} who="della" style={{ maxWidth: 250 }}>“what if we just… built the friend we wished we had?” <span style={{ color: p.accent }}>💡</span></StoryBubble>
              </div>
            </div>
            <div>
              <StoryLabel p={p}>4 months in, one sleepless night</StoryLabel>
              <p style={{ fontFamily: dreamFonts.body, fontSize: 17, lineHeight: 1.65, color: p.inkSoft, margin: 0, fontWeight: 500 }}>While rocking our baby through a sleep regression at 4am, we looked at each other and decided to build Della. Two exhausted new parents, a sleepy baby and one very cuddly dog (Mr. Kuchinunu) - together built <DEm p={p}>Della</DEm>.</p>
            </div>
          </div>
        </Reveal>

        {/* Closing — the handwritten note */}
        <Reveal delay={60}>
          <div style={{ position: 'relative', background: p.glass, backdropFilter: 'blur(14px)', border: `1px solid ${p.glassEdge}`, borderRadius: 34, padding: '48px 44px 42px', boxShadow: p.shadowSoft, textAlign: 'center', overflow: 'hidden' }}>
            <div style={{ fontFamily: "'Caveat', cursive", fontSize: 40, fontWeight: 600, color: p.accentDeep, lineHeight: 1.15, marginBottom: 14 }}>We built Della so you never feel that gap.<br />Like we've never felt it since :)</div>
            <p style={{ fontFamily: dreamFonts.body, fontSize: 17, lineHeight: 1.65, color: p.inkSoft, margin: '0 auto', maxWidth: 600, fontWeight: 500 }}>We hope you feel the warmth and get the help right when you need it, so you go on this journey <em style={{ fontStyle: 'italic', color: p.ink }}>together and enjoy it</em>.<br />Della carried us through postpartum and we hope, with our whole hearts, that she carries you too. 🤍</p>
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 10, marginTop: 26 }}>
              {[['🤍', p.accentSoft], ['🫶', p.sageSoft], ['👶', p.butterSoft], ['🐶', p.roseSoft]].map((s, i) => <Puff key={i} emoji={s[0]} bg={s[1]} size={40} rotate={i % 2 ? 7 : -7} />)}
            </div>
            <div style={{ fontFamily: dreamFonts.mono, fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: p.inkMute, marginTop: 16 }}>— MADE BY HEER'S MUM & DAD AND UNO (A.K.A) MR. KUCHINUNU, THE ONE CUDDLY DOG</div>
          </div>
        </Reveal>
      </div>
    </section>);
}

function DmCTA({ p }) {
  return (
    <section style={{ padding: '40px 0 110px', position: 'relative' }}>
      <div style={{ maxWidth: 1080, margin: '0 auto', padding: '0 40px' }}>
        <Reveal>
          <div style={{ background: `linear-gradient(155deg, #F6DDD0, #E9C6BA)`, color: p.ink, borderRadius: 40, padding: '82px 50px 88px', position: 'relative', overflow: 'hidden', textAlign: 'center' }}>
            <div aria-hidden="true" style={{ position: 'absolute', right: -40, bottom: -60, opacity: 0.18 }}><DDMark size={300} /></div>
            <div style={{ position: 'relative', zIndex: 2 }}>
              <h2 style={{ fontFamily: dreamFonts.display, fontWeight: 700, fontSize: 56, lineHeight: 1.04, letterSpacing: '-0.02em', margin: 0, maxWidth: 780, marginInline: 'auto', color: p.ink, textWrap: 'balance' }}>
                This journey is magical. <DEm p={p} color={p.accentDeep}>Let us help you feel it.</DEm>
              </h2>
              <p style={{ fontFamily: dreamFonts.body, fontSize: 18, lineHeight: 1.55, color: p.inkSoft, maxWidth: 580, margin: '24px auto 34px', fontWeight: 500 }}>A friend in both your corners - in your language, on your schedule, through every stage of becoming a family.

              </p>
              <PillBtn href="https://app.mydailydoula.com" p={p} pulse style={{ fontSize: 16.5, padding: '17px 34px' }}>Start chatting →</PillBtn>
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

function DmFooter({ p }) {
  const cols = [['Product', [['How it works', '#how'], ['For partners', '#partner'], ['Features', '#features'], ['Channels', '#channels']]], ['Get started', [['Open web app', 'https://app.mydailydoula.com'], ['WhatsApp', '#channels'], ['Our story', '#story']]], ['Company', [['About', '#story'], ['Privacy', '/privacy'], ['Terms', '/terms']]]];
  return (
    <footer style={{ padding: '60px 0 40px', position: 'relative' }}>
      <div style={{ maxWidth: 1160, margin: '0 auto', padding: '0 40px' }}>
        <Glass p={p} pad={40} radius={34}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 40, marginBottom: 36 }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                <DDMark size={28} /><span style={{ fontFamily: dreamFonts.display, fontSize: 20, fontWeight: 700 }}>My Daily Doula</span>
              </div>
              <p style={{ fontFamily: dreamFonts.body, fontSize: 14, lineHeight: 1.6, color: p.inkSoft, margin: 0, maxWidth: 340, fontWeight: 500 }}>Della, the friend that's by your side from trying-to-conceive through your child's first steps. She remembers everything and helps your partner show up.</p>
            </div>
            {cols.map((c, i) =>
            <div key={i}>
                <div style={{ fontFamily: dreamFonts.mono, fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: p.inkMute, marginBottom: 13 }}>{c[0]}</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 9 }}>
                  {c[1].map(([l, h], j) => <li key={j}><a href={h} style={{ fontFamily: dreamFonts.body, fontSize: 14, fontWeight: 600, color: p.ink }} onMouseEnter={(e) => e.currentTarget.style.color = p.accent} onMouseLeave={(e) => e.currentTarget.style.color = p.ink}>{l}</a></li>)}
                </ul>
              </div>
            )}
          </div>
          <div style={{ paddingTop: 22, borderTop: `1px solid ${p.rule}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
            <span style={{ fontFamily: dreamFonts.mono, fontSize: 11, letterSpacing: '0.12em', color: p.inkMute }}>© 2026 Kuchinunu, Inc.</span>
            <span style={{ fontFamily: dreamFonts.body, fontSize: 12.5, color: p.inkMute, maxWidth: 560, textAlign: 'right', lineHeight: 1.5, fontWeight: 500 }}>Della is an AI companion, not a medical professional. Always consult your healthcare provider for medical advice.</span>
          </div>
        </Glass>
      </div>
    </footer>);

}

Object.assign(window, { DmJournal, DmConversations, DmChannels, DmStory, DmCTA, DmFooter });