// illustrations.jsx — hand-drawn SVG motifs for Nina Bambina

const LogoMark = ({ size = 40 }) => {
  // Uploaded logo PNG (transparent bg). `size` = height in px; width auto-scales.
  // Native aspect: 496 × 224 ≈ 2.21:1.
  return (
    <img
      src="charity/logo-transparent.png"
      alt="Nina Bambina Foundation"
      style={{ height: size, width: 'auto', display: 'block' }}
    />
  );
};

const SunriseHorizon = ({ width = 460 }) => (
  <svg viewBox="0 0 460 360" width={width} style={{ maxWidth: '100%', height: 'auto' }} aria-hidden="true">
    <defs>
      <linearGradient id="sky" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="#fef3c7"/>
        <stop offset="0.55" stopColor="#fbcfe8"/>
        <stop offset="1" stopColor="#fecdd3"/>
      </linearGradient>
      <radialGradient id="sunG" cx="0.5" cy="0.5">
        <stop offset="0" stopColor="#fff7ed"/>
        <stop offset="0.4" stopColor="#fda4af"/>
        <stop offset="1" stopColor="#fb7185"/>
      </radialGradient>
      <linearGradient id="hill" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="#fda4af"/>
        <stop offset="1" stopColor="#fb7185"/>
      </linearGradient>
    </defs>
    <rect x="20" y="20" width="420" height="320" rx="210" fill="url(#sky)"/>
    {[...Array(8)].map((_,i)=>{
      const a = (i/7)*Math.PI;
      const x1 = 230 + Math.cos(a-Math.PI)*130;
      const y1 = 250 + Math.sin(a-Math.PI)*130;
      const x2 = 230 + Math.cos(a-Math.PI)*200;
      const y2 = 250 + Math.sin(a-Math.PI)*200;
      return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#fda4af" strokeWidth="1.2" strokeLinecap="round" opacity="0.5"/>;
    })}
    <circle cx="230" cy="250" r="68" fill="url(#sunG)"/>
    <path d="M20 250 Q120 230 230 250 T440 250" stroke="#fb7185" strokeWidth="1.4" fill="none" strokeLinecap="round"/>
    <path d="M20 260 Q120 245 230 260 T440 260" stroke="#fda4af" strokeWidth="1" fill="none" strokeLinecap="round" opacity="0.7"/>
    <path d="M20 340 Q100 305 230 318 Q360 332 440 310 L440 340 Z" fill="url(#hill)" opacity="0.85"/>
    <path d="M90 140 q20 -8 40 0 q-8 -14 -20 -14 q-12 0 -20 14 z" fill="#fff" opacity="0.8"/>
    <path d="M330 100 q22 -10 44 0 q-10 -16 -22 -16 q-14 0 -22 16 z" fill="#fff" opacity="0.7"/>
    <g opacity="0.8">
      <circle cx="120" cy="80" r="1.5" fill="#fff"/>
      <circle cx="370" cy="180" r="1.2" fill="#fff"/>
      <circle cx="380" cy="60" r="1.5" fill="#fff"/>
      <circle cx="70" cy="200" r="1.2" fill="#fff"/>
    </g>
    <path d="M60 320 q4 -30 0 -60" stroke="#fb7185" strokeWidth="1" fill="none" opacity="0.4"/>
    <path d="M400 320 q-4 -30 0 -60" stroke="#fb7185" strokeWidth="1" fill="none" opacity="0.4"/>
  </svg>
);

const PaperBirds = ({ width = 380 }) => (
  <svg viewBox="0 0 380 320" width={width} style={{ maxWidth:'100%', height: 'auto' }} aria-hidden="true">
    <defs>
      <radialGradient id="haze" cx="0.5" cy="0.6">
        <stop offset="0" stopColor="#fff7ed"/>
        <stop offset="1" stopColor="#fecdd3" stopOpacity="0"/>
      </radialGradient>
    </defs>
    <circle cx="190" cy="180" r="130" fill="url(#haze)"/>
    <circle cx="190" cy="200" r="60" fill="#fda4af" opacity="0.6"/>
    <circle cx="190" cy="200" r="42" fill="#fb7185"/>
    {[0,1,2,3,4].map(i=>(
      <path key={i} d={`M${60+i*60} ${120 - i*18} q 12 -10 24 0 q -6 6 -12 6 q -6 0 -12 -6`}
        stroke="#3f2a2e" strokeWidth="1.2" fill="none" strokeLinecap="round" opacity={0.8 - i*0.1}/>
    ))}
    <path d="M20 260 q 80 -20 170 -20 q 90 0 170 20" stroke="#fb7185" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
  </svg>
);

const RayBurst = () => (
  <svg viewBox="0 0 800 600" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
    {[...Array(22)].map((_,i)=>{
      const a = (i/22) * Math.PI - Math.PI;
      const x2 = 400 + Math.cos(a)*700;
      const y2 = 600 + Math.sin(a)*700;
      return <line key={i} x1="400" y1="600" x2={x2} y2={y2} stroke="#fda4af" strokeWidth="1" opacity="0.5"/>;
    })}
  </svg>
);

const ProgramIll = ({ kind }) => {
  if (kind === 'listening') return (
    <svg viewBox="0 0 100 100" width="84" height="84" aria-hidden="true">
      <circle cx="50" cy="50" r="46" fill="#fff1f2"/>
      <path d="M28 55 q 0 -18 22 -18 q 22 0 22 18 v 12 q 0 4 -4 4 h -4 v -14 h 6" stroke="#fb7185" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M28 55 v 12 q 0 4 4 4 h 4 v -14 h -6" stroke="#fb7185" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M78 44 q 4 6 0 14" stroke="#fda4af" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
      <path d="M82 40 q 6 10 0 22" stroke="#fda4af" strokeWidth="1.4" fill="none" strokeLinecap="round" opacity="0.6"/>
    </svg>
  );
  if (kind === 'hands') return (
    <svg viewBox="0 0 100 100" width="84" height="84" aria-hidden="true">
      <circle cx="50" cy="50" r="46" fill="#fff1f2"/>
      <path d="M22 62 q 8 -14 18 -14 q 6 0 10 4 q 4 -4 10 -4 q 10 0 18 14" stroke="#fb7185" strokeWidth="2" fill="none" strokeLinecap="round"/>
      <path d="M30 62 q 0 12 10 14 l 20 0 q 10 -2 10 -14" stroke="#fb7185" strokeWidth="2" fill="none" strokeLinecap="round"/>
      <path d="M50 35 l 3 6 l 6 1 l -5 5 l 1 7 l -5 -3 l -5 3 l 1 -7 l -5 -5 l 6 -1 z" fill="#fda4af"/>
    </svg>
  );
  if (kind === 'candle') return (
    <svg viewBox="0 0 100 100" width="84" height="84" aria-hidden="true">
      <circle cx="50" cy="50" r="46" fill="#fff1f2"/>
      <path d="M50 28 q -6 8 -6 14 q 0 6 6 6 q 6 0 6 -6 q 0 -6 -6 -14 z" fill="#fda4af"/>
      <circle cx="50" cy="40" r="3" fill="#fff7ed"/>
      <rect x="44" y="52" width="12" height="22" rx="1" fill="none" stroke="#fb7185" strokeWidth="2"/>
      <path d="M36 76 h 28" stroke="#fb7185" strokeWidth="2" strokeLinecap="round"/>
      <path d="M32 80 q 18 -4 36 0" stroke="#fda4af" strokeWidth="1.4" fill="none" strokeLinecap="round" opacity="0.6"/>
    </svg>
  );
  return null;
};

Object.assign(window, { LogoMark, SunriseHorizon, PaperBirds, RayBurst, ProgramIll });
