import Link from 'next/link'
import { PageHero } from '@/components/page-hero'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { ChevronRight } from 'lucide-react'
import { courseSubjects } from '@/lib/site-config'

export default function CoursesPage() {
  return (
    <main>
      <PageHero
        eyebrow="Our Subjects"
        title="Course Categories"
        description="Explore our comprehensive selection of over 500 management courses across 17 key subject areas."
      />

      <section className="section-padding">
        <div className="container-wide">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
            {courseSubjects.map((category, index) => (
              <Link key={category.slug} href={`/services/upcoming-courses?category=${category.slug}`}>
                <Card className="h-full hover:shadow-lg hover:border-accent/30 transition-all cursor-pointer group border-border/50">
                  <CardHeader>
                    <div className="flex items-start justify-between gap-2">
                      <CardTitle className="text-lg group-hover:text-primary transition-colors">
                        {category.name}
                      </CardTitle>
                      {index < 6 && (
                        <Badge className="bg-accent/10 text-accent border-0 shrink-0">Popular</Badge>
                      )}
                    </div>
                    <CardDescription>
                      Professional development courses in {category.name.toLowerCase()}
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">View courses</span>
                      <ChevronRight className="w-4 h-4 text-accent group-hover:translate-x-1 transition-transform" />
                    </div>
                  </CardContent>
                </Card>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <section className="section-padding bg-primary text-primary-foreground">
        <div className="container-wide text-center max-w-2xl mx-auto">
          <h2 className="text-3xl font-bold mb-4">Ready to Find Your Course?</h2>
          <p className="text-primary-foreground/80 mb-8">
            Browse all upcoming courses or contact us for bespoke training tailored to your organisation.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/services/upcoming-courses" className="inline-block bg-accent text-accent-foreground px-8 py-3 rounded-lg hover:bg-accent/90 transition font-semibold text-sm">
              View Upcoming Courses
            </Link>
            <Link href="/contact" className="inline-block border border-white/30 text-white px-8 py-3 rounded-lg hover:bg-white/10 transition font-semibold text-sm">
              Contact Us
            </Link>
          </div>
        </div>
      </section>
    </main>
  )
}