ss

components/templates/KurumsalTemplate/index.tsx

@@ -0,0 +1,964 @@
+"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.75, 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: {
+    navServices: "Hizmetlerimiz",
+    navProjects: "Referanslarımız",
+    navTeam: "Ekibimiz",
+    navReviews: "Görüşler",
+    navBooking: "Teklif Al",
+    badge: "PREMIUM LOJİSTİK OPERATÖRÜ",
+    heroTitlePart1: "Lojistikte",
+    heroTitlePart2: "Fark Yaratan",
+    heroTitlePart3: "Çözümler",
+    heroDesc: "Güvenli taşımacılık ve zamanında teslimat çözümleri. Teknoloji destekli operasyon yönetimi ve küresel tedarik zinciri entegrasyonu ile işinizi büyütüyoruz. Atlas Lojistik premium ağı.",
+    getQuote: "Teklif Al",
+    learnMore: "Referanslar",
+    projectsTitle: "Referanslarımız",
+    projectsHeader: "BİRLİKTE BÜYÜDÜĞÜMÜZ KÜRESEL MARKALAR",
+    teamTitle: "Ekibimiz",
+    teamHeader: "YÖNETİM VE OPERASYON KADROMUZ",
+    reviewsTitle: "Müşteri Görüşleri",
+    reviewsHeader: "GÜVENİLİR İŞ ORTAKLARIMIZ",
+    bookingTitle: "Teklif Talebi",
+    bookingHeader: "BİRLİKTE ÇALIŞALIM",
+    bookingDesc: "Tedarik zincirinizi veya lojistik operasyonunuzu optimize etmek için bilgilerinizi bırakın, uzmanlarımız özel çalışma planıyla geri dönsün.",
+    fieldsName: "Ad Soyad",
+    fieldsPhone: "Telefon Numarası",
+    fieldsEmail: "E-Posta Adresi",
+    fieldsCategory: "Hizmet Kategorisi",
+    fieldsDate: "Planlanan Tarih",
+    fieldsNotes: "Operasyon Notları / Detaylar",
+    fieldsNotesPlaceholder: "Yıllık sevkiyat hacmi, depo alanı veya özel taşıma ihtiyaçları...",
+    dispatchForm: "TEKLİF TALEBİ GÖNDER",
+    contactChannels: "İLETİŞİM KANALLARI",
+    callCenter: "Destek Hattı",
+    addressLabel: "Lojistik Merkezi",
+    emailLabel: "Kurumsal E-Posta",
+    footerDesc: "Tedarik zinciri yönetiminde JIT (Just-In-Time) modelleri, GDP sertifikalı soğuk zincir lojistiği ve 7/24 anlık takip güvencesi.",
+    privacyRegs: "Gizlilik Sözleşmesi",
+    termsStay: "Kullanım Şartları",
+    dismiss: "KAPAT",
+    contactTitle: "Hızlı Teklif Danışmanlığı",
+    contactDesc: "Lojistik gereksinimlerinizi bırakın, operasyon yöneticimiz 15 dakika içinde arasın.",
+    submit: "Gönder",
+    statExp: "Yıl Deneyim",
+    statClients: "Aktif Müşteri",
+    statCities: "Şehir Ağı",
+    statDelivery: "Zamanında Teslimat",
+    
+    // Services Localized
+    serviceKarayolu: "Karayolu Taşımacılığı",
+    serviceKarayoluDesc: "Yurtiçi ve uluslararası karayolu ile güvenli ve hızlı komple/parsiyel taşımacılık.",
+    serviceDepolama: "Depolama & Lojistik",
+    serviceDepolamaDesc: "Modern antrepolarımızda güvenli stok yönetimi, etiketleme ve dağıtım.",
+    serviceEticaret: "E-ticaret Lojistiği",
+    serviceEticaretDesc: "Son mile teslimat, iade yönetimi ve tam entegre fulfillment çözümleri.",
+    serviceUlusal: "Uluslararası Nakliye",
+    serviceUlusalDesc: "Gümrükleme, evrak takibi dahil kapıdan kapıya uluslararası taşımacılık.",
+    serviceSoguk: "Soğuk Zincir Lojistiği",
+    serviceSogukDesc: "Gıda ve ilaç sektörü için kontrollü sıcaklıkta GDP sertifikalı taşıma.",
+    serviceTakip: "7/24 Anlık Takip",
+    serviceTakipDesc: "Yüklerinizi ve sevkiyat rotalarınızı uydu üzerinden anlık takip edin.",
+
+    // Projects Localized
+    projMigros: "Migros Dağıtım Ağı",
+    projMigrosDesc: "12 şehirde günlük 400+ perakende noktasına kesintisiz soğuk zincir dağıtım yönetimi.",
+    projTrendyol: "Trendyol Fulfillment",
+    projTrendyolDesc: "Günlük 8.000+ e-ticaret sipariş işleme, paketleme ve son mile hızlı teslimat.",
+    projFord: "Ford Otosan Tedarik",
+    projFordDesc: "JIT (Just-In-Time) metodolojisiyle otomotiv üretim fabrikasına parça tedarik zinciri lojistiği.",
+    projPfizer: "Pfizer İlaç Dağıtımı",
+    projPfizerDesc: "GDP standartlarında, tam ısı kontrollü soğuk zincir ile ilaç ve aşı lojistiği.",
+  },
+  en: {
+    navServices: "Our Services",
+    navProjects: "References",
+    navTeam: "Our Team",
+    navReviews: "Testimonials",
+    navBooking: "Get Quote",
+    badge: "PREMIUM LOGISTICS OPERATOR",
+    heroTitlePart1: "Logistics",
+    heroTitlePart2: "Redefined With",
+    heroTitlePart3: "Precision",
+    heroDesc: "Secured transportation and JIT delivery frameworks. We optimize your supply chain with modern tech tracking, integrated warehousing, and global networks. Premium Atlas logistics hub.",
+    getQuote: "Get Quote",
+    learnMore: "References",
+    projectsTitle: "Our Works",
+    projectsHeader: "GLOBAL PARTNERS WE ARE PROUD TO GROW WITH",
+    teamTitle: "Our Team",
+    teamHeader: "OUR EXECUTIVE AND OPERATIONS DIRECTORS",
+    reviewsTitle: "Client Reviews",
+    reviewsHeader: "TRUSTED BY SECTOR LEADERS",
+    bookingTitle: "Quote Request",
+    bookingHeader: "WORK WITH US",
+    bookingDesc: "To optimize your supply chain or schedule specialized cargo coordination, leave your credentials and our managers will draft a customized execution plan.",
+    fieldsName: "Full Name",
+    fieldsPhone: "Phone Number",
+    fieldsEmail: "Email Address",
+    fieldsCategory: "Service Category",
+    fieldsDate: "Target Date",
+    fieldsNotes: "Operations Details",
+    fieldsNotesPlaceholder: "Annual volume, cold storage requests, or specific cargo dimensions...",
+    dispatchForm: "SEND QUOTE REQUEST",
+    contactChannels: "CONTACT CHANNELS",
+    callCenter: "Support Helpline",
+    addressLabel: "Logistics Hub",
+    emailLabel: "Corporate Email",
+    footerDesc: "Just-In-Time (JIT) manufacturing workflows, GDP certified cold chain facilities, and 7/24 satellite tracking systems.",
+    privacyRegs: "Privacy Policy",
+    termsStay: "Terms of Service",
+    dismiss: "DISMISS",
+    contactTitle: "Quick Consultation",
+    contactDesc: "Outline your logistics coordinates and our transport managers will reach back in 15 minutes.",
+    submit: "Submit",
+    statExp: "Years Experience",
+    statClients: "Active Clients",
+    statCities: "City Hubs",
+    statDelivery: "On-Time Delivery",
+
+    // Services Localized
+    serviceKarayolu: "Road Transportation",
+    serviceKarayoluDesc: "Secured and rapid domestic/international full or partial truckload transport.",
+    serviceDepolama: "Warehousing & Logistics",
+    serviceDepolamaDesc: "Bespoke inventory management, labeling, and retail cross-docking.",
+    serviceEticaret: "E-Commerce Fulfillment",
+    serviceEticaretDesc: "Last-mile courier integration, automated return flows, and fulfillment.",
+    serviceUlusal: "Global Air/Ocean Cargo",
+    serviceUlusalDesc: "Door-to-door global shipping routes with integrated custom clearance clearance.",
+    serviceSoguk: "Cold Chain Transport",
+    serviceSogukDesc: "GDP certified multi-temp fleet specifically for food and pharmaceutical sectors.",
+    serviceTakip: "7/24 Satellite Tracking",
+    serviceTakipDesc: "Real-time satellite path tracking and automated delay coordination.",
+
+    // Projects Localized
+    projMigros: "Migros Retail Supply",
+    projMigrosDesc: "Daily cold chain distribution routing to over 400+ points across 12 cities.",
+    projTrendyol: "Trendyol Fulfillment Hub",
+    projTrendyolDesc: "Handling 8,000+ daily e-commerce order dispatches with priority last-mile courier lanes.",
+    projFord: "Ford Otosan JIT Tedarik",
+    projFordDesc: "JIT manufacturing line support, synchronizing auto parts arrival exactly within scheduled shifts.",
+    projPfizer: "Pfizer Cold Chain Pharma",
+    projPfizerDesc: "GDP certified pharmaceutical transport using automated multi-temperature thermal cargo.",
+  }
+};
+
+export default function KurumsalTemplate({ data }: { data: DemoData }) {
+  const { firma, istatistikler = [], hizmetler = [], yorumlar = [], projeler = [], ekip = [] } = data;
+  const [showBookingModal, setShowBookingModal] = useState(false);
+  const [lang, setLang] = useState<"tr" | "en">("tr");
+  const [preloader, setPreloader] = useState(true);
+
+  const t = translations[lang];
+
+  // Lenis Smooth Scroll Integration
+  useEffect(() => {
+    let lenis: any;
+    import("@studio-freight/lenis").then(({ default: Lenis }) => {
+      lenis = new Lenis({ duration: 1.2, easing: (x: number) => Math.min(1, 1.001 - Math.pow(2, -10 * x)) });
+      function raf(time: number) { lenis.raf(time); requestAnimationFrame(raf); }
+      requestAnimationFrame(raf);
+    });
+    return () => lenis?.destroy();
+  }, []);
+
+  // Preloader Curtain Timer
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setPreloader(false);
+    }, 1500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  // Localized stats label mappings
+  const getLocalizedStatLabel = (etiket: string) => {
+    if (etiket.includes("Deneyim")) return t.statExp;
+    if (etiket.includes("Müşteri")) return t.statClients;
+    if (etiket.includes("Şehir")) return t.statCities;
+    return t.statDelivery;
+  };
+
+  // Localized services text mappings
+  const getLocalizedServiceText = (baslik: string) => {
+    if (baslik.includes("Karayolu")) return { title: t.serviceKarayolu, desc: t.serviceKarayoluDesc };
+    if (baslik.includes("Depolama")) return { title: t.serviceDepolama, desc: t.serviceDepolamaDesc };
+    if (baslik.includes("E-ticaret")) return { title: t.serviceEticaret, desc: t.serviceEticaretDesc };
+    if (baslik.includes("Uluslararası")) return { title: t.serviceUlusal, desc: t.serviceUlusalDesc };
+    if (baslik.includes("Soğuk")) return { title: t.serviceSoguk, desc: t.serviceSogukDesc };
+    return { title: t.serviceTakip, desc: t.serviceTakipDesc };
+  };
+
+  // Localized projects text mappings
+  const getLocalizedProjectText = (baslik: string) => {
+    if (baslik.includes("Migros")) return { title: t.projMigros, desc: t.projMigrosDesc, sector: lang === "tr" ? "Perakende" : "Retail" };
+    if (baslik.includes("Trendyol")) return { title: t.projTrendyol, desc: t.projTrendyolDesc, sector: lang === "tr" ? "E-Ticaret" : "E-Commerce" };
+    if (baslik.includes("Ford")) return { title: t.projFord, desc: t.projFordDesc, sector: lang === "tr" ? "Otomotiv" : "Automotive" };
+    return { title: t.projPfizer, desc: t.projPfizerDesc, sector: lang === "tr" ? "İlaç" : "Pharmaceutical" };
+  };
+
+  // Custom vector icons for services (No generic emojis)
+  const getServiceIconSvg = (baslik: string) => {
+    if (baslik.includes("Karayolu")) {
+      return (
+        <svg className="w-6 h-6 stroke-[#6366f1] fill-none" viewBox="0 0 24 24" strokeWidth="2">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" />
+          <path strokeLinecap="round" strokeLinejoin="round" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1M21 16V10a1 1 0 00-1-1h-7m8 7h-1m-6 0h-2" />
+        </svg>
+      );
+    }
+    if (baslik.includes("Depolama")) {
+      return (
+        <svg className="w-6 h-6 stroke-[#6366f1] fill-none" viewBox="0 0 24 24" strokeWidth="2">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+        </svg>
+      );
+    }
+    if (baslik.includes("E-ticaret")) {
+      return (
+        <svg className="w-6 h-6 stroke-[#6366f1] fill-none" viewBox="0 0 24 24" strokeWidth="2">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
+        </svg>
+      );
+    }
+    if (baslik.includes("Uluslararası")) {
+      return (
+        <svg className="w-6 h-6 stroke-[#6366f1] fill-none" viewBox="0 0 24 24" strokeWidth="2">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 002 2h2.945M12 2a10 10 0 110 20 10 10 0 010-20z" />
+        </svg>
+      );
+    }
+    if (baslik.includes("Soğuk")) {
+      return (
+        <svg className="w-6 h-6 stroke-[#6366f1] fill-none" viewBox="0 0 24 24" strokeWidth="2">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v18M3 12h18m-3-3l3 3-3 3M6 9l-3 3 3 3M9 6l3-3 3 3m-6 12l3 3 3-3" />
+        </svg>
+      );
+    }
+    return (
+      <svg className="w-6 h-6 stroke-[#6366f1] fill-none" viewBox="0 0 24 24" strokeWidth="2">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+    );
+  };
+
+  const getLocalizedTeam = (ad: string) => {
+    if (ad.includes("Murat")) return { name: "Murat Yıldız", role: lang === "tr" ? "Genel Müdür" : "Managing Director" };
+    if (ad.includes("Hande")) return { name: "Hande Çelik", role: lang === "tr" ? "Operasyon Direktörü" : "Operations Director" };
+    if (ad.includes("Serkan")) return { name: "Serkan Aydın", role: lang === "tr" ? "Teknoloji Müdürü" : "Technology Director" };
+    return { name: "Neslihan Kara", role: lang === "tr" ? "Müşteri Deneyimi Yöneticisi" : "Customer Success Lead" };
+  };
+
+  const css = `
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
+
+    :root {
+      --color-kurumsal-indigo: #6366f1;
+      --color-kurumsal-indigo-dark: #4f46e5;
+      --color-kurumsal-indigo-light: #eef2ff;
+      --color-kurumsal-charcoal: #0F172A;
+      --color-kurumsal-sand: #FAF8F5;
+    }
+
+    .font-heavy-sans {
+      font-family: 'Inter', sans-serif;
+      font-weight: 900;
+    }
+
+    .font-sans-clean {
+      font-family: 'Inter', sans-serif;
+    }
+
+    .shadow-premium {
+      box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.05);
+    }
+
+    .hero-title-clamp {
+      font-size: clamp(38px, 6vw, 90px);
+      letter-spacing: -0.03em;
+      line-height: 0.95;
+    }
+  `;
+
+  return (
+    <>
+      <style>{css}</style>
+
+      {/* ── IMZA AN: CURTAIN REVEAL PRELOADER ── */}
+      <AnimatePresence>
+        {preloader && (
+          <motion.div 
+            className="fixed inset-0 z-50 bg-[#0F172A] 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-heavy-sans tracking-[4px] uppercase text-[#6366f1] block"
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5 }}
+              >
+                ATLAS LOGISTICS
+              </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-[#6366f1]"
+                  initial={{ width: "0%" }}
+                  animate={{ width: "100%" }}
+                  transition={{ duration: 1.2, ease: "easeInOut" }}
+                />
+              </div>
+              <motion.h2 
+                className="font-sans-clean text-white/50 text-xs tracking-wider uppercase font-semibold"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: 0.4, duration: 0.5 }}
+              >
+                interactive prototype
+              </motion.h2>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <div className="bg-[#FAF8F5] text-[#0F172A] min-h-screen font-sans-clean selection:bg-[#6366f1] selection:text-white overflow-hidden relative pb-20">
+        
+        {/* Floating Ambient Orbs */}
+        <div className="absolute top-[10%] left-[-15%] w-[600px] h-[600px] bg-[#6366f1]/3 blur-[120px] rounded-full pointer-events-none z-0" />
+        <div className="absolute bottom-[20%] right-[-15%] w-[600px] h-[600px] bg-[#4f46e5]/3 blur-[140px] rounded-full pointer-events-none z-0" />
+
+        {/* ── FLOATING CONCEPT BANNER ── */}
+        <div className="fixed bottom-4 left-4 z-40 bg-[#0F172A]/90 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-[#6366f1] animate-pulse" />
+          <span className="text-[9px] font-sans-clean uppercase tracking-[1.5px] text-white/90 font-bold">
+            {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>
+
+        {/* ── PREMIUM 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.85, ease: [0.16, 1, 0.3, 1] }}
+        >
+          <div className="mx-auto max-w-7xl h-20 flex items-center justify-between px-8 bg-white/80 backdrop-blur-xl border border-white/40 rounded-2xl shadow-[0_10px_30px_rgba(15,23,42,0.03)]">
+            {/* Logo */}
+            <a href="#" className="flex items-center gap-2.5 group">
+              <span className="text-lg font-black tracking-tight text-[#0F172A] font-heavy-sans flex items-center gap-2.5 uppercase">
+                <svg className="w-5 h-5 text-[#6366f1]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" />
+                  <path d="M12 6v12M6 12h12" />
+                </svg>
+                {firma.adi}
+              </span>
+            </a>
+
+            {/* Links */}
+            <nav className="hidden lg:flex items-center gap-8">
+              {[
+                { label: t.navServices, href: "#hizmetler" },
+                { label: t.navProjects, href: "#projeler" },
+                { label: t.navTeam, href: "#ekip" },
+                { label: t.navReviews, href: "#testimonials" }
+              ].map(item => (
+                <a
+                  key={item.label}
+                  href={item.href}
+                  className="text-[10px] font-black tracking-[2px] uppercase text-[#0F172A]/70 hover:text-[#6366f1] transition-colors relative py-1 cursor-pointer group"
+                >
+                  {item.label}
+                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#6366f1] transition-all group-hover:w-full" />
+                </a>
+              ))}
+            </nav>
+
+            {/* Language Selector + Quote Button */}
+            <div className="flex items-center gap-4">
+              {/* Language Switcher */}
+              <div className="flex items-center gap-1 bg-[#0F172A]/5 border border-[#0F172A]/10 rounded-xl p-1 shrink-0">
+                <button
+                  onClick={() => setLang("tr")}
+                  className={`text-[9px] font-sans-clean font-black px-2 py-1.5 rounded-lg transition-all cursor-pointer ${
+                    lang === "tr" ? "bg-white text-slate-900 shadow-sm" : "text-[#0F172A]/60 hover:text-[#0F172A]"
+                  }`}
+                >
+                  TR
+                </button>
+                <button
+                  onClick={() => setLang("en")}
+                  className={`text-[9px] font-sans-clean font-black px-2 py-1.5 rounded-lg transition-all cursor-pointer ${
+                    lang === "en" ? "bg-white text-slate-900 shadow-sm" : "text-[#0F172A]/60 hover:text-[#0F172A]"
+                  }`}
+                >
+                  EN
+                </button>
+              </div>
+
+              <motion.button
+                onClick={() => setShowBookingModal(true)}
+                className="text-[10px] font-black tracking-[2.5px] uppercase text-white bg-[#6366f1] hover:bg-[#4f46e5] px-6 py-3.5 rounded-xl transition-all cursor-pointer shadow-[0_4px_12px_rgba(99,102,241,0.15)] hidden sm:block"
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+              >
+                {t.navBooking}
+              </motion.button>
+            </div>
+          </div>
+        </motion.header>
+
+        {/* ── HERO & BENTO HIGHLIGHTS ── */}
+        <section className="relative min-h-screen pt-32 pb-20 flex items-center z-10 px-6">
+          <div className="max-w-7xl mx-auto w-full">
+            <div className="grid lg:grid-cols-12 gap-16 items-center">
+              
+              {/* Left Column: Heavy typography and stats */}
+              <motion.div 
+                className="lg:col-span-6 z-20"
+                variants={stagger}
+                initial="hidden"
+                animate="show"
+              >
+                <motion.div 
+                  variants={fadeUp}
+                  className="inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-[#6366f1] mb-6 bg-[#6366f1]/5 border border-[#6366f1]/10 px-4 py-2 rounded-full"
+                >
+                  <span className="w-1.5 h-1.5 rounded-full bg-[#6366f1] animate-pulse" />
+                  {t.badge}
+                </motion.div>
+
+                <motion.h1 
+                  variants={fadeUp}
+                  className="font-heavy-sans text-[#0F172A] leading-[1.1] mb-8 hero-title-clamp uppercase"
+                >
+                  {t.heroTitlePart1}
+                  <br />
+                  <span className="text-[#6366f1] font-light italic">{t.heroTitlePart2}</span>
+                  <br />
+                  {t.heroTitlePart3}
+                </motion.h1>
+
+                <motion.p 
+                  variants={fadeUp}
+                  className="text-[#0F172A]/60 text-xs lg:text-sm leading-relaxed max-w-md mb-12 font-semibold"
+                >
+                  {t.heroDesc}
+                </motion.p>
+
+                {/* Statistics Grid */}
+                <motion.div 
+                  variants={fadeUp}
+                  className="grid grid-cols-2 sm:grid-cols-4 gap-6 mb-12 font-semibold"
+                >
+                  {istatistikler.map((stat, idx) => (
+                    <div key={idx} className="border-l border-[#6366f1]/30 pl-4 py-1">
+                      <h4 className="font-heavy-sans text-[#0F172A] text-lg uppercase tracking-wider mb-1 leading-none">
+                        {stat.deger}
+                      </h4>
+                      <p className="text-[#0F172A]/50 text-[10px] leading-snug">
+                        {getLocalizedStatLabel(stat.etiket)}
+                      </p>
+                    </div>
+                  ))}
+                </motion.div>
+
+                {/* CTA buttons */}
+                <motion.div variants={fadeUp} className="flex gap-4">
+                  <motion.button 
+                    onClick={() => setShowBookingModal(true)}
+                    className="inline-flex items-center gap-3 px-8 py-4.5 rounded-xl bg-[#6366f1] hover:bg-[#4f46e5] text-white font-black text-[10px] tracking-[2px] uppercase transition-all shadow-[0_5px_15px_rgba(99,102,241,0.2)] cursor-pointer"
+                    whileHover={{ scale: 1.02 }}
+                  >
+                    📅 {t.getQuote}
+                  </motion.button>
+                  <a 
+                    href="#projeler" 
+                    className="inline-flex items-center gap-3 px-8 py-4.5 rounded-xl border border-[#0F172A]/10 bg-white/40 hover:bg-white/80 text-[#0F172A] font-black text-[10px] tracking-[2px] uppercase transition-all cursor-pointer"
+                  >
+                    {t.learnMore}
+                  </a>
+                </motion.div>
+              </motion.div>
+
+              {/* Right Column: Bento style highlights preview */}
+              <div className="lg:col-span-6 grid sm:grid-cols-2 gap-4 w-full">
+                {hizmetler.slice(0, 4).map((h, i) => {
+                  const s = getLocalizedServiceText(h.baslik);
+                  return (
+                    <motion.div 
+                      key={i}
+                      className="bg-white rounded-3xl p-6 shadow-premium border border-white hover:border-[#6366f1]/30 transition-all duration-300 flex flex-col justify-between group h-64"
+                      initial={{ opacity: 0, scale: 0.95 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      transition={{ duration: 0.5, delay: i * 0.1 }}
+                      whileHover={{ y: -4 }}
+                    >
+                      <div className="w-12 h-12 rounded-2xl flex items-center justify-center transition-transform group-hover:scale-105 shadow-sm border border-gray-100 bg-gray-50 shrink-0">
+                        {getServiceIconSvg(h.baslik)}
+                      </div>
+                      <div>
+                        <h4 className="font-heavy-sans text-gray-900 text-xs uppercase tracking-wide leading-tight mb-2">{s.title}</h4>
+                        <p className="text-gray-400 text-[10px] leading-relaxed font-semibold">{s.desc}</p>
+                      </div>
+                    </motion.div>
+                  );
+                })}
+              </div>
+
+            </div>
+          </div>
+        </section>
+
+        {/* ── HİZMETLER FULL BENTO GRID ── */}
+        <section id="hizmetler" className="py-32 bg-white px-6 border-t border-gray-100 relative z-10">
+          <div className="max-w-7xl mx-auto">
+            
+            <motion.div 
+              className="mb-20"
+              initial="hidden" 
+              whileInView="show" 
+              viewport={{ once: true }} 
+              variants={stagger}
+            >
+              <motion.span 
+                variants={fadeUp}
+                className="inline-block text-[10px] font-black uppercase tracking-widest px-4 py-2 rounded-full mb-4 bg-[#6366f1]/5 text-[#6366f1] border border-[#6366f1]/10"
+              >
+                {t.navServices}
+              </motion.span>
+              <motion.h2 variants={fadeUp} className="text-4xl lg:text-5xl font-heavy-sans text-gray-900 leading-tight uppercase">
+                {lang === "tr" ? "Kapsamlı Lojistik Çözüm Paketi" : "Comprehensive Logistics Solutions"}
+              </motion.h2>
+            </motion.div>
+
+            <motion.div 
+              className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6"
+              initial="hidden" 
+              whileInView="show" 
+              viewport={{ once: true }} 
+              variants={stagger}
+            >
+              {hizmetler.map((h, i) => {
+                const s = getLocalizedServiceText(h.baslik);
+                return (
+                  <motion.div 
+                    key={i} 
+                    variants={fadeUp}
+                    className="bg-white rounded-3xl p-8 border border-gray-100 group flex flex-col justify-between h-80 transition-all duration-300"
+                    whileHover={{ y: -6, boxShadow: `0 24px 60px rgba(99,102,241,0.08)`, borderColor: `${firma.renkAna}30` }}
+                  >
+                    <div>
+                      <div className="w-14 h-14 rounded-2xl flex items-center justify-center transition-transform group-hover:scale-105 shadow-sm border border-gray-100 bg-gray-50 mb-6 shrink-0">
+                        {getServiceIconSvg(h.baslik)}
+                      </div>
+                      <h3 className="font-heavy-sans text-gray-900 text-sm uppercase tracking-wide leading-tight mb-3">{s.title}</h3>
+                      <p className="text-gray-500 text-xs leading-relaxed font-semibold">{s.desc}</p>
+                    </div>
+
+                    <button 
+                      onClick={() => setShowBookingModal(true)}
+                      className="text-[#6366f1] font-black text-[9px] tracking-[2.5px] uppercase flex items-center gap-1 cursor-pointer hover:text-opacity-80 transition-colors pt-4 border-t border-gray-100 shrink-0"
+                    >
+                      {lang === "tr" ? "DETAYLI BİLGİ →" : "MORE DETAILS →"}
+                    </button>
+                  </motion.div>
+                );
+              })}
+            </motion.div>
+          </div>
+        </section>
+
+        {/* ── REFERANSLAR (PROJELER) ── */}
+        <section id="projeler" className="py-32 px-6 bg-gray-950 border-t border-white/5 relative z-10">
+          <div className="max-w-7xl mx-auto">
+            
+            <motion.div 
+              className="mb-20"
+              initial="hidden" 
+              whileInView="show" 
+              viewport={{ once: true }} 
+              variants={stagger}
+            >
+              <motion.span 
+                variants={fadeUp}
+                className="inline-block text-[10px] font-black uppercase tracking-widest px-4 py-2 rounded-full mb-4 bg-white/5 text-[#6366f1] border border-white/10"
+              >
+                {t.projectsTitle}
+              </motion.span>
+              <motion.h2 variants={fadeUp} className="text-4xl lg:text-5xl font-heavy-sans text-white uppercase">
+                {t.projectsHeader}
+              </motion.h2>
+            </motion.div>
+
+            <motion.div 
+              className="grid sm:grid-cols-2 gap-6"
+              initial="hidden" 
+              whileInView="show" 
+              viewport={{ once: true }} 
+              variants={stagger}
+            >
+              {projeler.map((p, i) => {
+                const proj = getLocalizedProjectText(p.baslik);
+                return (
+                  <motion.div 
+                    key={i} 
+                    variants={fadeUp}
+                    className="bg-white/5 border border-white/10 rounded-3xl p-8 group flex flex-col justify-between h-56 transition-all duration-300"
+                    whileHover={{ y: -4, background: "rgba(255,255,255,0.08)", borderColor: "rgba(255,255,255,0.2)" }}
+                  >
+                    <div className="flex items-start gap-5">
+                      <div className="w-14 h-14 rounded-2xl flex items-center justify-center text-xl shrink-0"
+                           style={{ background: `${p.renk}20` }}>
+                        <span className="select-none text-2xl">{p.ikon}</span>
+                      </div>
+                      <div>
+                        <div className="flex items-center gap-3 mb-2 flex-wrap">
+                          <h3 className="font-heavy-sans text-white text-[15px] uppercase tracking-wide">{proj.title}</h3>
+                          <span className="text-[9px] font-black uppercase tracking-widest px-2.5 py-1 rounded-full border border-white/10"
+                                style={{ background: `${p.renk}20`, color: p.renk }}>
+                            {proj.sector}
+                          </span>
+                        </div>
+                        <p className="text-white/50 text-xs leading-relaxed font-semibold">{proj.desc}</p>
+                      </div>
+                    </div>
+
+                    <button 
+                      onClick={() => setShowBookingModal(true)}
+                      className="text-white/80 font-black text-[9px] tracking-[2.5px] uppercase flex items-center gap-1 cursor-pointer hover:text-white transition-colors pt-4 border-t border-white/5 shrink-0"
+                    >
+                      {lang === "tr" ? "VAKAYI İNCELE →" : "VIEW CASE STUDY →"}
+                    </button>
+                  </motion.div>
+                );
+              })}
+            </motion.div>
+          </div>
+        </section>
+
+        {/* ── EKİP (TEAM) ── */}
+        {ekip.length > 0 && (
+          <section id="ekip" className="py-32 px-6 bg-[#f8fafc] border-t border-gray-100 relative z-10">
+            <div className="max-w-7xl mx-auto">
+              
+              <motion.div 
+                className="mb-20"
+                initial="hidden" 
+                whileInView="show" 
+                viewport={{ once: true }} 
+                variants={stagger}
+              >
+                <motion.span 
+                  variants={fadeUp}
+                  className="inline-block text-[10px] font-black uppercase tracking-widest px-4 py-2 rounded-full mb-4 bg-[#6366f1]/5 text-[#6366f1] border border-[#6366f1]/10"
+                >
+                  {t.teamTitle}
+                </motion.span>
+                <motion.h2 variants={fadeUp} className="text-4xl lg:text-5xl font-heavy-sans text-gray-900 uppercase">
+                  {t.teamHeader}
+                </motion.h2>
+              </motion.div>
+
+              <motion.div 
+                className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 font-semibold"
+                initial="hidden" 
+                whileInView="show" 
+                viewport={{ once: true }} 
+                variants={stagger}
+              >
+                {ekip.map((k, i) => {
+                  const member = getLocalizedTeam(k.ad);
+                  return (
+                    <motion.div 
+                      key={i} 
+                      variants={fadeUp}
+                      className="bg-white rounded-3xl overflow-hidden border border-gray-100/60 shadow-premium flex flex-col justify-between"
+                      whileHover={{ y: -6 }}
+                    >
+                      <div 
+                        className="h-44 flex items-center justify-center text-6xl select-none"
+                        style={{ background: `linear-gradient(135deg, ${firma.renkAcik}, rgba(99,102,241,0.15))` }}
+                      >
+                        <motion.span whileHover={{ scale: 1.15 }} transition={{ type: "spring", stiffness: 300 }}>
+                          {k.emoji}
+                        </motion.span>
+                      </div>
+                      <div className="p-6">
+                        <h3 className="font-heavy-sans text-gray-900 text-sm uppercase leading-tight">{member.name}</h3>
+                        <p className="text-[11px] font-bold mt-1.5 text-[#6366f1] uppercase tracking-wide">{member.role}</p>
+                      </div>
+                    </motion.div>
+                  );
+                })}
+              </motion.div>
+            </div>
+          </section>
+        )}
+
+        {/* ── YORUMLAR (TESTIMONIALS) ── */}
+        <section id="testimonials" className="py-32 px-6 bg-white border-t border-gray-100 relative z-10">
+          <div className="max-w-7xl mx-auto font-semibold">
+            
+            <motion.div 
+              className="mb-20"
+              initial="hidden" 
+              whileInView="show" 
+              viewport={{ once: true }} 
+              variants={stagger}
+            >
+              <motion.span 
+                variants={fadeUp}
+                className="inline-block text-[10px] font-black uppercase tracking-widest px-4 py-2 rounded-full mb-4 bg-[#6366f1]/5 text-[#6366f1] border border-[#6366f1]/10"
+              >
+                {t.reviewsTitle}
+              </motion.span>
+              <motion.h2 variants={fadeUp} className="text-4xl lg:text-5xl font-heavy-sans text-gray-900 uppercase">
+                {t.reviewsHeader}
+              </motion.h2>
+            </motion.div>
+
+            <motion.div 
+              className="grid md:grid-cols-3 gap-6"
+              initial="hidden" 
+              whileInView="show" 
+              viewport={{ once: true }} 
+              variants={stagger}
+            >
+              {yorumlar.map((y, i) => (
+                <motion.div 
+                  key={i} 
+                  variants={fadeUp}
+                  className="bg-gray-50 rounded-3xl p-8 border border-gray-100 flex flex-col justify-between h-80"
+                  whileHover={{ y: -4, boxShadow: `0 20px 40px rgba(99,102,241,0.06)`, borderColor: `${firma.renkAna}30` }}
+                >
+                  <div>
+                    <div className="flex gap-1.5 mb-5">
+                      {[...Array(y.puan || 5)].map((_, j) => (
+                        <svg key={j} className="w-4.5 h-4.5 fill-[#6366f1]" 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-gray-600 text-xs leading-relaxed italic mb-6">&ldquo;{y.yorum}&rdquo;</p>
+                  </div>
+                  
+                  <div className="flex items-center gap-3.5 pt-4 border-t border-gray-200/60 shrink-0">
+                    <div className="w-9 h-9 rounded-full flex items-center justify-center text-base bg-white shadow-sm border border-gray-100 select-none">
+                      {y.emoji}
+                    </div>
+                    <div>
+                      <p className="text-gray-900 font-bold text-xs uppercase tracking-wide leading-tight">{y.yazar.split("—")[0]}</p>
+                      <p className="text-gray-400 text-[9px] uppercase tracking-widest font-black mt-0.5">{y.yazar.split("—")[1] || t.reviewsTitle}</p>
+                    </div>
+                  </div>
+                </motion.div>
+              ))}
+            </motion.div>
+          </div>
+        </section>
+
+        {/* ── İLETİŞİM / TEKLİF AL ── */}
+        <section id="iletisim" className="py-32 px-6 relative overflow-hidden"
+                 style={{ background: `linear-gradient(135deg, ${firma.renkKoyu} 0%, ${firma.renkAna} 100%)` }}>
+          
+          {/* Subtle cosmic grid layout */}
+          <div className="absolute inset-0 opacity-[0.03] pointer-events-none"
+               style={{ backgroundImage: "linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px)", backgroundSize: "40px 40px" }} />
+
+          <div className="max-w-7xl mx-auto relative z-10">
+            <div className="grid lg:grid-cols-2 gap-16 items-start">
+              
+              {/* Left Column: contact information */}
+              <motion.div initial="hidden" whileInView="show" viewport={{ once: true }} variants={stagger}>
+                <motion.span 
+                  variants={fadeUp}
+                  className="inline-block text-[9px] font-black uppercase tracking-widest px-4 py-2 rounded-full mb-4 bg-white/20 text-white border border-white/10"
+                >
+                  {t.bookingTitle}
+                </motion.span>
+                <motion.h2 variants={fadeUp} className="text-4xl lg:text-5xl font-heavy-sans text-white leading-tight mb-6 uppercase">
+                  {t.bookingHeader}
+                </motion.h2>
+                <motion.p variants={fadeUp} className="text-white/70 text-xs lg:text-sm mb-10 font-semibold leading-relaxed">
+                  {t.bookingDesc}
+                </motion.p>
+
+                <motion.div variants={fadeUp} className="space-y-4 font-semibold">
+                  {[
+                    { ikon: "📞", baslik: t.callCenter, aciklama: firma.telefon },
+                    { ikon: "📍", baslik: t.addressLabel, aciklama: firma.adres },
+                    { ikon: "✉️", baslik: t.emailLabel, aciklama: firma.email },
+                  ].map((item) => (
+                    <div key={item.baslik} className="flex items-start gap-4 bg-white/10 rounded-2xl p-4 border border-white/5">
+                      <span className="text-xl mt-0.5 shrink-0 select-none">{item.ikon}</span>
+                      <div>
+                        <p className="text-white/60 text-[9px] font-black uppercase tracking-wider">{item.baslik}</p>
+                        <p className="text-white text-xs mt-1 leading-snug">{item.aciklama}</p>
+                      </div>
+                    </div>
+                  ))}
+                </motion.div>
+              </motion.div>
+
+              {/* Right Column: Quote Form */}
+              <motion.div
+                className="bg-white rounded-3xl p-8 shadow-2xl border border-white/10"
+                initial={{ opacity: 0, y: 40 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.7, delay: 0.2 }}
+              >
+                <h3 className="font-heavy-sans text-gray-900 text-lg mb-6 uppercase tracking-wide">{t.bookingTitle}</h3>
+                <div className="grid grid-cols-2 gap-4 font-semibold">
+                  {[
+                    { label: t.fieldsName, placeholder: lang === "tr" ? "Adınız Soyadınız" : "Your Full Name", type: "text", full: false },
+                    { label: t.fieldsPhone, placeholder: "05xx xxx xx xx", type: "tel", full: false },
+                    { label: t.fieldsEmail, placeholder: "ornek@mail.com", type: "email", full: false },
+                    { label: t.fieldsCategory, placeholder: "", type: "select", full: false },
+                    { label: t.fieldsDate, placeholder: "", type: "date", full: false },
+                    { label: t.fieldsNotes, placeholder: t.fieldsNotesPlaceholder, type: "text", full: true },
+                  ].map((field, i) => (
+                    <div key={i} className={field.full ? "col-span-2" : "col-span-2 sm:col-span-1"}>
+                      <label className="block text-[10px] font-black text-gray-700 mb-1.5 uppercase tracking-wider">{field.label}</label>
+                      {field.type === "select" ? (
+                        <select className="w-full px-4 py-3.5 rounded-xl border border-gray-200 text-xs text-slate-800 focus:outline-none focus:ring-2 focus:ring-[#6366f1] bg-gray-50/50 transition-all font-semibold cursor-pointer">
+                          <option>{t.serviceKarayolu}</option>
+                          <option>{t.serviceDepolama}</option>
+                          <option>{t.serviceEticaret}</option>
+                          <option>{t.serviceUlusal}</option>
+                          <option>{t.serviceSoguk}</option>
+                        </select>
+                      ) : (
+                        <input type={field.type} placeholder={field.placeholder}
+                               className="w-full px-4 py-3.5 rounded-xl border border-gray-200 text-xs focus:outline-none focus:ring-2 focus:ring-[#6366f1] bg-gray-50/50 transition-all placeholder-slate-300 font-semibold" />
+                      )}
+                    </div>
+                  ))}
+                </div>
+                <motion.button
+                  onClick={() => setShowBookingModal(true)}
+                  className="mt-6 w-full py-4.5 rounded-xl text-white font-black text-xs uppercase tracking-widest cursor-pointer shadow-[0_5px_15px_rgba(99,102,241,0.2)]"
+                  style={{ background: `linear-gradient(135deg, ${firma.renkAna}, ${firma.renkKoyu})` }}
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  📅 {t.dispatchForm}
+                </motion.button>
+              </motion.div>
+
+            </div>
+          </div>
+        </section>
+
+        {/* ── FOOTER ── */}
+        <footer className="bg-gray-950 border-t border-white/5 px-6 pt-24 pb-8 relative z-10">
+          <div className="max-w-7xl mx-auto font-semibold">
+            <div className="grid md:grid-cols-4 gap-12 pb-16 border-b border-white/5">
+              <div className="md:col-span-2">
+                <div className="flex items-center gap-3 mb-4">
+                  <svg className="w-5 h-5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" />
+                    <path d="M12 6v12M6 12h12" />
+                  </svg>
+                  <span className="font-bold text-white text-lg font-heavy-sans uppercase tracking-wide">{firma.adi}</span>
+                </div>
+                <p className="text-white/40 text-xs leading-relaxed max-w-sm mb-8">{firma.slogan} — {t.footerDesc}</p>
+                <div className="text-white/50 text-xs space-y-3">
+                  <p className="flex items-center gap-2">📍 <span className="text-white/80">{firma.adres}</span></p>
+                  <p className="flex items-center gap-2">📞 <span className="text-white/80">{firma.telefon}</span></p>
+                </div>
+              </div>
+              <div>
+                <h4 className="font-heavy-sans text-white font-bold text-xs uppercase tracking-wider mb-6">{t.navServices}</h4>
+                {hizmetler.slice(0, 4).map((h, i) => {
+                  const s = getLocalizedServiceText(h.baslik);
+                  return (
+                    <a key={i} href="#hizmetler" className="block text-white/40 text-xs mb-3 hover:text-white transition-colors">{s.title}</a>
+                  );
+                })}
+              </div>
+              <div>
+                <h4 className="font-heavy-sans text-white font-bold text-xs uppercase tracking-wider mb-6">Company</h4>
+                {[t.navServices, t.navProjects, t.navTeam, t.navReviews].map((item) => (
+                  <a key={item} href="#" className="block text-white/40 text-xs mb-3 hover:text-white transition-colors">{item}</a>
+                ))}
+              </div>
+            </div>
+            <div className="flex flex-col md:flex-row justify-between items-center pt-8 gap-4 text-white/30 text-xs">
+              <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>
+
+        {/* ── CONSULTATION SUCCESS 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-3xl p-8 max-w-md w-full relative shadow-2xl border border-gray-100"
+                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 font-bold text-gray-500 hover:bg-gray-200 transition-colors cursor-pointer"
+                  onClick={() => setShowBookingModal(false)}
+                >
+                  ✕
+                </button>
+                
+                <h3 className="font-heavy-sans text-[#0F172A] text-2xl mb-1 uppercase tracking-wide leading-none">{t.contactTitle}</h3>
+                <p className="text-gray-400 text-xs mb-6 font-semibold">{t.contactDesc}</p>
+                
+                <div className="space-y-4 font-semibold">
+                  <div>
+                    <label className="block text-[10px] font-black text-gray-500 mb-1.5 uppercase tracking-wider">{t.fieldsName}</label>
+                    <input type="text" className="w-full px-4 py-3.5 rounded-xl border bg-gray-50/50 text-xs focus:outline-none focus:ring-2 focus:ring-[#6366f1]" placeholder="John Doe" />
+                  </div>
+                  <div>
+                    <label className="block text-[10px] font-black text-gray-500 mb-1.5 uppercase tracking-wider">{t.fieldsPhone}</label>
+                    <input type="tel" className="w-full px-4 py-3.5 rounded-xl border bg-gray-50/50 text-xs focus:outline-none focus:ring-2 focus:ring-[#6366f1]" placeholder="05xx xxx xx xx" />
+                  </div>
+                  <motion.button 
+                    className="w-full py-4 rounded-xl bg-[#6366f1] text-white font-black text-xs hover:bg-[#4f46e5] transition-colors mt-2 cursor-pointer shadow-[0_4px_12px_rgba(99,102,241,0.15)] uppercase tracking-widest"
+                    whileHover={{ scale: 1.02 }}
+                    whileTap={{ scale: 0.98 }}
+                    onClick={() => setShowBookingModal(false)}
+                  >
+                    {t.submit}
+                  </motion.button>
+                </div>
+              </motion.div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </>
+  );
+}