// v8 "Bloom Dream" — the partner co-hero showpiece, ported from v4.
// "For the other parent, too." A tabbed card of what Della sends the partner
// (Train / Brief / Do / Feel) beside four pillars. Restyled in the dream
// language (Quicksand + Fraunces, glass, butter/coral/sage accents).

function DmOtherParent({ p }) {
  const [tab, setTab] = React.useState('learn');
  const soft = '#FBF1EA';
  const tabs = [
  { id: 'learn', label: 'Train', mono: 'Week 14 · dad school' },
  { id: 'update', label: 'Brief', mono: 'Tue 9:14 AM · how she is' },
  { id: 'do', label: 'Do', mono: 'This week · 3 small things' },
  { id: 'feel', label: 'Feel', mono: 'Sunday · partner check-in' }];


  const pillars = [
  { icon: '🎓', tint: p.butterSoft, title: 'Trains them in fatherhood',
    body: "Small daily lessons — trimesters, postpartum, sleep, milestones — so they show up prepared, not panicked." },
  { icon: '💌', tint: p.accentSoft, title: 'Briefs them on her, daily',
    body: 'How she slept, what hurts, what she needs but won’t ask for — so they walk in already knowing how to help. ' },
  { icon: '🌹', tint: p.sageSoft, title: 'Plans the small wins',
    body: 'A heat pack, flowers at the OB visit, a date night when she needs it — Della nudges the gestures that land. ' },
  { icon: '🛡️', tint: p.lilacSoft, title: 'Supports the partner, too',
    body: "No one asks how the partner is doing. Della checks in privately and reminds them they’re an equal player." }];


  return (
    <section id="otherparent" data-screen-label="otherparent" style={{ position: 'relative', overflow: 'hidden', padding: '110px 0' }}>
      <FloatingMark size={54} top={80} right={'6%'} rotate={9} dur={8} delay={0.4} />
      <Orb from="#E2EBD2" to="#B8C89A" size={440} top={-90} left={-130} opacity={0.34} dur={19} />
      <Orb from="#F6D2D6" to="#CC8B95" size={400} bottom={-110} right={-130} opacity={0.3} dur={20} delay={2} />
      <div style={{ maxWidth: 1140, margin: '0 auto', padding: '0 40px', position: 'relative', zIndex: 2 }}>
        {/* Header */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 40, alignItems: 'end', marginBottom: 52 }}>
          <div>
            <Reveal><SoftEyebrow p={p} tone="sage">The hero we never name</SoftEyebrow></Reveal>
            <Reveal delay={70}>
              <DreamH p={p} size={44} style={{ marginTop: 18 }}>
                Della is here,<br /><DEm p={p} color={p.sage}>For the other parent</DEm>,too.
              </DreamH>
            </Reveal>
          </div>
          <Reveal delay={120}>
            <div style={{ maxWidth: 500, justifySelf: 'end' }}>
              <p style={{ fontFamily: dreamFonts.serif, fontSize: 20, fontStyle: 'italic', fontWeight: 500, lineHeight: 1.4, color: p.sageInk, margin: '0 0 14px' }}>For too long, this story has only been about the mother — never the weight the other parent carries. That has to change.

              </p>
              <p style={{ fontFamily: dreamFonts.body, fontSize: 16, lineHeight: 1.6, color: p.inkSoft, margin: 0, fontWeight: 500 }}>Becoming a parent changes two people. Della trains, briefs, and supports your partner too — looking out for both of you. 


              </p>
            </div>
          </Reveal>
        </div>

        {/* Tabbed card + pillars */}
        <div style={{ display: 'grid', gridTemplateColumns: '0.95fr 1.05fr', gap: 44, alignItems: 'start' }}>
          <Reveal>
            <div style={{ background: p.card, border: `1px solid ${p.rule}`, borderRadius: 32, padding: 30,
              position: 'relative', overflow: 'hidden', boxShadow: p.shadowSoft }}>
              <div style={{ position: 'absolute', top: -34, right: -34, width: 160, height: 160, borderRadius: '50%', background: p.sageSoft, opacity: 0.55, zIndex: 0 }} />
              <div style={{ position: 'relative', zIndex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: dreamFonts.mono, fontSize: 10,
                  letterSpacing: '0.22em', textTransform: 'uppercase', color: p.inkMute, marginBottom: 16 }}>
                  <DellaAvatar size={22} bg={p.sageSoft} fg={p.sageInk} />
                  <span>Della → Sam (partner)</span>
                </div>

                <div style={{ display: 'inline-flex', padding: 3, background: soft, borderRadius: 999, marginBottom: 20, gap: 2, border: `1px solid ${p.rule}` }}>
                  {tabs.map((t) => {
                    const active = tab === t.id;
                    return (
                      <button key={t.id} onClick={() => setTab(t.id)} style={{ padding: '7px 15px', borderRadius: 999,
                        background: active ? p.sage : 'transparent', color: active ? '#fff' : p.inkSoft, border: 'none', cursor: 'pointer',
                        fontFamily: dreamFonts.display, fontSize: 13, fontWeight: 700, transition: 'background 160ms ease, color 160ms ease' }}>{t.label}</button>);

                  })}
                </div>

                <div style={{ fontFamily: dreamFonts.mono, fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: p.sage, marginBottom: 12, fontWeight: 600 }}>
                  {tabs.find((t) => t.id === tab).mono}
                </div>

                <DmPartnerTabBody tab={tab} p={p} soft={soft} />

                <div style={{ marginTop: 20, padding: '12px 14px', borderRadius: 14, background: p.sageSoft, fontFamily: dreamFonts.body, fontSize: 13, lineHeight: 1.5, color: p.sageInk, fontWeight: 600, display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                  <span style={{ fontSize: 16 }}>♡</span>
                  <span>You are not the supporting cast. This is happening to you, too.</span>
                </div>

                <div style={{ marginTop: 16, fontFamily: dreamFonts.mono, fontSize: 9.5, letterSpacing: '0.2em', textTransform: 'uppercase', color: p.inkMute, display: 'flex', alignItems: 'center', gap: 8 }}>
                  <DDMark size={15} /><span>From Della — for the partner.</span>
                </div>
              </div>
            </div>
          </Reveal>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
            {pillars.map((pl, i) =>
            <Reveal key={i} delay={i * 90}>
                <div style={{ background: p.card, borderRadius: 24, padding: 26, border: `1px solid ${p.rule}`, boxShadow: p.shadowSoft, display: 'flex', flexDirection: 'column', gap: 12, height: '100%', minHeight: 248 }}>
                  <div style={{ width: 48, height: 48, borderRadius: '50%', background: pl.tint, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24 }}>{pl.icon}</div>
                  <h3 style={{ fontFamily: dreamFonts.display, fontSize: 21, fontWeight: 700, letterSpacing: '-0.01em', color: p.ink, margin: 0, lineHeight: 1.15 }}>{pl.title}</h3>
                  <p style={{ fontFamily: dreamFonts.body, fontSize: 13.5, lineHeight: 1.55, color: p.inkSoft, margin: 0, fontWeight: 500 }}>{pl.body}</p>
                </div>
              </Reveal>
            )}
          </div>
        </div>

      </div>
    </section>);

}

// The four flavors of partner content Della produces.
function DmPartnerTabBody({ tab, p, soft }) {
  const Q = ({ children }) =>
  <div style={{ fontFamily: dreamFonts.serif, fontSize: 22, lineHeight: 1.32, fontWeight: 500, fontStyle: 'italic', color: p.ink, marginBottom: 14 }}>{children}</div>;

  if (tab === 'learn') {
    return (
      <div>
        <Q>“Today's lesson, Sam: <span style={{ color: p.sage }}>the second trimester</span>.”</Q>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
          { k: '3-min read', v: 'Why she suddenly has energy again — and why it ends around week 28.' },
          { k: 'What to expect', v: 'Anatomy scan, gestational diabetes test, the kick count conversation.' },
          { k: 'Try this', v: "Take over the laundry this week. Bending hurts now in a way it didn't last month." }].
          map((row, i) =>
          <li key={i} style={{ paddingLeft: 14, borderLeft: `2px solid ${p.sage}` }}>
              <div style={{ fontFamily: dreamFonts.display, fontSize: 12.5, fontWeight: 700, color: p.ink, marginBottom: 2 }}>{row.k}</div>
              <div style={{ fontFamily: dreamFonts.body, fontSize: 14, lineHeight: 1.5, color: p.inkSoft, fontWeight: 500 }}>{row.v}</div>
            </li>
          )}
        </ul>
        <div style={{ marginTop: 14, display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 13px', borderRadius: 999, background: p.butterSoft, color: '#8A6014', fontFamily: dreamFonts.mono, fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
          <span>📚</span> Lesson 8 of 40
        </div>
      </div>);

  }
  if (tab === 'update') {
    return (
      <div>
        <Q>“Quick brief on Maya — week 32.”</Q>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
          { k: 'Where she is', v: 'Sleep is rough. Hips ache at night. She did not say this.' },
          { k: 'What helps', v: 'A long hug. The good water bottle, refilled.' },
          { k: 'This week', v: 'OB appointment Thursday 2 PM — she would love you there.' },
          { k: 'A small thing', v: 'Ginger candies. Or the lemon bars from the bakery on 5th.' }].
          map((row, i) =>
          <li key={i} style={{ paddingLeft: 14, borderLeft: `2px solid ${p.accent}` }}>
              <div style={{ fontFamily: dreamFonts.display, fontSize: 12.5, fontWeight: 700, color: p.ink, marginBottom: 2 }}>{row.k}</div>
              <div style={{ fontFamily: dreamFonts.body, fontSize: 14, lineHeight: 1.5, color: p.inkSoft, fontWeight: 500 }}>{row.v}</div>
            </li>
          )}
        </ul>
      </div>);

  }
  if (tab === 'do') {
    return (
      <div>
        <Q>“Three small things this week, Sam.”</Q>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
          { day: 'Tue', text: 'Take the night feed on Tuesday. Marked in the shared calendar — done for you.' },
          { day: 'Thu', text: 'Pick her up after the OB. Bring the good water bottle.' },
          { day: 'Sat', text: "Saturday morning: install the car seat. I'll walk you through it." }].
          map((row, i) =>
          <li key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 12px', borderRadius: 12, background: soft, border: `1px solid ${p.rule}` }}>
              <span style={{ width: 36, height: 36, borderRadius: 10, background: p.butterSoft, color: '#8A6014', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: dreamFonts.mono, fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', flexShrink: 0 }}>{row.day}</span>
              <span style={{ fontFamily: dreamFonts.body, fontSize: 13.5, lineHeight: 1.45, color: p.ink, fontWeight: 500 }}>{row.text}</span>
            </li>
          )}
        </ul>
      </div>);

  }
  // feel — the partner check-in
  return (
    <div>
      <Q>“Hey Sam — <span style={{ color: p.accent }}>how are you, actually?</span>”</Q>
      <p style={{ fontFamily: dreamFonts.body, fontSize: 14, lineHeight: 1.6, color: p.inkSoft, margin: '0 0 14px', fontWeight: 500 }}>
        Not how she is. You. Pick what fits. Whatever you tap stays between us unless you want me to flag it to her.
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        {[
        { e: '🪨', t: 'Holding it down' },
        { e: '😮‍💨', t: 'A little stretched' },
        { e: '🌧️', t: 'Quietly struggling' },
        { e: '🫥', t: 'Not sure anyone sees me' }].
        map((opt, i) =>
        <button key={i} style={{ padding: '11px 12px', borderRadius: 12, background: soft, border: `1px solid ${p.rule}`,
          display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', textAlign: 'left',
          fontFamily: dreamFonts.body, color: p.ink, fontSize: 13, fontWeight: 600 }}>
            <span style={{ fontSize: 18 }}>{opt.e}</span><span>{opt.t}</span>
          </button>
        )}
      </div>
      <div style={{ marginTop: 12, padding: '11px 14px', borderRadius: 12, background: p.accentSoft, color: '#7A2E1C', fontFamily: dreamFonts.serif, fontSize: 12.5, lineHeight: 1.5, fontStyle: 'italic' }}>
        ↳ “Quietly struggling” → Della suggests a 15-min call this weekend with a new-dad therapist she's vetted.
      </div>
    </div>);

}

Object.assign(window, { DmOtherParent, DmPartnerTabBody });