import { PageHero } from '@/components/page-hero'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import Link from 'next/link'
import { Award, Users, Globe, Zap, ArrowRight } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { getYearsOfExcellence, siteConfig } from '@/lib/site-config'

export default function AboutPage() {
  const years = getYearsOfExcellence()

  return (
    <main>
      <PageHero
        eyebrow="About Us"
        title={siteConfig.fullName}
        description={`Leading provider of professional development and corporate training — ${years}+ years of excellence across Southeast Asia and worldwide.`}
      />

      <section className="section-padding">
        <div className="container-wide max-w-3xl mx-auto text-center">
          <h2 className="text-3xl font-bold mb-6">Our Mission</h2>
          <p className="text-lg text-muted-foreground leading-relaxed">
            To deliver world-class training and consulting services that empower professionals and organisations
            to achieve excellence, drive innovation, and create lasting impact in their industries.
          </p>
        </div>
      </section>

      <section className="section-padding bg-muted/40">
        <div className="container-wide">
          <h2 className="text-3xl font-bold mb-12 text-center">Our Core Values</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              { icon: Award, title: 'Excellence', desc: 'Outstanding quality in every training programme and service' },
              { icon: Users, title: 'Collaboration', desc: 'Strong partnerships with clients built on trust and mutual success' },
              { icon: Globe, title: 'Innovation', desc: 'Continuously evolving programmes to meet changing industry needs' },
              { icon: Zap, title: 'Impact', desc: 'Measurable, lasting change in professional capabilities and performance' },
            ].map(({ icon: Icon, title, desc }) => (
              <Card key={title} className="border-border/50 hover:border-primary/30 hover:shadow-md transition-all">
                <CardHeader>
                  <Icon className="w-10 h-10 text-primary mb-3" />
                  <CardTitle>{title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-muted-foreground">{desc}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      <section className="section-padding bg-primary text-primary-foreground">
        <div className="container-wide text-center">
          <h2 className="text-3xl font-bold mb-4">Meet Our People</h2>
          <p className="text-primary-foreground/80 mb-8 max-w-xl mx-auto">
            Our team of consultants and trainers bring decades of industry experience and a passion for developing talent.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/about/our-team">
              <Button className="bg-accent text-accent-foreground hover:bg-accent/90 font-semibold">
                Our Team <ArrowRight className="ml-2 w-4 h-4" />
              </Button>
            </Link>
            <Link href="/about/our-consultants">
              <Button variant="outlineLight" className="font-semibold">
                Our Consultants
              </Button>
            </Link>
          </div>
        </div>
      </section>
    </main>
  )
}