"use client"

import { motion } from "framer-motion"
import { ArrowRight, FileSearch, AlertTriangle, Flame, Mountain, Droplets, Users, FileText, ClipboardList, RefreshCw, Award, ExternalLink, CheckCircle2 } 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 hazirlamaAdimlari = [
  { no: 1, text: "Çalışma grubu oluşturma", icon: Users },
  { no: 2, text: "Eğitim verme", icon: Award },
  { no: 3, text: "Form hazırlama", icon: FileText },
  { no: 4, text: "Analiz yapma", icon: ClipboardList },
  { no: 5, text: "Revizyon", icon: RefreshCw },
]

const acilDurumlar = [
  { icon: AlertTriangle, text: "İş Kazası" },
  { icon: Flame, text: "Yangın" },
  { icon: Mountain, text: "Deprem" },
  { icon: Droplets, text: "Sızıntı / Sel" },
]

const mevzuatLinkleri = [
  { baslik: "Risk Değerlendirmesi Yönetmeliği", url: "https://www.mevzuat.gov.tr/mevzuat?MevzuatNo=16925&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.1,
      delayChildren: 0.2,
    }
  }
}

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

export default function RiskAnalizi() {
  return (
    <>
      <Navbar />
      <SayfaGecisOklari 
        oncekiSayfa={{ href: "/hizmetler/isyeri-hekimligi", baslik: "İşyeri Hekimliği" }}
        sonrakiSayfa={{ href: "/hizmetler/isg-egitimleri", baslik: "İSG Eğitimleri" }}
        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 Bilgiler */}
            <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-amber-100 rounded-xl flex items-center justify-center">
                  <FileSearch className="w-6 h-6 text-amber-600" />
                </div>
                <div>
                  <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-slate-900 tracking-tight">
                    Risk Analizi
                  </h1>
                  <p className="text-amber-600 text-sm font-medium mt-1">Tehlike Tespiti & Değerlendirme</p>
                </div>
              </div>

              {/* Açıklama */}
              <p className="text-slate-600 text-lg leading-relaxed">
                İşyerinde var olan ya da dışarıdan gelebilecek <span className="text-amber-600 font-semibold">tehlikelerin belirlenmesi</span>, 
                bu tehlikelerin riske dönüşmesine yol açan faktörler ile tehlikelerden kaynaklanan risklerin{" "}
                <span className="text-amber-600 font-semibold">analiz edilerek derecelendirilmesi</span> ve kontrol tedbirlerinin 
                kararlaştırılması amacıyla yapılması gerekli çalışmalardır.
              </p>

              {/* Hazırlama Adımları */}
              <motion.div 
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.2 }}
                className="bg-amber-50/80 border border-amber-100 rounded-2xl p-5"
              >
                <h2 className="text-sm font-bold text-slate-900 mb-4">Risk Analizi Hazırlama Adımları</h2>
                <div className="flex flex-wrap gap-2">
                  {hazirlamaAdimlari.map((adim, i) => (
                    <motion.div 
                      key={adim.no}
                      initial={{ opacity: 0, scale: 0.9 }}
                      animate={{ opacity: 1, scale: 1 }}
                      transition={{ delay: 0.3 + i * 0.05 }}
                      className="flex items-center gap-2 bg-white border border-amber-200 rounded-full px-3 py-2 hover:shadow-sm transition-shadow"
                    >
                      <span className="w-6 h-6 bg-amber-500 text-white rounded-full flex items-center justify-center text-xs font-bold">
                        {adim.no}
                      </span>
                      <span className="text-slate-700 text-sm font-medium">{adim.text}</span>
                    </motion.div>
                  ))}
                </div>
              </motion.div>

              {/* Eğitim Bilgisi */}
              <motion.div 
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.4 }}
                className="flex items-center gap-3 p-4 bg-purple-50 border border-purple-100 rounded-xl"
              >
                <Award className="w-5 h-5 text-purple-600 flex-shrink-0" />
                <p className="text-slate-700 text-sm">
                  Eğitim sonunda personele <span className="font-bold text-purple-600">katılım sertifikası</span> düzenlenir.
                </p>
              </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-amber-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ğ - Acil Durum Planları */}
            <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"
            >
              {/* Acil Durum Planları Kartı */}
              <div className="bg-gradient-to-br from-amber-50 to-orange-50 border border-amber-200 rounded-2xl p-6">
                <div className="flex items-center gap-3 mb-5">
                  <div className="w-10 h-10 bg-amber-600 rounded-xl flex items-center justify-center">
                    <AlertTriangle className="w-5 h-5 text-white" />
                  </div>
                  <div>
                    <h2 className="font-bold text-slate-900">Acil Durum Planları</h2>
                    <p className="text-slate-500 text-sm">Hazırlanması gereken planlar</p>
                  </div>
                </div>

                {/* Acil Durumlar Listesi */}
                <motion.div 
                  variants={containerVariants}
                  initial="hidden"
                  animate="visible"
                  className="space-y-2 mb-5"
                >
                  {acilDurumlar.map((durum, i) => (
                    <motion.div
                      key={i}
                      variants={itemVariants}
                      whileHover={{ 
                        x: 8,
                        transition: { type: "spring", stiffness: 300 }
                      }}
                      className="flex items-center gap-3 bg-white rounded-xl p-3 border border-slate-100 hover:border-amber-200 hover:shadow-sm transition-all"
                    >
                      <div className="w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center">
                        <durum.icon className="w-4 h-4 text-amber-600" />
                      </div>
                      <span className="text-slate-700 font-medium text-sm">{durum.text}</span>
                      <CheckCircle2 className="w-4 h-4 text-amber-500 ml-auto" />
                    </motion.div>
                  ))}
                </motion.div>

                {/* Bilgi Notu */}
                <div className="bg-white/80 rounded-xl p-4 mb-5">
                  <p className="text-slate-600 text-sm leading-relaxed">
                    <span className="font-semibold text-slate-800">6331 sayılı kanun</span> gereği tüm işyerleri 
                    risk değerlendirmesi yapmak ve acil durum planı hazırlamak <span className="text-amber-600 font-bold">zorundadır</span>.
                  </p>
                </div>

                {/* CTA */}
                <Link href="/#basvuru" className="group block">
                  <div className="bg-amber-600 hover:bg-amber-700 text-white rounded-xl p-4 transition-colors">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="font-bold">Risk Analizi Yaptırın</p>
                        <p className="text-amber-100 text-sm">Uzman ekibimizle 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>
    </>
  )
}