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

function Credential() {
  const connected = SURFACES.filter(s => s.on).length;
  return (
    <section className="credential">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow is-red">Your AaaS credential</span>
          <h2 className="sec-title h2">One credential.<br/>Every surface<span style={{ color: "rgb(var(--accent-red))" }}>.</span></h2>
          <p className="sec-sub">
            Issued once, recognised everywhere. Your pass carries your identity, tier and scopes —
            collect a stamp each time you connect a new surface.
          </p>
        </div>

        <div className="cred-grid reveal" style={{ transitionDelay: "0.06s" }}>
          {/* the pass */}
          <div className="pass">
            <div className="pass-main">
              <div className="pass-top">
                <div className="pass-holder">
                  <span className="pass-portrait">JL</span>
                  <div>
                    <div className="pass-field-lbl">Holder · name</div>
                    <div className="pass-name">Jay Lindqvist</div>
                    <div className="pass-handle">jay.aaas · 0xA4·F2·9C</div>
                  </div>
                </div>
                <span className="pass-verified"><span className="sd" />verified</span>
              </div>

              <div className="pass-meta">
                <div>
                  <div className="pass-field-lbl">Issued</div>
                  <div className="v">2026 · 04 · 18</div>
                </div>
                <div>
                  <div className="pass-field-lbl">Tier</div>
                  <div className="v">Builder · Pro</div>
                </div>
                <div>
                  <div className="pass-field-lbl">Surfaces</div>
                  <div className="v">{connected} / 17</div>
                </div>
              </div>

              <div>
                <div className="pass-field-lbl">Scopes · 5,412 skills</div>
                <div className="pass-scopes">
                  {["context.read", "agent.spawn", "vault.read", "deploy.write", "billing.view"].map(s => (
                    <span className="scope" key={s}>{s}</span>
                  ))}
                </div>
              </div>
            </div>

            <div className="pass-stub">
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
                <span className="stub-glyph"><Glyph size={34} stroke={1.3} /></span>
                <span className="stub-cap">AaaS</span>
              </div>
              <div className="stub-barcode" />
              <span className="stub-cap">scan to verify</span>
            </div>
          </div>

          {/* stamps */}
          <div className="stamps glass">
            <div className="stamps-head">
              <div className="stamps-count"><b>{connected}</b> / 17</div>
              <span className="pass-field-lbl">stamps collected</span>
            </div>
            <div className="stamps-grid">
              {SURFACES.slice(0, 9).map((s, i) => (
                <div className={"stamp " + (s.on ? "on" : "off")} key={s.label}
                     style={{ transform: `rotate(${(i % 3 - 1) * 5}deg)` }}>
                  <span className="sn">aaas.</span>
                  <span className="sl">{s.label}</span>
                </div>
              ))}
            </div>
            <div className="stamps-foot">
              <span className="pass-field-lbl">8 surfaces left to claim</span>
              <a className="btn btn-primary" href="#start" style={{ padding: "0.6rem 1rem", fontSize: "0.72rem" }}>Collect <Icon d={ARROW} size={13} /></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Credential = Credential;