/* Isometric chip illustrations for the 3 bots. */

const ChipBase = ({ accent, children, label }) => (
  <svg viewBox="0 0 480 380" xmlns="http://www.w3.org/2000/svg" className="chip-svg">
    <defs>
      <linearGradient id={`top-${label}`} x1="0" x2="1" y1="0" y2="1">
        <stop offset="0" stopColor="#1a1a20" />
        <stop offset="1" stopColor="#0a0a0e" />
      </linearGradient>
      <linearGradient id={`side-${label}`} x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="#16161c" />
        <stop offset="1" stopColor="#040406" />
      </linearGradient>
      <linearGradient id={`right-${label}`} x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="#0e0e13" />
        <stop offset="1" stopColor="#020203" />
      </linearGradient>
      <radialGradient id={`glow-${label}`} cx="0.5" cy="0.5" r="0.5">
        <stop offset="0" stopColor={accent} stopOpacity="0.55" />
        <stop offset="1" stopColor={accent} stopOpacity="0" />
      </radialGradient>
      <filter id={`soft-${label}`} x="-20%" y="-20%" width="140%" height="140%">
        <feGaussianBlur stdDeviation="1.2" />
      </filter>
    </defs>

    <ellipse cx="240" cy="320" rx="200" ry="22" fill={`url(#glow-${label})`} />
    <path d="M 60 200 L 240 280 L 240 340 L 60 260 Z" fill={`url(#side-${label})`} stroke="rgba(255,255,255,0.06)" strokeWidth="0.8" />
    <path d="M 420 200 L 240 280 L 240 340 L 420 260 Z" fill={`url(#right-${label})`} stroke="rgba(255,255,255,0.06)" strokeWidth="0.8" />
    <path d="M 240 120 L 420 200 L 240 280 L 60 200 Z" fill={`url(#top-${label})`} stroke="rgba(255,255,255,0.14)" strokeWidth="0.9" />
    <path d="M 240 132 L 410 200 L 240 268 L 70 200 Z" fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth="0.6" />

    {Array.from({ length: 9 }).map((_, i) => {
      const t = (i + 1) / 10;
      const lx = 60 + (240 - 60) * t, ly = 200 + (280 - 200) * t;
      const rx = 240 + (420 - 240) * t, ry = 280 + (200 - 280) * t;
      return (
        <g key={i}>
          <line x1={lx} y1={ly} x2={lx - 14} y2={ly - 6} stroke="rgba(255,255,255,0.22)" strokeWidth="1.1" />
          <line x1={rx} y1={ry} x2={rx + 14} y2={ry - 6} stroke="rgba(255,255,255,0.22)" strokeWidth="1.1" />
        </g>
      );
    })}

    <g style={{ transform: "translate(150px, 160px) matrix(1, 0.45, -1, 0.45, 0, 0)" }}>
      {children}
    </g>

    <circle cx="240" cy="200" r="3" fill={accent} filter={`url(#soft-${label})`} />
    <circle cx="240" cy="200" r="1.5" fill={accent} />
  </svg>
);

const SidewayChip = ({ accent }) => (
  <ChipBase accent={accent} label="sideway">
    <line x1="0" y1="40" x2="180" y2="40" stroke={accent} strokeWidth="1.6" />
    <line x1="0" y1="20" x2="180" y2="20" stroke="rgba(255,255,255,0.35)" strokeWidth="0.8" strokeDasharray="3 4" />
    <line x1="0" y1="60" x2="180" y2="60" stroke="rgba(255,255,255,0.35)" strokeWidth="0.8" strokeDasharray="3 4" />
    <path d="M 0 40 Q 22 18, 45 40 T 90 40 T 135 40 T 180 40" fill="none" stroke={accent} strokeWidth="2" opacity="0.85" />
    <circle cx="22" cy="22" r="2" fill={accent} />
    <circle cx="67" cy="58" r="2" fill={accent} />
    <circle cx="112" cy="22" r="2" fill={accent} />
    <circle cx="157" cy="58" r="2" fill={accent} />
  </ChipBase>
);

const TrendChip = ({ accent }) => (
  <ChipBase accent={accent} label="trend">
    <line x1="0" y1="70" x2="180" y2="70" stroke="rgba(255,255,255,0.18)" strokeWidth="0.8" />
    <path d="M 0 70 L 0 60 L 30 60 L 30 50 L 60 50 L 60 38 L 90 38 L 90 25 L 120 25 L 120 12 L 150 12 L 150 -2 L 180 -2"
      fill="none" stroke={accent} strokeWidth="2" />
    <path d="M 175 -10 L 195 -2 L 175 6 Z" fill={accent} />
    <path d="M -4 78 L 184 8" stroke="rgba(255,255,255,0.28)" strokeWidth="0.7" strokeDasharray="3 3" />
  </ChipBase>
);

const PullbackChip = ({ accent }) => (
  <ChipBase accent={accent} label="pullback">
    <path d="M -4 70 L 184 -4" stroke="rgba(255,255,255,0.22)" strokeWidth="0.7" strokeDasharray="3 3" />
    <path d="M 0 70 L 30 50 L 50 60 L 80 35 L 100 48 L 130 18 L 150 28 L 180 -2"
      fill="none" stroke={accent} strokeWidth="2" />
    <path d="M 80 35 L 100 48" stroke="oklch(0.82 0.18 60)" strokeWidth="2.2" />
    <circle cx="100" cy="48" r="3.2" fill={accent} stroke="rgba(255,255,255,0.9)" strokeWidth="0.8" />
    <path d="M 100 48 L 108 36 L 105 36 L 110 30 L 115 36 L 112 36 L 108 44 Z" fill={accent} opacity="0.7" />
  </ChipBase>
);

const CHIPS = {
  sideway: SidewayChip,
  trend: TrendChip,
  pullback: PullbackChip
};
const ACCENTS = {
  sideway: "oklch(0.82 0.18 200)",
  trend: "oklch(0.84 0.17 145)",
  pullback: "oklch(0.82 0.18 35)"
};

Object.assign(window, { SidewayChip, TrendChip, PullbackChip, ChipBase, CHIPS, ACCENTS });
