/**
 * ThinkSchool Public Website — Security & Architecture Trust Component
 * Highlights verified multi-tenant boundaries, cryptographic session security, and audit standards.
 */
function SecurityPreview() {
  const securityPillars = [
    {
      icon: "shield",
      title: "Strict Multi-Tenant Isolation",
      description:
        "Database queries and mutations are scoped to the verified organization and campus ID, with server-side controls designed to prevent cross-tenant access.",
    },
    {
      icon: "lock",
      title: "Encrypted Payment Credentials",
      description:
        "Payment gateway keys and secrets are encrypted with dedicated application secrets. Webhook signatures are cryptographically verified before ledger posting.",
    },
    {
      icon: "users",
      title: "Granular Server-Side RBAC",
      description:
        "UI hiding is never relied upon for security. Every API endpoint enforces authoritative permissions, campus boundaries, and assigned class/section scopes.",
    },
    {
      icon: "edit-3",
      title: "Immutable Audit Logging",
      description:
        "Every privileged change—marks publication, attendance corrections, fee refunds, and student record modifications—is durably logged with user timestamps.",
    },
  ];

  return (
    <section id="security" className="py-24 md:py-32 bg-zinc-950 border-t border-white/10 relative">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <SectionHeading
          eyebrow="Enterprise Trust & Integrity"
          title="Security built into the foundation, not bolted on."
          description="We treat student, staff, and institutional financial records with uncompromising architectural rigor."
          align="center"
          className="mb-16"
        />

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {securityPillars.map((pillar, idx) => (
            <div
              key={idx}
              className="p-6 rounded-2xl bg-black/60 border border-white/10 hover:border-amber-500/30 transition-all duration-300 flex flex-col justify-between"
            >
              <div>
                <div className="w-10 h-10 rounded-xl bg-amber-500/10 border border-amber-500/20 text-amber-400 flex items-center justify-center mb-5">
                  <Icon name={pillar.icon} size={20} />
                </div>
                <h3 className="text-lg font-heading italic text-white mb-2">{pillar.title}</h3>
                <p className="text-xs sm:text-sm text-zinc-400 font-body leading-relaxed">
                  {pillar.description}
                </p>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-12 p-6 rounded-2xl bg-zinc-900/60 border border-white/10 flex flex-col sm:flex-row items-center justify-between gap-6">
          <div className="flex items-center gap-4 text-left">
            <div className="w-10 h-10 rounded-full bg-amber-500/15 text-amber-400 flex items-center justify-center shrink-0">
              <Icon name="shield" size={20} />
            </div>
            <div>
              <div className="text-sm font-semibold text-white font-body">
                Need a detailed technical security questionnaire for your school board?
              </div>
              <div className="text-xs text-zinc-400 font-body">
                Review our architecture whitepaper or connect directly with our engineering team.
              </div>
            </div>
          </div>
          <Button href="/security/" size="sm" variant="secondary" className="shrink-0 whitespace-nowrap">
            Read Security Architecture →
          </Button>
        </div>
      </div>
    </section>
  );
}

window.SecurityPreview = SecurityPreview;