// v8 "Bloom Dream" — the three-stage journey explainer ported from v3/v4.
// Trying → Pregnancy → Postpartum, as accordion cards that expand on hover/tap,
// with a continuity timeline beneath. Restyled in the dream language (Quicksand
// + Fraunces, glass cards, butter/coral/sage stage accents).

function DmJourney({ p }) {
  const stages = [
    {
      id: 'ttc', title: 'Trying', tag: 'Cycle day 1 → BFP',
      accent: p.butter, soft: p.butterSoft, ink: '#8A6014', glyph: '🌱', bloom: 0.32,
      lede: "From cycle 1, without making your whole life about it.",
      body: "Della tracks your cycle quietly, nudges when your fertile window opens, and answers the 2 a.m. \"is this implantation?\" questions without the panic.",
      bullets: [
        { e: '🌸', l: 'Cycle wheel + fertile window', s: 'BBT, OPK, EWCM — log a tap, get a real read.' },
        { e: '🧪', l: 'TWW companion',                s: "She gently calls out symptom-spiraling. You'll thank her." },
        { e: '🤍', l: 'Loss-aware',                   s: 'After a chemical or MC, the whole tone softens. No empty platitudes.' },
        { e: '🏥', l: 'IUI / IVF support',            s: 'Trigger shots, retrieval, transfer day — she knows the protocol.' },
      ],
      quote: "We will not obsess over symptoms in the TWW. Deal?",
    },
    {
      id: 'pregnancy', title: 'Pregnancy', tag: '6 weeks → 40+',
      accent: p.accent, soft: p.accentSoft, ink: p.accentDeep, glyph: '🤍', bloom: 0.66,
      lede: "A friend who's read every book, and won't recite them at you.",
      body: "Weekly development you actually want to read. Real answers about heartburn, kicks, weird symptoms, and what to pack. Della also drafts the messages to your partner, your mom.",
      bullets: [
        { e: '📖', l: 'Weekly development',          s: 'Editorial cards. No pomegranates. No fear-mongering.' },
        { e: '🌙', l: 'Symptom-by-symptom triage',   s: '"Is this normal or call the OB?" — she actually says.' },
        { e: '🎒', l: 'Hospital-bag + birth plan',   s: 'Living checklists, generated from your conversations.' },
        { e: '👫', l: 'Partner translator',          s: "She'll text your partner exactly what you need. So you don't have to." },
      ],
      quote: "Half a pear before bed, low-acid, gentle. We'll fix the heartburn properly tomorrow.",
    },
    {
      id: 'postpartum', title: 'Postpartum', tag: 'Day 1 → toddlerhood',
      accent: p.sage, soft: p.sageSoft, ink: p.sageInk, glyph: '🌿', bloom: 1,
      lede: "The 4 a.m. friend who never tells you to enjoy every moment.",
      body: "Feeding tracker, sleep regression decoder, mom-mood check-ins that catch PPA/PPD early. Della keeps showing up after everyone else stops asking how you are.",
      bullets: [
        { e: '🍼', l: 'Feeds, sleep, growth',        s: 'Single-tap logging. Patterns surface themselves.' },
        { e: '💙', l: 'Mood check-ins',              s: "Gentle screening. Real referrals when it's more." },
        { e: '🛌', l: 'Regression decoder',          s: '4-month, 8-month, 12-month — what it is, when it ends.' },
        { e: '🍝', l: 'Recipes for one hand',        s: "Things you can eat while nursing. Or while crying. Both fine." },
      ],
      quote: "FIVE HOURS?! that's massive — want me to text Arjun your debrief so you don't have to retell it?",
    },
  ];

  const [open, setOpen] = React.useState('ttc');

  return (
    <section id="journey" data-screen-label="journey" style={{ position: 'relative', overflow: 'hidden', padding: '110px 0' }}>
      <FloatingMark size={56} bottom={60} left={'5%'} rotate={-10} dur={7.5} delay={0.5} />
      <Orb from="#FBE6B0" to="#F0C45A" size={420} top={-90} left={-130} opacity={0.32} dur={19} />
      <Orb from="#E2EBD2" to="#B8C89A" size={400} bottom={-110} right={-130} opacity={0.34} dur={20} delay={2} />
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '0 40px', position: 'relative', zIndex: 2 }}>
        <div style={{ marginBottom: 50 }}>
          <Reveal><SoftEyebrow p={p} tone="butter">One Della · Three stages · For both of you</SoftEyebrow></Reveal>
          <Reveal delay={70}>
            <DreamH p={p} size={54} style={{ marginTop: 18 }}>
              Here for the whole journey of <DEm p={p} color={p.rose}>becoming parents.</DEm>
            </DreamH>
          </Reveal>
        </div>

        {/* Three accordion cards — when one expands, the others narrow. */}
        <div style={{ display: 'grid', gridTemplateColumns: stages.map(s => s.id === open ? '2.2fr' : '1fr').join(' '),
          gap: 18, transition: 'grid-template-columns 480ms cubic-bezier(.2,.8,.2,1)', minHeight: 540 }}>
          {stages.map(s => (
            <DmJourneyCard key={s.id} s={s} p={p} open={open === s.id} onOpen={() => setOpen(s.id)} />
          ))}
        </div>

        {/* Continuity timeline beneath. */}
        <Reveal>
          <div style={{ marginTop: 40, padding: '22px 30px', background: p.glass,
            backdropFilter: 'blur(14px) saturate(1.3)', WebkitBackdropFilter: 'blur(14px) saturate(1.3)',
            border: `1px solid ${p.glassEdge}`, borderRadius: 24, boxShadow: p.shadowSoft,
            display: 'flex', alignItems: 'center', gap: 22, flexWrap: 'wrap' }}>
            <div style={{ fontFamily: dreamFonts.mono, fontSize: 10, letterSpacing: '0.26em',
              textTransform: 'uppercase', color: p.inkMute, flexShrink: 0 }}>Your story carries</div>
            <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 0, minWidth: 420 }}>
              <DmContinuityNode label="Cycle 14, 2025" sub="Started trying" accent={p.butter} p={p} />
              <DmContinuityLine p={p} />
              <DmContinuityNode label="Aug 2025" sub="Positive test" accent={p.butter} p={p} />
              <DmContinuityLine p={p} accent={p.accent} />
              <DmContinuityNode label="Apr 2026" sub="Ila is born" accent={p.accent} p={p} />
              <DmContinuityLine p={p} accent={p.sage} />
              <DmContinuityNode label="Today" sub="4 mo · sleeping 5 hrs" accent={p.sage} p={p} />
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function DmJourneyCard({ s, p, open, onOpen }) {
  return (
    <div onMouseEnter={onOpen} onClick={onOpen}
      style={{ background: p.card, borderRadius: 28, padding: open ? 34 : 24,
        border: `1px solid ${open ? p.glassEdge : p.rule}`,
        boxShadow: open ? p.shadow : p.shadowSoft, cursor: 'pointer', position: 'relative', overflow: 'hidden',
        transition: 'padding 320ms ease, box-shadow 320ms ease', display: 'flex', flexDirection: 'column', minHeight: 540 }}>
      {/* Accent ribbon along the left */}
      <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, width: 6, background: s.accent }} />

      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
        <div style={{ width: 56, height: 56, borderRadius: '50%', background: s.soft,
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><DDBloom size={36} open={s.bloom} /></div>
        <div>
          <div style={{ fontFamily: dreamFonts.mono, fontSize: 10, letterSpacing: '0.22em',
            textTransform: 'uppercase', color: s.ink, fontWeight: 600 }}>{s.tag}</div>
          <div style={{ fontFamily: dreamFonts.display, fontSize: open ? 38 : 30, fontWeight: 700,
            letterSpacing: '-0.02em', color: p.ink, marginTop: 2, transition: 'font-size 280ms ease' }}>{s.title}</div>
        </div>
      </div>

      {/* Lede — always visible */}
      <div style={{ fontFamily: dreamFonts.serif, fontSize: open ? 23 : 17, fontStyle: 'italic',
        fontWeight: 500, color: s.ink, lineHeight: 1.32, marginBottom: open ? 18 : 0, textWrap: 'balance',
        transition: 'font-size 280ms ease, margin 280ms ease' }}>{s.lede}</div>

      {/* Body — only when open */}
      <div style={{ opacity: open ? 1 : 0, maxHeight: open ? 640 : 0,
        transition: 'opacity 320ms ease, max-height 480ms ease', overflow: 'hidden',
        display: 'flex', flexDirection: 'column', gap: 18 }}>
        <p style={{ fontFamily: dreamFonts.body, fontSize: 15.5, lineHeight: 1.55, color: p.inkSoft, margin: 0, fontWeight: 500 }}>{s.body}</p>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
          {s.bullets.map((b, i) => (
            <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <div style={{ width: 32, height: 32, borderRadius: 11, background: s.soft,
                display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, flexShrink: 0 }}>{b.e}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: dreamFonts.display, fontSize: 14.5, fontWeight: 700, color: p.ink }}>{b.l}</div>
                <div style={{ fontFamily: dreamFonts.body, fontSize: 13, color: p.inkSoft, lineHeight: 1.45, marginTop: 1, fontWeight: 500 }}>{b.s}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ padding: '15px 18px', background: s.soft, borderRadius: 16,
          fontFamily: dreamFonts.serif, fontStyle: 'italic', fontSize: 16, lineHeight: 1.42,
          color: s.ink, textWrap: 'balance', borderLeft: `3px solid ${s.accent}` }}>
          “{s.quote}”
          <div style={{ marginTop: 7, fontFamily: dreamFonts.mono, fontSize: 9, letterSpacing: '0.2em',
            textTransform: 'uppercase', color: s.ink, fontStyle: 'normal', fontWeight: 600, opacity: 0.8 }}>— Della, in conversation</div>
        </div>
      </div>

      {/* Closed-state footer hint */}
      {!open && (
        <div style={{ marginTop: 'auto', paddingTop: 18, fontFamily: dreamFonts.mono, fontSize: 9.5,
          letterSpacing: '0.24em', textTransform: 'uppercase', color: p.inkMute, fontWeight: 600 }}>Tap to open ↗</div>
      )}
    </div>
  );
}

function DmContinuityNode({ label, sub, accent, p }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, flexShrink: 0, minWidth: 140 }}>
      <div style={{ width: 14, height: 14, borderRadius: '50%', background: accent, boxShadow: `0 0 0 4px ${accent}33` }} />
      <div style={{ fontFamily: dreamFonts.serif, fontSize: 14.5, fontWeight: 500, fontStyle: 'italic', color: p.ink }}>{label}</div>
      <div style={{ fontFamily: dreamFonts.mono, fontSize: 9, letterSpacing: '0.16em', color: p.inkMute, textTransform: 'uppercase' }}>{sub}</div>
    </div>
  );
}

function DmContinuityLine({ p, accent }) {
  return (
    <div style={{ flex: 1, height: 2, background: accent || p.rule, opacity: accent ? 0.5 : 1, minWidth: 24 }} />
  );
}

Object.assign(window, { DmJourney });