/* ============================================================
   Case-study illustrations: abstract, on-brand, not photographic
   Each is a contained SVG that paints onto the dark art panel.
   ============================================================ */

function RoasGrowthArt() {
  // Bars climbing + ROAS multiplier overlay
  return (
    <svg viewBox="0 0 480 320" style={{ width: "100%", maxWidth: 480, position: "relative", zIndex: 1 }}>
      <defs>
        <linearGradient id="bar-g" x1="0" x2="0" y1="1" y2="0">
          <stop offset="0%" stopColor="#A7701F" stopOpacity="0.25" />
          <stop offset="100%" stopColor="#C98B3A" stopOpacity="1" />
        </linearGradient>
      </defs>
      {/* Baseline */}
      <line x1="40" y1="260" x2="440" y2="260" stroke="#F6F2EC" strokeOpacity="0.18" strokeWidth="1" />
      {/* Bars */}
      {[
        [60, 200, 60],
        [140, 160, 100],
        [220, 110, 150],
        [300, 70, 190],
        [380, 30, 230],
      ].map(([x, y, h], i) => (
        <g key={i}>
          <rect x={x} y={y} width="40" height={h} fill="url(#bar-g)" rx="2" />
          <text
            x={x + 20}
            y={y - 10}
            textAnchor="middle"
            fontSize="10"
            fill="#F6F2EC"
            fillOpacity="0.6"
            fontFamily="JetBrains Mono, monospace"
          >
            {["1.0×", "1.6×", "2.2×", "2.8×", "3.2×"][i]}
          </text>
        </g>
      ))}
      {/* Trend curve */}
      <path
        d="M 80 240 Q 180 200 240 140 T 400 50"
        fill="none"
        stroke="#F6F2EC"
        strokeOpacity="0.85"
        strokeWidth="1.5"
        strokeDasharray="3 3"
      />
      {/* Big multiplier */}
      <text
        x="240"
        y="305"
        textAnchor="middle"
        fontSize="14"
        fill="#F6F2EC"
        fillOpacity="0.55"
        fontFamily="JetBrains Mono, monospace"
        letterSpacing="3"
      >
        ROAS · CAMPAIGN INDEX
      </text>
    </svg>
  );
}

function ProgrammaticInstallArt() {
  // Programmatic mesh with install pings
  return (
    <svg viewBox="0 0 460 300" style={{ width: "100%", maxWidth: 460, position: "relative", zIndex: 1 }}>
      <defs>
        <radialGradient id="ping" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#C98B3A" stopOpacity="0.8" />
          <stop offset="100%" stopColor="#C98B3A" stopOpacity="0" />
        </radialGradient>
      </defs>
      {/* DSP node center */}
      <circle cx="230" cy="150" r="46" fill="none" stroke="#F6F2EC" strokeOpacity="0.5" strokeWidth="1" />
      <circle cx="230" cy="150" r="28" fill="#0E1410" stroke="#C98B3A" strokeWidth="1.5" />
      <text x="230" y="146" textAnchor="middle" fontSize="9" fill="#F6F2EC" fillOpacity="0.85" fontFamily="JetBrains Mono, monospace" letterSpacing="2">DSP</text>
      <text x="230" y="160" textAnchor="middle" fontSize="8" fill="#C98B3A" fontFamily="JetBrains Mono, monospace" letterSpacing="2">BID</text>

      {/* Surrounding inventory nodes */}
      {[
        [60, 60], [170, 40], [290, 40], [400, 60],
        [40, 150], [420, 150],
        [60, 240], [170, 260], [290, 260], [400, 240],
      ].map(([x, y], i) => (
        <g key={i}>
          <line x1="230" y1="150" x2={x} y2={y} stroke="#F6F2EC" strokeOpacity="0.18" strokeWidth="0.75" />
          <circle cx={x} cy={y} r="14" fill="url(#ping)" />
          <circle cx={x} cy={y} r="5" fill={i % 3 === 0 ? "#C98B3A" : "#F6F2EC"} fillOpacity={i % 3 === 0 ? 1 : 0.85} />
        </g>
      ))}
      <text x="230" y="296" textAnchor="middle" fontSize="10" fill="#F6F2EC" fillOpacity="0.55" fontFamily="JetBrains Mono, monospace" letterSpacing="3">
        500K+ HIGH-QUALITY INSTALLS
      </text>
    </svg>
  );
}

function AffiliateMrrArt() {
  // Partner ladder feeding into MRR stack
  return (
    <svg viewBox="0 0 480 320" style={{ width: "100%", maxWidth: 480, position: "relative", zIndex: 1 }}>
      {/* Partner column */}
      {[40, 80, 120, 160, 200].map((y, i) => (
        <g key={i}>
          <circle cx="60" cy={y} r="6" fill="#F6F2EC" fillOpacity={0.4 + i * 0.12} />
          <text x="76" y={y + 4} fontSize="10" fill="#F6F2EC" fillOpacity="0.6" fontFamily="JetBrains Mono, monospace" letterSpacing="1.5">
            PARTNER {String(i + 1).padStart(2, "0")}
          </text>
          <line x1="180" y1={y} x2="280" y2={150 + (i - 2) * 4} stroke="#C98B3A" strokeOpacity={0.25 + i * 0.12} strokeWidth="1" />
        </g>
      ))}
      {/* Funnel point */}
      <circle cx="290" cy="150" r="10" fill="#C98B3A" />
      <line x1="300" y1="150" x2="360" y2="150" stroke="#F6F2EC" strokeOpacity="0.6" strokeWidth="1" />

      {/* MRR stack bars */}
      {[
        [380, 200, 36, "$420K"],
        [380, 160, 76, "$960K"],
        [380, 100, 136, "$2.1M"],
      ].map(([x, y, h, lbl], i) => (
        <g key={i}>
          <rect x={x} y={y} width="60" height={h} fill="none" stroke="#F6F2EC" strokeOpacity={0.3 + i * 0.25} strokeWidth="1" />
          <text x={x + 30} y={y + 16} textAnchor="middle" fontSize="11" fill={i === 2 ? "#C98B3A" : "#F6F2EC"} fillOpacity={i === 2 ? 1 : 0.6} fontFamily="Instrument Serif, serif" fontStyle="italic">
            {lbl}
          </text>
        </g>
      ))}
      <text x="240" y="296" textAnchor="middle" fontSize="10" fill="#F6F2EC" fillOpacity="0.55" fontFamily="JetBrains Mono, monospace" letterSpacing="3">
        QUALIFIED SIGNUPS → NEW MRR
      </text>
    </svg>
  );
}

function CpaReductionArt() {
  // Two trend lines: spend flat, enrollments up; CPA dropping
  return (
    <svg viewBox="0 0 480 320" style={{ width: "100%", maxWidth: 480, position: "relative", zIndex: 1 }}>
      <defs>
        <linearGradient id="cpa-fill" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#C98B3A" stopOpacity="0.25" />
          <stop offset="100%" stopColor="#C98B3A" stopOpacity="0" />
        </linearGradient>
      </defs>
      {/* Grid lines */}
      {[80, 140, 200, 260].map((y) => (
        <line key={y} x1="40" y1={y} x2="440" y2={y} stroke="#F6F2EC" strokeOpacity="0.08" strokeWidth="1" />
      ))}
      {/* CPA falling */}
      <path d="M 40 90 L 120 110 L 200 150 L 280 200 L 360 240 L 440 260 L 440 280 L 40 280 Z" fill="url(#cpa-fill)" />
      <path d="M 40 90 L 120 110 L 200 150 L 280 200 L 360 240 L 440 260" fill="none" stroke="#C98B3A" strokeWidth="2" />
      {/* Enrollments rising */}
      <path d="M 40 240 L 120 220 L 200 180 L 280 130 L 360 90 L 440 60" fill="none" stroke="#F6F2EC" strokeOpacity="0.85" strokeWidth="1.5" strokeDasharray="3 3" />
      {/* Labels */}
      <text x="50" y="80" fontSize="9" fill="#C98B3A" fontFamily="JetBrains Mono, monospace" letterSpacing="1.5">CPA</text>
      <text x="400" y="50" fontSize="9" fill="#F6F2EC" fillOpacity="0.7" fontFamily="JetBrains Mono, monospace" letterSpacing="1.5">ENROLLMENTS</text>
      {/* Big delta */}
      <text x="240" y="180" textAnchor="middle" fontSize="36" fill="#F6F2EC" fontFamily="Instrument Serif, serif" fontStyle="italic" letterSpacing="-1">−68%</text>
      <text x="240" y="200" textAnchor="middle" fontSize="9" fill="#F6F2EC" fillOpacity="0.55" fontFamily="JetBrains Mono, monospace" letterSpacing="2">CPA</text>
      <text x="240" y="304" textAnchor="middle" fontSize="10" fill="#F6F2EC" fillOpacity="0.55" fontFamily="JetBrains Mono, monospace" letterSpacing="3">ENROLLMENT EFFICIENCY OVER TIME</text>
    </svg>
  );
}

Object.assign(window, { RoasGrowthArt, ProgrammaticInstallArt, AffiliateMrrArt, CpaReductionArt });
