"use client"

import { useState, useEffect, useRef } from "react"
import Image from "next/image"
import Link from "next/link"
import { motion, AnimatePresence, useInView } from "framer-motion"
import { 
  Target, Eye, Heart, Award, FileCheck, ChevronRight, Building2
} from "lucide-react"

// Count-up hook
function useCountUp(end: number, duration: number = 2000) {
  const [count, setCount] = useState(0)
  const ref = useRef<HTMLDivElement>(null)
  const isInView = useInView(ref, { once: true, margin: "-100px" })
  const hasStarted = useRef(false)

  useEffect(() => {
    if (!isInView || hasStarted.current) return
    hasStarted.current = true

    let startTime: number
    const animate = (currentTime: number) => {
      if (!startTime) startTime = currentTime
      const progress = Math.min((currentTime - startTime) / duration, 1)
      const easeOutQuart = 1 - Math.pow(1 - progress, 4)
      setCount(Math.floor(easeOutQuart * end))
      if (progress < 1) requestAnimationFrame(animate)
    }
    requestAnimationFrame(animate)
  }, [end, duration, isInView])

  return { count, ref }
}

const tabs = [
  { id: "hakkimizda", label: "Hakkımızda", icon: Heart },
  { id: "misyon", label: "Misyon", icon: Target },
  { id: "vizyon", label: "Vizyon", icon: Eye },
  { id: "degerler", label: "Değerlerimiz", icon: Award },
  { id: "yetki", label: "Yetki Belgesi", icon: FileCheck },
]

const degerler = [
  {
    title: "Sözünde Durmak",
    items: [
      "Söylediklerimiz ile yaptıklarımızda tutarlı olmak",
      "Verdiğimiz sözlerin arkasında durmak",
      "Karşısındaki kişilerde güven uyandırmak",
      "Saygın ve dürüst olarak algılanmak"
    ]
  },
  {
    title: "Takım Ruhu",
    items: [
      "Ekip ile hareket etme kabiliyetine sahip olmak",
      "İyi iletişim kurarak uyumlu ve verimli çalışmak",
      "Şirket hedeflerine katkının farkında olmak",
      "Ortak hedeflere ulaşmayı kolaylaştırmak"
    ]
  },
  {
    title: "Gerçekçilik",
    items: [
      "Olumlu, gerçekçi ve yapıcı yaklaşım",
      "Durumu kapsamlı ve yalın değerlendirmek",
      "Kaynakları etkin şekilde kullanmak"
    ]
  },
  {
    title: "Hayal Gücü ve Yaratıcılık",
    items: [
      "Sektördeki gelişmeleri takip etmek",
      "Yeni yöntemler ve çözümler önermek",
      "Yaratıcı düşünceleri işe katmak"
    ]
  }
]

const images = [
  "https://images.unsplash.com/photo-1521737711867-e3b97375f902?q=80&w=2070&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=2070&auto=format&fit=crop",
  "https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=2070&auto=format&fit=crop",
]

export default function Hakkimizda() {
  const [activeTab, setActiveTab] = useState("hakkimizda")
  const [currentImage, setCurrentImage] = useState(0)

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentImage((prev) => (prev + 1) % images.length)
    }, 4000)
    return () => clearInterval(interval)
  }, [])

  const renderContent = () => {
    switch (activeTab) {
      case "misyon":
        return (
          <div className="space-y-4">
            <h3 className="text-2xl font-bold text-[#0F2A44]">Misyonumuz</h3>
            <p className="text-[#2E2E2E]/70 leading-relaxed">
              Müşterilerimizin yasal gerekler kapsamında eksiklerini belirleyerek, 
              pratik ve teorik bilgi birikimlerimizle optimum çözümler üretmek.
            </p>
            <div className="bg-[#F2B705]/10 border-l-4 border-[#F2B705] rounded-r-xl p-4 mt-4">
              <p className="text-[#0F2A44] font-medium">
                Kaliteli ve güvenli çalışma ortamları sağlamak.
              </p>
            </div>
          </div>
        )
      case "vizyon":
        return (
          <div className="space-y-4">
            <h3 className="text-2xl font-bold text-[#0F2A44]">Vizyonumuz</h3>
            <p className="text-[#2E2E2E]/70 leading-relaxed text-lg">
              Verdiğimiz tüm hizmetlerde öncelikle bölgemizde, 
              daha sonra tüm Türkiye'de uzman kuruluş olmak.
            </p>
            <div className="flex flex-wrap gap-3 mt-4">
              {["Bölgesel Liderlik", "Ulusal Uzmanlık"].map((hedef, i) => (
                <motion.span
                  key={hedef}
                  initial={{ opacity: 0, scale: 0.9 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ delay: i * 0.1 }}
                  className="px-4 py-2 bg-[#0F2A44] text-white rounded-full text-sm font-medium"
                >
                  {hedef}
                </motion.span>
              ))}
            </div>
          </div>
        )
      case "degerler":
        return (
          <div className="space-y-4">
            <h3 className="text-2xl font-bold text-[#0F2A44]">Temel Değerlerimiz</h3>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
              {degerler.map((deger, i) => (
                <motion.div
                  key={deger.title}
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: i * 0.1 }}
                  className="bg-[#F5F7FA] rounded-xl p-4"
                >
                  <h4 className="font-semibold text-[#0F2A44] mb-2 flex items-center gap-2">
                    <span className="w-2 h-2 bg-[#C8102E] rounded-full" />
                    {deger.title}
                  </h4>
                  <ul className="space-y-1">
                    {deger.items.slice(0, 2).map((item, j) => (
                      <li key={j} className="text-sm text-[#2E2E2E]/60">• {item}</li>
                    ))}
                  </ul>
                </motion.div>
              ))}
            </div>
          </div>
        )
      case "yetki":
        return (
          <div className="space-y-4">
            <h3 className="text-2xl font-bold text-[#0F2A44]">Yetki Belgemiz</h3>
            <p className="text-[#2E2E2E]/70 leading-relaxed">
              ÇSGB tarafından verilen OSGB Yetki Belgesi ile resmi olarak yetkilendirilmiş bulunmaktayız.
            </p>
            <div className="flex items-center gap-2 text-sm text-[#0F2A44]/60">
              <FileCheck className="w-4 h-4" />
              <span>Belge No: 656 | Tarih: 23.05.2013</span>
            </div>
            <div className="mt-4 p-3 bg-[#F5F7FA] rounded-xl inline-block">
              <Image
                src="/yetki-belgesi.jpg"
                alt="ÇSGB Yetki Belgesi"
                width={200}
                height={150}
                className="rounded-lg"
              />
            </div>
          </div>
        )
      default:
        return (
          <div className="space-y-4">
            <h3 className="text-2xl font-bold text-[#0F2A44]">Analitik İSG</h3>
            <p className="text-[#2E2E2E]/70 leading-relaxed">
              İş Sağlığı ve Güvenliği alanında farklı sektör ve kuruluşlarda deneyim kazanmış, 
              konusunda yetkin uzmanlarla hizmetinizdeyiz.
            </p>
            <p className="text-[#0F2A44]/60 text-sm flex items-center gap-2">
              <Building2 className="w-4 h-4" />
              2013'ten bu yana ÇSGB yetkili OSGB
            </p>
          </div>
        )
    }
  }

  return (
    <section id="hakkimizda" className="py-20 bg-white overflow-hidden">
      <div className="container mx-auto px-4 sm:px-6">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="text-center mb-12"
        >
          <span className="inline-block px-4 py-1.5 bg-[#0F2A44]/5 text-[#0F2A44] text-sm font-medium rounded-full mb-4">
            Kurumsal
          </span>
          <h2 className="text-3xl sm:text-4xl font-bold text-[#0F2A44]">
            Bizi <span className="text-[#C8102E]">Tanıyın</span>
          </h2>
        </motion.div>

        {/* Main Content */}
        <div className="grid lg:grid-cols-2 gap-8 lg:gap-12 max-w-6xl mx-auto items-center">
          {/* Sol - Görsel */}
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            className="relative"
          >
            <div className="relative h-[400px] lg:h-[500px] rounded-2xl overflow-hidden shadow-2xl">
              <AnimatePresence mode="wait">
                <motion.div
                  key={currentImage}
                  initial={{ opacity: 0, scale: 1.1 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 0.7 }}
                  className="absolute inset-0"
                >
                  <Image
                    src={images[currentImage]}
                    alt="Analitik İSG Ekibi"
                    fill
                    className="object-cover"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-[#0F2A44]/60 via-transparent to-transparent" />
                </motion.div>
              </AnimatePresence>

              {/* Overlay text */}
              <div className="absolute bottom-0 left-0 right-0 p-6">
                <p className="text-white font-medium">Profesyonel Ekibimiz</p>
                <p className="text-white/70 text-sm">Deneyimli uzman kadro</p>
              </div>

              {/* Slider dots */}
              <div className="absolute bottom-6 right-6 flex gap-2">
                {images.map((_, i) => (
                  <button
                    key={i}
                    onClick={() => setCurrentImage(i)}
                    className={`h-2 rounded-full transition-all ${
                      i === currentImage ? "w-6 bg-white" : "w-2 bg-white/40"
                    }`}
                  />
                ))}
              </div>
            </div>

            {/* Floating badge */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.3 }}
              className="absolute -bottom-4 -right-4 lg:right-8 bg-[#C8102E] text-white rounded-xl p-4 shadow-xl"
            >
              <p className="text-2xl font-bold">10+ Yıl</p>
              <p className="text-sm text-white/80">Tecrübe</p>
            </motion.div>
          </motion.div>

          {/* Sağ - Tab İçerik */}
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
          >
            {/* Tabs */}
            <div className="flex flex-wrap gap-2 mb-6">
              {tabs.map((tab) => {
                const Icon = tab.icon
                const isActive = activeTab === tab.id
                return (
                  <button
                    key={tab.id}
                    onClick={() => setActiveTab(tab.id)}
                    className={`flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium transition-all ${
                      isActive
                        ? "bg-[#0F2A44] text-white"
                        : "bg-[#F5F7FA] text-[#0F2A44] hover:bg-[#0F2A44]/10"
                    }`}
                  >
                    <Icon className={`w-4 h-4 ${isActive ? "text-[#F2B705]" : ""}`} />
                    {tab.label}
                  </button>
                )
              })}
            </div>

            {/* Content */}
            <div className="bg-white rounded-2xl border border-[#0F2A44]/10 p-6 lg:p-8 min-h-[250px]">
              <AnimatePresence mode="wait">
                <motion.div
                  key={activeTab}
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -10 }}
                  transition={{ duration: 0.2 }}
                >
                  {renderContent()}
                </motion.div>
              </AnimatePresence>
            </div>

            {/* CTA */}
            <div className="mt-6 flex justify-end">
              <Link
                href="/hakkimizda"
                className="inline-flex items-center gap-2 text-[#0F2A44] font-medium hover:text-[#C8102E] transition-colors group"
              >
                Detaylı Bilgi
                <ChevronRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
              </Link>
            </div>
          </motion.div>
        </div>

        {/* Stats */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-16 max-w-4xl mx-auto"
        >
          {[
            { value: 10, suffix: "+", label: "Yıl Deneyim" },
            { value: 500, suffix: "+", label: "Mutlu Müşteri" },
            { value: 50, suffix: "+", label: "Uzman Kadro" },
            { value: 100, suffix: "%", label: "Memnuniyet", prefix: true },
          ].map((stat, i) => (
            <StatCard key={stat.label} stat={stat} index={i} />
          ))}
        </motion.div>
      </div>
    </section>
  )
}

function StatCard({ stat, index }: { stat: { value: number; suffix: string; label: string; prefix?: boolean }; index: number }) {
  const { count, ref } = useCountUp(stat.value, 2000)
  
  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ delay: 0.1 * index }}
      whileHover={{ y: -4, scale: 1.02 }}
      className="bg-white rounded-xl p-5 text-center border border-[#0F2A44]/10 hover:shadow-xl hover:border-[#C8102E]/20 transition-all"
    >
      <p className="text-3xl md:text-4xl font-bold text-[#C8102E]">
        {stat.prefix ? stat.suffix : ""}{count}{!stat.prefix ? stat.suffix : ""}
      </p>
      <p className="text-sm text-[#2E2E2E]/60 mt-1">{stat.label}</p>
    </motion.div>
  )
}