// SecurityPage.jsx
//
// Grounds the Home page's "Enterprise-Grade Security" stat tile in the
// platform's real guardrails (trans-backend's actual auth/tenancy code,
// per CLAUDE.md / SPEC-07 Section 0/8) - JWT auth, RolesGuard, per-company
// Role templates, companyId-scoped tenant isolation, immutable business-
// rule snapshots - plus the real infrastructure (AWS S3, dedicated VPS).
// Deliberately claims no third-party certification (SOC 2, ISO 27001,
// etc.) since none exists; says so directly rather than staying silent
// and letting a visitor assume one.
//
// Loaded as a classic (non-module) Babel-transformed script - see
// index.html's header comment. React 19 ships no UMD global, so
// `window.React` here is the bridge index.html's ESM import sets up; hooks
// are called as `React.useState` etc. (fully qualified) for the same
// shared-global-scope reason documented in Navbar.jsx.

const SECURITY_PILLARS = [
  {
    title: "Authentication & Access Control",
    points: [
      "JWT-based authentication on every request - no session state a server has to trust blindly.",
      "Role-gated routes (Admin, Owner, Customer, Staff) enforced server-side, not just hidden in the UI.",
      "Per-company Role templates control View, Contribute, or Manage access at the module level - sales, purchase, inventory, and more are gated independently.",
      "Public routes (like the no-login Customer Portal) are explicitly marked as public - every other route requires a valid token by default, not the other way around.",
    ],
  },
  {
    title: "Multi-Tenant Data Isolation",
    points: [
      "Every tenant-owned record is scoped to its company - one customer's data is never queryable from another's session.",
      "That scoping is read from the authenticated request itself, not a value the client can send or override.",
      "Admin impersonation (used for support) is explicit, header-based, and never bypasses the underlying company scoping - an impersonating Admin sees exactly what that company's data looks like, nothing more.",
    ],
  },
  {
    title: "Data Integrity",
    points: [
      "Business rule calculations are snapshotted immutably at the moment they're applied, so a later rule edit can't silently rewrite historical numbers.",
      "Every commercial record (orders, shipments, GRNs) carries a full status lifecycle instead of a single mutable flag.",
      "Customer delivery confirmations lock once a shipment reaches a final state - not editable after the fact by either side.",
    ],
  },
  {
    title: "Infrastructure",
    points: [
      "Files and documents are stored on Amazon S3.",
      "The platform runs on a dedicated, secured VPS - not shared free-tier hosting.",
      "Database credentials and API keys are never exposed to the browser.",
    ],
  },
];

const DATA_OWNERSHIP_POINTS = [
  "You retain all rights to the operational data you enter - SkelBiz retains rights to the platform itself, not what you put into it. See our Terms of Service.",
  "Admin impersonation exists for support, is explicit and header-based, and never grants access beyond what that company's own data looks like.",
  "If you stop using SkelBiz, you can request your data - reach out through Contact and we'll respond directly, not through a ticket queue.",
];

const SECURITY_FAQS = [
  {
    q: "Can another company on the platform ever see our data?",
    a: "No - every tenant-owned record is scoped to its own company at the data layer, not just filtered in what the interface displays.",
  },
  {
    q: "Who can impersonate our account, and why would they?",
    a: "Only an Admin role, for support purposes, using an explicit header - not a silent background permission. It never bypasses the same company-scoping every other request goes through.",
  },
  {
    q: "Do you have a bug bounty or formal disclosure program?",
    a: "Not a formal program yet - we're early. If you find something, tell us directly through Contact and we'll respond ourselves, not through an automated queue.",
  },
  {
    q: "Is pricing or commission data visible to unauthorized roles?",
    a: "No - Business Rules and pricing data are gated by the same per-module Role permissions as everything else, enforced server-side.",
  },
];

function SecurityPage() {
  useDocumentMeta(
    "Security & Trust - SkelBiz Manufacturing Operations Platform",
    "How SkelBiz protects your manufacturing data: JWT authentication, per-company role-based access control, strict multi-tenant isolation, immutable audit trails, and infrastructure on Amazon S3 and dedicated VPS hosting."
  );

  return (
    <>
      <section className="bg-brand-navy px-6 py-20 text-center">
        <span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-emerald-300">
          Security & Trust
        </span>
        <h1 className="mx-auto mt-6 max-w-2xl text-4xl font-extrabold text-white sm:text-5xl">
          Your production data, treated like it matters.
        </h1>
        <p className="mx-auto mt-5 max-w-xl text-lg text-blue-100">
          Here's exactly how access control, tenant isolation, and infrastructure work - not a
          marketing checklist.
        </p>
      </section>

      <section className="mx-auto max-w-6xl px-6 py-20">
        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
          {SECURITY_PILLARS.map((pillar) => (
            <div key={pillar.title} className="rounded-card border border-slate-200 bg-surface-card p-8 shadow-card">
              <h3 className="text-lg font-bold text-brand-navy">{pillar.title}</h3>
              <ul className="mt-4 space-y-3">
                {pillar.points.map((point) => (
                  <li key={point} className="flex items-start gap-2 text-sm leading-relaxed text-slate-600">
                    <svg className="mt-0.5 h-4 w-4 shrink-0 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M20 6L9 17l-5-5" />
                    </svg>
                    {point}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>

      <section className="bg-white py-20">
        <div className="mx-auto max-w-3xl rounded-card border border-slate-200 bg-surface p-8 text-center shadow-card">
          <h2 className="text-xl font-bold text-brand-navy">What we're not claiming</h2>
          <p className="mt-3 text-sm leading-relaxed text-slate-600">
            We're a growing platform, not an enterprise incumbent - we don't hold a SOC 2, ISO 27001, or
            similar third-party certification today, and we'd rather tell you that directly than let a
            badge imply otherwise. Formal certification is on our roadmap as our customer base scales.
          </p>
        </div>
      </section>

      <section className="bg-surface py-20">
        <div className="mx-auto max-w-3xl px-6">
          <h2 className="text-2xl font-bold text-brand-navy">How your data stays yours</h2>
          <ul className="mt-4 space-y-3">
            {DATA_OWNERSHIP_POINTS.map((p) => (
              <li key={p} className="flex items-start gap-2 text-sm leading-relaxed text-slate-600">
                <svg className="mt-0.5 h-4 w-4 shrink-0 text-emerald-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M20 6L9 17l-5-5" />
                </svg>
                {p}
              </li>
            ))}
          </ul>
        </div>
      </section>

      <section className="bg-white py-20">
        <div className="mx-auto max-w-3xl px-6">
          <h2 className="text-center text-2xl font-bold text-brand-navy">Security FAQ</h2>
          <div className="mt-10 space-y-5">
            {SECURITY_FAQS.map((item) => (
              <div key={item.q} className="rounded-card border border-slate-200 bg-surface-card p-6 shadow-card">
                <h3 className="text-base font-semibold text-brand-navy">{item.q}</h3>
                <p className="mt-2 text-sm leading-relaxed text-slate-600">{item.a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-6 py-20">
        <div className="rounded-card bg-brand-navy px-8 py-14 text-center shadow-premium sm:px-16">
          <h2 className="text-2xl font-bold text-white sm:text-3xl">Have a question we didn't cover?</h2>
          <p className="mx-auto mt-3 max-w-xl text-blue-100">
            Ask us directly - on a demo call, or through Contact. We'd rather answer it live than leave it
            unclear.
          </p>
          <a
            href="/request-demo/"
            className="mt-8 inline-block rounded-card bg-emerald-600 px-7 py-3.5 text-sm font-semibold text-white shadow-card transition hover:bg-emerald-700"
          >
            Request a Demo
          </a>
        </div>
      </section>
    </>
  );
}
