import Link from "next/link"
import Image from "next/image"
import { ArrowRight, CheckCircle, ArrowLeft } from "lucide-react"
import type { LucideIcon } from "lucide-react"

interface ServicePageProps {
  title: string
  subtitle: string
  description: string
  icon: LucideIcon
  color: string
  features: {
    title: string
    description: string
  }[]
  benefits: string[]
  process: {
    step: number
    title: string
    description: string
  }[]
  cta: {
    title: string
    description: string
  }
  gallery?: {
    src: string
    alt: string
  }[]
  benefitsImage?: string
}

export function ServicePageTemplate({
  title,
  subtitle,
  description,
  icon: Icon,
  color,
  features,
  benefits,
  process,
  cta,
  gallery,
  benefitsImage,
}: ServicePageProps) {
  return (
    <div>
      {/* Hero Section */}
      <section className={`relative py-10 lg:py-10 ${color}`}>
        <div className="container mx-auto px-4 lg:px-8">
          <Link
            href="/services"
            className="inline-flex items-center gap-2 text-white/80 hover:text-white mb-8 transition-colors"
          >
            <ArrowLeft className="w-4 h-4" />
            Back to Services
          </Link>

          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <div className="inline-flex items-center gap-2 bg-white/20 text-white px-4 py-2 rounded-full text-sm font-medium mb-6">
                <Icon className="w-4 h-4" />
                {subtitle}
              </div>
              <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-6 text-balance">{title}</h1>
              <p className="text-white/90 text-lg leading-relaxed mb-8 text-pretty">{description}</p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Link
                  href="#contact"
                  className="inline-flex items-center justify-center gap-2 bg-white text-bcc-blue hover:bg-white/90 px-8 py-4 rounded-full font-semibold transition-all hover:shadow-lg"
                >
                  Get Started
                  <ArrowRight className="w-5 h-5" />
                </Link>
                <Link
                  href="#process"
                  className="inline-flex items-center justify-center gap-2 border-2 border-white text-white hover:bg-white/10 px-8 py-4 rounded-full font-semibold transition-all"
                >
                  Learn More
                </Link>
              </div>
            </div>

            {gallery && gallery.length > 0 && (
              <div className="grid grid-cols-2 gap-4">
                {gallery.slice(0, 4).map((image, index) => (
                  <div
                    key={index}
                    className={`relative rounded-2xl overflow-hidden shadow-lg ${index % 2 === 1 ? "mt-8" : ""}`}
                  >
                    <div className="relative h-40 lg:h-48">
                      <Image src={image.src || "/placeholder.svg"} alt={image.alt} fill className="object-cover" />
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        {/* Wave */}
        <div className="absolute bottom-0 left-0 right-0 overflow-hidden leading-none">
          <svg className="relative block w-full h-12 md:h-16" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path
              d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V120H0Z"
              className="fill-background"
            />
          </svg>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-10 lg:py-10">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-12">
            <span className="inline-block text-bcc-orange font-semibold mb-4">What We Offer</span>
            <h2 className="text-3xl md:text-4xl font-bold text-bcc-blue mb-6">Key Features</h2>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <div key={index} className="bg-white rounded-2xl p-6 shadow-sm hover:shadow-lg transition-shadow">
                <div className={`w-12 h-12 rounded-xl ${color} flex items-center justify-center mb-4`}>
                  <span className="text-white font-bold">{index + 1}</span>
                </div>
                <h3 className="text-xl font-bold text-bcc-blue mb-3">{feature.title}</h3>
                <p className="text-bcc-gray leading-relaxed">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section className="py-10 lg:py-10 bg-muted/50">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <span className="inline-block text-bcc-orange font-semibold mb-4">Why Choose Us</span>
              <h2 className="text-3xl md:text-4xl font-bold text-bcc-blue mb-6">Benefits</h2>
              <p className="text-bcc-gray text-lg leading-relaxed mb-8">
                Here&apos;s what you can expect when you choose our {title.toLowerCase()} services.
              </p>
              <ul className="space-y-4">
                {benefits.map((benefit, index) => (
                  <li key={index} className="flex items-start gap-3">
                    <CheckCircle className="w-6 h-6 text-bcc-teal shrink-0 mt-0.5" />
                    <span className="text-bcc-gray">{benefit}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="relative">
              <div className={`absolute inset-0 ${color} rounded-3xl opacity-10`} />
              <div className="relative h-[400px] lg:h-[500px] rounded-3xl overflow-hidden shadow-xl">
                <Image
                  src={
                    benefitsImage ||
                    `/placeholder.svg?height=500&width=600&query=${encodeURIComponent(title + " education training benefits")}`
                  }
                  alt={`${title} benefits`}
                  fill
                  className="object-cover"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Process Section */}
      <section id="process" className="py-10 lg:py-10">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-12">
            <span className="inline-block text-bcc-orange font-semibold mb-4">Our Approach</span>
            <h2 className="text-3xl md:text-4xl font-bold text-bcc-blue mb-6">How It Works</h2>
          </div>

          <div className="relative">
            {/* Connection Line */}
            <div className="hidden lg:block absolute top-1/2 left-0 right-0 h-0.5 bg-bcc-blue/20 -translate-y-1/2" />

            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
              {process.map((step, index) => (
                <div key={index} className="relative text-center">
                  <div
                    className={`w-16 h-16 ${color} rounded-full flex items-center justify-center mx-auto mb-4 relative z-10`}
                  >
                    <span className="text-white font-bold text-xl">{step.step}</span>
                  </div>
                  <h3 className="text-lg font-bold text-bcc-blue mb-2">{step.title}</h3>
                  <p className="text-bcc-gray text-sm leading-relaxed">{step.description}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section id="contact" className={`py-12 lg:py-12 ${color}`}>
        <div className="container mx-auto px-4 lg:px-8 text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">{cta.title}</h2>
          <p className="text-white/90 text-lg leading-relaxed max-w-2xl mx-auto mb-8">{cta.description}</p>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <Link
              href="/#contact"
              className="inline-flex items-center gap-2 bg-white text-bcc-blue hover:bg-white/90 px-8 py-4 rounded-full font-semibold transition-all hover:shadow-lg"
            >
              Contact Us Today
              <ArrowRight className="w-5 h-5" />
            </Link>
            <Link
              href="/services"
              className="inline-flex items-center gap-2 border-2 border-white text-white hover:bg-white/10 px-8 py-4 rounded-full font-semibold transition-all"
            >
              View All Services
            </Link>
          </div>
        </div>
      </section>
    </div>
  )
}