import { PublicLayout } from '@/components/layout/public-layout'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Shield, CheckCircle } from 'lucide-react'

export default function CompliancePage() {
  const complianceFrameworks = [
    { name: 'SOC 2 Type II', status: 'Certified', description: 'Security, availability, and confidentiality controls' },
    { name: 'ISO 27001', status: 'Certified', description: 'Information security management system' },
    { name: 'GDPR', status: 'Compliant', description: 'European data protection regulation' },
    { name: 'HIPAA', status: 'Ready', description: 'Healthcare data protection (when applicable)' },
    { name: 'PCI-DSS', status: 'Compliant', description: 'Payment card industry data security' },
  ]

  return (
    <PublicLayout>
      <div className="min-h-screen bg-studio-black py-24 px-4">
        <div className="mx-auto max-w-4xl">
          <h1 className="mb-8 text-4xl font-bold text-white">Compliance</h1>
          
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <div className="flex items-center gap-3">
                  <Shield className="h-8 w-8 text-phoenix-fire" />
                  <CardTitle className="text-white">Regulatory Compliance</CardTitle>
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-gray-300 mb-6">
                  Sankofa Phoenix maintains compliance with major regulatory frameworks and industry 
                  standards to meet enterprise and government requirements.
                </p>
                
                <div className="space-y-4">
                  {complianceFrameworks.map((framework) => (
                    <div key={framework.name} className="p-4 bg-studio-dark rounded-lg">
                      <div className="flex items-center justify-between mb-2">
                        <h3 className="text-lg font-semibold text-white">{framework.name}</h3>
                        <span className="px-3 py-1 bg-green-500/20 text-green-400 text-xs font-semibold rounded-full">
                          {framework.status}
                        </span>
                      </div>
                      <p className="text-sm text-gray-400">{framework.description}</p>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="text-white">Compliance Certifications</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-300 mb-4">
                  We undergo regular audits and assessments to maintain our compliance certifications. 
                  Certificates and audit reports are available upon request for enterprise customers.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </PublicLayout>
  )
}

