// Code snippet components for the one-pager

function CodeHero() {
  return (
    <div className="code">
      <div className="code__chrome">
        <span className="code__dot"/><span className="code__dot"/><span className="code__dot"/>
        <span className="code__name">power.ato</span>
        <span className="code__badge">live</span>
      </div>
      <pre>
<span className="cm"># buck regulator · parametric</span>{"\n"}
<span className="kw">import</span> Power <span className="kw">from</span> <span className="st">"interfaces.ato"</span>{"\n"}
<span className="kw">import</span> Buck <span className="kw">from</span> <span className="st">"generics.buck"</span>{"\n"}
{"\n"}
<span className="kw">module</span> <span className="ty">Rail3v3</span>:{"\n"}
{"    "}power_in  = <span className="kw">new</span> Power{"\n"}
{"    "}power_out = <span className="kw">new</span> Power{"\n"}
{"    "}v_out: voltage = <span className="nm">3.3V</span> ± <span className="nm">2</span>%{"\n"}
{"    "}i_max: current = <span className="nm">2A</span>{"\n"}
{"\n"}
{"    "}reg = <span className="kw">new</span> <span className="ty">Buck</span>{"\n"}
{"    "}reg.v_out ~= v_out{"\n"}
{"    "}reg.i_max ~= i_max{"\n"}
{"\n"}
{"    "}<span className="kw">assert</span> power_in.voltage &gt; v_out + <span className="nm">0.5V</span>{"\n"}
{"    "}<span className="kw">assert</span> reg.efficiency &gt; <span className="nm">85</span>%
      </pre>
    </div>
  );
}

function CodeChecks() {
  return (
    <div className="panel">
      <div className="panel__tabs">
        <div className="panel__tab"><span className="panel__tab-dot panel__tab-dot--ok"/>power.ato</div>
        <div className="panel__tab active"><span className="panel__tab-dot"/>Checks</div>
        <div className="panel__tab"><span className="panel__tab-dot panel__tab-dot--ok"/>Simulation</div>
      </div>
      <div className="panel__titlebar">
        <span className="panel__titlebar-icon">✓</span>
        <span>verify · 142 assertions · 18 modules</span>
        <span className="panel__titlebar-badge panel__titlebar-badge--fail">1 failed</span>
      </div>
      <div className="panel__body panel__body--dense">
        <div className="check">
          <span className="check__icon check__icon--ok">✓</span>
          <span className="check__label">Voltage compatibility</span>
          <span className="check__count">78 / 78</span>
        </div>
        <div className="check">
          <span className="check__icon check__icon--ok">✓</span>
          <span className="check__label">Current budget</span>
          <span className="check__count">21 / 21</span>
        </div>
        <div className="check">
          <span className="check__icon check__icon--ok">✓</span>
          <span className="check__label">I²C bus uniqueness</span>
          <span className="check__count">14 / 14</span>
        </div>
        <div className="check">
          <span className="check__icon check__icon--ok">✓</span>
          <span className="check__label">Pull-up strength</span>
          <span className="check__count">9 / 9</span>
        </div>
        <div className="check check--fail">
          <span className="check__icon check__icon--fail">!</span>
          <span className="check__label">SPICE ripple &lt; 30mV</span>
          <span className="check__detail">42mV @ L1</span>
        </div>
        <div className="fix-hint">
          <span className="fix-hint__k">fix</span>
          <span className="fix-hint__v">Change <code>L1</code> from <code>4.7µH</code> → <code>6.8µH</code> (Coilcraft XAL)</span>
        </div>
      </div>
      <div className="panel__footer">
        <span className="panel__footer-status">● Build blocked in CI</span>
        <span className="panel__footer-btn">Apply fix →</span>
      </div>
    </div>
  );
}

function CodeAgent() {
  return (
    <div className="panel">
      <div className="panel__tabs">
        <div className="panel__tab active"><span className="panel__tab-dot panel__tab-dot--ok"/>Agent</div>
        <div className="panel__tab"><span className="panel__tab-dot panel__tab-dot--ok"/>Review</div>
        <div className="panel__tab"><span className="panel__tab-dot panel__tab-dot--ok"/>Diff</div>
      </div>
      <div className="panel__titlebar">
        <span>session · feat/pd-sink</span>
        <span className="panel__titlebar-badge">4 tools · 2.1s</span>
      </div>
      <div className="panel__body">
        <div className="chat-msg">
          <div className="chat-msg__bubble">
            <div className="chat-msg__meta">You</div>
            Add a USB-C PD sink, negotiate 9V or 12V.
          </div>
        </div>
        <div className="chat-msg">
          <div className="chat-msg__bubble" style={{display:"flex",flexDirection:"column",gap:4}}>
            <div className="chat-msg__meta chat-msg__meta--agent">Agent · running tools</div>
            <div className="tool-line">
              <span className="tool-line__name">parts.search</span>
              <span className="tool-line__arg">"usb-c pd sink"</span>
              <span className="tool-line__res">14 hits</span>
            </div>
            <div className="tool-line">
              <span className="tool-line__name">compiler.build</span>
              <span className="tool-line__arg">pd_sink</span>
              <span className="tool-line__res">0.8s</span>
            </div>
            <div className="tool-line">
              <span className="tool-line__name">spice.simulate</span>
              <span className="tool-line__arg">vbus @ 2A</span>
              <span className="tool-line__res">14mV ripple</span>
            </div>
            <div className="tool-line">
              <span className="tool-line__name">block.render</span>
              <span className="tool-line__arg">pd_sink</span>
              <span className="tool-line__res">diagram</span>
            </div>
          </div>
        </div>
        <div className="chat-msg">
          <div className="chat-msg__bubble" style={{display:"flex",flexDirection:"column",gap:0}}>
            <div className="chat-msg__meta chat-msg__meta--agent">For your review</div>
            <div className="artifact-line">
              <svg className="artifact-line__ico" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3"><rect x="1.5" y="2.5" width="5" height="4" rx="0.5"/><rect x="9.5" y="2.5" width="5" height="4" rx="0.5"/><rect x="1.5" y="9.5" width="5" height="4" rx="0.5"/><rect x="9.5" y="9.5" width="5" height="4" rx="0.5"/><path d="M6.5 4.5h3M6.5 11.5h3M4 6.5v3M12 6.5v3"/></svg>
              <span className="artifact-line__name">Block diagram</span>
              <span className="artifact-line__sub">4 blocks · 2 interfaces</span>
              <span className="artifact-line__open">open</span>
            </div>
            <div className="artifact-line">
              <svg className="artifact-line__ico" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3"><path d="M8 2v4M8 6h-4v3M8 6h4v3M4 9v3M12 9v3M8 6v6"/><circle cx="8" cy="2" r="0.8" fill="currentColor"/><circle cx="4" cy="12" r="0.8" fill="currentColor"/><circle cx="8" cy="12" r="0.8" fill="currentColor"/><circle cx="12" cy="12" r="0.8" fill="currentColor"/></svg>
              <span className="artifact-line__name">Power tree</span>
              <span className="artifact-line__sub">12V → 5V → 3.3V · 620mA</span>
              <span className="artifact-line__open">open</span>
            </div>
            <div className="artifact-line">
              <svg className="artifact-line__ico" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3"><rect x="4" y="4" width="8" height="8" rx="0.5"/><path d="M2 6h2M2 8h2M2 10h2M12 6h2M12 8h2M12 10h2M6 2v2M8 2v2M10 2v2M6 12v2M8 12v2M10 12v2"/></svg>
              <span className="artifact-line__name">MCU pinout</span>
              <span className="artifact-line__sub">ESP32-S3 · 42 / 45 assigned</span>
              <span className="artifact-line__open">open</span>
            </div>
            <div className="artifact-line">
              <svg className="artifact-line__ico" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3"><path d="M3 4h10M3 8h10M3 12h10"/><circle cx="5" cy="4" r="1" fill="currentColor" stroke="none"/><circle cx="9" cy="8" r="1" fill="currentColor" stroke="none"/><circle cx="11" cy="12" r="1" fill="currentColor" stroke="none"/></svg>
              <span className="artifact-line__name">BOM diff</span>
              <span className="artifact-line__sub">+3 parts · 2 changed · $1.84 Δ</span>
              <span className="artifact-line__open">open</span>
            </div>
          </div>
        </div>
        <div className="panel__pr">
          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="4" cy="4" r="1.8"/><circle cx="4" cy="12" r="1.8"/><circle cx="12" cy="12" r="1.8"/><path d="M4 5.8v4.4M5.8 12h4.4M10.5 7.5 12 10.2"/></svg>
          <div>
            <div className="panel__pr-title">PR #417 opened · all checks passing</div>
            <div className="panel__pr-sub">feat/pd-sink → main</div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CodeHero, CodeChecks, CodeAgent });
