// Main sections for the atopile enterprise one-pager

function Utility() {
  return (
    <div className="utility">
      <a className="utility__brand" href="https://atopile.io" aria-label="atopile">
        <img src={(window.__resources && window.__resources.logoLight) || "/light@2x.svg"} alt="atopile"/>
      </a>
      <div className="utility__right">
        <a className="btn btn--primary" href="#cta">Talk to us ↓</a>
      </div>
    </div>
  );
}

function Hero() {
  // ---- Thermal (ANSYS) curves ----
  const Wt = 280, Ht = 110, padT = 10;
  const xT = t => padT + (t / 100) * (Wt - padT * 2);
  const yT = T => padT + (1 - (T - 25) / 70) * (Ht - padT * 2);
  const thermal = (overshoot, steady) => {
    const pts = [];
    for (let t = 0; t <= 100; t += 2) {
      const tau = 18;
      let temp = 25 + (steady - 25) * (1 - Math.exp(-t / tau));
      if (overshoot) temp += 8 * Math.exp(-Math.pow((t - 28) / 14, 2));
      temp += Math.sin(t * 0.9) * 0.6;
      pts.push(`${xT(t).toFixed(1)},${yT(temp).toFixed(1)}`);
    }
    return "M " + pts.join(" L ");
  };
  const limitYT = yT(85);

  // ---- SPICE load-step curves ----
  const Ws = 280, Hs = 110, padS = 10;
  const xS = t => padS + (t / 100) * (Ws - padS * 2);
  const yS = v => padS + (1 - (v - 3.15) / 0.30) * (Hs - padS * 2);
  const loadStep = (overshoot) => {
    const pts = [];
    for (let t = 0; t <= 100; t += 1) {
      let v = 3.30;
      if (t > 30) {
        const dt = t - 30;
        v = overshoot
          ? 3.30 - 0.11 * Math.exp(-dt / 8) * Math.cos(dt / 2.2)
          : 3.30 - 0.03 * Math.exp(-dt / 4);
      }
      v += Math.sin(t * 2.1) * 0.003;
      pts.push(`${xS(t).toFixed(1)},${yS(v).toFixed(1)}`);
    }
    return "M " + pts.join(" L ");
  };
  const tolHi = yS(3.36);
  const tolLo = yS(3.24);

  return (
    <section className="hero">
      <div>
        <h1 className="hero__headline">
          The AI-native platform for <span className="accent">electronic design.</span>
        </h1>
        <p className="hero__lede">
          atopile is a code-backed EDA platform built for agents. Capture
          requirements, generate designs, and validate with simulation —
          end-to-end, automated, and fully auditable. Deployed in your
          environment. Integrated with the tools you already use.
        </p>

      </div>
      <div className="hero__art">
        <div className="art-diff">
          <div className="art-diff__bar">
            <span className="art-diff__bar-dot"/>
            power_supply.ato — PR #482 "raise thermal margin"
            <span className="art-diff__bar-tag">by agent</span>
          </div>
          <div className="art-diff__code">
            <div className="art-diff__line" data-n="11"><span className="kw">module</span> <span className="ty">PowerSupply</span>:</div>
            <div className="art-diff__line art-diff__line--del" data-n="12">{"  "}buck.i_max = <span className="nm">2A</span></div>
            <div className="art-diff__line art-diff__line--add" data-n="12">{"  "}buck.i_max = <span className="nm">3A</span></div>
            <div className="art-diff__line art-diff__line--del" data-n="13">{"  "}buck.part = <span className="nm">"TPS62840"</span></div>
            <div className="art-diff__line art-diff__line--add" data-n="13">{"  "}buck.part = <span className="nm">"TPS62130A"</span></div>
            <div className="art-diff__line art-diff__line--add" data-n="14">{"  "}c_out.esr = <span className="nm">&lt;15mΩ</span></div>
          </div>

          <div className="art-diff__sim">
            <div className="art-diff__sim-head">
              <span className="pill-ansys">ANSYS</span>
              <span>Thermal · T_die @ 1A</span>
              <span className="pass">pass</span>
            </div>
            <svg viewBox={`0 0 ${Wt} ${Ht}`}>
              <g stroke="rgba(255,255,255,0.06)" strokeWidth="0.5">
                {[25, 45, 65, 85].map(T => <line key={T} x1={padT} y1={yT(T)} x2={Wt - padT} y2={yT(T)}/>)}
                {[0, 25, 50, 75, 100].map(t => <line key={t} x1={xT(t)} y1={padT} x2={xT(t)} y2={Ht - padT}/>)}
              </g>
              <g fontFamily="JetBrains Mono" fontSize="7" fill="rgba(255,255,255,0.35)">
                <text x={padT} y={yT(85) - 2}>85°C</text>
                <text x={padT} y={yT(45) - 2}>45°C</text>
              </g>
              <line x1={padT} y1={limitYT} x2={Wt - padT} y2={limitYT}
                stroke="#FF5E7A" strokeWidth="0.6" strokeDasharray="3 3" opacity="0.7"/>
              <text x={Wt - padT - 2} y={limitYT - 3} textAnchor="end"
                fontFamily="JetBrains Mono" fontSize="7" fill="#FF5E7A" opacity="0.85">T_j_max</text>
              <path d={thermal(true, 88)} fill="none" stroke="#FF5E7A" strokeWidth="1.2" opacity="0.75"/>
              <path d={thermal(false, 64)} fill="none" stroke="#00C08B" strokeWidth="1.4"/>
              <circle cx={xT(100)} cy={yT(88)} r="2" fill="#FF5E7A" opacity="0.75"/>
              <circle cx={xT(100)} cy={yT(64)} r="2" fill="#00C08B"/>
            </svg>
            <div className="art-diff__sim-metrics">
              <div className="art-diff__sim-metric">
                <span className="k">T_margin</span>
                <span className="v"><span className="prev">−3°C</span>21°C<span className="delta">+24</span></span>
              </div>
              <div className="art-diff__sim-metric">
                <span className="k">η @ 1A</span>
                <span className="v"><span className="prev">88%</span>94%<span className="delta">+6pt</span></span>
              </div>
            </div>
          </div>

          <div className="art-diff__sim">
            <div className="art-diff__sim-head">
              <span className="pill-spice">SPICE</span>
              <span>Load step · 0.1A → 1.5A</span>
              <span className="pass">pass</span>
            </div>
            <svg viewBox={`0 0 ${Ws} ${Hs}`}>
              <g stroke="rgba(255,255,255,0.06)" strokeWidth="0.5">
                {[3.20, 3.25, 3.30, 3.35, 3.40].map(v => <line key={v} x1={padS} y1={yS(v)} x2={Ws - padS} y2={yS(v)}/>)}
                {[0, 25, 50, 75, 100].map(t => <line key={t} x1={xS(t)} y1={padS} x2={xS(t)} y2={Hs - padS}/>)}
              </g>
              <rect x={padS} y={tolHi} width={Ws - padS*2} height={tolLo - tolHi}
                fill="rgba(0,192,139,0.06)" stroke="none"/>
              <line x1={padS} y1={tolHi} x2={Ws - padS} y2={tolHi}
                stroke="rgba(0,192,139,0.5)" strokeWidth="0.4" strokeDasharray="2 2"/>
              <line x1={padS} y1={tolLo} x2={Ws - padS} y2={tolLo}
                stroke="rgba(0,192,139,0.5)" strokeWidth="0.4" strokeDasharray="2 2"/>
              <g fontFamily="JetBrains Mono" fontSize="7" fill="rgba(255,255,255,0.35)">
                <text x={padS} y={yS(3.40) - 2}>3.40V</text>
                <text x={padS} y={yS(3.30) - 2}>3.30V</text>
                <text x={xS(30)} y={padS + 7} textAnchor="middle" fill="rgba(255,255,255,0.4)">I_step</text>
              </g>
              <line x1={xS(30)} y1={padS} x2={xS(30)} y2={Hs - padS}
                stroke="rgba(255,255,255,0.2)" strokeWidth="0.5" strokeDasharray="1 2"/>
              <path d={loadStep(true)}  fill="none" stroke="#FF5E7A" strokeWidth="1.2" opacity="0.75"/>
              <path d={loadStep(false)} fill="none" stroke="#00C08B" strokeWidth="1.4"/>
            </svg>
            <div className="art-diff__sim-metrics">
              <div className="art-diff__sim-metric">
                <span className="k">V_droop</span>
                <span className="v"><span className="prev">110mV</span>28mV<span className="delta">−75%</span></span>
              </div>
              <div className="art-diff__sim-metric">
                <span className="k">settle</span>
                <span className="v"><span className="prev">18ms</span>4ms<span className="delta">−78%</span></span>
              </div>
            </div>
          </div>

          <div className="art-diff__sig">
            <span className="av">AI</span> atopile-agent
            <span style={{opacity:0.5}}>·</span>
            142 checks passing
            <div className="art-diff__actions">
              <button className="art-diff__btn art-diff__btn--ghost" type="button">Request changes</button>
              <button className="art-diff__btn art-diff__btn--approve" type="button">
                <svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <path d="M3 8.5 L6.5 12 L13 4.5"/>
                </svg>
                Approve &amp; merge
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Proof() {
  const Icon = ({d}) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <path d={d}/>
    </svg>
  );
  return (
    <div className="proof">
      <span className="proof__label">Shipping hardware for</span>
      <div className="proof__sectors">
        <div className="proof__sector">
          <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            {/* Satellite */}
            <rect x="20" y="18" width="8" height="12" rx="1"/>
            <path d="M24 18v-4M24 30v4"/>
            <rect x="6" y="21" width="12" height="6" rx="0.5"/>
            <rect x="30" y="21" width="12" height="6" rx="0.5"/>
            <path d="M9 21v6M12 21v6M15 21v6M33 21v6M36 21v6M39 21v6"/>
            <circle cx="24" cy="24" r="1.5" fill="currentColor" stroke="none"/>
            <path d="M24 10c-2 0-3.5 1-4 2M24 38c2 0 3.5-1 4-2" opacity="0.4"/>
          </svg>
          Space &amp; satellites
        </div>
        <div className="proof__sector">
          <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            {/* Humanoid */}
            <circle cx="24" cy="10" r="4"/>
            <path d="M22 14v2h4v-2"/>
            <rect x="17" y="16" width="14" height="14" rx="2"/>
            <path d="M17 20h-3v8M31 20h3v8"/>
            <circle cx="14" cy="28" r="1.5"/>
            <circle cx="34" cy="28" r="1.5"/>
            <path d="M20 30v10M28 30v10"/>
            <path d="M18 40h4M26 40h4"/>
            <circle cx="22" cy="22" r="1" fill="currentColor" stroke="none"/>
            <circle cx="26" cy="22" r="1" fill="currentColor" stroke="none"/>
          </svg>
          Humanoid robotics
        </div>
        <div className="proof__sector">
          <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            {/* EV car */}
            <path d="M6 30h36M8 30l3-8c.5-1.2 1.6-2 3-2h20c1.4 0 2.5.8 3 2l3 8"/>
            <path d="M14 20h20" opacity="0.35"/>
            <circle cx="14" cy="34" r="4"/>
            <circle cx="34" cy="34" r="4"/>
            <path d="M22 14l-3 4h6l-2 4" strokeWidth="2"/>
          </svg>
          Automotive &amp; EV
        </div>
      </div>
    </div>
  );
}

function Themes() {
  return (
    <div className="themes">
      <div className="theme-card">
        <span className="theme-card__num">01</span>
        <div className="theme-card__body">
          <span className="theme-card__title">Integrate</span>
          <span className="theme-card__desc">Keep Altium / Allegro for layout. Add a data layer that serves sourcing, techs, and agents alike.</span>
        </div>
      </div>
      <div className="theme-card">
        <span className="theme-card__num">02</span>
        <div className="theme-card__body">
          <span className="theme-card__title">Automate &amp; Verify</span>
          <span className="theme-card__desc">Deep checks, SPICE simulation, agent tools — all running in CI on every commit.</span>
        </div>
      </div>
      <div className="theme-card">
        <span className="theme-card__num">03</span>
        <div className="theme-card__body">
          <span className="theme-card__title">Speed</span>
          <span className="theme-card__desc">Hardware at software speed. Automate the busywork, parametric reuse, validation and AI built in.</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Utility, Hero, Proof, Themes });