// child-sky.jsx — Variant A: illustrated sun + clouds metaphor

function SkyCloud({ x, y, scale = 1, color = '#fff', shadow = false }) {
  return (
    <svg width={180 * scale} height={80 * scale} viewBox="0 0 180 80"
      style={{ position: 'absolute', top: y, left: x,
        filter: shadow ? 'drop-shadow(0 6px 18px rgba(0,0,0,0.12))' : 'none' }}>
      <ellipse cx="38"  cy="52" rx="32" ry="24" fill={color}/>
      <ellipse cx="78"  cy="42" rx="40" ry="30" fill={color}/>
      <ellipse cx="120" cy="48" rx="34" ry="26" fill={color}/>
      <ellipse cx="148" cy="56" rx="24" ry="20" fill={color}/>
    </svg>
  );
}

function SkySun({ x, y, size = 130, dim = false }) {
  return (
    <div style={{ position: 'absolute', left: x, top: y,
      width: size, height: size, borderRadius: '50%',
      background: 'radial-gradient(circle at 35% 35%, #FFE89B 0%, #FFD66E 55%, #FFB37A 100%)',
      boxShadow: dim ? 'none' : '0 0 60px rgba(255,214,110,0.55)',
      opacity: dim ? 0.55 : 1 }}>
      {/* face */}
      <div style={{ position: 'absolute', top: '38%', left: '30%',
        width: 7, height: 7, borderRadius: 4, background: '#3D2914' }}/>
      <div style={{ position: 'absolute', top: '38%', right: '30%',
        width: 7, height: 7, borderRadius: 4, background: '#3D2914' }}/>
      <div style={{ position: 'absolute', top: '52%', left: '50%',
        transform: 'translateX(-50%)',
        width: 18, height: 9, borderTop: '2.5px solid #3D2914',
        borderRadius: '0 0 18px 18px' }}/>
    </div>
  );
}

function ChildSky({ zone = 'yellow' }) {
  const isRed = zone === 'red';
  const isGreen = zone === 'green';
  return (
    <div style={{ position: 'absolute', inset: 0,
      background: isGreen
        ? 'linear-gradient(180deg, #B6E0F2 0%, #FFE89B 60%, #FFF4E6 100%)'
        : isRed
        ? 'linear-gradient(180deg, #FFB37A 0%, #FF8FA3 100%)'
        : 'linear-gradient(180deg, #FFE4C4 0%, #FFF4E6 100%)',
      fontFamily: FONT_CHILD, color: CS.childInk, overflow: 'hidden' }}>

      {/* subtle keel mark — top-left, just below status bar */}
      <div style={{ position: 'absolute', top: 56, left: 22, zIndex: 5 }}>
        <ChildKeelGlyph size={26}
          ringColor={isRed ? '#FFF4E6' : '#3D2914'}
          dotColor={isRed ? '#FFE89B' : '#FFB37A'}
          ringOpacity={isRed ? 0.7 : 0.55}/>
      </div>

      {/* sun */}
      {isGreen && <SkySun x={130} y={140} size={170}/>}
      {!isRed && !isGreen && <SkySun x={236} y={120} size={130}/>}
      {isRed && <SkySun x={250} y={130} size={100} dim/>}

      {/* sun rays for green */}
      {isGreen && (
        <svg width="390" height="320" viewBox="0 0 390 320"
          style={{ position: 'absolute', top: 80, left: 0, opacity: 0.45 }}>
          {Array.from({length: 12}).map((_, i) => {
            const a = (i / 12) * Math.PI * 2;
            const x1 = 215 + Math.cos(a) * 110;
            const y1 = 145 + Math.sin(a) * 110;
            const x2 = 215 + Math.cos(a) * 150;
            const y2 = 145 + Math.sin(a) * 150;
            return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}
              stroke="#FFD66E" strokeWidth="3" strokeLinecap="round"/>;
          })}
        </svg>
      )}

      {/* tiny calm birds for green */}
      {isGreen && (
        <svg width="120" height="40" viewBox="0 0 120 40"
          style={{ position: 'absolute', top: 100, right: 30, opacity: 0.55 }}>
          <path d="M5 20 q 7 -10 14 0 q 7 -10 14 0" stroke="#3D2914"
            strokeWidth="2" fill="none" strokeLinecap="round"/>
          <path d="M55 12 q 6 -8 12 0 q 6 -8 12 0" stroke="#3D2914"
            strokeWidth="2" fill="none" strokeLinecap="round"/>
        </svg>
      )}

      {/* clouds */}
      {!isRed && !isGreen && (
        <>
          <SkyCloud x={-30} y={170} scale={0.85} color="#fff" shadow/>
          <SkyCloud x={130} y={240} scale={0.7}  color="#fff" shadow/>
          <SkyCloud x={20}  y={310} scale={1.0}  color="#fff" shadow/>
        </>
      )}
      {isGreen && (
        <SkyCloud x={250} y={300} scale={0.55} color="#fff" shadow/>
      )}
      {isRed && (
        <>
          <SkyCloud x={-40} y={180} scale={1.0}  color="#7A4858" shadow/>
          <SkyCloud x={140} y={230} scale={0.9}  color="#5E2E40" shadow/>
          <SkyCloud x={10}  y={300} scale={1.15} color="#7A4858" shadow/>
          {/* rain */}
          <svg width="100%" height="120" viewBox="0 0 390 120"
            preserveAspectRatio="none"
            style={{ position: 'absolute', top: 380, left: 0, opacity: 0.55 }}>
            {Array.from({length: 16}).map((_, i) => (
              <line key={i} x1={20 + i*24} y1={i%2 ? 8 : 30}
                x2={10 + i*24} y2={i%2 ? 65 : 90}
                stroke="#fff" strokeWidth="1.6" strokeLinecap="round"/>
            ))}
          </svg>
        </>
      )}

      {/* copy */}
      <div style={{ position: 'absolute', top: 470, left: 28, right: 28 }}>
        <div style={{ fontFamily: FONT_DISPLAY, fontSize: 44, fontWeight: 600,
          letterSpacing: -1, lineHeight: 1, marginBottom: 14,
          color: isRed ? '#fff' : CS.childInk }}>
          {isGreen ? 'Bright and clear.' : isRed ? 'Big feelings.' : 'Some clouds.'}
        </div>
        <div style={{ fontSize: 17, lineHeight: 1.45, maxWidth: 320,
          color: isRed ? 'rgba(255,255,255,0.92)' : 'rgba(61,41,20,0.78)' }}>
          {isGreen
            ? 'Your body feels even and calm. Nice work being you today.'
            : isRed
              ? 'Your body needs a break right now. Try a slow breath with me.'
              : 'Your body is feeling a little stormy. Want to slow it down?'}
        </div>
      </div>

      {/* green: streak chip instead of breathe bubble */}
      {isGreen ? (
        <div style={{ position: 'absolute', bottom: 130, left: 0, right: 0,
          display: 'flex', justifyContent: 'center' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '12px 18px', borderRadius: 999,
            background: 'rgba(255,255,255,0.7)', backdropFilter: 'blur(10px)',
            color: CS.childInk, fontSize: 14, fontWeight: 700,
            boxShadow: '0 8px 20px rgba(61,41,20,0.08)' }}>
            <span style={{ fontSize: 18 }}>☀</span>
            4 days of even keel
          </div>
        </div>
      ) : (
        <ChildBreatheBubble label="breathe"/>
      )}

      {/* bottom CTA */}
      {isGreen ? (
        <div style={{ position: 'absolute', bottom: 32, left: 20, right: 20 }}>
          <button style={{
            width: '100%', padding: '17px 20px', borderRadius: 28, border: 'none',
            background: '#FFF4E6', color: CS.childInk,
            border: '1.5px solid rgba(61,41,20,0.12)',
            fontFamily: FONT_CHILD, fontSize: 16, fontWeight: 700,
            letterSpacing: 0.2, cursor: 'pointer',
          }}>See my week</button>
        </div>
      ) : (
        <ChildBottomActions primary="Take a breath" color={isRed ? '#FF6B7E' : '#FF8FA3'}/>
      )}
    </div>
  );
}

Object.assign(window, { ChildSky });