// illustrations.jsx — Bold, chunky SVG illustrations + iconography.
// All shapes use currentColor for "ink" stroke + named CSS vars for fills.

/* ─────────────  HERO  ───────────── */
function HeroIllustration() {
  return (
    <svg viewBox="0 0 520 480" width="100%" style={{ maxWidth: 520, display: 'block' }} aria-hidden="true">
      <defs>
        <pattern id="grid" width="22" height="22" patternUnits="userSpaceOnUse">
          <path d="M 22 0 L 0 0 0 22" fill="none" stroke="var(--ink)" strokeOpacity=".08" strokeWidth="1" />
        </pattern>
      </defs>

      {/* dotted bg circle */}
      <circle cx="260" cy="240" r="220" fill="var(--bg-soft)" stroke="var(--line)" strokeWidth="2" />
      <rect x="40" y="20" width="440" height="440" fill="url(#grid)" />

      {/* floating sparkles */}
      <g stroke="var(--line)" strokeWidth="2.5" fill="var(--sun)">
        <path d="M 70 90 L 78 98 L 70 106 L 62 98 Z" />
        <path d="M 430 110 L 438 118 L 430 126 L 422 118 Z" transform="rotate(15 430 118)" />
        <path d="M 80 380 L 88 388 L 80 396 L 72 388 Z" />
      </g>

      {/* speech bubble */}
      <g transform="translate(56 60)">
        <rect x="0" y="0" width="132" height="56" rx="14" fill="var(--sky)" stroke="var(--line)" strokeWidth="2.5" />
        <path d="M 34 56 L 44 72 L 54 56 Z" fill="var(--sky)" stroke="var(--line)" strokeWidth="2.5" strokeLinejoin="round" />
        <text x="66" y="34" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="700" fontSize="16" fill="#fff">Atölyeler</text>
      </g>

      {/* robot/AI character */}
      <g transform="translate(150 130)">
        {/* antenna */}
        <line x1="110" y1="-10" x2="110" y2="20" stroke="var(--line)" strokeWidth="3" />
        <circle cx="110" cy="-14" r="7" fill="var(--coral)" stroke="var(--line)" strokeWidth="2.5" />
        {/* head */}
        <rect x="30" y="20" width="160" height="130" rx="24" fill="var(--coral)" stroke="var(--line)" strokeWidth="3" />
        {/* face screen */}
        <rect x="50" y="42" width="120" height="78" rx="12" fill="#1C1330" stroke="var(--line)" strokeWidth="2.5" />
        {/* LED eyes */}
        <rect x="74" y="68" width="20" height="16" rx="5" fill="var(--sky)" />
        <rect x="126" y="68" width="20" height="16" rx="5" fill="var(--sky)" />
        {/* calm mouth line */}
        <path d="M 92 102 L 128 102" fill="none" stroke="var(--sky)" strokeWidth="3" strokeLinecap="round" />
        {/* body */}
        <rect x="60" y="150" width="100" height="50" rx="12" fill="var(--sun)" stroke="var(--line)" strokeWidth="3" />
        <circle cx="84" cy="175" r="6" fill="var(--line)" />
        <circle cx="110" cy="175" r="6" fill="var(--line)" />
        <circle cx="136" cy="175" r="6" fill="var(--line)" />
        {/* arms */}
        <rect x="6" y="60" width="28" height="14" rx="7" fill="var(--coral)" stroke="var(--line)" strokeWidth="2.5" />
        <rect x="186" y="60" width="28" height="14" rx="7" fill="var(--coral)" stroke="var(--line)" strokeWidth="2.5" />
      </g>

      {/* float orbs */}
      <g>
        <circle cx="80" cy="240" r="22" fill="var(--leaf)" stroke="var(--line)" strokeWidth="2.5" />
        <text x="80" y="248" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="700" fontSize="20" fill="#fff">{`{ }`}</text>
      </g>
      <g>
        <circle cx="440" cy="280" r="26" fill="var(--plum)" stroke="var(--line)" strokeWidth="2.5" />
        <path d="M 432 282 L 440 290 L 452 274" fill="none" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" />
      </g>
      <g transform="translate(420 380)">
        <rect x="0" y="0" width="40" height="40" rx="10" fill="var(--sun)" stroke="var(--line)" strokeWidth="2.5" />
        <circle cx="20" cy="20" r="6" fill="var(--line)" />
        <circle cx="20" cy="20" r="11" fill="none" stroke="var(--line)" strokeWidth="2.5" />
      </g>

      {/* hand-drawn arrow */}
      <g stroke="var(--line)" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round">
        <path d="M 350 420 C 360 420 365 405 360 395" />
        <path d="M 356 388 L 360 395 L 367 392" />
      </g>
    </svg>);

}

/* ─────────────  PROFILE ICONS (5 yetkinlik)  ───────────── */
function ProfileIcon({ name, color = 'var(--coral)' }) {
  const stroke = { fill: 'none', stroke: 'var(--line)', strokeWidth: 2.5, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const inner = { fill: color, stroke: 'var(--line)', strokeWidth: 2.5, strokeLinejoin: 'round' };
  switch (name) {
    case 'compass':return (
        <svg viewBox="0 0 64 64" width="48" height="48">
        <circle cx="32" cy="32" r="24" {...inner} />
        <path d="M 22 22 L 38 26 L 32 42 L 26 38 Z" fill="#fff" {...stroke} />
        <circle cx="32" cy="32" r="3" fill="var(--line)" />
      </svg>);

    case 'wrench':return (
        <svg viewBox="0 0 64 64" width="48" height="48">
        <circle cx="32" cy="32" r="26" {...inner} />
        <path d="M 22 42 L 36 28 M 38 30 a 6 6 0 1 0 -4 -4 L 24 36 a 4 4 0 0 0 -2 4 l -4 2 a 2 2 0 0 0 0 2 l 2 2 a 2 2 0 0 0 2 0 l 2 -4 a 4 4 0 0 0 4 -2" fill="#fff" {...stroke} />
      </svg>);

    case 'magnifier':return (
        <svg viewBox="0 0 64 64" width="48" height="48">
        <circle cx="32" cy="32" r="26" {...inner} />
        <circle cx="28" cy="28" r="9" fill="#fff" {...stroke} />
        <line x1="35" y1="35" x2="44" y2="44" {...stroke} strokeWidth="3.5" />
        <path d="M 25 26 Q 28 22 32 25" {...stroke} />
      </svg>);

    case 'scales':return (
        <svg viewBox="0 0 64 64" width="48" height="48">
        <circle cx="32" cy="32" r="26" {...inner} />
        <path d="M 32 14 V 50 M 20 22 H 44 M 20 22 L 14 36 a 6 4 0 0 0 12 0 Z M 44 22 L 38 36 a 6 4 0 0 0 12 0 Z" fill="#fff" {...stroke} />
        <circle cx="32" cy="50" r="4" fill="#fff" {...stroke} />
      </svg>);

    case 'spark':return (
        <svg viewBox="0 0 64 64" width="48" height="48">
        <circle cx="32" cy="32" r="26" {...inner} />
        <path d="M 32 12 L 36 28 L 52 32 L 36 36 L 32 52 L 28 36 L 12 32 L 28 28 Z" fill="#fff" {...stroke} />
      </svg>);

    default:return null;
  }
}

/* ─────────────  SAFETY ICONS  ───────────── */
function SafetyIcon({ name }) {
  const s = { fill: 'none', stroke: 'var(--line)', strokeWidth: 2.5, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'shield':return (
        <svg viewBox="0 0 40 40" width="32" height="32">
        <path d="M 20 4 L 34 10 V 22 Q 34 32 20 38 Q 6 32 6 22 V 10 Z" fill="var(--sky)" {...s} />
        <path d="M 14 20 L 18 24 L 26 16" stroke="#fff" {...s} strokeWidth="3" />
      </svg>);

    case 'lock':return (
        <svg viewBox="0 0 40 40" width="32" height="32">
        <rect x="8" y="18" width="24" height="18" rx="3" fill="var(--coral)" {...s} />
        <path d="M 13 18 V 12 a 7 7 0 0 1 14 0 V 18" {...s} />
        <circle cx="20" cy="27" r="3" fill="#fff" {...s} />
      </svg>);

    case 'compass':return (
        <svg viewBox="0 0 40 40" width="32" height="32">
        <circle cx="20" cy="20" r="14" fill="var(--leaf)" {...s} />
        <path d="M 14 14 L 23 17 L 20 26 L 17 23 Z" fill="#fff" {...s} />
      </svg>);

    case 'heart':return (
        <svg viewBox="0 0 40 40" width="32" height="32">
        <path d="M 20 33 C 6 24 6 13 13 11 c 4 -1 6 2 7 4 c 1 -2 3 -5 7 -4 c 7 2 7 13 -7 22 Z" fill="var(--rose)" {...s} />
      </svg>);

    case 'sparkle':return (
        <svg viewBox="0 0 40 40" width="32" height="32">
        <path d="M 20 4 L 24 16 L 36 20 L 24 24 L 20 36 L 16 24 L 4 20 L 16 16 Z" fill="var(--sun)" {...s} />
      </svg>);

    case 'cup':return (
        <svg viewBox="0 0 40 40" width="32" height="32">
        <path d="M 8 14 H 28 V 24 a 6 6 0 0 1 -6 6 H 14 a 6 6 0 0 1 -6 -6 Z" fill="var(--plum)" {...s} />
        <path d="M 28 17 H 33 a 4 4 0 0 1 0 8 H 28" {...s} />
        <path d="M 12 10 Q 13 7 14 10 M 18 10 Q 19 7 20 10 M 24 10 Q 25 7 26 10" {...s} />
      </svg>);

    default:return null;
  }
}

/* ─────────────  Pentagonal "Five Big Ideas" diagram  ───────────── */
function PentagonDiagram({ items, onSelect, active }) {
  // 5 nodes around pentagon vertices, all connected
  const cx = 280,cy = 280,R = 200;
  const nodes = items.map((it, i) => {
    const a = -Math.PI / 2 + i * 2 * Math.PI / 5;
    return { ...it, x: cx + R * Math.cos(a), y: cy + R * Math.sin(a) };
  });
  const colorVar = (c) => `var(--${c})`;

  return (
    <svg viewBox="0 0 560 560" width="100%" style={{ maxWidth: 560 }} aria-hidden="true">
      {/* center "AI" hub */}
      <circle cx={cx} cy={cy} r="64" fill="var(--bg-soft)" stroke="var(--line)" strokeWidth="2.5" />
      <text x={cx} y={cy - 4} textAnchor="middle" fontFamily="var(--font-display)" fontWeight="700" fontSize="22" fill="var(--ink)">AI</text>
      <text x={cx} y={cy + 18} textAnchor="middle" fontFamily="var(--font-body)" fontSize="11" fill="var(--ink-soft)">5 Büyük Fikir</text>

      {/* connect all-to-all */}
      <g stroke="var(--line)" strokeWidth="1.6" strokeOpacity="0.4">
        {nodes.map((a, i) =>
        nodes.map((b, j) =>
        j > i ? <line key={`${i}-${j}`} x1={a.x} y1={a.y} x2={b.x} y2={b.y} strokeDasharray="3 5" /> : null
        )
        )}
      </g>

      {/* nodes */}
      {nodes.map((n, i) =>
      <g key={i}
      style={{ cursor: 'pointer', transition: 'transform .2s' }}
      onClick={() => onSelect && onSelect(i)}
      transform={`translate(${n.x} ${n.y}) ${active === i ? 'scale(1.08)' : ''}`}>
          <circle cx="0" cy="0" r="48" fill={colorVar(n.color)} stroke="var(--line)" strokeWidth={active === i ? 4 : 2.5} />
          <text x="0" y="-6" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="700" fontSize="18" fill="#fff">{n.n}</text>
          <text x="0" y="14" textAnchor="middle" fontFamily="var(--font-body)" fontWeight="600" fontSize="10" fill="#fff">
            {n.name.split(' ')[0].toUpperCase()}
          </text>
        </g>
      )}
    </svg>);

}

/* ─────────────  Logo  ───────────── */
function Logo({ size = 36 }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      <svg viewBox="0 0 40 40" width={size} height={size}>
        <rect x="2" y="2" width="36" height="36" rx="10" fill="var(--coral)" stroke="var(--line)" strokeWidth="2.5" />
        <path d="M 11 28 L 11 12 L 19 12 M 11 20 L 17 20 M 24 12 L 24 28 L 31 28" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, letterSpacing: '-0.02em' }}>FutureLabs - AI Creators

      </span>
    </span>);

}

/* ─────────────  Squiggle / decorations  ───────────── */
function Squiggle({ color = 'var(--sun)', w = 120, h = 14 }) {
  return (
    <svg viewBox="0 0 120 14" width={w} height={h} aria-hidden="true">
      <path d="M 0 7 Q 15 0 30 7 T 60 7 T 90 7 T 120 7" fill="none" stroke={color} strokeWidth="4" strokeLinecap="round" />
    </svg>);

}

function StarBurst({ color = 'var(--sun)', size = 28 }) {
  return (
    <svg viewBox="0 0 40 40" width={size} height={size} aria-hidden="true">
      <path d="M 20 2 L 23 14 L 38 17 L 27 24 L 32 38 L 20 30 L 8 38 L 13 24 L 2 17 L 17 14 Z"
      fill={color} stroke="var(--line)" strokeWidth="2" strokeLinejoin="round" />
    </svg>);

}

Object.assign(window, { HeroIllustration, ProfileIcon, SafetyIcon, PentagonDiagram, Logo, Squiggle, StarBurst });