import Link from 'next/link'
import Image from 'next/image'
import { ArrowRight } from 'lucide-react'
import { services } from '@/lib/site-config'
import { SectionHeader } from '@/components/section-header'

export function ServicesSection() {
  return (
    <section id="services" className="section-padding bg-background">
      <div className="container-wide">
        <SectionHeader
          eyebrow="Our Services"
          title="Training That Fits Your Goals"
          description="Our management consultants work with organisations across sectors to build and deliver training shaped around your objectives and the real challenges your teams face."
        />

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
          {services.map((service, index) => (
            <Link
              key={service.id}
              href={service.href}
              className={`group relative flex flex-col overflow-hidden rounded-2xl bg-card border border-border/60 shadow-sm hover:shadow-xl hover:border-accent/40 transition-all duration-300 hover:-translate-y-1 ${
                index === 0 ? 'lg:col-span-2 lg:flex-row lg:min-h-[320px]' : ''
              }`}
            >
              <div
                className={`relative overflow-hidden bg-muted shrink-0 ${
                  index === 0 ? 'w-full h-56 lg:w-1/2 lg:h-full lg:min-h-[320px]' : 'h-48'
                }`}
              >
                <Image
                  src={service.image}
                  alt={service.subtitle}
                  fill
                  sizes={index === 0 ? '(max-width: 1024px) 100vw, 50vw' : '(max-width: 768px) 100vw, 33vw'}
                  className="object-cover group-hover:scale-105 transition-transform duration-500"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-primary/60 via-primary/20 to-transparent" />
                <span className="absolute bottom-4 left-4 text-xs font-semibold uppercase tracking-wider text-white/90 bg-primary/80 backdrop-blur-sm px-3 py-1 rounded-full">
                  {service.subtitle}
                </span>
              </div>

              <div className={`flex flex-col justify-center p-6 md:p-8 ${index === 0 ? 'lg:w-1/2' : ''}`}>
                <h3 className="text-xl font-bold text-foreground leading-snug mb-3 group-hover:text-primary transition-colors">
                  {service.title}
                </h3>
                <p className="text-muted-foreground text-sm leading-relaxed mb-5 flex-1">
                  {service.description}
                </p>
                <span className="inline-flex items-center gap-2 text-sm font-semibold text-accent group-hover:gap-3 transition-all">
                  {service.cta}
                  <ArrowRight className="w-4 h-4" />
                </span>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  )
}