/* global React, SchematicPanel */

function PromptBar({ text = "Design a low-noise 2-stage OTA in SKY130\u2026" }) {
  return (
    <div className="promptbar">
      <span className="promptbar__chev">{"\u203a"}</span>
      <span className="promptbar__text">{text}</span>
      <span className="promptbar__send btn btn-primary">Generate <span className="arr">{"\u2192"}</span></span>
    </div>
  );
}

function TrustStrip() {
  return (
    <div className="trust">
      <span className="trust__label mono">BUILT BY</span>
      <img src="assets/skillsurf-horizontal.png" alt="Skill Surf" className="trust__logo" />
      <span className="trust__sep" />
      <ul className="trust__facts mono">
        <li>IEEE Foundation&ndash;funded</li>
        <li>First public SKY130 tapeout</li>
        <li>400+ designers trained</li>
      </ul>
    </div>
  );
}

/* Hero — three toggleable directions: split | centered | console */
function Hero({ variant = "split" }) {
  const eyebrow = <p className="eyebrow">Python-native {"\u00b7"} Agentic {"\u00b7"} Cloud EDA</p>;
  const sub = (
    <p className="lead hero__sub">
      Py&#8209;Stack EDA is a cloud IC design platform unified entirely by Python.
      Prompt an agent &mdash; it writes the layout, optimization, and verification code.
      No TCL, no SKILL, no local compute farm.
    </p>
  );
  const ctas = (
    <div className="hero__ctas">
      <a href="#cta" className="btn btn-primary">Request early access <span className="arr">{"\u2192"}</span></a>
      <a href="#architecture" className="btn btn-ghost">Explore the stack</a>
    </div>
  );

  if (variant === "centered") {
    return (
      <section className="hero hero--centered" id="top">
        <div className="container">
          <div className="reveal is-in" style={{ textAlign: "center" }}>
            {eyebrow}
            <h1 className="display hero__title">
              Describe the circuit.<br /><em>Generate</em> the silicon.
            </h1>
            <div className="hero__sub--wrap">{sub}</div>
            <div className="hero__ctas--center">{ctas}</div>
          </div>
          <div className="hero__panel reveal is-in" data-d="2" style={{ marginTop: 54 }}>
            <SchematicPanel />
          </div>
          <div className="reveal is-in" data-d="3"><TrustStrip /></div>
        </div>
      </section>
    );
  }

  if (variant === "console") {
    return (
      <section className="hero hero--console" id="top">
        <div className="container">
          <div className="hero__console-head reveal is-in">
            {eyebrow}
            <h1 className="display hero__title hero__title--sm">
              Silicon design,<br /><em>rewritten</em> in Python.
            </h1>
          </div>
          <div className="hero__console-grid">
            <div className="reveal is-in" data-d="1">
              {sub}
              <div style={{ marginTop: 26 }}><PromptBar /></div>
              <div style={{ marginTop: 22 }}>{ctas}</div>
            </div>
            <div className="hero__panel reveal is-in" data-d="2">
              <SchematicPanel />
            </div>
          </div>
          <div className="reveal is-in" data-d="3"><TrustStrip /></div>
        </div>
      </section>
    );
  }

  /* split (default) */
  return (
    <section className="hero hero--split" id="top">
      <div className="container hero__split">
        <div className="hero__copy reveal is-in">
          {eyebrow}
          <h1 className="display hero__title">
            Design silicon<br />by <em>describing</em> it.
          </h1>
          {sub}
          {ctas}
        </div>
        <div className="hero__panel reveal is-in" data-d="2">
          <SchematicPanel />
        </div>
      </div>
      <div className="container reveal is-in" data-d="3"><TrustStrip /></div>
    </section>
  );
}

Object.assign(window, { Hero, PromptBar, TrustStrip });