// Shown when a logged-in user lands on a subdomain that isn't theirs

function NoAccessPage({ requestedSlug, ownSlug }) {
  return (
    <div className="pc-land-root">
      <div className="pc-land-bg" />
      <div className="pc-land-grid-lines" />
      <div className="pc-land-inner">
        <div className="pc-auth-card" style={{ textAlign: "center" }}>
          <div style={{ fontSize: 40, marginBottom: 16 }}>
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" style={{ display: "inline-block" }}>
              <circle cx="24" cy="24" r="22" stroke="var(--danger)" strokeWidth="2" strokeOpacity="0.3" />
              <path d="M24 14v12M24 30v2" stroke="var(--danger)" strokeWidth="2.5" strokeLinecap="round" />
            </svg>
          </div>
          <div className="pc-auth-title" style={{ textAlign: "center", marginBottom: 8 }}>
            Access denied
          </div>
          <div style={{ fontSize: 13.5, color: "var(--text-3)", lineHeight: 1.6, marginBottom: 24 }}>
            {requestedSlug ? (
              <>
                You don't have access to{" "}
                <code style={{ fontFamily: "'Geist Mono', monospace", color: "var(--text-2)", fontSize: 12 }}>
                  {requestedSlug}.cfodash.app
                </code>
                .
              </>
            ) : (
              "You don't have access to this workspace."
            )}
          </div>
          {ownSlug ? (
            <a
              href={`https://${ownSlug}.cfodash.app`}
              style={{
                display: "inline-block",
                padding: "10px 24px",
                background: "var(--accent)",
                color: "var(--on-accent)",
                borderRadius: "var(--r-md)",
                fontSize: 13.5,
                fontWeight: 600,
                textDecoration: "none",
                transition: "filter 0.12s",
              }}
              onMouseOver={e => e.currentTarget.style.filter = "brightness(1.08)"}
              onMouseOut={e => e.currentTarget.style.filter = ""}
            >
              Go to my dashboard →
            </a>
          ) : (
            <a
              href="https://cfodash.app"
              style={{
                display: "inline-block",
                padding: "10px 24px",
                background: "var(--bg-elev-2)",
                color: "var(--text)",
                border: "1px solid var(--border-strong)",
                borderRadius: "var(--r-md)",
                fontSize: 13.5,
                fontWeight: 500,
                textDecoration: "none",
              }}
            >
              Back to home
            </a>
          )}
        </div>
      </div>
    </div>
  );
}