import { PublicLayout } from '@/components/layout/public-layout'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Award, Book, CheckCircle, Clock } from 'lucide-react'

export default function CertificationPage() {
  const certifications = [
    {
      id: 'phoenix-admin',
      name: 'Phoenix Certified Administrator',
      level: 'Associate',
      duration: '3 months',
      description: 'Learn to manage and operate Phoenix infrastructure',
      skills: ['Infrastructure Management', 'Security', 'Monitoring'],
    },
    {
      id: 'phoenix-architect',
      name: 'Phoenix Certified Architect',
      level: 'Professional',
      duration: '6 months',
      description: 'Design and architect solutions on Phoenix platform',
      skills: ['Architecture Design', 'Best Practices', 'Scalability'],
    },
    {
      id: 'phoenix-developer',
      name: 'Phoenix Certified Developer',
      level: 'Associate',
      duration: '3 months',
      description: 'Build applications using Phoenix APIs and services',
      skills: ['API Development', 'SDKs', 'Integration'],
    },
  ]

  return (
    <PublicLayout>
      <div className="min-h-screen bg-studio-black py-24 px-4">
        <div className="mx-auto max-w-7xl">
          <div className="mb-12 text-center">
            <h1 className="mb-4 text-5xl font-bold text-white">Certification Program</h1>
            <p className="text-xl text-gray-400">
              Validate your expertise with Phoenix certifications
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
            {certifications.map((cert) => (
              <Card key={cert.id} className="hover:border-phoenix-fire transition-colors">
                <CardHeader>
                  <div className="flex items-center gap-3 mb-2">
                    <Award className="h-8 w-8 text-phoenix-fire" />
                    <span className="px-2 py-1 text-xs bg-studio-dark text-gray-400 rounded">
                      {cert.level}
                    </span>
                  </div>
                  <CardTitle className="text-white">{cert.name}</CardTitle>
                  <CardDescription className="text-gray-400">
                    {cert.description}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="mb-4">
                    <div className="flex items-center gap-2 text-sm text-gray-400 mb-2">
                      <Clock className="h-4 w-4" />
                      <span>{cert.duration}</span>
                    </div>
                    <div>
                      <p className="text-sm text-gray-300 mb-2">Skills covered:</p>
                      <ul className="space-y-1">
                        {cert.skills.map((skill) => (
                          <li key={skill} className="flex items-center gap-2 text-sm text-gray-400">
                            <CheckCircle className="h-4 w-4 text-green-400" />
                            <span>{skill}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                  <Button variant="outline" className="w-full" asChild>
                    <Link href={`/certification/${cert.id}`}>Learn More</Link>
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>

          <Card className="bg-studio-dark border-studio-medium">
            <CardHeader>
              <CardTitle className="text-white">Why Get Certified?</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                  <Award className="h-6 w-6 text-phoenix-fire mb-2" />
                  <h3 className="text-white font-semibold mb-2">Validate Skills</h3>
                  <p className="text-gray-400 text-sm">
                    Demonstrate your expertise to employers and clients
                  </p>
                </div>
                <div>
                  <Book className="h-6 w-6 text-sankofa-gold mb-2" />
                  <h3 className="text-white font-semibold mb-2">Career Growth</h3>
                  <p className="text-gray-400 text-sm">
                    Advance your career with recognized credentials
                  </p>
                </div>
                <div>
                  <CheckCircle className="h-6 w-6 text-neon-cyan mb-2" />
                  <h3 className="text-white font-semibold mb-2">Stay Current</h3>
                  <p className="text-gray-400 text-sm">
                    Keep up with latest Phoenix features and best practices
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </PublicLayout>
  )
}

