// ============================================================================
// public/features/docs/gsm-setup.jsx — in-app GSM onboarding screen
// ----------------------------------------------------------------------------
// A friendly landing for "connect your own GSM": the quick path, a download
// button for the edge setup bundle, and the full guide embedded from /docs
// (single source of truth — the same page that's public at /docs).
// ============================================================================

function GsmSetupScreen({ go }) {
  const steps = [
    { n: 1, t: "Download the setup bundle", d: "Get it onto your Ubuntu edge box (the machine on the same LAN as your Dinstar)." },
    { n: 2, t: "Run setup.sh", d: "One command installs Asterisk + WireGuard and prints your box's public key." },
    { n: 3, t: "Connect the tunnel", d: "Paste that key in Settings → Telephony → WireGuard. You get an overlay IP." },
    { n: 4, t: "Configure Dinstar + SIMs", d: "Map prefixes to SIM ports, then add the SIMs in Settings → SIMs." },
    { n: 5, t: "Test & go live", d: "Run the connection test, then an echo call, then a real two-way AI call." },
  ];

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-grid)" }}>
      <Card>
        <CardHead
          title="Connect your own GSM"
          subtitle="Bring your own SIM cards and dial real mobile calls with two-way AI. Follow the 5 steps below."
          right={
            <div style={{ display: "flex", gap: 8 }}>
              <a className="btn btn-primary" href="/downloads/voais-edge-setup.tar.gz">⬇ Download setup bundle</a>
              <a className="btn btn-ghost" href="/docs" target="_blank" rel="noreferrer">Open guide ↗</a>
            </div>
          }
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))", gap: 12, marginTop: 14 }}>
          {steps.map(s => (
            <div key={s.n} style={{ padding: "12px 14px", border: "1px solid var(--line)",
              borderRadius: "var(--r-sm)", background: "var(--surface-2)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{ width: 22, height: 22, borderRadius: 11, background: "var(--accent)",
                  color: "#06122e", fontWeight: 700, fontSize: 12, display: "flex", alignItems: "center", justifyContent: "center" }}>{s.n}</span>
                <span style={{ fontSize: 13, fontWeight: 600 }}>{s.t}</span>
              </div>
              <div style={{ fontSize: 11.5, color: "var(--ink-3)", marginTop: 6 }}>{s.d}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 14, display: "flex", gap: 10, flexWrap: "wrap" }}>
          <Btn kind="primary" onClick={() => go && go("settings")}>Go to Settings → Telephony</Btn>
          <span style={{ fontSize: 12, color: "var(--ink-3)", alignSelf: "center" }}>
            That's where you connect the tunnel and see live connection status.
          </span>
        </div>
      </Card>

      <Card padded={false}>
        <iframe src="/docs" title="GSM setup guide" loading="lazy"
          style={{ width: "100%", height: "78vh", border: "none", borderRadius: "var(--r-md)", background: "#0b0f17" }}/>
      </Card>
    </div>
  );
}

window.GsmSetupScreen = GsmSetupScreen;