/* ============================================================
   art.jsx — SVG placeholder art for Baanmari Studio
   Stylized "stripe" placeholders with subtle iconography
   ============================================================ */

const ART_HUES = {
  olive:    ["oklch(0.78 0.04 110)", "oklch(0.62 0.07 110)", "oklch(0.42 0.06 110)"],
  rose:     ["oklch(0.82 0.05 25)",  "oklch(0.66 0.10 25)",  "oklch(0.48 0.09 25)"],
  ochre:    ["oklch(0.80 0.06 70)",  "oklch(0.66 0.10 65)",  "oklch(0.48 0.09 55)"],
  violet:   ["oklch(0.78 0.05 320)", "oklch(0.60 0.09 310)", "oklch(0.40 0.08 300)"],
  teal:     ["oklch(0.78 0.05 200)", "oklch(0.60 0.08 200)", "oklch(0.40 0.07 200)"],
  cream:    ["oklch(0.96 0.012 75)", "oklch(0.88 0.025 65)", "oklch(0.70 0.04 60)"],
  brown:    ["oklch(0.82 0.025 60)", "oklch(0.62 0.05 55)",  "oklch(0.38 0.05 50)"],
};

function CourseArt({ hue = "olive", icon = "music" }) {
  const c = ART_HUES[hue] || ART_HUES.olive;
  const uid = React.useMemo(() => Math.random().toString(36).slice(2, 8), []);
  return (
    <svg viewBox="0 0 400 220" preserveAspectRatio="xMidYMid slice" className="course-art-svg">
      <defs>
        <pattern id={`stripe-${uid}`} width="14" height="14" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
          <line x1="0" y1="0" x2="0" y2="14" stroke={c[1]} strokeWidth="1.2" opacity="0.45" />
        </pattern>
      </defs>
      <rect width="400" height="220" fill={c[0]} />
      <rect width="400" height="220" fill={`url(#stripe-${uid})`} />
      <g transform="translate(200,110)" fill="none" stroke={c[2]} strokeWidth="2" opacity="0.85">
        <CourseIcon name={icon} />
      </g>
      <text x="20" y="206" fontFamily="IBM Plex Mono, monospace" fontSize="9" fill={c[2]} opacity="0.6" letterSpacing="0.15em">
        BAANMARI · {icon.toUpperCase()}
      </text>
    </svg>
  );
}

function CourseIcon({ name }) {
  switch (name) {
    case "piano":
      return (
        <g transform="translate(-60,-30)">
          <rect x="0" y="0" width="120" height="50" rx="3" fill="none" />
          <line x1="20" y1="0" x2="20" y2="50" />
          <line x1="40" y1="0" x2="40" y2="50" />
          <line x1="60" y1="0" x2="60" y2="50" />
          <line x1="80" y1="0" x2="80" y2="50" />
          <line x1="100" y1="0" x2="100" y2="50" />
          <rect x="12" y="0" width="14" height="30" fill="currentColor" opacity="0.18" />
          <rect x="52" y="0" width="14" height="30" fill="currentColor" opacity="0.18" />
          <rect x="72" y="0" width="14" height="30" fill="currentColor" opacity="0.18" />
        </g>
      );
    case "vocal":
      return (
        <g transform="translate(-30,-32)">
          <rect x="20" y="0" width="20" height="36" rx="10" />
          <path d="M 0,40 Q 30,64 60,40" />
          <line x1="30" y1="50" x2="30" y2="64" />
          <line x1="20" y1="64" x2="40" y2="64" />
        </g>
      );
    case "dance":
      return (
        <g transform="translate(-30,-36)">
          <circle cx="30" cy="8" r="8" />
          <path d="M 30,16 L 30,40 L 10,68 M 30,40 L 50,60 M 30,28 L 6,30 M 30,28 L 56,18" strokeLinecap="round" />
        </g>
      );
    case "drums":
      return (
        <g transform="translate(-40,-30)">
          <ellipse cx="40" cy="20" rx="40" ry="14" />
          <line x1="0" y1="20" x2="0" y2="50" />
          <line x1="80" y1="20" x2="80" y2="50" />
          <ellipse cx="40" cy="50" rx="40" ry="6" opacity="0.5" />
          <line x1="20" y1="0" x2="40" y2="-12" />
          <line x1="60" y1="0" x2="80" y2="-12" />
        </g>
      );
    case "guitar":
      return (
        <g transform="translate(-50,-12)">
          <circle cx="22" cy="20" r="20" />
          <circle cx="22" cy="20" r="6" fill="currentColor" opacity="0.18" />
          <rect x="40" y="14" width="50" height="12" rx="2" />
          <rect x="88" y="10" width="14" height="20" rx="2" />
          <line x1="40" y1="16" x2="88" y2="16" opacity="0.5" />
          <line x1="40" y1="20" x2="88" y2="20" opacity="0.5" />
          <line x1="40" y1="24" x2="88" y2="24" opacity="0.5" />
        </g>
      );
    case "music":
    default:
      return (
        <g>
          <path d="M -20,-20 L -20,20 M -20,-20 L 20,-26 L 20,16" fill="none" />
          <ellipse cx="-26" cy="20" rx="8" ry="6" fill="currentColor" opacity="0.6" />
          <ellipse cx="14" cy="16" rx="8" ry="6" fill="currentColor" opacity="0.6" />
        </g>
      );
  }
}

function HeroFrame({ kind = "piano-room" }) {
  // Stylized "studio photo" placeholder
  const palette = {
    "piano-room": ["oklch(0.82 0.03 60)", "oklch(0.62 0.05 55)", "oklch(0.42 0.06 50)", "oklch(0.92 0.018 75)"],
    "students":   ["oklch(0.84 0.05 45)", "oklch(0.66 0.10 35)", "oklch(0.46 0.08 30)", "oklch(0.94 0.012 70)"],
    "stage":      ["oklch(0.32 0.04 55)", "oklch(0.55 0.10 40)", "oklch(0.80 0.05 60)", "oklch(0.92 0.018 75)"],
  };
  const c = palette[kind] || palette["piano-room"];

  if (kind === "piano-room") {
    return (
      <svg viewBox="0 0 600 700" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%" }}>
        <rect width="600" height="700" fill={c[0]} />
        <rect y="500" width="600" height="200" fill={c[1]} opacity="0.4" />
        {/* Window light */}
        <rect x="80" y="60" width="180" height="260" fill={c[3]} opacity="0.7" />
        <line x1="170" y1="60" x2="170" y2="320" stroke={c[1]} strokeWidth="2" opacity="0.6" />
        <line x1="80" y1="190" x2="260" y2="190" stroke={c[1]} strokeWidth="2" opacity="0.6" />
        {/* Piano silhouette */}
        <rect x="180" y="420" width="320" height="60" fill={c[2]} />
        <rect x="200" y="440" width="280" height="14" fill={c[3]} />
        {Array.from({ length: 22 }).map((_, i) => (
          <rect key={i} x={200 + i * 12.7} y="440" width="3" height="14" fill={c[2]} />
        ))}
        <rect x="220" y="480" width="240" height="180" fill={c[2]} />
        {/* Sheet music stand */}
        <rect x="320" y="380" width="80" height="50" fill={c[3]} opacity="0.85" />
        <line x1="320" y1="395" x2="400" y2="395" stroke={c[1]} strokeWidth="1" />
        <line x1="320" y1="405" x2="400" y2="405" stroke={c[1]} strokeWidth="1" />
        <line x1="320" y1="415" x2="400" y2="415" stroke={c[1]} strokeWidth="1" />
        {/* Soft grain */}
        <rect width="600" height="700" fill="url(#grain1)" opacity="0.04" />
        <defs>
          <pattern id="grain1" width="3" height="3" patternUnits="userSpaceOnUse">
            <circle cx="1" cy="1" r="0.5" fill="black" />
          </pattern>
        </defs>
      </svg>
    );
  }

  if (kind === "students") {
    return (
      <svg viewBox="0 0 600 700" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%" }}>
        <rect width="600" height="700" fill={c[0]} />
        <circle cx="300" cy="320" r="180" fill={c[1]} opacity="0.25" />
        {/* Two figures */}
        <g>
          <circle cx="220" cy="280" r="42" fill={c[2]} />
          <rect x="170" y="320" width="100" height="160" rx="20" fill={c[2]} />
        </g>
        <g>
          <circle cx="380" cy="300" r="36" fill={c[1]} />
          <rect x="340" y="332" width="80" height="140" rx="18" fill={c[1]} />
        </g>
        {/* Guitar */}
        <ellipse cx="380" cy="430" rx="40" ry="50" fill={c[3]} opacity="0.8" />
        <rect x="378" y="350" width="6" height="80" fill={c[2]} />
      </svg>
    );
  }

  if (kind === "stage") {
    return (
      <svg viewBox="0 0 600 700" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%" }}>
        <rect width="600" height="700" fill={c[0]} />
        {/* Spotlights */}
        <path d="M 100,0 L 0,700 L 600,700 L 500,0 Z" fill={c[2]} opacity="0.15" />
        <path d="M 280,0 L 200,700 L 400,700 L 320,0 Z" fill={c[2]} opacity="0.2" />
        {/* Stage */}
        <rect y="500" width="600" height="200" fill={c[1]} opacity="0.6" />
        {/* Figure */}
        <circle cx="300" cy="380" r="34" fill={c[2]} />
        <rect x="262" y="412" width="76" height="120" rx="18" fill={c[2]} />
        {/* Microphone */}
        <rect x="296" y="320" width="8" height="60" fill={c[2]} />
        <ellipse cx="300" cy="320" rx="14" ry="18" fill={c[1]} />
      </svg>
    );
  }
}

function PortraitArt({ seed = 1 }) {
  const palettes = [
    ["oklch(0.82 0.04 60)", "oklch(0.62 0.06 55)", "oklch(0.4 0.06 50)"],
    ["oklch(0.84 0.05 25)", "oklch(0.66 0.10 25)", "oklch(0.46 0.09 25)"],
    ["oklch(0.78 0.05 320)", "oklch(0.6 0.09 310)", "oklch(0.4 0.08 300)"],
    ["oklch(0.80 0.06 70)", "oklch(0.66 0.10 65)", "oklch(0.48 0.09 55)"],
    ["oklch(0.78 0.05 200)", "oklch(0.6 0.08 200)", "oklch(0.40 0.07 200)"],
    ["oklch(0.78 0.04 110)", "oklch(0.62 0.07 110)", "oklch(0.42 0.06 110)"],
  ];
  const c = palettes[(seed - 1) % palettes.length];
  return (
    <svg viewBox="0 0 300 400" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%" }}>
      <rect width="300" height="400" fill={c[0]} />
      {/* head */}
      <ellipse cx="150" cy="170" rx="80" ry="90" fill={c[1]} />
      {/* shoulders */}
      <path d="M 30,400 Q 30,290 150,280 Q 270,290 270,400 Z" fill={c[2]} />
      {/* face highlight */}
      <ellipse cx="130" cy="160" rx="20" ry="36" fill="white" opacity="0.08" />
      {/* small monogram */}
      <text x="20" y="386" fontFamily="IBM Plex Mono, monospace" fontSize="9" fill="white" opacity="0.5" letterSpacing="0.15em">
        PORTRAIT · 0{seed}
      </text>
    </svg>
  );
}

function GalleryArt({ kind = 1 }) {
  const palettes = [
    ["oklch(0.82 0.04 60)", "oklch(0.5 0.06 50)"],
    ["oklch(0.66 0.10 25)", "oklch(0.42 0.08 25)"],
    ["oklch(0.78 0.05 110)", "oklch(0.5 0.07 110)"],
    ["oklch(0.78 0.06 200)", "oklch(0.46 0.07 200)"],
    ["oklch(0.86 0.04 70)", "oklch(0.62 0.08 60)"],
    ["oklch(0.74 0.06 320)", "oklch(0.46 0.08 310)"],
    ["oklch(0.84 0.05 45)", "oklch(0.58 0.08 35)"],
    ["oklch(0.78 0.05 25)", "oklch(0.48 0.07 25)"],
  ];
  const c = palettes[kind % palettes.length];
  // Different compositions per kind
  return (
    <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" style={{ width: "100%", height: "100%" }}>
      <rect width="400" height="300" fill={c[0]} />
      {kind % 4 === 0 && <circle cx="200" cy="150" r="100" fill={c[1]} opacity="0.5" />}
      {kind % 4 === 1 && (
        <g>
          <rect x="60" y="220" width="280" height="14" fill={c[1]} />
          {Array.from({ length: 16 }).map((_, i) => (
            <rect key={i} x={62 + i * 17.5} y="220" width="3" height="14" fill={c[0]} />
          ))}
        </g>
      )}
      {kind % 4 === 2 && (
        <g>
          <circle cx="120" cy="180" r="38" fill={c[1]} />
          <rect x="92" y="216" width="56" height="80" rx="14" fill={c[1]} />
          <circle cx="260" cy="160" r="34" fill={c[1]} opacity="0.7" />
          <rect x="234" y="190" width="52" height="80" rx="14" fill={c[1]} opacity="0.7" />
        </g>
      )}
      {kind % 4 === 3 && (
        <g>
          <ellipse cx="200" cy="170" rx="80" ry="20" fill={c[1]} />
          <line x1="200" y1="80" x2="200" y2="170" stroke={c[1]} strokeWidth="6" />
          <ellipse cx="200" cy="80" rx="22" ry="28" fill={c[1]} />
        </g>
      )}
    </svg>
  );
}

function ArticleCover({ kind = 1 }) {
  return <GalleryArt kind={kind + 2} />;
}

function MapArt() {
  return (
    <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice" className="map-svg">
      <rect width="400" height="500" fill="oklch(0.92 0.018 75)" />
      {/* roads */}
      <g stroke="oklch(0.78 0.025 70)" strokeWidth="20" fill="none" strokeLinecap="round">
        <line x1="-20" y1="200" x2="420" y2="180" />
        <line x1="120" y1="-20" x2="160" y2="520" />
        <line x1="240" y1="-20" x2="260" y2="520" />
        <line x1="-20" y1="380" x2="420" y2="360" />
      </g>
      <g stroke="white" strokeWidth="2" fill="none" strokeDasharray="6 6" strokeLinecap="round">
        <line x1="-20" y1="200" x2="420" y2="180" />
        <line x1="120" y1="-20" x2="160" y2="520" />
        <line x1="240" y1="-20" x2="260" y2="520" />
        <line x1="-20" y1="380" x2="420" y2="360" />
      </g>
      {/* blocks */}
      <rect x="20" y="20" width="80" height="60" rx="6" fill="oklch(0.86 0.025 70)" />
      <rect x="180" y="20" width="40" height="80" rx="6" fill="oklch(0.86 0.025 70)" />
      <rect x="280" y="40" width="100" height="60" rx="6" fill="oklch(0.86 0.025 70)" />
      <rect x="20" y="240" width="80" height="80" rx="6" fill="oklch(0.86 0.025 70)" />
      <rect x="180" y="220" width="40" height="100" rx="6" fill="oklch(0.86 0.025 70)" />
      <rect x="280" y="220" width="100" height="100" rx="6" fill="oklch(0.86 0.025 70)" />
      {/* park */}
      <rect x="20" y="400" width="80" height="80" rx="6" fill="oklch(0.84 0.05 130)" opacity="0.6" />
      <text x="40" y="445" fontFamily="IBM Plex Mono, monospace" fontSize="10" fill="oklch(0.4 0.04 130)" opacity="0.8">PARK</text>
      {/* labels */}
      <text x="20" y="180" fontFamily="IBM Plex Mono, monospace" fontSize="9" fill="oklch(0.4 0.04 60)" opacity="0.6">PHETKASEM 3</text>
      <text x="280" y="170" fontFamily="IBM Plex Mono, monospace" fontSize="9" fill="oklch(0.4 0.04 60)" opacity="0.6">SOI 25/1</text>
    </svg>
  );
}

Object.assign(window, { CourseArt, HeroFrame, PortraitArt, GalleryArt, ArticleCover, MapArt });