'use client'

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'

export default function OurTeam() {
  const departments = [
    {
      name: 'Training & Development',
      description: 'Designing and delivering world-class training programs',
      team_size: '25+',
      responsibilities: ['Course Design', 'Trainer Coordination', 'Quality Assurance']
    },
    {
      name: 'Consulting Services',
      description: 'Providing strategic consulting to organizations',
      team_size: '12+',
      responsibilities: ['Strategic Consulting', 'Change Management', 'Executive Coaching']
    },
    {
      name: 'Client Services',
      description: 'Ensuring exceptional client experience and support',
      team_size: '15+',
      responsibilities: ['Account Management', 'Customer Support', 'Event Coordination']
    },
    {
      name: 'Operations & Administration',
      description: 'Supporting smooth organizational operations',
      team_size: '10+',
      responsibilities: ['Administration', 'Finance', 'HR Management']
    },
  ]

  const values = [
    { title: 'Excellence', description: 'We strive for the highest quality in everything we do.' },
    { title: 'Integrity', description: 'We conduct business with honesty and strong ethical principles.' },
    { title: 'Innovation', description: 'We embrace creative solutions and continuous improvement.' },
    { title: 'Collaboration', description: 'We work together to achieve shared success.' },
    { title: 'Commitment', description: 'We are dedicated to our clients' transformation and growth.' },
    { title: 'Diversity', description: 'We celebrate diverse perspectives and inclusive environments.' },
  ]

  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">Our Team</h1>
            <p className="text-lg opacity-90">Dedicated professionals committed to your success.</p>
          </div>
        </section>

        {/* Team Structure */}
        <section className="py-16">
          <div className="container mx-auto px-4">
            <h2 className="text-3xl font-bold mb-8">Our Organization</h2>
            <div className="grid md:grid-cols-2 gap-8 mb-16">
              {departments.map((dept, index) => (
                <Card key={index}>
                  <CardHeader>
                    <CardTitle>{dept.name}</CardTitle>
                    <CardDescription>{dept.description}</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div>
                      <p className="text-sm font-semibold text-muted-foreground mb-1">Team Size</p>
                      <p className="text-2xl font-bold text-primary">{dept.team_size}</p>
                    </div>
                    <div>
                      <p className="text-sm font-semibold text-muted-foreground mb-2">Key Responsibilities</p>
                      <ul className="space-y-1">
                        {dept.responsibilities.map((resp, idx) => (
                          <li key={idx} className="text-sm">• {resp}</li>
                        ))}
                      </ul>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>

            {/* Our Values */}
            <div className="mb-16">
              <h2 className="text-3xl font-bold mb-8">Our Core Values</h2>
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                {values.map((value, index) => (
                  <Card key={index} className="text-center">
                    <CardHeader>
                      <CardTitle className="text-primary">{value.title}</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <p className="text-muted-foreground">{value.description}</p>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>

            {/* Culture */}
            <Card className="bg-primary/5 border-primary/20">
              <CardHeader>
                <CardTitle className="text-2xl">Our Culture</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <p>At Bangkok Corporate Training Centre International, we believe that our people are our greatest asset. We foster an environment where:</p>
                <ul className="grid md:grid-cols-2 gap-4">
                  <li className="flex gap-2">
                    <span className="text-primary font-bold">•</span>
                    <span>Innovation and creativity are encouraged</span>
                  </li>
                  <li className="flex gap-2">
                    <span className="text-primary font-bold">•</span>
                    <span>Continuous learning is supported</span>
                  </li>
                  <li className="flex gap-2">
                    <span className="text-primary font-bold">•</span>
                    <span>Collaboration is valued</span>
                  </li>
                  <li className="flex gap-2">
                    <span className="text-primary font-bold">•</span>
                    <span>Excellence is the standard</span>
                  </li>
                  <li className="flex gap-2">
                    <span className="text-primary font-bold">•</span>
                    <span>Work-life balance is respected</span>
                  </li>
                  <li className="flex gap-2">
                    <span className="text-primary font-bold">•</span>
                    <span>Diversity and inclusion are celebrated</span>
                  </li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </section>
      </div>
    </main>
  )
}