'use client'

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Check } from 'lucide-react'

export default function Accreditation() {
  const accreditations = [
    { name: 'ISO 9001:2015', description: 'Quality Management Systems', year: '2015' },
    { name: 'ISO 29990:2011', description: 'Learning Services for Non-Formal Education and Training', year: '2012' },
    { name: 'Certified by Thai Ministry', description: 'Registered Training Provider - Thailand', year: '2010' },
    { name: 'Professional Affiliations', description: 'Member of International Training Associations', year: 'Current' },
  ]

  return (
    <main>
      <div className="min-h-screen bg-background">
        {/* Hero Section */}
        <section className="bg-primary text-primary-foreground py-20">
          <div className="container mx-auto px-4">
            <h1 className="text-4xl md:text-5xl font-bold mb-4">Accreditations & Certifications</h1>
            <p className="text-lg opacity-90">Our commitment to quality and excellence is backed by international certifications.</p>
          </div>
        </section>

        {/* Accreditations Grid */}
        <section className="py-16">
          <div className="container mx-auto px-4">
            <div className="grid md:grid-cols-2 gap-8 mb-12">
              {accreditations.map((acc, index) => (
                <Card key={index} className="border-l-4 border-l-primary">
                  <CardHeader>
                    <div className="flex items-start justify-between">
                      <div>
                        <CardTitle className="text-2xl mb-2">{acc.name}</CardTitle>
                        <CardDescription>{acc.description}</CardDescription>
                      </div>
                      <Badge variant="secondary">{acc.year}</Badge>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="flex items-start gap-3">
                      <Check className="w-5 h-5 text-green-600 mt-1 flex-shrink-0" />
                      <p>Certified and recognized as a quality training provider meeting international standards.</p>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>

            {/* Quality Assurance */}
            <Card className="bg-primary/5 border-primary/20">
              <CardHeader>
                <CardTitle>Quality Assurance Commitment</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid md:grid-cols-2 gap-6">
                  <div>
                    <h4 className="font-semibold mb-2">Our Standards</h4>
                    <ul className="space-y-2">
                      <li className="flex gap-2">
                        <Check className="w-5 h-5 text-green-600 flex-shrink-0" />
                        <span>Regular quality audits</span>
                      </li>
                      <li className="flex gap-2">
                        <Check className="w-5 h-5 text-green-600 flex-shrink-0" />
                        <span>Continuous trainer evaluation</span>
                      </li>
                      <li className="flex gap-2">
                        <Check className="w-5 h-5 text-green-600 flex-shrink-0" />
                        <span>Participant satisfaction tracking</span>
                      </li>
                    </ul>
                  </div>
                  <div>
                    <h4 className="font-semibold mb-2">Certifications</h4>
                    <ul className="space-y-2">
                      <li className="flex gap-2">
                        <Check className="w-5 h-5 text-green-600 flex-shrink-0" />
                        <span>Annual compliance reviews</span>
                      </li>
                      <li className="flex gap-2">
                        <Check className="w-5 h-5 text-green-600 flex-shrink-0" />
                        <span>Industry-recognized qualifications</span>
                      </li>
                      <li className="flex gap-2">
                        <Check className="w-5 h-5 text-green-600 flex-shrink-0" />
                        <span>Best practice implementation</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </section>
      </div>
    </main>
  )
}