/* global React, Glyph, Icon, ARROW, SURFACES, motionOff */

function Nav() {
  return (
    <nav className="nav">
      <a className="nav-brand" href="#">
        <img className="brand-logo" src={(window.__resources&&window.__resources.logo)||"../../../_ds/aaas-design-system-2216a8d1-f354-4115-9de4-7172d50864b1/assets/AaaS_Logo_White.png"} alt="AaaS" />
        <span className="brand-surface"><b>/</b> company</span>
      </a>
      <div className="nav-links">
        <a href="#surfaces">Surfaces</a>
        <a href="#map">The map</a>
        <a href="#dashboard">Dashboard</a>
        <a href="#how">How it works</a>
      </div>
      <div className="nav-spacer" />
      <div className="nav-actions">
        <a className="nav-signin" href="#">Sign in</a>
        <a className="btn btn-primary" href="#start">Get started</a>
      </div>
    </nav>
  );
}

// ---- Hero with live terminal slab ----
const BOOT = [
  { pfx: "ctx", msg: "resolving identity · jay.aaas", t: "ok" },
  { pfx: "ctx", msg: "loading context graph (8.2 MB)", t: "ok" },
  { pfx: "skl", msg: "vault attached · 5,412 skills", t: "ok" },
  { pfx: "agt", msg: "spawning crm-orchestrator", t: "ok" },
  { pfx: "dep", msg: "aaas.select / build #2231 shipped", t: "ok" },
  { pfx: "mem", msg: "snapshot persisted across 9 surfaces", t: "ok" },
  { pfx: "aud", msg: "ISO 9001 scan · 98.7% compliance", t: "ok" },
];

function Hero() {
  const [shown, setShown] = React.useState(0);
  React.useEffect(() => {
    if (motionOff()) { setShown(BOOT.length); return; }
    const id = setInterval(() => setShown(s => (s >= BOOT.length ? s : s + 1)), 520);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="hero">
      <div className="wrap hero-grid">
        <div className="reveal in">
          <span className="eyebrow">Your account hub for AaaS</span>
          <h1 className="hero-h1">
            <span className="ln">One company.</span>
            <span className="ln">Every <span className="glow">agent</span></span>
            <span className="ln">surface<span className="dot">.</span></span>
          </h1>
          <p className="hero-sub">
            One identity, one bill, one context graph across all <b>17 AaaS surfaces</b>.
            Sign in once — your agents, skills and memory travel with you everywhere.
          </p>
          <div className="hero-cta">
            <a className="btn btn-primary btn-lg" href="#start">Get started — free <Icon d={ARROW} /></a>
            <a className="btn btn-ghost btn-lg" href="#map">Explore the map</a>
          </div>
          <div className="hero-trust">
            <span className="lbl">Live network</span>
            <span className="stat"><b>4,217</b> agents online</span>
            <span className="divider" />
            <span className="stat"><b>5,412</b> skills</span>
            <span className="divider" />
            <span className="stat"><b>17</b> surfaces</span>
          </div>
        </div>

        <div className="reveal in" style={{ transitionDelay: "0.1s" }}>
          <div className="term">
            <div className="term-head">
              <span className="term-dots"><i className="r" /><i className="c" /><i className="t" /></span>
              <span className="term-title">jay@aaas · ~/company</span>
              <span className="term-live"><span className="brand-pulse" style={{ width: 7, height: 7 }} /> connected · 9/17</span>
            </div>
            <div className="term-body">
              <div className="t-row"><span className="t-prompt">$</span><span style={{ color: "rgb(var(--text))" }}>aaas hub init</span></div>
              {BOOT.slice(0, shown).map((l, i) => (
                <div className="t-row" key={i}>
                  <span className={"t-pfx " + l.pfx}>[{l.pfx}]</span>
                  <span className="t-msg">{l.msg}</span>
                  <span className="t-ok">{l.t}</span>
                </div>
              ))}
              {shown >= BOOT.length && (
                <>
                  <div style={{ height: 10 }} />
                  <div className="t-row"><span className="t-dim">→ hub ready · all surfaces synced</span></div>
                  <div className="term-input">
                    <span className="t-prompt">$</span>
                    <span className="typed">aaas hub start --free</span>
                    <span className="t-cursor" />
                  </div>
                </>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* ticker */}
      <div className="ticker">
        <div className="ticker-track">
          {[...SURFACES, ...SURFACES].map((s, i) => (
            <span className="ticker-item" key={i}>
              <span className="d" style={s.on ? {} : { background: "rgba(224,224,222,0.3)" }} />
              aaas<b>.{s.label}</b>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero });