"use client";

import { motion, AnimatePresence } from "framer-motion";
import { useState, useEffect } from "react";
import type { DemoData } from "@/data/demos";

const fadeUp = {
  hidden: { opacity: 0, y: 35 },
  show: { opacity: 1, y: 0, transition: { duration: 0.65, ease: [0.25, 0.46, 0.45, 0.94] as [number, number, number, number] } },
};

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

const translations = {
  tr: {
    navCabin: "Kulübemiz",
    navHosts: "Hizmetlerimiz",
    navChannels: "Rezervasyon",
    navReviews: "Misafir Günlüğü",
    bookWilderness: "Kulübeyi Ayırt",
    est: "2015'TEN BERİ",
    heroDesc: "Şebekeden bağımsız lüks dağ kulübesi inzivalarına dalın. Odun ateşinde taze ekmek fırın sabahları, rustik açık şömine salonları ve serin dağ nehrinde alabalık avı koordinatları.",
    secureCabin: "REZERVASYON YAP",
    cabinUnits: "Dağ Kulübeleri",
    cabinWood: "Darby Kırmızı Sedir",
    fireplaceUnit: "Tütsülü Şömine",
    fireplaceType: "Doğal Taş Ocak",
    aboutTitle: "Darby Dağ Yaşamı",
    aboutHeader: "KULÜBE HAKKINDA",
    aboutSub: "DOĞAL MT. LOGWOOD AKUSTİĞİ ALTINDA HUZUR",
    aboutDesc: "Bitterroot Bunkhouse, Darby milli orman koordinatlarının derinliklerinde el işçiliğiyle inşa edilmiş iki adet kırmızı sedir dağ kulübesi sunar. Her kulübe döküm demir mutfak gereçleri, kurutulmuş huş odunları ve yerel gölleri keşfetmeniz için dağ rehberleriyle donatılmıştır.",
    feat1Title: "YABANİ YÜRÜYÜŞ YOLLARI",
    feat1Desc: "Arka terasınızdan doğrudan yaban çiçeği orman yollarına adım atın.",
    feat2Title: "ODUN ATEŞİNDE SABAHLAR",
    feat2Desc: "Her gün ücretsiz temin edilen şömine odunlarının ve döküm fırın ikramlarının keyfini çıkarın.",
    channelsTitle: "Entegre Platformlar",
    channelsHeader: "REZERVASYON YÖNTEMLERİ",
    channelsDesc: "Senkronize edilmiş kanallarimizi aşağidan inceleyin. Komisyonsuz konaklamalar için Airbnb, VRBO veya doğrudan kurumsal web sitemiz üzerinden rezervasyon yapin.",
    chAirbnb: "AIRBNB İLE REZERVE ET",
    chVrbo: "VRBO İLE REZERVE ET",
    chDirect: "DOĞRUDAN REZERVE (%15 TASARRUF)",
    airbnbTitle: "Airbnb Superhost Kanalı",
    airbnbDesc: "Giriş ve konaklama takvimlerini doğrudan Superhost sayfamızdan anlık doğrulayın. Klasik platform güvencesi arayan gezginler için idealdir.",
    vrboTitle: "VRBO Premier Host Kanalı",
    vrboDesc: "Aileler veya geniş gruplar için Premier Host statüsünde listelemeler. Grup iptal ve iade ayrıcalıkları çıkış esnasında otomatik olarak uygulanır.",
    directTitle: "Doğrudan Kulübe Rezervasyonu",
    directDesc: "Rezervasyon hizmet bedellerini tamamen atlayın. Girişte size özel taze ekşi mayalı sabah ekmeği, ücretsiz şömine odunu ve doğrudan VIP mihmandar desteği alın.",
    launchPortal: "REZERVASYON PORTALINI BAŞLAT",
    diaries: "Yaban Günlükleri",
    lovedGuests: "MİSAFİRLERİMİZDEN KELİMELER",
    vipServices: "VIP HİZMETLER",
    mountainHelp: "Dağ Desteği",
    mountainActive: "Her Gün 08:00 - 20:00 Aktif",
    privacyRegs: "Gizlilik Sözleşmesi",
    termsStay: "Kulübe Şartları",
    dismiss: "KAPAT",
    enquiryActive: "REZERVASYON ALINDI",
    ambassadorActive: "Yaban Concierge Aktif",
    enquirySuccess: "Darby dağ kulübesi rezervasyon talebinizi kaydettik. Sertifikalı yaban mihmandarımız geliş, sıcak ekmek ve kano yolları detaylarını planlamak için sizinle iletişime geçecektir. Teşekkürler!",
  },
  en: {
    navCabin: "Our cabin",
    navHosts: "Host guides",
    navChannels: "Book channels",
    navReviews: "Guest diaries",
    bookWilderness: "Book wilderness",
    est: "ESTABLISHED IN 2015",
    heroDesc: "Immerse in off-grid luxury cabin retreats. Wood-fired bakery mornings, rustic open fireplace lounges, and cold mountain river trout coordinates.",
    secureCabin: "SECURE CABIN SLOTS",
    cabinUnits: "A-frame lodges",
    cabinWood: "Darby Cedar Wood",
    fireplaceUnit: "Stocked fireplace",
    fireplaceType: "Open Stone Hearth",
    aboutTitle: "Darby Mountain Life",
    aboutHeader: "ABOUT THE CABIN",
    aboutSub: "OFF-GRID HEAVEN UNDER MT. LOGWOOD ACOUSTICS",
    aboutDesc: "Bitterroot Bunkhouse provides two hand-crafted A-frame cedar lodges deep in the Darby forest coordinates. Each lodge is stocked with cast-iron cookware, seasoned logwood reserves, and local guides to explore hidden mountain lakes.",
    feat1Title: "WILDERNESS TRAIL PATHS",
    feat1Desc: "Walk directly from your back deck onto wildflower forest lines.",
    feat2Title: "WOOD-FIRED MORNINGS",
    feat2Desc: "Enjoy complimentary firewood logs and hot stone iron bakers daily.",
    channelsTitle: "Integrated Platforms",
    channelsHeader: "HOW TO SECURE BOOKINGS",
    channelsDesc: "Toggle our synced channels below. Syncing Airbnb, VRBO, or our premium Direct reservation for commission-free stays.",
    chAirbnb: "BOOK ON AIRBNB",
    chVrbo: "BOOK ON VRBO",
    chDirect: "BOOK DIRECT (SAVE 15%)",
    airbnbTitle: "Airbnb Superhost Channel",
    airbnbDesc: "Verify lodging calendars dynamically directly on our superhost page listing. Perfect for travelers seeking classic platform protection.",
    vrboTitle: "VRBO Premier Host Channel",
    vrboDesc: "Premier hosts status listings for families or large groups. All group cancellation benefits apply automatically upon checkout.",
    directTitle: "Bunkhouse Direct Booking",
    directDesc: "Skip booking service fees completely. Receive customized fresh morning sourdough, complimentary firewood, and direct VIP coordination.",
    launchPortal: "LAUNCH RESERVATION PORTAL",
    diaries: "Wilderness Diaries",
    lovedGuests: "KIND WORDS FROM PAST GUESTS",
    vipServices: "VIP SERVICES",
    mountainHelp: "Mountain Help",
    mountainActive: "Available 8 AM - 8 PM",
    privacyRegs: "Privacy Regulations",
    termsStay: "Terms of Cabin",
    dismiss: "DISMISS",
    enquiryActive: "CABIN REQUEST FILED",
    ambassadorActive: "Wilderness Concierge Active",
    enquirySuccess: "We have registered your Darby wilderness cabin coordinate request. A certified somatic host will contact you shortly to coordinate arrival, hot bread baking, and kayak paths. Thank you!",
  }
};

export default function HotelTemplate2({ data }: { data: DemoData }) {
  const { firma, istatistikler = [], hizmetler = [], yorumlar = [] } = data;
  const [showModal, setShowModal] = useState(false);
  const [channel, setChannel] = useState<string>("direct");
  const [lang, setLang] = useState<"tr" | "en">("tr");
  const [preloader, setPreloader] = useState(true);

  const t = translations[lang];

  // 1. Lenis Smooth Scroll Integration
  useEffect(() => {
    let lenis: any;
    import("@studio-freight/lenis").then(({ default: Lenis }) => {
      lenis = new Lenis({ duration: 1.2, easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)) });
      function raf(time: number) { lenis.raf(time); requestAnimationFrame(raf); }
      requestAnimationFrame(raf);
    });
    return () => lenis?.destroy();
  }, []);

  // 2. Preloader Curtain Timer
  useEffect(() => {
    const timer = setTimeout(() => {
      setPreloader(false);
    }, 1500);
    return () => clearTimeout(timer);
  }, []);

  // Localized services
  const getLocalizedService = (baslik: string, aciklama: string) => {
    if (baslik.includes("HOSTS")) {
      return {
        title: lang === "tr" ? "EV SAHİBİ REHBERLİĞİ" : "MEET YOUR HOSTS",
        desc: lang === "tr" ? "Yerel dağ rehberlerimiz; alabalık avı yolları, yaban çiçeği rotaları ve gizli nehir haritaları koordinasyonunu üstlenir." : aciklama
      };
    }
    if (baslik.includes("POLICIES")) {
      return {
        title: lang === "tr" ? "KULÜBE KURALLARI" : "CABIN POLICIES",
        desc: lang === "tr" ? "Evcil hayvan dostu konaklama koşulları. Döküm demir tava ve her zaman dolu odunluk güvenceleri." : aciklama
      };
    }
    return {
      title: lang === "tr" ? "DOĞRUDAN REZERVE" : "DIRECT RESERVATION",
      desc: lang === "tr" ? "Airbnb veya VRBO ile anlık takvim senkronizasyonu; dilerseniz komisyonsuz doğrudan rezervasyon avantajı." : aciklama
    };
  };

  const css = `
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

    :root {
      --color-bunkhouse-gold: #854D0E;
      --color-bunkhouse-sand: #F5F2EB;
      --color-bunkhouse-stone: #1C1917;
      --color-bunkhouse-card: #FAF8F5;
    }

    .font-serif-bunkhouse {
      font-family: 'Playfair Display', Georgia, serif;
    }

    .font-industrial-bunkhouse {
      font-family: 'Inter', sans-serif;
      font-weight: 800;
    }

    .font-sans-bunkhouse {
      font-family: 'Inter', sans-serif;
    }

    .bg-rustic-mesh {
      background-image: 
        radial-gradient(circle at 10% 10%, rgba(133, 77, 14, 0.02) 0%, transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(28, 25, 23, 0.02) 0%, transparent 50%),
        linear-gradient(rgba(28, 25, 23, 0.005) 1px, transparent 1px),
        linear-gradient(90deg, rgba(28, 25, 23, 0.005) 1px, transparent 1px);
      background-size: 100% 100%, 100% 100%, 30px 30px, 30px 30px;
    }

    .border-bunkhouse {
      border-color: rgba(28, 25, 23, 0.15);
    }

    .hero-title-clamp {
      font-size: clamp(34px, 5vw, 85px);
      letter-spacing: -0.02em;
      line-height: 0.95;
    }
  `;

  return (
    <>
      <style>{css}</style>

      {/* ── IMZA AN: CURTAIN REVEAL PRELOADER ── */}
      <AnimatePresence>
        {preloader && (
          <motion.div 
            className="fixed inset-0 z-50 bg-[#1C1917] flex flex-col items-center justify-center p-6"
            exit={{ 
              clipPath: "polygon(0 0, 100% 0, 100% 0, 0 0)", 
              transition: { duration: 0.85, ease: [0.16, 1, 0.3, 1] } 
            }}
          >
            <div className="max-w-md text-center space-y-6">
              <motion.span 
                className="text-[9px] font-black tracking-[4px] uppercase text-[#854D0E] block font-sans-bunkhouse"
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
              >
                BITTERROOT BUNKHOUSE
              </motion.span>
              <div className="h-[1px] w-48 bg-white/10 mx-auto relative overflow-hidden">
                <motion.div 
                  className="absolute inset-y-0 left-0 bg-[#854D0E]"
                  initial={{ width: "0%" }}
                  animate={{ width: "100%" }}
                  transition={{ duration: 1.2, ease: "easeInOut" }}
                />
              </div>
              <motion.h2 
                className="font-serif-bunkhouse text-white text-lg italic font-light tracking-wider"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.4, duration: 0.5 }}
              >
                wilderness sanctuary
              </motion.h2>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* COZY RUSTIC WILDERNESS LODGE THEME */}
      <div className="bg-[#F5F2EB] text-[#1C1917] min-h-screen font-sans-bunkhouse selection:bg-[#854D0E] selection:text-white overflow-hidden relative bg-rustic-mesh pb-24">
        
        {/* Floating Woody Ambience Orbs */}
        <div className="absolute top-[20%] left-[-10%] w-[500px] h-[500px] bg-[#854D0E]/2 blur-[130px] rounded-full pointer-events-none z-0" />
        <div className="absolute bottom-[20%] right-[-10%] w-[500px] h-[500px] bg-[#854D0E]/1 blur-[150px] rounded-full pointer-events-none z-0" />

        {/* ── MANDATORY FLOATING DEMO BANNER ── */}
        <div className="fixed bottom-4 left-4 z-40 bg-[#1C1917]/95 backdrop-blur-md border border-white/10 px-4 py-2.5 rounded-xl shadow-2xl flex items-center gap-2.5 max-w-sm pointer-events-none select-none">
          <div className="w-1.5 h-1.5 rounded-full bg-[#854D0E] animate-pulse" />
          <span className="text-[9px] font-black uppercase tracking-[1.5px] text-white/90">
            {lang === "tr" ? "Bu web sitesi Ayris Tech tarafından hazırlanmış bir konsept çalışmasıdır." : "This website is a premium concept prototype designed by Ayris Tech."}
          </span>
        </div>



        {/* ── COZY HEADER ── */}
        <motion.header
          className="w-full border-b border-[#1C1917]/10 px-8 py-6 relative z-50 bg-[#F5F2EB]/90 backdrop-blur-xl"
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <div className="max-w-7xl mx-auto flex items-center justify-between">
            {/* Logo */}
            <a href="#" className="flex items-center gap-2.5 group">
              <span className="text-lg font-bold tracking-[2px] text-[#1C1917] font-serif-bunkhouse flex items-center gap-2 uppercase">
                <svg className="w-5 h-5 text-[#854D0E]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="m8 3 4 8 5-5 5 15H2L8 3Z" />
                </svg>
                {firma.adi}
              </span>
            </a>

            {/* Links */}
            <nav className="hidden md:flex items-center gap-8">
              {[
                { label: t.navCabin, href: "#about-cabin" },
                { label: t.navHosts, href: "#host-details" },
                { label: t.navChannels, href: "#booking-channels" },
                { label: t.navReviews, href: "#testimonials" }
              ].map(item => (
                <a
                  key={item.label}
                  href={item.href}
                  className="text-[9px] font-bold tracking-[2.5px] uppercase text-[#1C1917]/70 hover:text-[#854D0E] transition-colors relative py-1 cursor-pointer"
                >
                  {item.label}
                </a>
              ))}
            </nav>

            {/* Language Selector + Booking Button */}
            <div className="flex items-center gap-4">
              {/* Language Switcher */}
              <div className="flex items-center gap-1 bg-[#1C1917]/5 border border-[#1C1917]/10 rounded-xl p-1 shrink-0">
                <button
                  onClick={() => setLang("tr")}
                  className={`text-[9px] font-black px-2 py-1.5 rounded-lg transition-all cursor-pointer ${
                    lang === "tr" ? "bg-[#1C1917] text-white shadow-sm" : "text-[#1C1917]/60 hover:text-[#1C1917]"
                  }`}
                >
                  TR
                </button>
                <button
                  onClick={() => setLang("en")}
                  className={`text-[9px] font-black px-2 py-1.5 rounded-lg transition-all cursor-pointer ${
                    lang === "en" ? "bg-[#1C1917] text-white shadow-sm" : "text-[#1C1917]/60 hover:text-[#1C1917]"
                  }`}
                >
                  EN
                </button>
              </div>

              <motion.button
                onClick={() => setShowModal(true)}
                className="text-[9px] font-bold tracking-[2.5px] uppercase text-white bg-[#1C1917] hover:bg-[#854D0E] px-6 py-3.5 rounded-lg transition-all cursor-pointer shadow-md hidden sm:block"
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
              >
                {t.bookWilderness}
              </motion.button>
            </div>
          </div>
        </motion.header>

        {/* ── COZY HERO BANNER (DARK CONTRAST) ── */}
        <section className="relative z-10 max-w-7xl mx-auto px-6 mt-8">
          <motion.div 
            className="w-full min-h-[500px] rounded-3xl bg-[#1C1917] text-[#FAF8F5] p-8 md:p-16 flex flex-col justify-between relative overflow-hidden shadow-2xl"
            initial={{ opacity: 0, scale: 0.98 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8 }}
          >
            {/* Ambient fire glow background */}
            <div className="absolute top-0 right-0 w-[450px] h-[450px] bg-[#854D0E]/20 blur-[100px] rounded-full pointer-events-none" />

            {/* Banner top */}
            <div className="flex justify-between items-start z-10">
              <span className="text-[9px] font-bold uppercase tracking-[3px] text-[#FAF8F5]/50 border border-white/10 px-3 py-1.5 rounded-full">
                BITTERROOT VALLEY · MONTANA
              </span>
              <span className="text-[9px] font-bold uppercase tracking-[3px] text-[#FAF8F5]/50">
                {t.est}
              </span>
            </div>

            {/* Banner headings */}
            <div className="max-w-2xl my-16 z-10">
              <h1 className="font-serif-bunkhouse text-4xl md:text-6xl font-normal leading-[1.08] tracking-wider mb-6 text-white uppercase">
                {firma.slogan}
              </h1>
              <p className="text-[#FAF8F5]/60 text-xs md:text-sm leading-relaxed font-normal max-w-md">
                {t.heroDesc}
              </p>
            </div>

            {/* Banner bottom details */}
            <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 border-t border-white/10 pt-8 z-10">
              <div className="flex gap-12">
                <div>
                  <span className="text-[#FAF8F5]/40 text-[9px] uppercase tracking-widest font-bold block mb-1">{t.cabinUnits}</span>
                  <span className="font-industrial-bunkhouse text-lg font-bold">{t.cabinWood}</span>
                </div>
                <div>
                  <span className="text-[#FAF8F5]/40 text-[9px] uppercase tracking-widest font-bold block mb-1">{t.fireplaceUnit}</span>
                  <span className="font-industrial-bunkhouse text-lg font-bold">{t.fireplaceType}</span>
                </div>
              </div>
              <motion.button
                onClick={() => setShowModal(true)}
                className="px-8 py-4 bg-[#854D0E] hover:bg-white hover:text-[#1C1917] text-white font-bold text-[9px] tracking-[2.5px] uppercase rounded-xl transition-all cursor-pointer shadow-lg"
                whileHover={{ scale: 1.02 }}
              >
                {t.secureCabin}
              </motion.button>
            </div>
          </motion.div>
        </section>

        {/* ── ABOUT THE CABIN WITH LAYERED GRAPHICS ── */}
        <section id="about-cabin" className="py-28 relative z-10 px-6">
          <div className="max-w-7xl mx-auto">
            
            <div className="text-center max-w-xl mx-auto mb-20">
              <span className="text-[#854D0E] font-serif-bunkhouse italic text-sm tracking-[2px] block mb-2">{t.aboutTitle}</span>
              <h2 className="font-serif-bunkhouse text-3xl md:text-4xl uppercase tracking-wider text-[#1C1917]">
                {t.aboutHeader}
              </h2>
              <div className="w-16 h-0.5 bg-[#854D0E]/20 mx-auto mt-4" />
            </div>

            {/* Layered images grid */}
            <div className="grid lg:grid-cols-12 gap-12 items-center">
              
              {/* Left Column: 3 detailed pictures layered */}
              <div className="lg:col-span-7 grid grid-cols-12 gap-4 items-center">
                {/* 1st image: Sourdough fresh bakery */}
                <div className="col-span-5 rounded-2xl overflow-hidden shadow-lg border border-[#1C1917]/10 aspect-[3/4] group">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img 
                    src="/bakery_heritage.png" 
                    alt="Wilderness breakfast sourdough bakery" 
                    className="w-full h-full object-cover scale-102 group-hover:scale-105 transition-transform duration-1000"
                  />
                </div>
                {/* 2nd image: Cozy fireside cooking */}
                <div className="col-span-7 rounded-2xl overflow-hidden shadow-xl border border-[#1C1917]/10 aspect-square group">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img 
                    src="/chef_plating_smoke.png" 
                    alt="Cozy lodge stone fireplace cooking" 
                    className="w-full h-full object-cover scale-102 group-hover:scale-105 transition-transform duration-1000"
                  />
                </div>
              </div>

              {/* Right Column: Cabin text details */}
              <div className="lg:col-span-5 space-y-8">
                <span className="text-[9px] font-bold tracking-[3px] text-[#854D0E] uppercase block">EXCLUSIVELY HAND-CRAFTED</span>
                <h3 className="font-serif-bunkhouse text-2xl md:text-3xl text-[#1C1917] leading-snug">
                  {t.aboutSub}
                </h3>
                <p className="text-[#1C1917]/70 text-xs leading-relaxed font-medium">
                  {t.aboutDesc}
                </p>

                {/* Details list */}
                <div className="space-y-4 pt-4 border-t border-[#1C1917]/15">
                  {[
                    { title: t.feat1Title, text: t.feat1Desc },
                    { title: t.feat2Title, text: t.feat2Desc },
                  ].map((feat, idx) => (
                    <div key={idx} className="flex gap-4">
                      <span className="w-1.5 h-1.5 rounded-full bg-[#854D0E] shrink-0 mt-1.5" />
                      <div>
                        <h4 className="text-[10px] font-black uppercase text-[#1C1917] tracking-wider mb-1">{feat.title}</h4>
                        <p className="text-[#1C1917]/50 text-[10px] font-bold leading-relaxed">{feat.text}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

            </div>

          </div>
        </section>

        {/* ── CHANNELS & HOST GUIDES ── */}
        <section id="host-details" className="py-24 relative z-10 px-6 bg-[#FAF8F5] border-y border-[#1C1917]/10">
          <div className="max-w-7xl mx-auto">
            
            <div className="grid lg:grid-cols-3 gap-8">
              {hizmetler.map((hizmet, idx) => {
                const locServ = getLocalizedService(hizmet.baslik, hizmet.aciklama);
                return (
                  <div 
                    key={idx}
                    className="bg-[#F5F2EB] p-8 rounded-3xl border border-[#1C1917]/10 flex flex-col justify-between h-72 transition-all hover:shadow-premium group"
                  >
                    <div>
                      <div className="w-12 h-12 rounded-2xl bg-white border border-[#1C1917]/10 flex items-center justify-center mb-6">
                        <svg className="w-5 h-5 text-[#854D0E]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                          <circle cx="12" cy="12" r="10" />
                          <path d="m9 12 2 2 4-4" />
                        </svg>
                      </div>
                      <h3 className="font-serif-bunkhouse text-lg font-black uppercase tracking-wider text-[#1C1917] mb-2">
                        {locServ.title}
                      </h3>
                      <p className="text-[#1C1917]/60 text-[11px] leading-relaxed font-semibold">
                        {locServ.desc}
                      </p>
                    </div>

                    <button 
                      onClick={() => setShowModal(true)}
                      className="text-[#854D0E] font-bold text-[9px] tracking-[2.5px] uppercase flex items-center gap-1 cursor-pointer hover:text-[#5F3507]"
                    >
                      {lang === "tr" ? "DAHA FAZLA KEŞFET →" : "DISCOVER MORE →"}
                    </button>
                  </div>
                );
              })}
            </div>

          </div>
        </section>

        {/* ── CHANNEL BOOKING INTEGRATION ── */}
        <section id="booking-channels" className="py-32 relative z-10 px-6">
          <div className="max-w-4xl mx-auto">
            
            <div className="bg-[#1C1917] text-white rounded-3xl p-8 md:p-12 shadow-2xl relative border border-white/5">
              <div className="absolute top-0 left-12 right-12 h-0.5 bg-gradient-to-r from-transparent via-[#854D0E] to-transparent" />

              <div className="text-center mb-12">
                <span className="text-[#854D0E] font-serif-bunkhouse uppercase tracking-widest text-xs block mb-2">{t.channelsTitle}</span>
                <h2 className="font-serif-bunkhouse text-3xl font-normal tracking-wide text-white uppercase">
                  {t.channelsHeader}
                </h2>
                <p className="text-white/40 text-xs mt-2 max-w-md mx-auto leading-relaxed">
                  {t.channelsDesc}
                </p>
              </div>

              {/* Toggle channels buttons */}
              <div className="grid grid-cols-3 gap-3 mb-10">
                {[
                  { id: "airbnb", label: t.chAirbnb },
                  { id: "vrbo", label: t.chVrbo },
                  { id: "direct", label: t.chDirect },
                ].map(item => (
                  <button
                    key={item.id}
                    onClick={() => setChannel(item.id)}
                    className={`px-4 py-3.5 rounded-xl border text-[9px] font-bold uppercase tracking-widest transition-all cursor-pointer text-center ${
                      channel === item.id 
                        ? "bg-[#854D0E] border-[#854D0E] text-white shadow-md"
                        : "bg-white/[0.02] border-white/5 text-white/50 hover:text-white hover:border-white/10"
                    }`}
                  >
                    {item.label}
                  </button>
                ))}
              </div>

              {/* Active channel info */}
              <div className="bg-white/5 rounded-2xl p-6 border border-white/5">
                <h3 className="font-serif-bunkhouse text-white text-lg font-black uppercase tracking-wider mb-2">
                  {channel === "airbnb" ? t.airbnbTitle : channel === "vrbo" ? t.vrboTitle : t.directTitle}
                </h3>
                <p className="text-white/50 text-[11px] leading-relaxed mb-6 font-medium">
                  {channel === "airbnb" 
                    ? t.airbnbDesc 
                    : channel === "vrbo" 
                    ? t.vrboDesc
                    : t.directDesc}
                </p>
                <motion.button 
                  onClick={() => setShowModal(true)}
                  className="w-full py-4.5 rounded-xl bg-[#854D0E] hover:bg-white hover:text-[#1C1917] text-white font-bold text-[9px] tracking-[2px] uppercase cursor-pointer transition-colors shadow-md"
                  whileHover={{ scale: 1.01 }}
                >
                  {t.launchPortal}
                </motion.button>
              </div>

            </div>

          </div>
        </section>

        {/* ── TESTIMONIALS ── */}
        <section id="testimonials" className="py-24 relative z-10 px-6 bg-[#FAF8F5] border-t border-[#1C1917]/10">
          <div className="max-w-7xl mx-auto">
            
            <div className="text-center max-w-xl mx-auto mb-20">
              <span className="text-[#854D0E] font-serif-bunkhouse text-xs uppercase tracking-widest block mb-2">{t.diaries}</span>
              <h2 className="font-serif-bunkhouse text-3xl font-black uppercase text-[#1C1917]">
                {t.lovedGuests}
              </h2>
            </div>

            {/* Grid */}
            <div className="grid md:grid-cols-2 gap-8">
              {yorumlar.map((y, yIdx) => (
                <div 
                  key={yIdx}
                  className="bg-white border border-[#1C1917]/10 rounded-3xl p-8 flex flex-col justify-between transition-all hover:shadow-premium group"
                >
                  <div className="flex gap-1.5 mb-6">
                    {[...Array(5)].map((_, starIdx) => (
                      <svg key={starIdx} className="w-4 h-4 fill-[#854D0E]" viewBox="0 0 24 24">
                        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                      </svg>
                    ))}
                  </div>

                  <p className="text-[#1C1917]/70 text-xs leading-relaxed italic mb-8 font-medium font-serif-bunkhouse">
                    &ldquo;{y.yorum}&rdquo;
                  </p>

                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full border border-[#1C1917]/10 flex items-center justify-center text-lg bg-[#FAF8F5] select-none font-bold">
                      {y.yazar.charAt(0)}
                    </div>
                    <div>
                      <h4 className="font-serif-bunkhouse text-[#1C1917] text-xs font-black uppercase tracking-wider">
                        {y.yazar}
                      </h4>
                      <span className="text-[9px] text-[#1C1917]/40 uppercase tracking-widest font-black">
                        {y.tarih}
                      </span>
                    </div>
                  </div>
                </div>
              ))}
            </div>

          </div>
        </section>

        {/* ── FOOTER ── */}
        <footer className="bg-[#1C1917] text-white pt-24 pb-8 px-6 relative z-10">
          <div className="max-w-7xl mx-auto">
            
            <div className="grid md:grid-cols-4 gap-12 pb-16 border-b border-white/10">
              
              {/* About Column */}
              <div className="md:col-span-2">
                <span className="font-serif-bunkhouse text-2xl font-black text-white tracking-wider uppercase mb-4 block">
                  Bitterroot<span className="text-[#854D0E]">Bunkhouse</span>
                </span>
                <p className="text-white/50 text-xs leading-relaxed max-w-sm mb-8 font-medium">
                  {firma.slogan} — Cozy hand-built rustic cedar cabins deep inside Darby forest valley. High-end off-grid luxury.
                </p>
                <div className="text-white/60 text-xs font-medium space-y-3">
                  <p className="flex items-center gap-2">
                    <svg className="w-4 h-4 text-[#854D0E] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
                      <circle cx="12" cy="10" r="3" />
                    </svg>
                    <span className="text-white/80">{firma.adres}</span>
                  </p>
                  <p className="flex items-center gap-2">
                    <svg className="w-4 h-4 text-[#854D0E] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <rect width="20" height="16" x="2" y="4" rx="2" />
                      <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
                    </svg>
                    <span className="text-white/80">{firma.email}</span>
                  </p>
                </div>
              </div>

              {/* Coordinates Column */}
              <div>
                <h4 className="font-serif-bunkhouse text-[#854D0E] text-xs font-black uppercase tracking-wider mb-6">
                  {lang === "tr" ? "KULÜBE KOORDİNATLARI" : "CABIN COORDINATES"}
                </h4>
                <div className="space-y-4 text-xs text-white/50 font-semibold">
                  <p>{t.mountainHelp} <br /> <span className="text-white/80">{t.mountainActive}</span></p>
                  <p>Check-In/Out <br /> <span className="text-white/80">{lang === "tr" ? "Giriş: 16:00 · Çıkış: 10:00" : "Check In: 4:00 PM · Check Out: 10:00 AM"}</span></p>
                </div>
              </div>

              {/* Services Column */}
              <div>
                <h4 className="font-serif-bunkhouse text-[#854D0E] text-xs font-black uppercase tracking-wider mb-6">
                  {t.vipServices}
                </h4>
                <div className="space-y-4">
                  {hizmetler.map((h, hIdx) => {
                    const locS = getLocalizedService(h.baslik, h.aciklama);
                    return (
                      <a 
                        key={hIdx} 
                        href="#host-details" 
                        className="block text-white/50 hover:text-[#854D0E] text-xs transition-colors font-semibold"
                      >
                        {locS.title}
                      </a>
                    );
                  })}
                </div>
              </div>

            </div>

            <div className="flex flex-col md:flex-row justify-between items-center pt-8 gap-4 text-white/30 text-xs font-semibold">
              <p>© 2026 {firma.adi}. All rights reserved.</p>
              <div className="flex gap-4">
                <a href="#" className="hover:text-white transition-colors">{t.privacyRegs}</a>
                <span>·</span>
                <a href="#" className="hover:text-white transition-colors">{t.termsStay}</a>
              </div>
            </div>

          </div>
        </footer>

        {/* ── BOOKING MODAL ── */}
        <AnimatePresence>
          {showModal && (
            <motion.div 
              className="fixed inset-0 z-50 flex items-center justify-center p-6 bg-black/40 backdrop-blur-sm"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
            >
              <motion.div 
                className="bg-white rounded-3xl p-8 max-w-md w-full relative shadow-2xl border border-gray-100 text-[#1C1917]"
                initial={{ scale: 0.95, y: 20 }}
                animate={{ scale: 1, y: 0 }}
                exit={{ scale: 0.95, y: 20 }}
              >
                {/* Close Button */}
                <button 
                  className="absolute top-6 right-6 w-8 h-8 rounded-full bg-[#F5F2EB] border border-gray-100 flex items-center justify-center text-[#1C1917]/40 hover:text-[#854D0E] hover:border-[#854D0E]/20 transition-all cursor-pointer font-bold"
                  onClick={() => setShowModal(false)}
                >
                  ✕
                </button>
                
                {/* Success check indicator */}
                <div className="w-16 h-16 rounded-2xl bg-[#854D0E]/10 border border-[#854D0E]/20 flex items-center justify-center mb-6">
                  <svg className="w-8 h-8 stroke-[#854D0E] fill-none" viewBox="0 0 24 24" strokeWidth="1.5">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                  </svg>
                </div>

                <h3 className="font-serif-bunkhouse font-black text-[#1C1917] text-2xl mb-1 uppercase tracking-wider">
                  {t.enquiryActive}
                </h3>
                <p className="text-[#854D0E] font-sans-bunkhouse text-[10px] mb-6 uppercase tracking-widest font-black">
                  {t.ambassadorActive}
                </p>
                
                <p className="text-[#1C1917]/60 text-xs leading-relaxed mb-8 font-semibold">
                  {t.enquirySuccess}
                </p>

                <motion.button 
                  className="w-full py-4.5 rounded-xl bg-[#854D0E] hover:bg-[#1C1917] text-white font-bold text-[9px] tracking-[2.5px] uppercase cursor-pointer shadow-md shadow-[#854D0E]/15"
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                  onClick={() => setShowModal(false)}
                >
                  {t.dismiss}
                </motion.button>
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>

      </div>
    </>
  );
}