// FeaturesHub v2 — illustrates "одна авторизация → много возможностей"
// A token plate at the top, pipes flowing down to 3 grouped columns of features.

function FeaturesHub() {
  const { FEATURE_GROUPS } = window.__DATA;

  return (
    <div className="features-hub" id="features">
      {/* Top: token plate */}
      <div className="hub-top">
        <div className="hub-token">
          <div className="hub-token-meta">
            <span className="hub-token-tag">ОДНА АВТОРИЗАЦИЯ</span>
            <span className="hub-token-dot" />
            <span>9 эндпоинтов</span>
            <span className="hub-token-dot" />
            <span>6 SDK</span>
          </div>
          <div className="hub-token-string">
            <span className="tok-c">Authorization:</span>{" "}
            <span className="tok-kw">Token</span>{" "}
            <span className="tok-acc">sk_live_a1b2</span>
            <span className="tok-c">····8c4f</span>
          </div>
        </div>

        {/* SVG pipes connecting token to 3 groups below */}
        <svg className="hub-pipes" viewBox="0 0 1000 80" preserveAspectRatio="none" aria-hidden="true">
          {/* center column down */}
          <path d="M 500 0 L 500 30 L 167 30 L 167 80" fill="none" stroke="var(--line-2)" strokeWidth="1.2" opacity="0.55" />
          <path d="M 500 0 L 500 80" fill="none" stroke="var(--line-2)" strokeWidth="1.2" opacity="0.55" />
          <path d="M 500 0 L 500 30 L 833 30 L 833 80" fill="none" stroke="var(--line-2)" strokeWidth="1.2" opacity="0.55" />
          {/* arrow tips */}
          <circle cx="167" cy="78" r="3" fill="var(--accent)" />
          <circle cx="500" cy="78" r="3" fill="var(--accent)" />
          <circle cx="833" cy="78" r="3" fill="var(--accent)" />
        </svg>
      </div>

      {/* Bottom: 3 grouped columns */}
      <div className="hub-groups">
        {FEATURE_GROUPS.map((g, gi) => (
          <div className="hub-group" key={gi}>
            <div className="hub-group-head">
              <div className="hub-group-tag">{String(gi + 1).padStart(2, "0")}</div>
              <div>
                <div className="hub-group-label">{g.label}</div>
                <div className="hub-group-sub">{g.sub}</div>
              </div>
            </div>
            <ul className="hub-items">
              {g.items.map((it, i) => (
                <li className="hub-item" key={i}>
                  <div className="hub-item-row">
                    <span className="hub-item-tag mono">{it.tag}</span>
                    <span className="hub-item-ms mono">{it.ms}</span>
                  </div>
                  <div className="hub-item-title">{it.title}</div>
                  <div className="hub-item-desc">{it.desc}</div>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { FeaturesHub });
