"use client";

import { motion, useScroll, useTransform, AnimatePresence } from "framer-motion";
import { useRef, useState } from "react";
import type { DemoData } from "@/data/demos";
import AnimatedCounter from "@/components/ui/AnimatedCounter";

const easeOutExpo = [0.16, 1, 0.3, 1] as [number, number, number, number];

const fadeUp = {
  hidden: { opacity: 0, y: 40 },
  show: { opacity: 1, y: 0, transition: { duration: 0.7, ease: easeOutExpo } },
};

const stagger = {
  hidden: {},
  show: { transition: { staggerChildren: 0.1 } },
};

export default function KlinikTemplate({ data }: { data: DemoData }) {
  const { firma, istatistikler, hizmetler, doktorlar, yorumlar } = data;
  const heroRef = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({ target: heroRef, offset: ["start start", "end start"] });
  const heroY = useTransform(scrollYProgress, [0, 1], ["0%", "30%"]);
  const heroOpacity = useTransform(scrollYProgress, [0, 0.8], [1, 0]);
  const [activeYorum, setActiveYorum] = useState(0);
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <div className="bg-[#FAF9F6] text-[#1C1917] font-body">

      {/* ── HEADER ── */}
      <motion.header
        className="fixed top-0 left-0 right-0 z-50 px-6 pt-5"
        initial={{ y: -80 }}
        animate={{ y: 0 }}
        transition={{ duration: 0.6, ease: easeOutExpo }}
      >
        <div className="mx-auto max-w-6xl px-6 h-16 flex items-center justify-between bg-[#FAF9F6]/80 backdrop-blur-md border border-[#E7E5E4] rounded-full">
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 rounded-lg bg-[#1C1917] flex items-center justify-center text-sm font-bold text-[#FAF9F6]">
              {firma.logoEmoji}
            </div>
            <span className="font-display font-bold text-[15px] tracking-tight">{firma.adi}</span>
          </div>

          <nav className="hidden md:flex items-center gap-8">
            {["Hizmetler", "Doktorlar", "Yorumlar", "İletişim"].map((item) => (
              <a key={item} href={`#${item.toLowerCase()}`}
                 className="text-[12px] font-medium tracking-tight text-[#78716C] hover:text-[#1C1917] transition-colors duration-200">
                {item}
              </a>
            ))}
          </nav>

          <motion.a
            href="#randevu"
            className="hidden md:flex items-center gap-2 text-[12px] font-bold text-[#FAF9F6] bg-[#1C1917] px-5 py-2.5 rounded-full hover:bg-[#33302E] transition-colors"
            whileTap={{ scale: 0.97 }}
          >
            Randevu Al
          </motion.a>

          <button className="md:hidden flex flex-col justify-center items-end gap-1 w-8 h-8 cursor-pointer" onClick={() => setMenuOpen(!menuOpen)}>
            <span className={`h-0.5 bg-[#1C1917] transition-all duration-300 ${menuOpen ? "w-5 rotate-45 translate-y-1.5" : "w-5"}`} />
            <span className={`h-0.5 bg-[#1C1917] transition-all duration-300 ${menuOpen ? "w-0 opacity-0" : "w-3"}`} />
            <span className={`h-0.5 bg-[#1C1917] transition-all duration-300 ${menuOpen ? "w-5 -rotate-45 -translate-y-1.5" : "w-4"}`} />
          </button>
        </div>

        {/* Mobile Dropdown */}
        <AnimatePresence>
          {menuOpen && (
            <motion.div 
              className="md:hidden max-w-6xl mx-auto mt-2 bg-[#FAF9F6] border border-[#E7E5E4] rounded-2xl p-4 space-y-2"
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -10 }}
              transition={{ duration: 0.3, ease: easeOutExpo }}
            >
              {["Hizmetler", "Doktorlar", "Yorumlar", "İletişim", "Randevu"].map(item => (
                <a 
                  key={item} 
                  href={item === "Randevu" ? "#randevu" : `#${item.toLowerCase()}`}
                  className="block text-[14px] font-medium py-2 px-3 rounded-lg hover:bg-[#E7E5E4]/30 text-[#1C1917]"
                  onClick={() => setMenuOpen(false)}
                >
                  {item}
                </a>
              ))}
            </motion.div>
          )}
        </AnimatePresence>
      </motion.header>

      {/* ── HERO ── */}
      <section ref={heroRef} className="relative min-h-screen flex items-center overflow-hidden pt-24 pb-16 bg-[#FAF9F6]">
        {/* Subtle grid pattern */}
        <div className="absolute inset-0 pointer-events-none opacity-[0.03]"
          style={{ backgroundImage: "radial-gradient(#1C1917 1px, transparent 1px)", backgroundSize: "32px 32px" }} />

        <div className="relative z-10 max-w-6xl mx-auto px-6 w-full grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
          
          {/* Hero Left */}
          <motion.div className="lg:col-span-8" variants={stagger} initial="hidden" animate="show">
            <motion.div variants={fadeUp}
              className="inline-flex items-center gap-2 text-[11px] font-bold uppercase tracking-wider text-[#78716C] mb-8"
            >
              <span className="w-1.5 h-1.5 rounded-full bg-[#10B981]" />
              {firma.sehir}&apos;in Modern Sağlık Üssü
            </motion.div>

            <motion.h1 variants={fadeUp}
              className="font-display font-black text-[12vw] sm:text-[8vw] lg:text-[5vw] leading-[0.9] tracking-tight uppercase text-[#1C1917] mb-8">
              Sağlığınız İçin<br />
              <span className="text-transparent stroke-text" style={{ WebkitTextStroke: "1px #1C1917" }}>En Doğru</span> Adım.
            </motion.h1>

            <motion.p variants={fadeUp} className="text-[#57534E] text-base sm:text-lg leading-relaxed max-w-xl mb-10 font-light">
              {firma.slogan}. Son teknoloji teşhis altyapımız ve alanında uzman hekim kadromuz ile her hastamıza kişiselleştirilmiş bir bakım süreci vadediyoruz.
            </motion.p>

            <motion.div variants={fadeUp} className="flex flex-wrap gap-4 mb-12">
              <motion.a href="#randevu"
                className="flex items-center justify-center px-8 py-4 rounded-full font-bold text-[13px] tracking-wide uppercase bg-[#1C1917] text-[#FAF9F6] cursor-pointer hover:bg-[#33302E] transition-all duration-200"
                whileTap={{ scale: 0.97 }}>
                📅 Randevu Oluştur
              </motion.a>
              <motion.a href="#hizmetler"
                className="flex items-center justify-center px-8 py-4 rounded-full font-bold text-[13px] tracking-wide uppercase border border-[#E7E5E4] text-[#1C1917] hover:bg-[#E7E5E4]/20 transition-all cursor-pointer duration-200"
                whileTap={{ scale: 0.97 }}>
                Hizmetler →
              </motion.a>
            </motion.div>

            {/* Stats */}
            <motion.div variants={fadeUp} className="grid grid-cols-2 sm:grid-cols-4 gap-6 pt-10 border-t border-[#E7E5E4]">
              {istatistikler.map(s => {
                const val = parseInt(s.deger.replace(/\D/g, "")) || 0;
                const suf = s.deger.replace(/[0-9]/g, "");
                return (
                  <div key={s.etiket}>
                    <div className="text-3xl font-display font-black text-[#1C1917]">
                      <AnimatedCounter target={val} suffix={suf} />
                    </div>
                    <div className="text-[#78716C] text-[10px] uppercase tracking-wider font-semibold mt-1">{s.etiket}</div>
                  </div>
                );
              })}
            </motion.div>
          </motion.div>

          {/* Hero Right */}
          <motion.div 
            className="lg:col-span-4 hidden lg:block"
            initial={{ opacity: 0, x: 30 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.3, ease: easeOutExpo }}
            style={{ y: heroY }}
          >
            <div className="bg-[#FAF9F6] border border-[#E7E5E4] rounded-3xl p-6 shadow-sm">
              <div className="flex items-center justify-between border-b border-[#E7E5E4] pb-4 mb-4">
                <span className="font-display font-bold text-[12px] uppercase tracking-wider text-[#78716C]">Günlük Randevu Akışı</span>
                <span className="w-1.5 h-1.5 rounded-full bg-[#10B981] animate-pulse" />
              </div>

              <div className="space-y-3">
                {[
                  { saat: "09:30", tip: "Genel Muayene", dolu: true },
                  { saat: "11:00", tip: "Check-Up Kontrol", dolu: false },
                  { saat: "13:30", tip: "Kardiyoloji Muayenesi", dolu: true },
                  { saat: "15:00", tip: "Göz Polikliniği", dolu: false },
                ].map((r, i) => (
                  <div key={i} className="flex items-center justify-between p-3 rounded-2xl bg-[#FAF9F6] border border-[#E7E5E4]/60">
                    <div className="flex items-center gap-3">
                      <span className={`w-2 h-2 rounded-full ${r.dolu ? "bg-red-400" : "bg-green-400"}`} />
                      <div>
                        <p className="text-[#1C1917] text-[12px] font-bold">{r.saat}</p>
                        <p className="text-[#78716C] text-[10px]">{r.tip}</p>
                      </div>
                    </div>
                    <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${r.dolu ? "bg-red-50 text-red-500" : "bg-green-50 text-green-500"}`}>
                      {r.dolu ? "Dolu" : "Müsait"}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </motion.div>

        </div>
      </section>

      {/* ── HİZMETLER ── */}
      <section id="hizmetler" className="py-24 px-6 border-t border-[#E7E5E4] bg-[#FAF9F6]">
        <div className="max-w-6xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 border-b border-[#E7E5E4] pb-12 mb-16">
            <div className="lg:col-span-5">
              <span className="inline-block text-[11px] font-bold uppercase tracking-widest px-3 py-1 bg-[#FAF9F6] border border-[#E7E5E4] rounded-full text-[#78716C] mb-4">
                Tıbbi Birimlerimiz
              </span>
              <h2 className="font-display font-black text-4xl sm:text-5xl uppercase leading-tight tracking-tight text-[#1C1917]">
                Kapsamlı Tedavi Çözümleri
              </h2>
            </div>
            <div className="lg:col-span-7 flex items-end">
              <p className="text-[#57534E] text-base leading-relaxed font-light lg:pl-8 border-l border-transparent lg:border-[#E7E5E4]">
                Her branşta yüksek teknolojik imkanlarla entegre edilmiş tanı ünitelerimiz ile kusursuz bir klinik deneyim sunuyoruz.
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {hizmetler.map((h, i) => (
              <motion.div key={i}
                className="group p-8 rounded-3xl border border-[#E7E5E4] bg-[#FAF9F6] hover:border-[#1C1917] transition-all duration-300 flex flex-col justify-between min-h-[220px]"
                whileHover={{ y: -4 }}
                initial="hidden"
                whileInView="show"
                viewport={{ once: true }}
                variants={fadeUp}>
                <div>
                  <div className="w-10 h-10 rounded-xl bg-[#1C1917]/5 flex items-center justify-center mb-6 group-hover:bg-[#1C1917] group-hover:text-[#FAF9F6] transition-colors duration-300">
                    <span className="text-xl">🩺</span>
                  </div>
                  <h3 className="font-display font-black text-xl uppercase text-[#1C1917] mb-2">{h.baslik}</h3>
                  <p className="text-[#57534E] text-[13px] leading-relaxed font-light">{h.aciklama}</p>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ── DOKTORLAR ── */}
      {doktorlar && (
        <section id="doktorlar" className="py-24 px-6 border-t border-[#E7E5E4] bg-[#FAF9F6]">
          <div className="max-w-6xl mx-auto">
            <div className="mb-16">
              <span className="inline-block text-[11px] font-bold uppercase tracking-widest px-3 py-1 bg-[#FAF9F6] border border-[#E7E5E4] rounded-full text-[#78716C] mb-4">
                Hekim Kadromuz
              </span>
              <h2 className="font-display font-black text-4xl sm:text-5xl uppercase tracking-tight text-[#1C1917]">
                Alanında Öncü Akademik Ekip
              </h2>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {doktorlar.map((d, i) => (
                <motion.div key={i}
                  className="bg-[#FAF9F6] border border-[#E7E5E4] rounded-3xl overflow-hidden hover:border-[#1C1917] transition-all duration-300 flex flex-col justify-between"
                  whileHover={{ y: -6 }}
                  initial="hidden"
                  whileInView="show"
                  viewport={{ once: true }}
                  variants={fadeUp}>
                  <div className="h-44 bg-[#FAF9F6] border-b border-[#E7E5E4] flex items-center justify-center text-5xl relative">
                    <span className="z-10">{d.emoji}</span>
                  </div>
                  <div className="p-6">
                    <h3 className="font-display font-black text-[15px] uppercase text-[#1C1917]">{d.ad}</h3>
                    <p className="text-[12px] font-bold uppercase tracking-wider text-[#78716C] mt-0.5 mb-3">{d.uzmanlik}</p>
                    <div className="flex items-center justify-between text-[11px] text-[#78716C] pt-3 border-t border-[#E7E5E4]/60">
                      <span>⭐ {d.puan}</span>
                      <span>🏥 {d.yil} Yıl</span>
                      <span>👥 {d.hasta}+ Hasta</span>
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* ── RANDEVU ── */}
      <section id="randevu" className="py-24 px-6 border-t border-[#E7E5E4] bg-[#FAF9F6]">
        <div className="max-w-6xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
            
            {/* Left */}
            <div className="lg:col-span-5">
              <span className="inline-block text-[11px] font-bold uppercase tracking-widest px-3 py-1 bg-[#FAF9F6] border border-[#E7E5E4] rounded-full text-[#78716C] mb-4">
                Hızlı Destek Hattı
              </span>
              <h2 className="font-display font-black text-4xl sm:text-5xl uppercase tracking-tight text-[#1C1917] leading-tight mb-8">
                İletişime Geçin
              </h2>
              <p className="text-[#57534E] text-base font-light mb-10">
                Form üzerinden randevu talebi oluşturun. Tıbbi sekreterliğimiz detayları onaylamak üzere sizi en kısa sürede arayacaktır.
              </p>

              <div className="space-y-4">
                {[
                  { ikon: "📞", baslik: "Çağrı Merkezi", val: firma.telefon },
                  { ikon: "📍", baslik: "Poliklinik Adresi", val: firma.adres },
                  { ikon: "✉️", baslik: "Resmi Yazışmalar", val: firma.email },
                ].map((item) => (
                  <div key={item.baslik} className="flex gap-4 bg-[#FAF9F6] border border-[#E7E5E4] rounded-2xl p-4">
                    <span className="text-xl">{item.ikon}</span>
                    <div>
                      <p className="text-[#78716C] text-[10px] font-bold uppercase tracking-wider">{item.baslik}</p>
                      <p className="text-[#1C1917] text-[13px] font-semibold mt-0.5">{item.val}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Right Form */}
            <div className="lg:col-span-7 bg-[#FAF9F6] border border-[#E7E5E4] rounded-3xl p-8 shadow-sm">
              <h3 className="font-display font-black text-xl uppercase text-[#1C1917] mb-6">Online Randevu Formu</h3>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                {[
                  { label: "Hasta Adı Soyadı", placeholder: "Ad Soyad", type: "text" },
                  { label: "Telefon Numarası", placeholder: "05xx xxx xx xx", type: "tel" },
                  { label: "E-Posta Adresi", placeholder: "e-posta@adresiniz.com", type: "email" },
                  { label: "Birim / Poliklinik", type: "select" },
                  { label: "Tercih Edilen Tarih", type: "date" },
                  { label: "Şikayet / Not", placeholder: "Tıbbi geçmişiniz veya eklemek istediğiniz notlar...", type: "textarea", full: true }
                ].map((field, i) => (
                  <div key={i} className={field.full ? "sm:col-span-2 flex flex-col" : "flex flex-col"}>
                    <label className="text-[11px] font-bold uppercase tracking-wider text-[#78716C] mb-2">{field.label}</label>
                    {field.type === "select" ? (
                      <select className="w-full px-0 py-3 bg-transparent border-b border-[#E7E5E4] text-[#1C1917] text-sm focus:outline-none focus:border-[#1C1917] transition-colors rounded-none appearance-none cursor-pointer">
                        <option>Dahiliye</option>
                        <option>Kardiyoloji</option>
                        <option>Göz Sağlığı</option>
                        <option>Diş Hekimliği</option>
                      </select>
                    ) : field.type === "textarea" ? (
                      <textarea rows={3} placeholder={field.placeholder} className="w-full px-0 py-3 bg-transparent border-b border-[#E7E5E4] text-[#1C1917] placeholder-[#78716C]/40 text-sm focus:outline-none focus:border-[#1C1917] transition-colors resize-none rounded-none" />
                    ) : (
                      <input type={field.type} placeholder={field.placeholder} className="w-full px-0 py-3 bg-transparent border-b border-[#E7E5E4] text-[#1C1917] placeholder-[#78716C]/40 text-sm focus:outline-none focus:border-[#1C1917] transition-colors rounded-none" />
                    )}
                  </div>
                ))}
              </div>
              <motion.button
                className="mt-8 w-full py-4 rounded-full font-bold text-[13px] tracking-wide uppercase bg-[#1C1917] text-[#FAF9F6] hover:bg-[#33302E] transition-colors cursor-pointer"
                whileTap={{ scale: 0.98 }}>
                Randevu Talebi Gönder
              </motion.button>
            </div>

          </div>
        </div>
      </section>

      {/* ── YORUMLAR ── */}
      <section id="yorumlar" className="py-24 px-6 border-t border-[#E7E5E4] bg-[#FAF9F6]">
        <div className="max-w-3xl mx-auto">
          <div className="mb-16 text-center">
            <span className="inline-block text-[11px] font-bold uppercase tracking-widest px-3 py-1 bg-[#FAF9F6] border border-[#E7E5E4] rounded-full text-[#78716C] mb-4">
              Hasta Görüşleri
            </span>
            <h2 className="font-display font-black text-4xl sm:text-5xl uppercase tracking-tight text-[#1C1917]">
              Hasta Deneyimleri
            </h2>
          </div>

          <div className="relative border border-[#E7E5E4] rounded-3xl p-8 bg-[#FAF9F6]">
            <AnimatePresence mode="wait">
              <motion.div
                key={activeYorum}
                className="min-h-[160px] flex flex-col justify-between"
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -10 }}
                transition={{ duration: 0.4 }}>
                <div>
                  <div className="flex gap-1 mb-4">
                    {[...Array(yorumlar[activeYorum].puan)].map((_, i) => (
                      <span key={i} className="text-yellow-500 text-lg">★</span>
                    ))}
                  </div>
                  <p className="text-[#57534E] text-base leading-relaxed italic font-light mb-6">
                    &ldquo;{yorumlar[activeYorum].yorum}&rdquo;
                  </p>
                </div>
                <div className="flex items-center gap-3 pt-4 border-t border-[#E7E5E4]/60">
                  <span className="text-2xl">{yorumlar[activeYorum].emoji}</span>
                  <div>
                    <p className="text-[#1C1917] font-bold text-sm uppercase tracking-tight">{yorumlar[activeYorum].yazar}</p>
                    <p className="text-[#78716C] text-[11px]">{yorumlar[activeYorum].tarih}</p>
                  </div>
                </div>
              </motion.div>
            </AnimatePresence>

            <div className="flex justify-center gap-2 mt-8">
              {yorumlar.map((_, i) => (
                <button key={i} onClick={() => setActiveYorum(i)}
                  className="w-2 h-2 rounded-full cursor-pointer transition-all"
                  style={{ background: i === activeYorum ? "#1C1917" : "#E7E5E4",
                           transform: i === activeYorum ? "scale(1.2)" : "scale(1)" }} />
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ── FOOTER ── */}
      <footer className="border-t border-[#E7E5E4] bg-[#FAF9F6] px-6 pt-16 pb-8">
        <div className="max-w-6xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-4 text-[12px] text-[#78716C]">
          <p>© 2026 {firma.adi}. Tüm hakları saklıdır.</p>
          <div className="flex gap-6">
            <a href="#" className="hover:text-[#1C1917] font-light">Gizlilik Bildirgesi</a>
            <a href="#" className="hover:text-[#1C1917] font-light">Çerez Ayarları</a>
          </div>
        </div>
      </footer>

      <style jsx global>{`
        .stroke-text {
          font-weight: 900;
          color: transparent;
        }
      `}</style>

    </div>
  );
}