// ═══════════════════════════════════════════════════════════════════
// src/components/HeroArt.jsx
// Abstract SVG background art for the Hero panel.
// Variants: "elegant" (default) | "minimal"
// Pure presentational — receives variant via prop, emits SVG only.
// ═══════════════════════════════════════════════════════════════════

function HeroArt({ variant }) {
  if (variant === "minimal") {
    return (
      <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice">
        <defs>
          <linearGradient id="gA" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%"   stopColor="var(--green-100)"/>
            <stop offset="100%" stopColor="var(--cream-100)"/>
          </linearGradient>
          <linearGradient id="gB" x1="0" y1="1" x2="1" y2="0">
            <stop offset="0%"   stopColor="var(--green-700)" stopOpacity=".25"/>
            <stop offset="100%" stopColor="var(--green-800)" stopOpacity=".05"/>
          </linearGradient>
        </defs>
        <rect width="400" height="500" fill="url(#gA)"/>
        <circle cx="200" cy="260" r="140" fill="url(#gB)"/>
        <circle cx="200" cy="260" r="90" fill="none" stroke="var(--green-800)" strokeWidth=".8" opacity=".25"/>
        <path d="M80 360 Q200 440 320 360" fill="none" stroke="var(--green-800)" strokeWidth="1.2" opacity=".4"/>
      </svg>
    );
  }

  // elegant (default) — layered organic shapes with gold accent
  return (
    <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="hgA" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%"   stopColor="var(--green-100)"/>
          <stop offset="100%" stopColor="var(--cream-100)"/>
        </linearGradient>
        <radialGradient id="hgB" cx="0.7" cy="0.3" r="0.7">
          <stop offset="0%"   stopColor="var(--green-700)" stopOpacity=".4"/>
          <stop offset="100%" stopColor="var(--green-800)" stopOpacity="0"/>
        </radialGradient>
        <linearGradient id="hgC" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%"   stopColor="var(--gold-600)" stopOpacity=".5"/>
          <stop offset="100%" stopColor="var(--gold-600)" stopOpacity="0"/>
        </linearGradient>
      </defs>
      <rect width="400" height="500" fill="url(#hgA)"/>
      <circle cx="280" cy="160" r="180" fill="url(#hgB)"/>
      <path d="M0 380 Q120 320 240 380 T480 380 L480 500 L0 500 Z" fill="var(--green-800)" opacity=".18"/>
      <path d="M0 420 Q140 360 280 420 T560 420 L560 500 L0 500 Z" fill="var(--green-700)" opacity=".22"/>
      <circle cx="180" cy="240" r="110" fill="none" stroke="var(--cream-100)" strokeWidth="1" opacity=".6"/>
      <circle cx="180" cy="240" r="70"  fill="url(#hgC)" opacity=".7"/>
      <circle cx="180" cy="240" r="36"  fill="var(--cream-100)" opacity=".85"/>
      <path d="M120 280 Q180 320 240 280" fill="none" stroke="var(--green-800)" strokeWidth="1.4" opacity=".5"/>
      <g opacity=".7">
        <circle cx="330" cy="100" r="3"   fill="var(--gold-600)"/>
        <circle cx="60"  cy="180" r="2"   fill="var(--green-700)"/>
        <circle cx="340" cy="380" r="2.5" fill="var(--gold-600)"/>
      </g>
    </svg>
  );
}
