// Body sections: Integrate, Flow, Automate, Scale + final CTA

function Pillar({ num, title, body, visual }) {
  return (
    <div className="pillar">
      <span className="pillar__num">{num}</span>
      <h3 className="pillar__title">{title}</h3>
      <p className="pillar__body">{body}</p>
      {visual && <div className="pillar__visual">{visual}</div>}
    </div>
  );
}

function FlowSection() {
  const stages = [
    { n: "01", k: "Specify",   v: "Requirements as code — typed, versioned, reviewable." },
    { n: "02", k: "Generate",  v: "Agents draft the design from the spec, you stay in the loop." },
    { n: "03", k: "Layout",    v: "Autolayout, or round-trip to Altium / Allegro / Expedition." },
    { n: "04", k: "Review",    v: "Diffs, checks, visual PCB changes on every commit." },
    { n: "05", k: "Ship",      v: "Modern release flow that plugs into your PLM." },
  ];
  return (
    <section className="section" id="flow">
      <div className="section__head">
        <div>
          <div className="section__theme-num">Flow</div>
          <h2 className="section__title">From requirement to released board, in one pipeline.</h2>
        </div>
        <p className="section__lede">
          One source of truth moves with the design — through spec, generation, layout,
          review, and release. Every stage is scriptable, observable, and hooks into the
          tools your team already runs.
        </p>
      </div>

      <div className="flow">
        {stages.map((s, i) => (
          <React.Fragment key={s.n}>
            <div className="flow__stage">
              <span className="flow__num">{s.n}</span>
              <div className="flow__k">{s.k}</div>
              <div className="flow__v">{s.v}</div>
            </div>
            {i < stages.length - 1 && <span className="flow__arrow" aria-hidden>→</span>}
          </React.Fragment>
        ))}
      </div>
    </section>
  );
}

function IntegrateSection() {
  return (
    <section className="section" id="integrate">
      <div className="section__head">
        <div>
          <div className="section__theme-num">Integrate</div>
          <h2 className="section__title">One thread from requirements to manufacturing.</h2>
        </div>
        <p className="section__lede">
          Hardware stalls on handoffs. Requirements in spreadsheets, BOMs in
          email, pinouts in screenshots, firmware guessing at pad names,
          sourcing chasing alternates on a BOM that's two revs stale. atopile
          is the connective tissue — one source of truth that design, sourcing,
          firmware, verification, and manufacturing all read from and write to.
          Plug into the tools you already use; cut the manual work between them.
        </p>
      </div>

      <div className="pillars pillars--4">
        <Pillar
          num="01 · LAYOUT TOOLS"
          title="Keep Altium, Allegro, Expedition"
          body="atopile generates schematics and netlists you route in the layout tool you already trust. Altium round-trips today; Cadence Allegro and Mentor Expedition support is arriving this year. Use each tool where it excels."
        />
        <Pillar
          num="02 · OPEN SOURCE"
          title="Built on an open language & compiler"
          body="The .ato language and compiler are MIT-licensed. Your designs are plain text you own outright, readable by any tool — now or in ten years. No vendor lock-in, and the foundation isn't going anywhere."
        />
        <Pillar
          num="03 · DATA LAYER"
          title="Beyond engineering — sourcing, techs, PMs"
          body="A Slack bot answers questions about any board in natural language, sourcing sees drop-in alternates for shortages, techs pull up the design on the factory floor. Engineering ships features — everyone else gets self-serve answers."
        />
        <Pillar
          num="04 · AUTOMATION-FIRST"
          title="Deep custom integrations, by design"
          body="Every capability is exposed as a CLI, Python API, and MCP server. Wire atopile into your PLM, ERP, or internal tooling without a services engagement."
        />
      </div>
    </section>
  );
}

function AutomateSection() {
  return (
    <section className="section section--dark" id="automate">
      <div className="section__inner">
        <div className="section__head">
          <div>
            <div className="section__theme-num" style={{color:"#FF7142"}}>Automate & Verify</div>
            <h2 className="section__title">Verification runs on every commit. Not at the end.</h2>
          </div>
          <p className="section__lede">
            A compiler for hardware means checks your CAD tool can't do —
            running continuously, catching regressions before they leave a
            laptop, and giving your agents the feedback loop they need.
          </p>
        </div>

        <div className="spotlight" style={{marginBottom: 72}}>
          <div className="spotlight__copy">
            <span className="eyebrow">Advanced checking</span>
            <h3 className="spotlight__title">Beyond ERC / DRC: the language itself is the spec.</h3>
            <p className="spotlight__body">
              Our type system models voltages, currents, tolerances, and bus topology. When you declare intent, the compiler
              keeps you honest — and fails the build if a design regression slips through.
            </p>
            <ul className="spotlight__bullets">
              <li>Voltage / current compatibility across every net</li>
              <li>I²C, SPI, CAN bus address & collision checks</li>
              <li>Pull-up / pull-down strength + rise-time math</li>
              <li>SPICE simulation woven into assertions — <code style={{color:"#FF7142",fontFamily:"var(--font-mono)"}}>assert ripple &lt; 30mV</code></li>
              <li>Parametric solver fills missing component values</li>
            </ul>
          </div>
          <CodeChecks/>
        </div>

        <div className="spotlight spotlight--reverse">
          <CodeAgent/>
          <div className="spotlight__copy">
            <span className="eyebrow">Agent + review tools</span>
            <h3 className="spotlight__title">An agent that ships. Review surfaces so you can trust it.</h3>
            <p className="spotlight__body">
              The workflow is built around the agent accelerating <em>you</em>, not replacing you.
              Dozens of first-class tools generate high-signal views — block diagrams, power and
              bus-topology trees, MCU pinouts, SPICE traces, BOM diffs — so every proposal is
              reviewable at a glance. And you can always drop into the code directly, just like software.
            </p>
            <ul className="spotlight__bullets">
              <li>High-signal review artifacts for every proposal</li>
              <li>Dozens of first-class tools, from <code style={{color:"#FF7142",fontFamily:"var(--font-mono)"}}>simulate</code> to <code style={{color:"#FF7142",fontFamily:"var(--font-mono)"}}>parts.search</code></li>
              <li>Closed-loop: reads failures, proposes fixes, re-validates</li>
              <li>Links commits to GitHub Issues, Jira, or Linear</li>
              <li>Drives from VS Code, Cursor, or CI</li>
              <li>Every change lands as a reviewable diff on a branch</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function ScaleSection() {
  return (
    <section className="section" id="scale">
      <div className="section__head">
        <div>
          <div className="section__theme-num">Scale</div>
          <h2 className="section__title">Scale hardware teams like software teams.</h2>
        </div>
        <p className="section__lede">
          100s of engineers in one repo. Parametric reuse so a buck converter
          is a module, not a copy-paste. Natural-language search across ~2M
          parts, respecting your AVL. On-prem deployment so nothing leaves
          your environment. This is the scale we're talking about.
        </p>
      </div>

      <div className="stats">
        <div className="stat">
          <span className="stat__v">100s<span className="unit"></span></span>
          <span className="stat__k">Concurrent engineers</span>
          <span className="stat__note">One repo · git-native merge</span>
        </div>
        <div className="stat">
          <span className="stat__v">&lt; 1s<span className="unit"></span></span>
          <span className="stat__k">Incremental build</span>
          <span className="stat__note">Check-on-save in-IDE</span>
        </div>
        <div className="stat">
          <span className="stat__v">~2M<span className="unit"> + yours</span></span>
          <span className="stat__k">Parts catalog</span>
          <span className="stat__note">Natural-language search · AVL-aware</span>
        </div>
        <div className="stat">
          <span className="stat__v">0<span className="unit"> exfil</span></span>
          <span className="stat__k">On-prem deployment</span>
          <span className="stat__note">VPC, air-gap, SSO, audit logs</span>
        </div>
      </div>

      <div className="pillars pillars--4">
        <Pillar
          num="04 · VERSION MGMT"
          title="The whole company, on one design"
          body="Branches, diffs, code review — on actual circuits. Engineering, sourcing, firmware, and manufacturing all read and contribute to a single source of truth, with every change tracked by the version-control workflows software teams already trust. Hundreds of engineers on one project, in parallel."
        />
        <Pillar
          num="05 · DESIGN REUSE"
          title="Parametric reuse"
          body="A buck converter isn't a snippet to copy-paste — it's a module. Change the input voltage, the compiler re-picks parts and re-runs the full suite of tests. Bundle code + layout + tests; share across teams."
        />
        <Pillar
          num="06 · PART SEARCH"
          title="Google-like across ~2M parts"
          body='Query our ~2M-part catalog in natural language — "low-noise buck, 3.3V out, under 1µA Iq" — or lock parameters exactly. Bring your own: approved-vendor lists and in-house part libraries are first-class, so every search respects your sourcing rules.'
        />
        <Pillar
          num="07 · AI, BUILT IN"
          title="Validation and agents, everywhere"
          body="Every edit runs through the full check suite — with AI at every step. Draft blocks, explain regressions, propose fixes, review diffs. Plugs into your on-prem AI gateway so only models you've approved see the design."
        />
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="final-cta" id="cta">
      <div className="final-cta__inner">
        <div>
          <h2 className="final-cta__title">Ready to see it on your own board?</h2>
          <p className="final-cta__body">
            Bring a recent design — we'll import it, instrument it with checks,
            and show you the agent making changes on it. 45 minutes, end-to-end.
          </p>
        </div>
        <ContactForm/>
      </div>
    </section>
  );
}

function Foot() {
  return (
    <footer className="foot">
      <div className="foot__inner">
        <div className="foot__legal">© 2026 atopile, Inc.</div>
      </div>
    </footer>
  );
}

Object.assign(window, { IntegrateSection, FlowSection, AutomateSection, ScaleSection, FinalCTA, Foot, Pillar });