// parent-yellow-c.jsx — Variation C: warm-coach voice, big headline

function ParentYellowC() {
  return (
    <div style={{ position: 'absolute', inset: 0,
      background: 'linear-gradient(170deg, #FCEFD6 0%, #F4D89F 100%)',
      fontFamily: FONT_BODY, color: '#3A2510', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: 64, left: 24, right: 24,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <ParentLogoMark/>
        <div style={{ fontSize: 11, color: '#8B5A0F', fontWeight: 600 }}>3:42 PM</div>
      </div>
      <div style={{ position: 'absolute', top: 96, left: 24 }}>
        <ParentBadge state="yellow"/>
      </div>

      <div style={{ position: 'absolute', top: 124, left: 24, right: 24 }}>
        <div style={{ fontFamily: FONT_DISPLAY, fontSize: 38, fontWeight: 500,
          lineHeight: 1.05, letterSpacing: -0.6, textWrap: 'pretty' }}>
          Ella's body is whispering.
        </div>
        <div style={{ fontSize: 16, color: 'rgba(58,37,16,0.7)', lineHeight: 1.45,
          marginTop: 14, maxWidth: 320 }}>
          A small wave of stress, picked up early. Most pass on their own.
          A check-in often shortens them.
        </div>
      </div>

      {/* visual: rising wave */}
      <svg width="100%" height="170" viewBox="0 0 360 170"
        style={{ position: 'absolute', top: 320, left: 0 }}>
        <path d="M0 120 Q 60 90, 120 110 T 240 80 T 360 60"
          stroke="#E08A7B" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
        <path d="M0 120 Q 60 90, 120 110 T 240 80 T 360 60 L 360 170 L 0 170 Z"
          fill="rgba(224,138,123,0.18)"/>
        <circle cx="360" cy="60" r="6" fill="#E08A7B"/>
        <circle cx="360" cy="60" r="14" fill="rgba(224,138,123,0.25)"/>
      </svg>
      <div style={{ position: 'absolute', top: 480, left: 24, fontSize: 11,
        color: '#8B5A0F', fontWeight: 600, letterSpacing: 0.4 }}>
        STRESS LOAD · LAST 30 MINUTES
      </div>

      {/* sticky CTA */}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0,
        background: '#fff', borderTopLeftRadius: 24, borderTopRightRadius: 24,
        padding: '18px 22px 32px', boxShadow: '0 -10px 32px rgba(0,0,0,0.08)' }}>
        <div style={{ fontSize: 11, color: CS.parentInk, fontWeight: 700,
          textTransform: 'uppercase', letterSpacing: 0.6, marginBottom: 10 }}>
          What does your gut say?
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <CoachBtn label="She's fine" sub="False signal" tone="neutral"/>
          <CoachBtn label="Check in" sub="Casual touch" tone="primary"/>
          <CoachBtn label="It's bigger" sub="Escalate" tone="warn"/>
        </div>
      </div>
    </div>
  );
}

function CoachBtn({ label, sub, tone }) {
  const map = {
    neutral: { bg: 'rgba(26,31,46,0.05)', fg: CS.parentInk, sub: CS.parentMuted },
    primary: { bg: '#3A2510', fg: '#FCEFD6', sub: 'rgba(252,239,214,0.7)' },
    warn:    { bg: '#E08A7B', fg: '#fff',   sub: 'rgba(255,255,255,0.85)' },
  }[tone];
  return (
    <div style={{ flex: 1, padding: '12px 12px', borderRadius: 16,
      background: map.bg, color: map.fg, textAlign: 'left' }}>
      <div style={{ fontSize: 13, fontWeight: 700 }}>{label}</div>
      <div style={{ fontSize: 10, color: map.sub, marginTop: 2 }}>{sub}</div>
    </div>
  );
}

Object.assign(window, { ParentYellowC });