"use client"

import { motion } from "framer-motion"
import { ArrowRight, GraduationCap, Award, BookOpen, Flame, HardHat, Zap, ExternalLink, CheckCircle2, Clock } from "lucide-react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import Navbar from "@/components/bolumler/Navbar"
import SayfaGecisOklari from "@/components/bolumler/SayfaGecisOklari"

const kategoriler = [
  {
    baslik: "Temel Eğitimler",
    icon: BookOpen,
    renk: "bg-blue-500",
    egitimler: ["Temel İSG", "Risk Analizi", "Yasal Mevzuat", "Ergonomi"]
  },
  {
    baslik: "Yüksek Risk",
    icon: HardHat,
    renk: "bg-amber-500",
    egitimler: ["Yüksekte Çalışma", "İskele", "Kapalı Alan", "Kaldırma Ekipmanları"]
  },
  {
    baslik: "Acil Durum",
    icon: Flame,
    renk: "bg-red-500",
    egitimler: ["Yangın Önlemleri", "İlk Yardım", "Tahliye Tatbikatı", "Kriz Yönetimi"]
  },
  {
    baslik: "Özel Eğitimler",
    icon: Zap,
    renk: "bg-purple-500",
    egitimler: ["KKD Kullanımı", "Elektrik Güvenliği", "Forklift", "Güvenli Sürüş"]
  },
]

const egitimSureleri = [
  { sinif: "Az Tehlikeli", sure: "8 saat", periyot: "3 yılda bir" },
  { sinif: "Tehlikeli", sure: "12 saat", periyot: "2 yılda bir" },
  { sinif: "Çok Tehlikeli", sure: "16 saat", periyot: "Yılda bir" },
]

const mevzuatLinkleri = [
  { baslik: "Çalışanların Eğitimi Yönetmeliği", url: "https://www.mevzuat.gov.tr/mevzuat?MevzuatNo=18318&MevzuatTur=7&MevzuatTertip=5" },
  { baslik: "6331 Sayılı İSG Kanunu", url: "https://www.mevzuat.gov.tr/mevzuat?MevzuatNo=6331&MevzuatTur=1&MevzuatTertip=5" },
]

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.08,
      delayChildren: 0.2,
    }
  }
}

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { 
    opacity: 1, 
    y: 0,
    transition: {
      type: "spring" as const,
      stiffness: 100,
      damping: 12
    }
  }
}

export default function ISGEgitimleri() {
  return (
    <>
      <Navbar />
      <SayfaGecisOklari 
        oncekiSayfa={{ href: "/hizmetler/risk-analizi", baslik: "Risk Analizi" }}
        sonrakiSayfa={{ href: "/hizmetler/acil-durum", baslik: "Acil Durum" }}
        analitikGoster={false}
      />
      <main className="min-h-screen pt-24 sm:pt-28 bg-gradient-to-b from-slate-50 via-white to-slate-50">
        <div className="container mx-auto px-4 sm:px-6 py-8 max-w-6xl">
          {/* Main Grid */}
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-start">
            {/* Sol - Tanım ve Kategoriler */}
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5 }}
              className="space-y-6"
            >
              {/* Başlık */}
              <div className="flex flex-col sm:flex-row items-center gap-3 text-center sm:text-left">
                <div className="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
                  <GraduationCap className="w-6 h-6 text-purple-600" />
                </div>
                <div>
                  <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-slate-900 tracking-tight">
                    İSG Eğitimleri
                  </h1>
                  <p className="text-purple-600 text-sm font-medium mt-1">Sertifikalı Eğitim Programları</p>
                </div>
              </div>

              {/* Açıklama */}
              <p className="text-slate-600 text-lg leading-relaxed">
                <span className="text-purple-600 font-semibold">6331 sayılı İSG Kanunu</span> gereği tüm çalışanlara 
                iş sağlığı ve güvenliği eğitimi verilmesi zorunludur. Eğitim sonunda katılımcılara{" "}
                <span className="text-purple-600 font-semibold">resmi sertifika</span> düzenlenir.
              </p>

              {/* Sertifika Bilgisi */}
              <motion.div 
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.2 }}
                className="flex items-center gap-3 p-4 bg-yellow-50 border border-yellow-200 rounded-xl"
              >
                <Award className="w-6 h-6 text-yellow-600 flex-shrink-0" />
                <div>
                  <p className="text-slate-800 font-semibold text-sm">Sertifikalı Eğitim</p>
                  <p className="text-slate-600 text-sm">Bakanlık onaylı katılım belgesi verilir</p>
                </div>
              </motion.div>

              {/* Eğitim Kategorileri */}
              <motion.div 
                variants={containerVariants}
                initial="hidden"
                animate="visible"
                className="grid grid-cols-2 gap-3"
              >
                {kategoriler.map((kat, i) => (
                  <motion.div
                    key={i}
                    variants={itemVariants}
                    whileHover={{ 
                      y: -4,
                      transition: { type: "spring", stiffness: 300 }
                    }}
                    className="bg-white rounded-xl p-4 border border-slate-100 hover:border-purple-200 hover:shadow-md transition-all"
                  >
                    <div className="flex items-center gap-2 mb-3">
                      <div className={`w-8 h-8 ${kat.renk} rounded-lg flex items-center justify-center`}>
                        <kat.icon className="w-4 h-4 text-white" />
                      </div>
                      <h3 className="font-bold text-slate-900 text-sm">{kat.baslik}</h3>
                    </div>
                    <div className="space-y-1">
                      {kat.egitimler.map((egitim, j) => (
                        <p key={j} className="text-slate-600 text-xs flex items-center gap-2">
                          <CheckCircle2 className="w-3 h-3 text-purple-500 flex-shrink-0" />
                          {egitim}
                        </p>
                      ))}
                    </div>
                  </motion.div>
                ))}
              </motion.div>

              {/* Mevzuat Linkleri */}
              <div className="grid grid-cols-2 gap-2">
                {mevzuatLinkleri.map((link, i) => (
                  <a
                    key={i}
                    href={link.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-1.5 text-xs sm:text-sm text-slate-500 hover:text-purple-600 transition-colors"
                  >
                    <ExternalLink className="w-3 h-3 sm:w-3.5 sm:h-3.5 flex-shrink-0" />
                    <span className="line-clamp-1">{link.baslik}</span>
                  </a>
                ))}
              </div>
            </motion.div>

            {/* Sağ - Eğitim Süreleri */}
            <motion.div
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5, delay: 0.1 }}
              className="lg:sticky lg:top-28 space-y-5"
            >
              {/* Eğitim Süreleri Kartı */}
              <div className="bg-gradient-to-br from-purple-50 to-violet-50 border border-purple-200 rounded-2xl p-6">
                <div className="flex items-center gap-3 mb-5">
                  <div className="w-10 h-10 bg-purple-600 rounded-xl flex items-center justify-center">
                    <Clock className="w-5 h-5 text-white" />
                  </div>
                  <div>
                    <h2 className="font-bold text-slate-900">Eğitim Süreleri</h2>
                    <p className="text-slate-500 text-sm">Tehlike sınıfına göre zorunlu süreler</p>
                  </div>
                </div>

                {/* Süreler Listesi */}
                <div className="space-y-2 mb-5">
                  {egitimSureleri.map((item, i) => (
                    <motion.div
                      key={i}
                      initial={{ opacity: 0, x: 20 }}
                      animate={{ opacity: 1, x: 0 }}
                      transition={{ delay: 0.3 + i * 0.1 }}
                      className="flex items-center justify-between bg-white rounded-xl p-3 border border-slate-100"
                    >
                      <div>
                        <span className="text-slate-700 font-medium text-sm">{item.sinif}</span>
                        <p className="text-slate-400 text-xs">{item.periyot}</p>
                      </div>
                      <span className="text-purple-600 font-bold text-sm">{item.sure}</span>
                    </motion.div>
                  ))}
                </div>

                {/* Bilgi Notu */}
                <div className="bg-white/80 rounded-xl p-4 mb-5">
                  <p className="text-slate-600 text-sm leading-relaxed">
                    İşe başlamadan önce ve <span className="font-semibold text-slate-800">iş değişikliğinde</span> eğitim 
                    yenilenmeli. Eğitim kayıtları <span className="text-purple-600 font-bold">15 yıl</span> saklanmalıdır.
                  </p>
                </div>

                {/* CTA */}
                <Link href="/#basvuru" className="group block">
                  <div className="bg-purple-600 hover:bg-purple-700 text-white rounded-xl p-4 transition-colors">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="font-bold">Eğitim Talebi Oluşturun</p>
                        <p className="text-purple-100 text-sm">Uzman eğitmenlerimizle iletişime geçin</p>
                      </div>
                      <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                    </div>
                  </div>
                </Link>
              </div>

              {/* Online Başvuru */}
              <Button className="w-full bg-slate-900 hover:bg-slate-800" size="lg" asChild>
                <Link href="/#basvuru">
                  Hemen Başvuru Yapın
                  <ArrowRight className="ml-2 w-4 h-4" />
                </Link>
              </Button>
            </motion.div>
          </div>
        </div>
      </main>
    </>
  )
}