// Schematic line-art illustrations for pillar cards
// 1.5px stroke, ink + orange emphasis, no fills.

const SCHEMATIC_STROKE = "currentColor";
const SCHEMATIC_ACCENT = "#F95015";
const SCHEMATIC_MUTED = "#A1A9C3";
const SCHEMATIC_SURFACE = "var(--pillar-surface, #fff)";

// PCB macro illustration — hero art
function PCBHero() {
  return (
    <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="pcb-bg" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#0B1030"/>
          <stop offset="1" stopColor="#050715"/>
        </linearGradient>
        <pattern id="pcb-grid" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M20 0 L0 0 0 20" fill="none" stroke="rgba(249,80,21,0.08)" strokeWidth="0.5"/>
        </pattern>
      </defs>
      <rect width="400" height="500" fill="url(#pcb-bg)"/>
      <rect width="400" height="500" fill="url(#pcb-grid)"/>

      {/* traces */}
      <g stroke="#F95015" strokeWidth="1.5" fill="none" opacity="0.75">
        <path d="M40 60 L40 200 L120 200 L120 340 L260 340 L260 460"/>
        <path d="M80 60 L80 160 L180 160 L180 220"/>
        <path d="M360 80 L360 180 L280 180 L280 280 L340 280 L340 420"/>
        <path d="M200 40 L200 120 L240 120 L240 220 L320 220"/>
      </g>
      <g stroke="rgba(255,255,255,0.22)" strokeWidth="1" fill="none">
        <path d="M20 260 L160 260 L160 400 L40 400"/>
        <path d="M300 60 L220 60 L220 100"/>
        <path d="M60 440 L220 440 L220 380"/>
      </g>

      {/* ICs */}
      <g>
        <rect x="140" y="160" width="80" height="100" rx="3" fill="#141933" stroke="#2A3254" strokeWidth="1"/>
        <text x="180" y="215" textAnchor="middle" fill="rgba(255,255,255,0.7)" fontFamily="JetBrains Mono" fontSize="10" fontWeight="600">MCU</text>
        <text x="180" y="228" textAnchor="middle" fill="rgba(255,255,255,0.4)" fontFamily="JetBrains Mono" fontSize="7">ESP32-S3</text>
        {Array.from({length:10}).map((_,i)=> <rect key={`t${i}`} x={142+i*8} y="258" width="4" height="6" fill="#C9A368"/>)}
        {Array.from({length:10}).map((_,i)=> <rect key={`b${i}`} x={142+i*8} y="154" width="4" height="6" fill="#C9A368"/>)}
      </g>
      <g>
        <rect x="260" y="90" width="60" height="60" rx="3" fill="#141933" stroke="#2A3254"/>
        <text x="290" y="125" textAnchor="middle" fill="rgba(255,255,255,0.6)" fontFamily="JetBrains Mono" fontSize="9">BUCK</text>
      </g>
      <g>
        <rect x="40" y="300" width="90" height="36" rx="3" fill="#141933" stroke="#2A3254"/>
        <text x="85" y="323" textAnchor="middle" fill="rgba(255,255,255,0.6)" fontFamily="JetBrains Mono" fontSize="9">USB-C</text>
      </g>

      {/* passives */}
      {[[60,110],[100,110],[240,170],[240,200],[310,310],[80,370],[140,440]].map(([x,y],i)=>
        <rect key={i} x={x} y={y} width="12" height="6" rx="1" fill="#3a1e10" stroke="#F95015" strokeWidth="0.5"/>
      )}

      {/* via pads */}
      {[[200,300],[300,200],[120,280],[350,360],[60,240],[250,420]].map(([x,y],i)=>
        <circle key={i} cx={x} cy={y} r="3" fill="none" stroke="#F95015" strokeWidth="1" opacity="0.8"/>
      )}

      {/* crosshair overlay */}
      <g stroke="#F95015" strokeWidth="1" opacity="0.6">
        <line x1="180" y1="0" x2="180" y2="500" strokeDasharray="2 4"/>
        <line x1="0" y1="210" x2="400" y2="210" strokeDasharray="2 4"/>
      </g>
      <circle cx="180" cy="210" r="18" fill="none" stroke="#F95015" strokeWidth="1.5"/>
    </svg>
  );
}

// Integrate — simple ring link between Altium chip and atopile glyph
function IntegrationArt() {
  return (
    <svg viewBox="0 0 320 100" xmlns="http://www.w3.org/2000/svg">
      {/* single connecting arc */}
      <g fill="none" strokeWidth="1.25" strokeLinecap="round">
        <path d="M96 50 C 140 22, 200 78, 244 50" stroke={SCHEMATIC_ACCENT}/>
      </g>

      {/* left: Altium chip (rounded square with pins) */}
      <g fill="none" stroke={SCHEMATIC_STROKE} strokeWidth="1.25" strokeLinecap="round">
        <rect x="36" y="30" width="40" height="40" rx="6"/>
        <path d="M40 38 L40 62 M72 38 L72 62"/>
        <path d="M30 40 L36 40 M30 50 L36 50 M30 60 L36 60"/>
        <path d="M76 40 L82 40 M76 50 L82 50 M76 60 L82 60"/>
      </g>
      <text x="56" y="90" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill={SCHEMATIC_MUTED}>Altium</text>

      {/* right: atopile glyph, larger, no ring */}
      <image href={(window.__resources && window.__resources.logoIcon) || "/enterprise/assets/logo-icon.svg"} x="244" y="30" width="40" height="40"/>
      <text x="264" y="90" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill={SCHEMATIC_MUTED}>atopile</text>

      {/* endpoints */}
      <circle cx="96" cy="50" r="2" fill={SCHEMATIC_ACCENT}/>
      <circle cx="244" cy="50" r="2" fill={SCHEMATIC_ACCENT}/>
    </svg>
  );
}

// Version — simple curvy git graph with main + feature branch
function VersionArt() {
  return (
    <svg viewBox="0 0 320 100" xmlns="http://www.w3.org/2000/svg">
      {/* main line */}
      <path d="M20 62 L300 62" fill="none" stroke={SCHEMATIC_STROKE} strokeWidth="1.25" strokeLinecap="round"/>
      {/* branch — curvy fork out and merge back */}
      <path d="M80 62 C 110 62, 110 32, 140 32 L 200 32 C 230 32, 230 62, 260 62"
            fill="none" stroke={SCHEMATIC_ACCENT} strokeWidth="1.25" strokeLinecap="round"/>

      {/* main dots */}
      {[20, 80, 140, 200, 260, 300].map((x, i) => (
        <circle key={`m${i}`} cx={x} cy="62" r="3.5" fill={SCHEMATIC_SURFACE} stroke={SCHEMATIC_STROKE} strokeWidth="1.25"/>
      ))}
      {/* branch dots */}
      {[140, 200].map((x, i) => (
        <circle key={`b${i}`} cx={x} cy="32" r="3.5" fill={SCHEMATIC_SURFACE} stroke={SCHEMATIC_ACCENT} strokeWidth="1.25"/>
      ))}
      {/* release tag */}
      <circle cx="260" cy="62" r="5.5" fill={SCHEMATIC_ACCENT}/>

      <text x="20" y="82" fontFamily="JetBrains Mono" fontSize="9" fill={SCHEMATIC_MUTED}>main</text>
      <text x="140" y="22" fontFamily="JetBrains Mono" fontSize="9" fill={SCHEMATIC_MUTED}>feat/power</text>
      <text x="260" y="82" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill={SCHEMATIC_ACCENT} fontWeight="600">v2.3.0</text>
    </svg>
  );
}

// Agent / tool-calling
function AgentArt() {
  return (
    <svg viewBox="0 0 320 100" xmlns="http://www.w3.org/2000/svg">
      <g fill="none" stroke={SCHEMATIC_STROKE} strokeWidth="1.5">
        <circle cx="160" cy="50" r="22"/>
        <text x="160" y="54" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fill={SCHEMATIC_ACCENT} fontWeight="700">AGENT</text>
      </g>
      {[
        {x:30, y:22, label:"build"},
        {x:30, y:78, label:"sim"},
        {x:260, y:22, label:"parts"},
        {x:260, y:78, label:"tests"},
      ].map((t,i)=>(
        <g key={i}>
          <rect x={t.x-22} y={t.y-10} width="44" height="20" rx="3" fill="none" stroke={SCHEMATIC_MUTED} strokeWidth="1.25"/>
          <text x={t.x} y={t.y+4} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill={SCHEMATIC_STROKE}>{t.label}</text>
        </g>
      ))}
      <g stroke={SCHEMATIC_ACCENT} strokeWidth="1.25" fill="none" strokeDasharray="3 3" opacity="0.7">
        <path d="M55 28 L138 42"/>
        <path d="M55 78 L138 58"/>
        <path d="M238 28 L182 42"/>
        <path d="M238 78 L182 58"/>
      </g>
    </svg>
  );
}

// Constraint / solver
function CheckArt() {
  return (
    <svg viewBox="0 0 320 100" xmlns="http://www.w3.org/2000/svg">
      <g fontFamily="JetBrains Mono" fontSize="10">
        {[
          {y:16, l:"V_io: 3.3V ± 5%", v:"3.31V", ok:true},
          {y:38, l:"I_max < 800mA", v:"620mA", ok:true},
          {y:60, l:"bus 0x48 unique", v:"collision", ok:false},
          {y:82, l:"R_pullup ≥ 2.2kΩ", v:"4.7kΩ", ok:true},
        ].map((r,i)=>(
          <g key={i}>
            <text x="12" y={r.y+4} fill={SCHEMATIC_STROKE}>{r.l}</text>
            <text x="220" y={r.y+4} fill={r.ok ? "#00C08B" : "#FF2D55"} fontWeight="600">{r.ok ? "✓" : "✕"} {r.v}</text>
          </g>
        ))}
      </g>
    </svg>
  );
}

// Parametric — config knob curves into a generated module
function ParametricArt() {
  return (
    <svg viewBox="0 0 320 100" xmlns="http://www.w3.org/2000/svg">
      {/* config knob on left */}
      <circle cx="48" cy="50" r="22" fill="none" stroke={SCHEMATIC_STROKE} strokeWidth="1.25"/>
      <line x1="48" y1="50" x2="60" y2="38" stroke={SCHEMATIC_ACCENT} strokeWidth="1.5" strokeLinecap="round"/>
      {/* tick marks */}
      {[0, 45, 90, 135, 180, 225, 270, 315].map((a, i) => {
        const rad = (a * Math.PI) / 180;
        const x1 = 48 + Math.cos(rad) * 18;
        const y1 = 50 + Math.sin(rad) * 18;
        const x2 = 48 + Math.cos(rad) * 22;
        const y2 = 50 + Math.sin(rad) * 22;
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={SCHEMATIC_MUTED} strokeWidth="1"/>;
      })}
      <text x="48" y="90" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill={SCHEMATIC_MUTED}>cfg</text>

      {/* curvy flow into output */}
      <path d="M76 50 C 130 50, 160 50, 196 50"
            fill="none" stroke={SCHEMATIC_ACCENT} strokeWidth="1.25" strokeLinecap="round"/>
      <circle cx="76" cy="50" r="2" fill={SCHEMATIC_ACCENT}/>
      <circle cx="196" cy="50" r="2" fill={SCHEMATIC_ACCENT}/>

      {/* generated output: stacked rounded cards */}
      <g>
        <rect x="204" y="26" width="94" height="20" rx="10" fill="none" stroke={SCHEMATIC_STROKE} strokeWidth="1.25"/>
        <text x="251" y="40" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill={SCHEMATIC_STROKE}>schematic</text>

        <rect x="204" y="50" width="94" height="20" rx="10" fill="none" stroke={SCHEMATIC_STROKE} strokeWidth="1.25"/>
        <text x="251" y="64" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill={SCHEMATIC_STROKE}>BOM</text>

        <rect x="204" y="74" width="94" height="20" rx="10" fill={SCHEMATIC_ACCENT} stroke={SCHEMATIC_ACCENT} strokeWidth="1.25"/>
        <text x="251" y="88" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#fff" fontWeight="600">tests ✓</text>
      </g>
    </svg>
  );
}

// Part search — clean search field with a single accented result
function PartsArt() {
  return (
    <svg viewBox="0 0 320 100" xmlns="http://www.w3.org/2000/svg">
      {/* search bar */}
      <rect x="14" y="16" width="292" height="26" rx="13"
            fill={SCHEMATIC_SURFACE} stroke={SCHEMATIC_STROKE} strokeWidth="1.25"/>
      {/* magnifier */}
      <g fill="none" stroke={SCHEMATIC_MUTED} strokeWidth="1.25" strokeLinecap="round">
        <circle cx="30" cy="29" r="4.5"/>
        <line x1="33.5" y1="32.5" x2="37" y2="36"/>
      </g>
      <text x="44" y="33" fontFamily="JetBrains Mono" fontSize="10" fill={SCHEMATIC_STROKE}>low-noise buck, 3.3V, &lt; 1µA Iq</text>

      {/* result row — rounded card */}
      <g>
        <rect x="14" y="58" width="292" height="30" rx="15"
              fill="none" stroke={SCHEMATIC_ACCENT} strokeWidth="1.25"/>
        <circle cx="30" cy="73" r="3" fill={SCHEMATIC_ACCENT}/>
        <text x="44" y="77" fontFamily="JetBrains Mono" fontSize="10" fill={SCHEMATIC_STROKE} fontWeight="600">TPS62840DLCR</text>
        <text x="148" y="77" fontFamily="JetBrains Mono" fontSize="9" fill={SCHEMATIC_MUTED}>60nA · AVL matched</text>
        <text x="292" y="77" textAnchor="end" fontFamily="JetBrains Mono" fontSize="9" fill={SCHEMATIC_ACCENT} fontWeight="600">in stock</text>
      </g>
    </svg>
  );
}

// Automation-first — streams flow right together, then smoothly split to CLI / Python / MCP
function CIArt() {
  return (
    <svg viewBox="0 0 320 100" xmlns="http://www.w3.org/2000/svg">
      {/* atopile glyph, no ring */}
      <image href={(window.__resources && window.__resources.logoIcon) || "/enterprise/assets/logo-icon.svg"} x="24" y="30" width="40" height="40"/>
      <text x="44" y="90" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill={SCHEMATIC_MUTED}>atopile</text>

      {/* three streams — ride together through the first half, split after x=160 */}
      <g fill="none" strokeWidth="1.5" strokeLinecap="round" stroke={SCHEMATIC_ACCENT}>
        <path d="M64 50 C 110 50, 130 50, 160 50 C 200 50, 210 28, 244 28"/>
        <path d="M64 50 C 110 50, 140 50, 180 50 C 220 50, 224 50, 244 50"/>
        <path d="M64 50 C 110 50, 130 50, 160 50 C 200 50, 210 72, 244 72"/>
      </g>

      {/* right: three endpoints */}
      {[
        { y: 28, label: "CLI" },
        { y: 50, label: "Python" },
        { y: 72, label: "MCP" },
      ].map((n, i) => (
        <g key={i}>
          <circle cx="244" cy={n.y} r="2.5" fill={SCHEMATIC_ACCENT}/>
          <text x="256" y={n.y + 4} fontFamily="JetBrains Mono" fontSize="11" fill={SCHEMATIC_STROKE} fontWeight="600">{n.label}</text>
        </g>
      ))}
    </svg>
  );
}

// On-prem — atopile ring inside a VPC boundary, external world blocked
function OnPremArt() {
  return (
    <svg viewBox="0 0 320 100" xmlns="http://www.w3.org/2000/svg">
      {/* VPC boundary — rounded, soft */}
      <rect x="70" y="14" width="180" height="72" rx="12"
            fill="none" stroke={SCHEMATIC_STROKE} strokeWidth="1.25" strokeDasharray="4 3"/>
      <text x="160" y="28" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill={SCHEMATIC_MUTED}>your.vpc</text>

      {/* atopile glyph inside, no ring */}
      <image href={(window.__resources && window.__resources.logoIcon) || "/enterprise/assets/logo-icon.svg"} x="115" y="42" width="32" height="32"/>
      <text x="131" y="82" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill={SCHEMATIC_MUTED}>atopile</text>

      {/* data node inside, connected */}
      <circle cx="195" cy="58" r="14" fill="none" stroke={SCHEMATIC_STROKE} strokeWidth="1.25"/>
      <g fill="none" stroke={SCHEMATIC_STROKE} strokeWidth="1.25" strokeLinecap="round">
        <ellipse cx="195" cy="54" rx="8" ry="3"/>
        <path d="M187 54 L187 62 C 187 64, 203 64, 203 62 L 203 54"/>
      </g>
      <path d="M151 58 L181 58" fill="none" stroke={SCHEMATIC_ACCENT} strokeWidth="1.25" strokeLinecap="round"/>

      {/* external — blocked */}
      <g stroke={SCHEMATIC_MUTED} strokeWidth="1.25" strokeLinecap="round" fill="none">
        <path d="M14 50 C 30 50, 50 50, 60 50"/>
        <path d="M260 50 C 270 50, 290 50, 306 50"/>
      </g>
      {/* block markers */}
      <g stroke={SCHEMATIC_MUTED} strokeWidth="1.25" strokeLinecap="round">
        <line x1="56" y1="46" x2="64" y2="54"/>
        <line x1="64" y1="46" x2="56" y2="54"/>
        <line x1="256" y1="46" x2="264" y2="54"/>
        <line x1="264" y1="46" x2="256" y2="54"/>
      </g>
      <text x="36" y="42" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill={SCHEMATIC_MUTED}>outside</text>
      <text x="284" y="42" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill={SCHEMATIC_MUTED}>outside</text>
    </svg>
  );
}

// AI-native — a .ato code snippet with a subtle AI accent tag (no card border)
function AINativeArt() {
  return (
    <svg viewBox="0 0 320 100" xmlns="http://www.w3.org/2000/svg">
      {/* filename */}
      <text x="14" y="22" fontFamily="JetBrains Mono" fontSize="10" fill={SCHEMATIC_MUTED}>rail.ato</text>

      {/* AI tag */}
      <g>
        <rect x="258" y="12" width="48" height="16" rx="8" fill={SCHEMATIC_ACCENT}/>
        <text x="282" y="23" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill="#fff" fontWeight="700" letterSpacing="0.1em">AI</text>
        <circle cx="268" cy="20" r="1.75" fill="#fff"/>
      </g>

      {/* code lines */}
      <g fontFamily="JetBrains Mono" fontSize="12">
        <text x="14" y="48" fill={SCHEMATIC_STROKE}>
          <tspan fill={SCHEMATIC_ACCENT}>module</tspan> Rail5V:
        </text>
        <text x="26" y="66" fill={SCHEMATIC_STROKE}>
          v_out = <tspan fill={SCHEMATIC_ACCENT}>5V</tspan> ± <tspan fill={SCHEMATIC_ACCENT}>2%</tspan>
        </text>
        <text x="26" y="84" fill={SCHEMATIC_STROKE}>
          i_max = <tspan fill={SCHEMATIC_ACCENT}>2A</tspan>
        </text>
      </g>

      {/* cursor */}
      <rect x="118" y="74" width="2" height="12" fill={SCHEMATIC_ACCENT}>
        <animate attributeName="opacity" values="1;0;1" dur="1.2s" repeatCount="indefinite"/>
      </rect>
    </svg>
  );
}

// Data layer — streams ride together out of atopile core, then smoothly split to 3 consumers
function DataLayerArt() {
  return (
    <svg viewBox="0 0 320 100" xmlns="http://www.w3.org/2000/svg">
      {/* atopile glyph on left, no ring */}
      <image href={(window.__resources && window.__resources.logoIcon) || "/enterprise/assets/logo-icon.svg"} x="20" y="30" width="40" height="40"/>
      <text x="40" y="90" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9" fill={SCHEMATIC_MUTED}>atopile</text>

      {/* three streams — travel together, then split */}
      <g fill="none" strokeWidth="1.5" strokeLinecap="round" stroke={SCHEMATIC_ACCENT}>
        <path d="M60 50 C 100 50, 140 50, 170 50 C 210 50, 220 22, 260 22"/>
        <path d="M60 50 C 100 50, 150 50, 190 50 C 230 50, 230 50, 260 50"/>
        <path d="M60 50 C 100 50, 140 50, 170 50 C 210 50, 220 78, 260 78"/>
      </g>

      {/* consumers */}
      {[
        { y: 22, label: "Slack" },
        { y: 50, label: "Sourcing" },
        { y: 78, label: "Field techs" },
      ].map((n, i) => (
        <g key={i}>
          <circle cx="260" cy={n.y} r="2.5" fill={SCHEMATIC_ACCENT}/>
          <text x="272" y={n.y + 4} fontFamily="JetBrains Mono" fontSize="11" fill={SCHEMATIC_STROKE} fontWeight="600">{n.label}</text>
        </g>
      ))}
    </svg>
  );
}

Object.assign(window, {
  PCBHero, IntegrationArt, VersionArt, AgentArt, CheckArt,
  ParametricArt, PartsArt, CIArt, OnPremArt, AINativeArt, DataLayerArt
});
