"use client"

import { motion } from "framer-motion"
import { ArrowLeft, ArrowRight, Shield, Stethoscope, FileSearch, ClipboardCheck, GraduationCap, AlertTriangle, HeartPulse, Ambulance } from "lucide-react"
import Link from "next/link"
import { Button } from "@/components/ui/button"

const iconMap = {
  shield: Shield,
  stethoscope: Stethoscope,
  fileSearch: FileSearch,
  clipboardCheck: ClipboardCheck,
  graduationCap: GraduationCap,
  alertTriangle: AlertTriangle,
  heartPulse: HeartPulse,
  ambulance: Ambulance,
}

interface HizmetSayfasiProps {
  baslik: string
  aciklama: string
  icerik: React.ReactNode
  oncekiHizmet?: { slug: string; baslik: string }
  sonrakiHizmet?: { slug: string; baslik: string }
  iconName: keyof typeof iconMap
  renk: string
}

export default function HizmetSayfasi({
  baslik,
  aciklama,
  icerik,
  oncekiHizmet,
  sonrakiHizmet,
  iconName,
  renk,
}: HizmetSayfasiProps) {
  const Icon = iconMap[iconName]
  
  return (
    <main className="min-h-screen pt-20">
      {/* Hero */}
      <section className={`bg-gradient-to-br ${renk} py-16 sm:py-20`}>
        <div className="container mx-auto px-4 sm:px-6">
          <div className="flex items-center justify-between mb-8">
            {oncekiHizmet ? (
              <Link href={`/hizmetler/${oncekiHizmet.slug}`} className="flex items-center gap-2 text-white/80 hover:text-white transition-colors">
                <ArrowLeft className="w-4 h-4" />
                <span className="text-sm hidden sm:inline">{oncekiHizmet.baslik}</span>
              </Link>
            ) : <div />}
            
            <Link href="/" className="text-white font-bold text-xl">Analitik</Link>
            
            {sonrakiHizmet ? (
              <Link href={`/hizmetler/${sonrakiHizmet.slug}`} className="flex items-center gap-2 text-white/80 hover:text-white transition-colors">
                <span className="text-sm hidden sm:inline">{sonrakiHizmet.baslik}</span>
                <ArrowRight className="w-4 h-4" />
              </Link>
            ) : <div />}
          </div>
          
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-center max-w-3xl mx-auto"
          >
            <div className="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
              <Icon className="w-8 h-8 text-white" />
            </div>
            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-4">
              {baslik}
            </h1>
            <p className="text-lg text-white/90">
              {aciklama}
            </p>
          </motion.div>
        </div>
      </section>

      {/* İçerik */}
      <section className="py-12 sm:py-16">
        <div className="container mx-auto px-4 sm:px-6">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2 }}
            className="max-w-4xl mx-auto"
          >
            {icerik}
          </motion.div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-12 bg-slate-50">
        <div className="container mx-auto px-4 sm:px-6 text-center">
          <h2 className="text-2xl font-bold text-slate-900 mb-4">
            Hizmetlerimiz Hakkında Bilgi Almak İster misiniz?
          </h2>
          <Button size="lg" asChild>
            <Link href="/#basvuru">Online Başvuru Formu</Link>
          </Button>
        </div>
      </section>
    </main>
  )
}