/* global React */

/* ---------- small helpers ---------- */
function Eyebrow({ children, plain }) {
  return <p className={"eyebrow " + (plain ? "eyebrow--plain" : "")}>{children}</p>;
}
function Tags({ items }) {
  return (
    <div className="tags">
      {items.map((x) => <span key={x} className="tag mono">{x}</span>)}
    </div>
  );
}

/* ============================================================
   THESIS — the agentic / code-driven pitch
   ============================================================ */
function ThesisSection() {
  return (
    <section className="section" id="thesis">
      <div className="container">
        <div className="thesis__head reveal">
          <Eyebrow>The thesis</Eyebrow>
          <h2 className="h2 thesis__title">
            Analog designers shouldn&rsquo;t have to become software engineers.
            So we taught the <em>agents</em> to write the code.
          </h2>
        </div>
        <div className="thesis__grid">
          <div className="reveal" data-d="1">
            <p className="lead">
              Legacy EDA forces engineers to context-switch between proprietary tools,
              fragmented data formats, and archaic scripting languages like TCL and SKILL.
              Code-driven layout already exists &mdash; but it never caught on, because it
              asked analog designers to think like developers.
            </p>
            <p className="lead" style={{ marginTop: 18 }}>
              The insight is simple: <strong className="hl">LLMs are exceptional at writing code.</strong>{" "}
              Instead of teaching designers to script, Py-Stack EDA lets them prompt agents
              that write the layout, optimization, and verification code for them. This isn&rsquo;t
              AI-enhanced design &mdash; it&rsquo;s agentic, code-driven orchestration.
            </p>
          </div>
          <div className="compare reveal" data-d="2">
            <div className="compare__col compare__col--old">
              <span className="compare__cap mono">Legacy EDA</span>
              <ul>
                <li>TCL / SKILL scripting</li>
                <li>Proprietary, six-figure licenses</li>
                <li>Siloed tools &amp; data formats</li>
                <li>Local compute clusters</li>
                <li>AI bolted on via brittle bridges</li>
              </ul>
            </div>
            <div className="compare__col compare__col--new">
              <span className="compare__cap mono">Py-Stack EDA</span>
              <ul>
                <li>One Python framework, end to end</li>
                <li>Open-source engines, unified</li>
                <li>Git-native, collaborative models</li>
                <li>Elastic cloud execution</li>
                <li>AI as a first-class citizen</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   ARCHITECTURE — the 4-layer stack overview
   ============================================================ */
const LAYERS = [
  {
    n: "00", id: "portal", tier: "Top level",
    title: "The User Portal",
    blurb: "A web-based, Python-native IDE. Designers use code-driven schematic capture and layout generation \u2014 with Git version control, dependency management, and circuits as standardized Python objects.",
    tags: ["Pythonic IDE", "Git-native", "Agentic prompts"],
  },
  {
    n: "01", id: "physics", tier: "Layer 1",
    title: "Native Multi-Physics Flow",
    blurb: "A unified Python API that bridges IC design with the physics of silicon \u2014 thermal, high-speed EM interference, and substrate noise coupling solvers, in-stack, with no export to third-party software.",
    tags: ["Thermal", "Electromagnetic", "Substrate noise"],
  },
  {
    n: "02", id: "ai", tier: "Layer 2",
    title: "The AI Optimization Core",
    blurb: "PyTorch / TensorFlow models running natively in the stack for ML-assisted placement & routing, plus predictive DRC / LVS that flags likely violations in real time \u2014 before heavy full-chip extraction.",
    tags: ["ML place & route", "Predictive DRC/LVS", "PyTorch"],
  },
  {
    n: "03", id: "cloud", tier: "Layer 3",
    title: "Verification & Cloud Servers",
    blurb: "The scalable backbone. The Python orchestration layer farms intensive jobs to secure cloud compute \u2014 accelerated SPICE and massive parasitic extraction \u2014 streaming clean results back to the IDE.",
    tags: ["Accelerated SPICE", "Parasitic extraction", "Elastic compute"],
  },
];

function ArchitectureSection() {
  return (
    <section className="section" id="architecture">
      <div className="container">
        <div className="sec-head reveal">
          <Eyebrow>The stack</Eyebrow>
          <h2 className="h2">A vertically integrated toolchain,<br /><em>unified</em> by Python.</h2>
          <p className="lead sec-head__lead">
            Open-source engines &mdash; gdsfactory, Cocotb, Amaranth &mdash; wrapped and orchestrated
            in one cohesive, cloud-deployed architecture. Describe intent at the top; compute streams up from the bottom.
          </p>
        </div>

        <div className="arch">
          <div className="arch__flow" aria-hidden="true">
            <span className="arch__flowlabel mono down">prompt &amp; intent {"\u2193"}</span>
            <span className="arch__flowlabel mono up">{"\u2191"} results &amp; data</span>
          </div>
          <ol className="arch__layers">
            {LAYERS.map((l, i) => (
              <li key={l.id} className="arch__layer reveal" data-d={i + 1} id={l.id + "-row"}>
                <div className="arch__n mono">{l.n}</div>
                <div className="arch__body">
                  <span className="arch__tier mono">{l.tier}</span>
                  <h3 className="h3 arch__title">{l.title}</h3>
                  <p className="arch__blurb">{l.blurb}</p>
                </div>
                <div className="arch__tags"><Tags items={l.tags} /></div>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   CTA + Footer
   ============================================================ */
function CtaSection() {
  return (
    <section className="section cta" id="cta">
      <div className="container cta__inner reveal">
        <Eyebrow>Early access</Eyebrow>
        <h2 className="display cta__title">
          Democratize <em>silicon</em>.
        </h2>
        <p className="lead cta__lead">
          We&rsquo;re onboarding design teams, researchers, and startups building on open PDKs.
          Bring your toolkit, PDKs, and design docs &mdash; Py-Stack EDA adapts.
        </p>
        <form className="cta__form" onSubmit={(e) => e.preventDefault()}>
          <input type="email" className="cta__input mono" placeholder="you@lab.edu" aria-label="email" />
          <button className="btn btn-primary" type="submit">Request access <span className="arr">{"\u2192"}</span></button>
        </form>
        <p className="cta__note mono">No credit card. We&rsquo;ll reach out within a week.</p>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container footer__inner">
        <div className="footer__brand">
          <Logo />
          <p className="footer__tag muted">Python-native, agentic, cloud IC design.</p>
        </div>
        <div className="footer__cols">
          <div className="footer__col">
            <span className="footer__h mono">Platform</span>
            <a href="#architecture">Architecture</a>
            <a href="#ide">Pythonic IDE</a>
            <a href="#multiphysics">Multi-physics</a>
            <a href="#cloud-sec">Cloud engine</a>
          </div>
          <div className="footer__col">
            <span className="footer__h mono">Company</span>
            <a href="#team">Team</a>
            <a href="#thesis">Thesis</a>
            <a href="#cta">Early access</a>
          </div>
        </div>
        <div className="footer__built">
          <span className="footer__h mono">Built by</span>
          <img src="assets/skillsurf-horizontal.png" alt="Skill Surf" className="footer__logo" />
        </div>
      </div>
      <div className="container footer__base">
        <span className="mono">&copy; 2026 Py-Stack EDA</span>
        <span className="mono muted">Sri Lanka {"\u00b7"} built on open PDKs</span>
      </div>
    </footer>
  );
}

Object.assign(window, { ThesisSection, ArchitectureSection, CtaSection, Footer, Eyebrow, Tags });