"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 RestoranTemplate2({ data }: { data: DemoData }) {
  const { firma, istatistikler, hizmetler, menu = [], yorumlar = [] } = data;
  const heroRef = useRef<HTMLDivElement>(null);
  
  const { scrollYProgress } = useScroll({ target: heroRef, offset: ["start start", "end start"] });
  const heroY = useTransform(scrollYProgress, [0, 1], ["0%", "20%"]);
  const heroOpacity = useTransform(scrollYProgress, [0, 0.8], [1, 0]);

  const [aktifKategori, setAktifKategori] = useState(0);
  const [showBookingModal, setShowBookingModal] = useState(false);

  // SVG Render Helper for clean vector icons (No Emojis)
  const getIconSvg = (name: string) => {
    switch (name) {
      case "alacarte":
        return (
          <svg className="w-6 h-6 stroke-[#0038A8]" viewBox="0 0 24 24" fill="none" strokeWidth="1.5">
            <path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
          </svg>
        );
      case "special":
        return (
          <svg className="w-6 h-6 stroke-[#0038A8]" viewBox="0 0 24 24" fill="none" strokeWidth="1.5">
            <path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
          </svg>
        );
      case "catering":
        return (
          <svg className="w-6 h-6 stroke-[#0038A8]" viewBox="0 0 24 24" fill="none" strokeWidth="1.5">
            <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v18M3 12h18" />
          </svg>
        );
      case "delivery":
        return (
          <svg className="w-6 h-6 stroke-[#0038A8]" viewBox="0 0 24 24" fill="none" strokeWidth="1.5">
            <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 18.75a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM19.5 18.75a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75" />
          </svg>
        );
      default:
        return (
          <svg className="w-6 h-6 stroke-[#0038A8]" viewBox="0 0 24 24" fill="none" strokeWidth="1.5">
            <path strokeLinecap="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21" />
          </svg>
        );
    }
  };

  return (
    <div className="bg-[#FDFBF7] text-[#121C22] font-body">

      {/* ── HEADER ── */}
      <motion.header
        className="fixed top-4 left-4 right-4 z-50 px-4"
        initial={{ y: -80, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.7, ease: easeOutExpo }}
      >
        <div className="mx-auto max-w-7xl h-20 flex items-center justify-between px-8 bg-[#FDFBF7]/90 backdrop-blur-xl border border-[#0038A8]/10 rounded-2xl shadow-lg">
          <a href="#" className="flex items-center gap-2">
            <span className="text-xl font-bold tracking-tight text-[#0038A8] font-display flex items-center gap-1.5 uppercase">
              <span className="text-2xl">🍋</span> {firma.adi}
            </span>
          </a>

          <nav className="hidden lg:flex items-center gap-8">
            {[
              { label: "Our Story", href: "#story" },
              { label: "Pasta & Pizza", href: "#pasta-pizza" },
              { label: "Lemon Orchard", href: "#lemon" },
              { label: "Hizmetlerimiz", href: "#services" },
              { label: "Rezervasyon", href: "#randevu" }
            ].map(item => (
              <a 
                key={item.label} 
                href={item.href}
                className="text-[11px] font-sans-clean font-bold tracking-[1.5px] uppercase text-[#0038A8]/70 hover:text-[#0038A8] transition-colors"
              >
                {item.label}
              </a>
            ))}
          </nav>

          <div className="flex items-center gap-4">
            <motion.button
              onClick={() => setShowBookingModal(true)}
              className="text-[11px] font-sans-clean font-black tracking-[2px] uppercase text-white bg-[#0038A8] hover:bg-[#002266] px-6 py-3 rounded-xl transition-all cursor-pointer shadow-md shadow-[#0038A8]/20"
              whileHover={{ scale: 1.03 }}
              whileTap={{ scale: 0.98 }}
            >
              Book Table
            </motion.button>
          </div>
        </div>
      </motion.header>

      {/* ── HERO SECTION ── */}
      <section ref={heroRef} className="relative min-h-screen flex items-center bg-[#FDFBF7] pt-24">
        <div className="relative z-10 max-w-7xl mx-auto px-6 w-full py-12">
          <div className="grid lg:grid-cols-12 gap-12 items-center">
            
            {/* Left Content */}
            <motion.div 
              className="lg:col-span-12 z-20 text-center"
              variants={stagger}
              initial="hidden"
              animate="show"
            >
              <motion.div 
                variants={fadeUp}
                className="inline-flex items-center gap-2 text-[10px] font-sans-clean font-black uppercase tracking-widest text-[#0038A8]/60 mb-6 bg-[#0038A8]/5 border border-[#0038A8]/10 px-4 py-2 rounded-full"
              >
                <span className="w-1.5 h-1.5 rounded-full bg-[#0038A8]" />
                {firma.slogan}
              </motion.div>

              <motion.h1 
                variants={fadeUp}
                className="font-display text-6xl md:text-7xl font-black text-[#0038A8] leading-[1.05] tracking-tight mb-8"
              >
                Linen, Lemons
                <br />
                <span className="italic font-light opacity-90 text-[#3C5A48]">&amp; Wood-fired</span>
              </motion.h1>

              <motion.p 
                variants={fadeUp}
                className="text-gray-600 font-sans-clean text-sm lg:text-base leading-relaxed max-w-md mx-auto mb-12 font-medium"
              >
                Karaköy limanında, Sicilya rüzgarları esiyor. El yapımı makarnalar, taze baharatlar ve odun ateşinde karamelize olan lezzetler.
              </motion.p>

              <motion.div variants={fadeUp}>
                <motion.a 
                  href="#pasta-pizza"
                  className="inline-flex items-center gap-3 px-8 py-4 rounded-full bg-[#0038A8] hover:bg-[#002266] text-white font-sans-clean font-black text-xs transition-all shadow-lg shadow-[#0038A8]/30 cursor-pointer"
                  whileHover={{ scale: 1.04 }}
                  whileTap={{ scale: 0.97 }}
                >
                  Discover Menu <span className="text-[10px]">→</span>
                </motion.a>
              </motion.div>
            </motion.div>

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

      {/* ── SECTION 2: OUR STORY ── */}
      <section id="story" className="py-32 bg-[#F5F2EB] px-6 relative z-10 border-t border-[#0038A8]/5">
        <div className="max-w-7xl mx-auto">
          <div className="grid lg:grid-cols-12 gap-16 items-center">
            
            <motion.div 
              className="lg:col-span-12 text-center"
              initial="hidden"
              whileInView="show"
              viewport={{ once: true, amount: 0.2 }}
              variants={stagger}
            >
              <motion.span 
                variants={fadeUp}
                className="text-[#0038A8] font-display italic text-base tracking-wider block mb-4"
              >
                Sicilian Baking Heritage
              </motion.span>
              <motion.h2 
                variants={fadeUp}
                className="font-display text-4xl lg:text-5xl font-black tracking-tight text-[#0038A8] uppercase mb-8"
              >
                Our Story
              </motion.h2>

              <motion.p 
                variants={fadeUp}
                className="text-gray-600 font-sans-clean text-xs leading-relaxed mb-12 max-w-md mx-auto font-medium"
              >
                Odun ateşinin alevi ve zeytin ağacı közlerinin aroması. Sicilia Tavola, nesiller boyu aktarılan İtalyan tariflerini zanaatkar ellerle buluşturuyor. Her pizza taş fırınımızda 485 derecede saniyeler içinde mükemmelleşiyor.
              </motion.p>

              {/* Grid Metrics */}
              <motion.div 
                variants={fadeUp}
                className="grid grid-cols-2 sm:grid-cols-4 gap-4 max-w-4xl mx-auto"
              >
                {istatistikler.map((s, i) => (
                  <div key={i} className="bg-white p-6 rounded-2xl border border-[#0038A8]/5">
                    <div className="text-3xl font-black text-[#0038A8] font-display">
                      {s.deger}
                    </div>
                    <div className="text-gray-400 text-[10px] uppercase font-sans-clean font-bold tracking-widest mt-1">
                      {s.etiket}
                    </div>
                  </div>
                ))}
              </motion.div>
            </motion.div>

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

      {/* ── SECTION 3: PASTA & PIZZA MENU ── */}
      <section id="pasta-pizza" className="py-32 bg-[#FDFBF7] relative z-10 px-6 border-t border-[#0038A8]/5">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <span className="text-[#0038A8] font-display italic text-base tracking-wider block mb-4">our fresh selections</span>
            <h2 className="font-display text-4xl lg:text-5xl font-black tracking-tight text-[#0038A8] uppercase mb-16">
              Pasta &amp; Pizza
            </h2>
          </div>

          <div className="space-y-6 max-w-3xl mx-auto w-full">
            {menu[aktifKategori]?.urunler.map((item) => (
              <div key={item.ad} className="flex flex-col cursor-pointer group">
                <div className="flex items-end justify-between gap-4">
                  <span className="font-display text-base lg:text-lg font-bold text-[#0038A8] group-hover:opacity-85 transition-opacity uppercase">
                    {item.ad}
                  </span>
                  <div className="grow border-b border-dashed border-[#0038A8]/20 mb-2 transition-colors mx-2" />
                  <span className="font-display text-base font-black text-[#0038A8] shrink-0">
                    {item.fiyat}
                  </span>
                </div>
                <p className="text-gray-500 font-sans-clean text-[11px] mt-1 leading-relaxed">
                  {item.aciklama}
                </p>
              </div>
            ))}
          </div>

          {/* Category Tab Buttons */}
          <div className="flex items-center justify-center gap-4 mt-16 flex-wrap">
            {menu.map((kat, idx) => (
              <button 
                key={kat.kategori}
                onClick={() => setAktifKategori(idx)}
                className="text-[10px] font-sans-clean font-bold tracking-[1.5px] uppercase px-5 py-3 rounded-lg border transition-all cursor-pointer"
                style={aktifKategori === idx 
                  ? { backgroundColor: "#0038A8", color: "white", borderColor: "#0038A8" }
                  : { backgroundColor: "transparent", color: "rgba(0, 56, 168, 0.6)", borderColor: "rgba(0, 56, 168, 0.2)" }
                }
              >
                {kat.kategori}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* ── SECTION 5: SERVICES ── */}
      <section id="services" className="py-24 bg-[#FDFBF7] border-t border-[#0038A8]/5 relative z-10 px-6">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <span className="text-[#0038A8] font-display italic text-base tracking-wider block mb-3">Our Offerings</span>
            <h2 className="font-display text-3xl lg:text-4xl font-black tracking-tight text-[#0038A8] uppercase">
              Hizmetlerimiz
            </h2>
          </div>

          <div className="grid md:grid-cols-4 gap-6">
            {hizmetler.map((h, i) => (
              <motion.div 
                key={h.baslik}
                className="bg-white rounded-2xl p-8 border border-[#0038A8]/5 hover:border-[#0038A8]/30 hover:bg-[#FDFBF7] transition-all duration-300 flex flex-col items-center text-center group cursor-default shadow-sm"
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: i * 0.1 }}
                whileHover={{ y: -4 }}
              >
                <div className="w-14 h-14 rounded-full bg-[#0038A8]/5 flex items-center justify-center mb-5 transition-transform group-hover:scale-110">
                  {getIconSvg(h.ikon)}
                </div>
                <h3 className="font-display font-bold text-[#0038A8] text-sm mb-3 uppercase tracking-wider leading-snug">
                  {h.baslik}
                </h3>
                <p className="text-gray-400 font-sans-clean text-[10px] leading-relaxed">
                  {h.aciklama}
                </p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ── SECTION 6: TESTIMONIALS ── */}
      <section id="yorumlar" className="py-28 bg-[#F5F2EB] border-t border-[#0038A8]/5 px-6">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <span className="text-[#0038A8] font-display italic text-base tracking-wider block mb-3">guest stories</span>
            <h2 className="font-display text-3xl lg:text-4xl font-black tracking-tight text-[#0038A8] uppercase">
              Misafir Yorumları
            </h2>
          </div>

          <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            {yorumlar.map((y, i) => (
              <motion.div 
                key={y.yazar}
                className="bg-white border border-[#0038A8]/5 rounded-[28px] p-8 flex flex-col justify-between shadow-sm"
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: i * 0.1 }}
                whileHover={{ y: -4, borderColor: "rgba(0, 56, 168, 0.3)" }}
              >
                <div className="flex gap-1 mb-6">
                  {[...Array(y.puan)].map((_, j) => (
                    <span key={j} className="text-[#0038A8]">★</span>
                  ))}
                </div>
                <p className="text-gray-600 font-sans-clean text-xs leading-relaxed italic mb-8 font-medium">
                  &ldquo;{y.yorum}&rdquo;
                </p>
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-full border border-[#0038A8]/20 flex items-center justify-center text-lg bg-[#FDFBF7] shrink-0 shadow-sm">
                    {y.emoji}
                  </div>
                  <div>
                    <h4 className="font-display text-[#0038A8] text-xs font-bold uppercase tracking-wider">
                      {y.yazar}
                    </h4>
                    <span className="font-sans-clean text-[9px] text-gray-400 uppercase tracking-widest">
                      {y.tarih}
                    </span>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ── SECTION 7: RESERVATION ── */}
      <section id="randevu" className="py-32 bg-[#FDFBF7] border-t border-[#0038A8]/5 relative z-10 px-6">
        <div className="max-w-3xl mx-auto">
          <div className="bg-white rounded-[36px] p-8 md:p-12 shadow-2xl border border-[#0038A8]/10">
            <div className="text-center mb-10">
              <span className="text-[#0038A8] font-display italic text-base tracking-wider block mb-3">Tavola Reservation</span>
              <h2 className="font-display text-3xl md:text-4xl font-black tracking-tight text-[#0038A8] uppercase">
                Masa Rezervasyonu
              </h2>
              <p className="text-gray-400 font-sans-clean text-xs mt-2 leading-relaxed font-medium">
                Karaköy Trattoria&apos;mızda unutulmaz bir akşam yemeği için yerinizi ayırtın.
              </p>
            </div>

            <div className="grid grid-cols-2 gap-5">
              {[
                { label: "Ad Soyad", placeholder: "Adınız Soyadınız", type: "text", full: false },
                { label: "Telefon", placeholder: "05xx xxx xx xx", type: "tel", full: false },
                { label: "Tarih", placeholder: "", type: "date", full: false },
                { label: "Saat", placeholder: "", type: "time", full: false },
                { label: "Kişi Sayısı", placeholder: "2", type: "number", full: false },
                { label: "Özel Notlar", placeholder: "Diyet sınırlandırmaları veya özel kutlamalar...", type: "text", full: true },
              ].map((field, i) => (
                <div key={i} className={field.full ? "col-span-2" : "col-span-1"}>
                  <label className="block text-[9px] font-sans-clean font-bold text-[#0038A8] mb-1.5 uppercase tracking-widest">{field.label}</label>
                  <input 
                    type={field.type} 
                    placeholder={field.placeholder}
                    className="w-full px-4 py-3 rounded-xl border border-gray-200 bg-[#FDFBF7] text-sm text-[#121C22] focus:outline-none focus:ring-1 focus:ring-[#0038A8] placeholder-gray-300 transition-all font-sans-clean" 
                  />
                </div>
              ))}
            </div>

            <motion.button
              className="mt-8 w-full py-4 rounded-xl text-white font-sans-clean font-black tracking-[2px] uppercase bg-[#0038A8] hover:bg-[#002266] transition-colors cursor-pointer text-xs"
              whileHover={{ scale: 1.02, boxShadow: "0 10px 30px rgba(0, 56, 168, 0.25)" }}
              whileTap={{ scale: 0.98 }}
            >
              Masa Ayırt
            </motion.button>
          </div>
        </div>
      </section>

      {/* ── FOOTER ── */}
      <footer className="bg-[#002266] text-white border-t border-white/5 px-6 pt-20 pb-8 relative z-10">
        <div className="max-w-6xl mx-auto flex flex-col sm:flex-row justify-between items-center pt-8 gap-4 font-sans-clean text-white/40">
          <p className="text-xs">© 2026 {firma.adi}. Tüm hakları saklıdır.</p>
          <p className="text-[10px]">Gizlilik Politikası · Çerez Ayarları</p>
        </div>
      </footer>

      {/* ── FAST BOOKING OVERLAY MODAL ── */}
      <AnimatePresence>
        {showBookingModal && (
          <motion.div 
            className="fixed inset-0 z-50 flex items-center justify-center p-6 bg-black/60 backdrop-blur-sm"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          >
            <motion.div 
              className="bg-white rounded-2xl p-8 max-w-md w-full relative shadow-2xl border border-[#0038A8]/20"
              initial={{ scale: 0.95, y: 20 }}
              animate={{ scale: 1, y: 0 }}
              exit={{ scale: 0.95, y: 20 }}
            >
              <button 
                className="absolute top-6 right-6 w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 transition-colors"
                onClick={() => setShowBookingModal(false)}
              >
                ✕
              </button>
              
              <h3 className="font-display font-black text-[#0038A8] text-xl mb-1 uppercase tracking-wider">
                Hızlı Rezervasyon
              </h3>
              <p className="text-gray-400 font-sans-clean text-[10px] mb-6 uppercase tracking-widest font-semibold">
                Karaköy Trattoria Hattı
              </p>
              
              <div className="space-y-4">
                <div>
                  <label className="block text-[9px] font-sans-clean font-bold text-[#0038A8] mb-1 uppercase tracking-wider">Ad Soyad</label>
                  <input type="text" className="w-full px-4 py-3 rounded-xl border border-gray-200 bg-[#FDFBF7] text-sm focus:outline-none focus:ring-1 focus:ring-[#0038A8]" placeholder="Adınız Soyadınız" />
                </div>
                <div>
                  <label className="block text-[9px] font-sans-clean font-bold text-[#0038A8] mb-1 uppercase tracking-wider">Telefon Numarası</label>
                  <input type="tel" className="w-full px-4 py-3 rounded-xl border border-gray-200 bg-[#FDFBF7] text-sm focus:outline-none focus:ring-1 focus:ring-[#0038A8]" placeholder="05xx xxx xx xx" />
                </div>
                <motion.button 
                  className="w-full py-4 rounded-xl bg-[#0038A8] text-white font-sans-clean font-black text-xs uppercase tracking-wider mt-4"
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                  onClick={() => setShowBookingModal(false)}
                >
                  Bilgileri Gönder
                </motion.button>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}