import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Header } from '@/components/layout/header'
import { Shield, Lock, FileCheck, Globe, CheckCircle } from 'lucide-react'

export default function TrustPage() {
  return (
    <>
      <Header />
      <main className="min-h-screen bg-studio-black">
        {/* Hero */}
        <section className="relative border-b border-studio-medium bg-gradient-to-br from-phoenix-fire/10 via-transparent to-sankofa-gold/10 py-24 px-4">
          <div className="mx-auto max-w-4xl text-center">
            <h1 className="mb-6 text-5xl font-bold text-white md:text-6xl">
              Trust & Compliance
            </h1>
            <p className="mb-8 text-xl text-gray-300">
              Enterprise-grade security, compliance, and data sovereignty
            </p>
          </div>
        </section>

        {/* Compliance Standards */}
        <section className="py-24 px-4">
          <div className="mx-auto max-w-6xl">
            <h2 className="mb-12 text-center text-4xl font-bold text-white">
              Compliance & Certifications
            </h2>
            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
              <Card>
                <CardHeader>
                  <Shield className="mb-2 h-10 w-10 text-phoenix-fire" />
                  <CardTitle>DoD/MilSpec Compliance</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-gray-300 mb-4">
                    STIG-compliant infrastructure with security hardening and audit controls.
                  </p>
                  <ul className="space-y-2 text-sm text-gray-400">
                    <li className="flex items-start gap-2">
                      <CheckCircle className="mt-0.5 h-4 w-4 flex-shrink-0 text-phoenix-fire" />
                      <span>Security Technical Implementation Guides (STIG)</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <CheckCircle className="mt-0.5 h-4 w-4 flex-shrink-0 text-phoenix-fire" />
                      <span>RMF authorization ready</span>
                    </li>
                  </ul>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <Lock className="mb-2 h-10 w-10 text-sankofa-gold" />
                  <CardTitle>Data Sovereignty</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-gray-300 mb-4">
                    Complete control over data location, access, and governance.
                  </p>
                  <ul className="space-y-2 text-sm text-gray-400">
                    <li className="flex items-start gap-2">
                      <CheckCircle className="mt-0.5 h-4 w-4 flex-shrink-0 text-sankofa-gold" />
                      <span>Regional data residency controls</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <CheckCircle className="mt-0.5 h-4 w-4 flex-shrink-0 text-sankofa-gold" />
                      <span>No vendor lock-in</span>
                    </li>
                  </ul>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <FileCheck className="mb-2 h-10 w-10 text-neon-cyan" />
                  <CardTitle>Audit & Reporting</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-gray-300 mb-4">
                    Comprehensive audit logging and compliance reporting.
                  </p>
                  <ul className="space-y-2 text-sm text-gray-400">
                    <li className="flex items-start gap-2">
                      <CheckCircle className="mt-0.5 h-4 w-4 flex-shrink-0 text-neon-cyan" />
                      <span>Immutable audit logs</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <CheckCircle className="mt-0.5 h-4 w-4 flex-shrink-0 text-neon-cyan" />
                      <span>Compliance dashboards</span>
                    </li>
                  </ul>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

        {/* Security Features */}
        <section className="border-t border-studio-medium bg-studio-dark py-24 px-4">
          <div className="mx-auto max-w-6xl">
            <h2 className="mb-12 text-center text-4xl font-bold text-white">
              Security Features
            </h2>
            <div className="grid gap-8 md:grid-cols-2">
              <div>
                <h3 className="mb-4 text-2xl font-bold text-white">Sovereign Identity</h3>
                <p className="mb-4 text-gray-300">
                  Keycloak-based identity management with zero Azure dependencies. 
                  Complete control over authentication, authorization, and user management.
                </p>
                <ul className="space-y-2 text-sm text-gray-400">
                  <li>• Multi-factor authentication (MFA)</li>
                  <li>• SSO integration (SAML, OIDC)</li>
                  <li>• Role-based access control (RBAC)</li>
                  <li>• Identity federation</li>
                </ul>
              </div>

              <div>
                <h3 className="mb-4 text-2xl font-bold text-white">Zero Trust Architecture</h3>
                <p className="mb-4 text-gray-300">
                  Every request is verified, every connection is encrypted, and access is 
                  granted on a least-privilege basis.
                </p>
                <ul className="space-y-2 text-sm text-gray-400">
                  <li>• Network segmentation</li>
                  <li>• End-to-end encryption</li>
                  <li>• Continuous verification</li>
                  <li>• Threat detection and response</li>
                </ul>
              </div>
            </div>
          </div>
        </section>

        {/* CTA */}
        <section className="py-24 px-4">
          <div className="mx-auto max-w-4xl text-center">
            <h2 className="mb-6 text-4xl font-bold text-white">
              Questions About Compliance?
            </h2>
            <p className="mb-8 text-xl text-gray-400">
              Contact our compliance team for detailed information
            </p>
            <Button variant="phoenix" size="lg" asChild>
              <Link href="/support">Contact Support</Link>
            </Button>
          </div>
        </section>
      </main>
    </>
  )
}

