// ─────────────────────────────────────────────────────────────
// icons.jsx — Casita, KIDORA blocks, Sabrina avatar, sun, mic
// ─────────────────────────────────────────────────────────────

const KIDORA_COLORS = ['#e84040', '#f07d20', '#e8c62a', '#2db54c', '#20b8c8', '#1a2d5a'];

function CasitaSVG({ size = 96 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
      {/* sun */}
      <circle cx="76" cy="20" r="6" fill="#e8c62a" stroke="#1a2d5a" strokeWidth="2"/>
      <g stroke="#1a2d5a" strokeWidth="2" strokeLinecap="round">
        <line x1="76" y1="6" x2="76" y2="10"/>
        <line x1="86" y1="10" x2="83" y2="13"/>
        <line x1="90" y1="20" x2="86" y2="20"/>
        <line x1="86" y1="30" x2="83" y2="27"/>
        <line x1="66" y1="30" x2="69" y2="27"/>
        <line x1="62" y1="20" x2="66" y2="20"/>
        <line x1="66" y1="10" x2="69" y2="13"/>
      </g>
      {/* house — pitched roof */}
      <path d="M14 50 L48 22 L82 50 L82 84 L14 84 Z"
            fill="#fdf8ee" stroke="#1a2d5a" strokeWidth="2.4"
            strokeLinejoin="round"/>
      {/* roof line accent */}
      <path d="M14 50 L48 22 L82 50" fill="none" stroke="#1a2d5a" strokeWidth="2.4"
            strokeLinejoin="round"/>
      {/* left window */}
      <rect x="22" y="56" width="14" height="14" fill="white" stroke="#1a2d5a" strokeWidth="2"/>
      <line x1="29" y1="56" x2="29" y2="70" stroke="#1a2d5a" strokeWidth="1.5"/>
      <line x1="22" y1="63" x2="36" y2="63" stroke="#1a2d5a" strokeWidth="1.5"/>
      {/* right window */}
      <rect x="60" y="56" width="14" height="14" fill="white" stroke="#1a2d5a" strokeWidth="2"/>
      <line x1="67" y1="56" x2="67" y2="70" stroke="#1a2d5a" strokeWidth="1.5"/>
      <line x1="60" y1="63" x2="74" y2="63" stroke="#1a2d5a" strokeWidth="1.5"/>
      {/* door */}
      <path d="M42 84 L42 66 Q42 64 44 64 L52 64 Q54 64 54 66 L54 84"
            fill="#fdf8ee" stroke="#1a2d5a" strokeWidth="2"/>
      {/* heart on door */}
      <path d="M48 74 c-1.5 -2 -4 -2 -4 0.5 c0 2 2 3.5 4 5 c2 -1.5 4 -3 4 -5 c0 -2.5 -2.5 -2.5 -4 -0.5z"
            fill="#e84040"/>
      {/* chimney */}
      <rect x="64" y="32" width="6" height="10" fill="#fdf8ee" stroke="#1a2d5a" strokeWidth="2"/>
    </svg>
  );
}

function KidoraBlocks({ size = 28, animated = true }) {
  const letters = ['K', 'I', 'D', 'O', 'R', 'A'];
  return (
    <div className="kidora-blocks" style={{ display: 'flex', gap: 4 }}>
      {letters.map((L, i) => (
        <div
          key={i}
          className="blk"
          style={{
            width: size,
            height: size,
            background: KIDORA_COLORS[i],
            animationDelay: animated ? `${i * 60}ms` : '0ms',
          }}
        >
          {L}
        </div>
      ))}
    </div>
  );
}

function BrandMark() {
  return (
    <div className="brand">
      <div className="brand-mark">
        {['K','I','D','O','R','A'].map((L, i) => (
          <div key={i} className="blk" style={{ background: KIDORA_COLORS[i] }}>{L}</div>
        ))}
      </div>
    </div>
  );
}

// Avatar circle for Sabrina (the casita as a tiny mark)
function SabrinaAvatar({ size = 36, light = false }) {
  return (
    <div style={{
      width: size, height: size,
      borderRadius: '50%',
      background: light ? 'white' : '#1a2d5a',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      flexShrink: 0,
      boxShadow: '0 1px 4px rgba(26,45,90,0.18)',
    }}>
      <svg width={size*0.62} height={size*0.62} viewBox="0 0 24 24" fill="none">
        <path d="M3 13 L12 5 L21 13 L21 21 L3 21 Z"
              fill={light ? '#1a2d5a' : '#fdf8ee'}
              stroke={light ? '#1a2d5a' : '#fdf8ee'}
              strokeWidth="1.5" strokeLinejoin="round"/>
        <circle cx="19" cy="6" r="2" fill="#e8c62a"/>
        <path d="M10 17 c-0.6 -0.9 -1.8 -0.9 -1.8 0.2 c0 1 1 1.6 1.8 2.3 c0.8 -0.7 1.8 -1.4 1.8 -2.3 c0 -1.1 -1.2 -1.1 -1.8 -0.2z"
              fill="#e84040"/>
      </svg>
    </div>
  );
}

function ParentAvatar({ initial = '?', color = '#2db54c' }) {
  return (
    <div style={{
      width: 28, height: 28,
      borderRadius: '50%',
      background: color,
      color: 'white',
      fontFamily: 'Plus Jakarta Sans, sans-serif',
      fontWeight: 800,
      fontSize: 13,
      display: 'flex',
      alignItems: 'center', justifyContent: 'center',
      flexShrink: 0,
    }}>{initial}</div>
  );
}

function PlayIcon({ size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M8 5v14l11-7z"/>
    </svg>
  );
}

function SendIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
      <path d="M3.5 11.5 L20 4 L13 21 L11 13 L3.5 11.5 Z"
            stroke="currentColor" strokeWidth="2"
            strokeLinejoin="round" strokeLinecap="round"/>
    </svg>
  );
}

function MicIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
      <rect x="9" y="3" width="6" height="12" rx="3" stroke="currentColor" strokeWidth="2"/>
      <path d="M5 11 a7 7 0 0 0 14 0 M12 18 v3 M9 21 h6"
            stroke="currentColor" strokeWidth="2" strokeLinecap="round" fill="none"/>
    </svg>
  );
}

function EyeIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
      <path d="M2 12 s4 -7 10 -7 s10 7 10 7 s-4 7 -10 7 s-10 -7 -10 -7z"
            stroke="currentColor" strokeWidth="1.8" fill="none"/>
      <circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.8" fill="none"/>
    </svg>
  );
}

// ─── Action / chip icons (Phosphor-inspired, stroke 1.6) ─────
function MoneyIcon({ size = 18, color = '#2db54c' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <rect x="2.5" y="6" width="19" height="12" rx="2" stroke={color} strokeWidth="1.6"/>
      <circle cx="12" cy="12" r="2.6" stroke={color} strokeWidth="1.6"/>
      <circle cx="6" cy="12" r="0.9" fill={color}/>
      <circle cx="18" cy="12" r="0.9" fill={color}/>
    </svg>
  );
}

function FolderIcon({ size = 18, color = '#1a2d5a' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M3 7 a1.5 1.5 0 0 1 1.5 -1.5 h4.5 l2 2 h9.5 a1.5 1.5 0 0 1 1.5 1.5 v9 a1.5 1.5 0 0 1 -1.5 1.5 h-16 a1.5 1.5 0 0 1 -1.5 -1.5 z"
            stroke={color} strokeWidth="1.6" strokeLinejoin="round" fill="none"/>
      <path d="M8 13 h8 M8 16 h5" stroke={color} strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  );
}

function AlertIcon({ size = 18, color = '#e84040' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 3 L22 20 H2 Z" stroke={color} strokeWidth="1.6" strokeLinejoin="round" fill="none"/>
      <line x1="12" y1="10" x2="12" y2="14.5" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
      <circle cx="12" cy="17" r="1" fill={color}/>
    </svg>
  );
}

function NoteIcon({ size = 18, color = '#f07d20' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M5 3 h11 l4 4 v12 a2 2 0 0 1 -2 2 h-13 a2 2 0 0 1 -2 -2 v-14 a2 2 0 0 1 2 -2 z"
            stroke={color} strokeWidth="1.6" strokeLinejoin="round" fill="none"/>
      <path d="M8 12 h8 M8 15 h6 M8 9 h5" stroke={color} strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  );
}

function PlayCircleIcon({ size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="11" fill="#f07d20"/>
      <path d="M10 8.5 L16 12 L10 15.5 Z" fill="white"/>
    </svg>
  );
}

function ClockIcon({ size = 14, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="9" stroke={color} strokeWidth="1.8" fill="none"/>
      <path d="M12 7 v5 l3 2.5" stroke={color} strokeWidth="1.8" strokeLinecap="round" fill="none"/>
    </svg>
  );
}

function HeadphonesIcon({ size = 14, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M4 14 a8 8 0 0 1 16 0" stroke={color} strokeWidth="1.8" fill="none" strokeLinecap="round"/>
      <rect x="3" y="13" width="4" height="7" rx="1.4" stroke={color} strokeWidth="1.8" fill="none"/>
      <rect x="17" y="13" width="4" height="7" rx="1.4" stroke={color} strokeWidth="1.8" fill="none"/>
    </svg>
  );
}

function HandIcon({ size = 14, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M8 13 v-7 a1.5 1.5 0 0 1 3 0 v6 M11 12 v-8 a1.5 1.5 0 0 1 3 0 v8 M14 12 v-6 a1.5 1.5 0 0 1 3 0 v8 M17 9 a1.5 1.5 0 0 1 3 0 v6 a6 6 0 0 1 -12 0 v-3 a1.5 1.5 0 0 1 3 0"
            stroke={color} strokeWidth="1.6" strokeLinejoin="round" fill="none"/>
    </svg>
  );
}

function ArrowRightIcon({ size = 14, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M5 12 h14 M13 6 l6 6 -6 6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
    </svg>
  );
}

function RestartIcon({ size = 14, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M21 12 a9 9 0 1 1 -3 -6.7" stroke={color} strokeWidth="1.8" strokeLinecap="round" fill="none"/>
      <path d="M21 4 v5 h-5" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
    </svg>
  );
}

Object.assign(window, {
  KIDORA_COLORS, CasitaSVG, KidoraBlocks, BrandMark,
  SabrinaAvatar, ParentAvatar, PlayIcon, SendIcon, MicIcon, EyeIcon,
  MoneyIcon, FolderIcon, AlertIcon, NoteIcon, PlayCircleIcon,
  ClockIcon, HeadphonesIcon, HandIcon, ArrowRightIcon, RestartIcon,
});