// Authentication showcase — every way a user can get in, plus outbound OIDC
const { useState: useStateA } = React;

const AUTH_PROVIDERS = [
  { id: "inbuilt",   name: "Platform accounts", kind: "Built-in",  img: "images/logonproviders/inbuilt.png" },
  { id: "ad",        name: "Active Directory",  kind: "Directory", img: "images/logonproviders/ad.png" },
  { id: "azuread",   name: "Azure AD / Entra ID",kind: "Directory", img: "images/logonproviders/azuread.png" },
  { id: "wia",       name: "Windows Integrated",kind: "Directory", bg: "#2D4A6B", fg: "#fff",     mark: "W" },
  { id: "saml",      name: "SAML 2.0",          kind: "Federation",bg: "#5B4B9E", fg: "#fff",     mark: "SA" },
  { id: "oidc",      name: "OpenID Connect",    kind: "Federation",bg: "#4B3F8F", fg: "#fff",     mark: "ID" },
  { id: "microsoft", name: "Microsoft",         kind: "Social",    bg: "#2563EB", fg: "#fff",     mark: "M" },
  { id: "google",    name: "Google",            kind: "Social",    img: "images/logonproviders/google.png" },
  { id: "apple",     name: "Apple",             kind: "Social",    bg: "#111827", fg: "#fff",     mark: "Ap" },
  { id: "facebook",  name: "Facebook",          kind: "Social",    img: "images/logonproviders/facebook.png" },
  { id: "twitter",   name: "X / Twitter",       kind: "Social",    img: "images/logonproviders/twitter.png" },
  { id: "linkedin",  name: "LinkedIn",          kind: "Social",    bg: "#0A66C2", fg: "#fff",     mark: "in" },
  { id: "instagram", name: "Instagram",         kind: "Social",    bg: "#7C3AED", fg: "#fff",     mark: "Ig" },
  { id: "amazon",    name: "Amazon",            kind: "Social",    bg: "#F59E0B", fg: "#111827",  mark: "a" },
  { id: "github",    name: "GitHub",            kind: "Social",    bg: "#24292F", fg: "#fff",     mark: "Gh" },
  { id: "xero",      name: "Xero",              kind: "Business",  img: "images/logonproviders/xero.png" },
  { id: "loginlink", name: "Magic login links", kind: "Passwordless", img: "images/logonproviders/loginlink.png" },
];

const AUTH_FILTERS = ["All", "Built-in", "Directory", "Federation", "Social", "Business", "Passwordless"];

function AuthSection({ onNavigate }) {
  const [filter, setFilter] = useStateA("All");
  const shown = filter === "All" ? AUTH_PROVIDERS : AUTH_PROVIDERS.filter(p => p.kind === filter);

  return (
    <section className="auth-sec">
      <div className="container">
        <div className="auth-head">
          <div>
            <span className="eyebrow">Authentication</span>
            <h2 className="h-large" style={{ marginTop: 16 }}>
              However your users<br/>
              <em style={{ fontFamily: "Instrument Serif, serif", fontStyle: "italic", fontWeight: 400 }} className="grad-text">already sign in.</em>
            </h2>
          </div>
          <p className="lead" style={{ maxWidth: 420 }}>
            Run your own user accounts, federate with the identity provider you already have, or let people use the login they've got. Every method is a switch in the admin panel — not an integration project.
          </p>
        </div>

        <div className="auth-filters">
          {AUTH_FILTERS.map(f => (
            <button key={f} className={"auth-filter" + (filter === f ? " is-on" : "")} onClick={() => setFilter(f)}>
              {f}
              {f !== "All" && <span className="auth-count">{AUTH_PROVIDERS.filter(p => p.kind === f).length}</span>}
            </button>
          ))}
        </div>

        <div className="auth-grid">
          {shown.map(p => (
            <div key={p.id} className="auth-card">
              {p.img
                ? <span className="auth-mark is-img"><img src={p.img} alt="" loading="lazy" /></span>
                : <span className="auth-mark" style={{ background: p.bg, color: p.fg }}>{p.mark}</span>}
              <div>
                <strong>{p.name}</strong>
                <span>{p.kind}</span>
              </div>
            </div>
          ))}
        </div>

        {/* The two directions */}
        <div className="auth-dirs">
          <div className="auth-dir">
            <span className="auth-dir-tag">Inbound</span>
            <h3>Your app as the relying party</h3>
            <p>
              Users arrive from whichever provider you enable. Link multiple Active Directory domains and Entra tenants at once, mix federated and platform accounts in the same application, and map any of them onto the same security groups.
            </p>
            <ul>
              {[
                "Multiple AD domains and Entra tenants simultaneously",
                "SAML 2.0 and OpenID Connect federation",
                "2FA via TOTP authenticator or SMS",
                "Self-service password resets and account end-dates",
                "Per-method domain allow-lists and approval gates",
                "Custom user fields collected at first sign-in",
              ].map(t => (
                <li key={t}>
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 13l4 4L19 7"/></svg>
                  {t}
                </li>
              ))}
            </ul>
          </div>

          <div className="auth-dir is-featured">
            <span className="auth-dir-tag">Outbound</span>
            <h3>Your app as the identity provider</h3>
            <p>
              The platform is a full OpenID Connect provider. Other systems can sign in <em>with</em> your application — your users, your consent screen, your branding — without you building an auth server.
            </p>
            <ul>
              {[
                "Authorization Code flow with PKCE",
                "Refresh tokens with rotation and replay detection",
                "Device authorisation flow for TVs and terminals",
                "Registered clients, scopes and consent management",
                "Signing-key rotation and RP-initiated logout",
                "Standards discovery document — clients self-configure",
              ].map(t => (
                <li key={t}>
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 13l4 4L19 7"/></svg>
                  {t}
                </li>
              ))}
            </ul>
            <code className="auth-code">/.well-known/openid-configuration</code>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { AuthSection, AUTH_PROVIDERS });