industries/app/(marketing)/security/_client.tsx

"use client";

import { Shield, Lock, Key, UserCheck, Server, FileCheck } from "lucide-react";
import { Button, cn } from '@hanzo/ui'
export default function PageClient() {
  const securityFeatures = [
    {
      icon: Shield,
      title: "Enterprise-Grade Security",
      description: "Best-in-class security practices and infrastructure to protect your data and applications"
    },
    {
      icon: Lock,
      title: "End-to-End Encryption",
      description: "All data in transit and at rest is encrypted using industry-standard protocols"
    },
    {
      icon: Key,
      title: "Access Controls",
      description: "Fine-grained permissions and role-based access control (RBAC) for team management"
    },
    {
      icon: UserCheck,
      title: "Identity & Authentication",
      description: "Multi-factor authentication and single sign-on (SSO) support"
    },
    {
      icon: Server,
      title: "Data Protection",
      description: "Regular backups and disaster recovery protocols to ensure data safety"
    },
    {
      icon: FileCheck,
      title: "Compliance",
      description: "Controls aligned to the SOC 2 Type II control set, GDPR compliant, and certification scoped per enterprise engagement"
    }
  ];

  return (
    <div className={cn("hz-min-h-screen hz-transition", "hz-bg hz-fg")}>
      <main className="hz-pt-6 hz-pb-6 hz-px-4">
        <div className="hz-container">
          <div className="hz-align-center hz-mb-7">
            <h1 className="hz-t-4xl hz-w-bold hz-mb-4">
              Security First, Always
            </h1>
            <p className={cn("hz-container-narrow hz-mw-md hz-t-xl", "hz-fg")}>
              We prioritize the security and privacy of your data with enterprise-grade protection at every layer
            </p>
          </div>

          <div className="hz-grid hz-grid-3 hz-gap-6">
            {securityFeatures.map((feature, index) => {
              const Icon = feature.icon;
              return (
                <div
                  key={index}
                  className={cn(
                    "hz-bordered hz-r-lg hz-p-5 hz-transition",
                    "hz-bg-surface hz-hoverable"
                  )}
                >
                  <div className="hz-row hz-ai-center hz-inline-4 hz-mb-4">
                    <div className={cn("hz-p-2 hz-r-lg", "hz-bg-surface")}>
                      <Icon className="hz-sq-4" />
                    </div>
                    <h3 className="hz-t-lg hz-w-medium">
                      {feature.title}
                    </h3>
                  </div>
                  <p className={cn("hz-fg")}>
                    {feature.description}
                  </p>
                </div>
              );
            })}
          </div>

          <div className="hz-mt-7 hz-align-center hz-stack-6">
            <div className={cn(
              "hz-r-lg hz-p-6",
              ""
            )}>
              <h2 className="hz-t-2xl hz-w-bold hz-mb-4">
                Built to the SOC 2 Type II Control Set
              </h2>
              <p className={cn("hz-mb-5", "hz-fg")}>
                Controls aligned to the SOC 2 Type II control set — encryption in transit and at rest,
                role-based access control, and audit logging. Formal certification — SOC 2 Type II,
                ISO 27001, HIPAA with a BAA — is scoped per enterprise engagement. Tell us what your
                procurement needs.
              </p>
              <a href="/contact">
                <Button
                  variant="outline"
                  className={cn(
                    "hz-fg hz-hoverable"
                  )}
                >
                  Talk to Us About Compliance
                </Button>
              </a>
            </div>

            <div className="hz-grid hz-grid-3 hz-gap-4">
              <div className={cn(
                "hz-bordered hz-r-lg hz-p-5",
                "hz-bg-surface"
              )}>
                <div className="hz-t-3xl hz-w-bold hz-mb-2">Multi-region</div>
                <div className={cn("hz-fg")}>Redundancy &amp; Failover</div>
              </div>
              <div className={cn(
                "hz-bordered hz-r-lg hz-p-5",
                "hz-bg-surface"
              )}>
                <div className="hz-t-3xl hz-w-bold hz-mb-2">24/7</div>
                <div className={cn("hz-fg")}>Security Monitoring</div>
              </div>
              <div className={cn(
                "hz-bordered hz-r-lg hz-p-5",
                "hz-bg-surface"
              )}>
                <div className="hz-t-3xl hz-w-bold hz-mb-2">100%</div>
                <div className={cn("hz-fg")}>Data Encryption</div>
              </div>
            </div>

            <div className={cn(
              "hz-bordered hz-r-lg hz-p-6 hz-align-left",
              "hz-bg-surface"
            )}>
              <h2 className="hz-t-2xl hz-w-bold hz-mb-4">
                Found a problem
              </h2>
              <p className={cn("hz-mb-4", "hz-fg")}>
                Email <a href="mailto:[email protected]" className="hz-underline">security@hanzo.ai</a> rather
                than opening a public issue, and include a reproduction if you have one. A real report from a
                stranger is worth more than an internal review. You will get a reply.
              </p>
              <p className={cn("hz-fg")}>
                Two things to leave alone while you look: anything that degrades the service for other people,
                and any data that is not yours. Neither one is needed to show us a bug.
              </p>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}