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

function Surfaces() {
  return (
    <section className="surfaces" id="surfaces">
      <div className="wrap">
        <div className="sec-head reveal" style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "flex-end", maxWidth: "100%", flexWrap: "wrap" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 640 }}>
            <span className="eyebrow">17 surfaces · one login</span>
            <h2 className="sec-title h2">Everything AaaS,<br/>in one place<span style={{ color: "rgb(var(--accent-red))" }}>.</span></h2>
          </div>
          <a className="btn btn-ghost" href="#" style={{ flexShrink: 0 }}>Browse all <Icon d={ARROW} /></a>
        </div>

        <div className="surf-grid">
          {SURFACES.map((s, i) => (
            <div className={"surf-card reveal" + (s.current ? " current" : "")} key={s.label}
                 style={{ transitionDelay: `${(i % 4) * 0.05}s` }}>
              <div className="surf-card-top">
                <span className="surf-card-glyph"><Glyph size={20} stroke={1.4} /></span>
                {s.current ? <span className="here">you are here</span> : <span className="surf-card-url">aaas.{s.label}</span>}
              </div>
              <div style={{ marginTop: "auto" }}>
                <div className="surf-card-name">{s.label}</div>
                <div className="surf-card-hint">{s.hint}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function How() {
  const steps = [
    ["01", "Claim your name", "Pick a handle once. It becomes your verified identity on every aaas surface — no duplicate profiles."],
    ["02", "Connect surfaces", "Tick the surfaces you want. SSO, billing and your context graph flow automatically between them."],
    ["03", "Spawn an agent", "Compose from 5,400+ vault skills and deploy to production in minutes, monitored from one dashboard."],
  ];
  return (
    <section className="how" id="how">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">How it works</span>
          <h2 className="sec-title h2">Set up in two minutes<span style={{ color: "rgb(var(--accent-red))" }}>.</span></h2>
        </div>
        <div className="how-grid">
          {steps.map(([n, h, p], i) => (
            <div className="step glass reveal" key={n} style={{ transitionDelay: `${i * 0.08}s` }}>
              <div className="step-n">{n}</div>
              <h3>{h}</h3>
              <p>{p}</p>
              {i < 2 && <span className="step-line"><Icon d={ARROW} size={22} /></span>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Final() {
  return (
    <>
      <section className="final" id="start">
        <div className="wrap">
          <div className="final-card reveal">
            <span className="eyebrow" style={{ position: "relative" }}>Ready?</span>
            <h2 className="h2">Your hub is two<br/>minutes <span className="glow">away</span><span style={{ color: "rgb(var(--accent-red))" }}>.</span></h2>
            <p className="final-sub">Free tier, no credit card. Claim your name, connect a surface, and watch your first agent come online.</p>
            <div className="final-cta">
              <a className="btn btn-primary btn-lg" href="#">Get started — free <Icon d={ARROW} /></a>
              <a className="btn btn-ghost btn-lg" href="#">Talk to us</a>
            </div>
            <div className="final-fine">5,400+ skills unlocked · SSO across 17 surfaces · ISO 9001</div>
          </div>
        </div>
      </section>

      <footer className="footer">
        <div className="wrap footer-grid">
          <div className="nav-brand">
            <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>
          </div>
          <div className="footer-cols">
            <a href="#surfaces">Surfaces</a>
            <a href="#map">The map</a>
            <a href="#dashboard">Dashboard</a>
            <a href="#how">How it works</a>
            <a href="#">Docs</a>
            <a href="#">Status</a>
          </div>
          <span className="footer-copy">© 2026 AaaS · the agent-as-a-service ecosystem</span>
        </div>
      </footer>
    </>
  );
}

Object.assign(window, { Surfaces, How, Final });