// child-shared.jsx — shared child-app bits

// Subtle keel glyph for child app — warmer tones, even softer than parent variant
function ChildKeelGlyph({ size = 16, ringColor = '#3D2914', dotColor = '#FFB37A',
  ringOpacity = 0.45, dotOpacity = 0.95 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: 'block' }}>
      <circle cx="12" cy="12" r="9.5" stroke={ringColor} strokeWidth="1.2"
        strokeDasharray="2 2.5" fill="none" opacity={ringOpacity}/>
      <circle cx="12" cy="12" r="3" fill={dotColor} opacity={dotOpacity}/>
    </svg>
  );
}

function ChildBreatheBubble({ label = 'breathe' }) {
  return (
    <div style={{
      position: 'absolute', top: 590, left: '50%', transform: 'translateX(-50%)',
      width: 90, height: 90, borderRadius: '50%',
      background: 'rgba(255,255,255,0.55)',
      backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
      border: '1px solid rgba(255,255,255,0.7)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: 13, fontWeight: 700, color: 'rgba(61,41,20,0.7)',
    }}>{label}</div>
  );
}

function ChildBottomActions({ primary = "Let's breathe", color = '#FF8FA3' }) {
  return (
    <div style={{ position: 'absolute', left: 0, right: 0, bottom: 36,
      padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
      <button style={{
        height: 60, borderRadius: 30, border: 0, background: color, color: '#fff',
        fontSize: 18, fontWeight: 800, fontFamily: FONT_CHILD,
        boxShadow: `0 12px 28px ${color}55`, letterSpacing: 0.2,
      }}>{primary}</button>
      <button style={{
        height: 44, background: 'transparent', border: 0,
        color: 'rgba(61,41,20,0.55)', fontSize: 15, fontWeight: 700,
        fontFamily: FONT_CHILD,
      }}>I'm okay</button>
    </div>
  );
}

Object.assign(window, { ChildKeelGlyph, ChildBreatheBubble, ChildBottomActions });