/* global React, SURFACES */

function Constellation() {
  // place surfaces on 3 rings. rx wider than ry for elliptical orbit
  const rings = [
    { rx: 27, ry: 21, items: SURFACES.slice(0, 5),  start: -90 },
    { rx: 40, ry: 31, items: SURFACES.slice(5, 11), start: -60 },
    { rx: 49, ry: 40, items: SURFACES.slice(11, 17),start: -30 },
  ];
  const polar = (rx, ry, deg) => {
    const rad = (deg) * Math.PI / 180;
    return { x: 50 + rx * Math.cos(rad), y: 50 + ry * Math.sin(rad) };
  };

  return (
    <section className="constellation" id="map">
      <div className="wrap const-grid">
        <div className="reveal">
          <span className="eyebrow">One profile · seventeen surfaces</span>
          <h2 className="sec-title h2" style={{ marginTop: 18 }}>Your hub sits at<br/>the center<span style={{ color: "rgb(var(--accent-red))" }}>.</span></h2>
          <p className="sec-sub" style={{ marginTop: 18 }}>
            aaas.company is the gravitational center of the ecosystem. Connect a surface once and
            your identity, context and billing orbit with you — no re-auth, no re-setup.
          </p>
          <div className="const-travel">
            {[
              ["context", "research, memory & preferences"],
              ["identity", "one name, one verified badge"],
              ["skills", "5,400+ vault skills, unlocked"],
              ["billing", "one card across every surface"],
            ].map(([k, v]) => (
              <div className="travel-row" key={k}>
                <span className="travel-key">{k}</span>
                <span className="travel-desc">{v}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="reveal" style={{ transitionDelay: "0.08s" }}>
          <div className="orbit">
            <svg className="rings" viewBox="0 0 100 100" preserveAspectRatio="none">
              {rings.map((r, i) => (
                <ellipse key={i} cx="50" cy="50" rx={r.rx} ry={r.ry} fill="none"
                  stroke="rgba(0,243,255,0.18)" strokeWidth="0.15"
                  strokeDasharray={i === 0 ? "0.6 0.9" : "0.4 1.3"} />
              ))}
              {rings[0].items.map((_, i) => {
                const deg = rings[0].start + (360 / rings[0].items.length) * i;
                const p = polar(rings[0].rx, rings[0].ry, deg);
                return <line key={i} x1="50" y1="50" x2={p.x} y2={p.y}
                  stroke="rgba(0,243,255,0.14)" strokeWidth="0.12" />;
              })}
            </svg>

            {/* center hub */}
            <div className="orbit-node hub">
              <span className="hub-av">JL</span>
              <span className="hub-name">jay.aaas</span>
              <span className="hub-tag">your hub</span>
            </div>

            {/* orbiting surfaces */}
            {rings.map((r) =>
              r.items.map((s, i) => {
                const deg = r.start + (360 / r.items.length) * i;
                const p = polar(r.rx, r.ry, deg);
                return (
                  <div className="orbit-node" key={s.label} style={{ left: `${p.x}%`, top: `${p.y}%`, zIndex: s.on ? 5 : 3 }}>
                    <span className={"surf-node " + (s.on ? "on" : "off")}>
                      <span className="sd" />aaas<b>.{s.label}</b>
                    </span>
                  </div>
                );
              })
            )}
          </div>
          <div className="const-legend">
            <span className="legend-item"><span className="ld" style={{ background: "rgb(var(--circuit-glow))", boxShadow: "0 0 7px rgb(var(--circuit-glow))" }} />connected · 9</span>
            <span className="legend-item"><span className="ld" style={{ background: "rgba(224,224,222,0.4)" }} />available · 8</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Constellation = Constellation;