import Link from 'next/link'
import Image from 'next/image'
import { Card } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { allCourses, formatPrice } from '@/lib/courses'
import { Clock, ArrowRight } from 'lucide-react'
import { SectionHeader } from '@/components/section-header'

export function FeaturedCourses() {
  const featured = allCourses.slice(0, 4)

  return (
    <section id="courses" className="section-padding bg-background">
      <div className="container-wide">
        <SectionHeader
          eyebrow="Most Popular Courses"
          title="Programmes Trusted by Global Leaders"
          description="Explore our most sought-after management courses, designed and delivered by consultants with deep industry expertise."
        />

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {featured.map((course) => (
            <Card
              key={course.id}
              className="overflow-hidden hover:shadow-xl transition-all duration-300 border border-border/50 hover:border-primary/30 hover:-translate-y-1 group p-0 gap-0"
            >
              <Link href={`/courses/${course.slug}`}>
                <div className="w-full h-44 relative overflow-hidden bg-muted">
                  <Image src={course.image} alt={course.title} fill className="object-cover group-hover:scale-105 transition-transform duration-500" />
                  <Badge className="absolute top-3 left-3 bg-white/90 text-primary text-xs border-0">{course.duration}</Badge>
                </div>
                <div className="p-5 space-y-3">
                  <Badge variant="outline" className="w-fit text-xs">{course.category}</Badge>
                  <h3 className="font-bold text-base text-foreground leading-snug line-clamp-3 group-hover:text-primary transition-colors">{course.title}</h3>
                  <div className="flex items-center justify-between pt-2">
                    <span className="flex items-center gap-1.5 text-xs text-muted-foreground"><Clock className="w-3.5 h-3.5" />{course.duration}</span>
                    <span className="text-sm font-bold text-primary">{formatPrice(course.price)}</span>
                  </div>
                  <span className="inline-flex items-center gap-1 text-xs font-semibold text-accent">
                    Read More <ArrowRight className="w-3.5 h-3.5" />
                  </span>
                </div>
              </Link>
            </Card>
          ))}
        </div>

        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mt-12">
          <Link href="/services/upcoming-courses">
            <Button size="lg" className="bg-primary hover:bg-primary/90 font-semibold">
              See All Upcoming Courses <ArrowRight className="ml-2 w-4 h-4" />
            </Button>
          </Link>
          <Link href="/services/live-online-courses">
            <Button size="lg" variant="outline" className="font-semibold">See All Online Courses</Button>
          </Link>
        </div>
      </div>
    </section>
  )
}