ss

components/templates/HotelTemplate3/index.tsx

@@ -0,0 +1,750 @@
+"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: {
+    navIdeology: "Tasarım Felsefesi",
+    navServices: "Seçkin Hizmetler",
+    navPortfolio: "Portföyümüz",
+    navEnquire: "Ziyaret Başvurusu",
+    scheduleAccess: "Giriş Planla",
+    badge: "MİNİMAL MONOLİTİK VİLLA",
+    sloganTail: "BRÜT BETON ÇİZGİLERİYLE",
+    heroDesc: "Bodrum Yalıkavak kıyılarında saf yapısal lüksü yaşayın. Brüt monolitik beton formlar, sıfır kenar taşmalı sonsuzluk havuzları ve akıllı ev ses sistemleriyle tasarlandı.",
+    scheduleVisit: "ZİYARET PLANLA",
+    estatePortfolio: "VİLLA PORTFÖYÜ",
+    statTitle1: "PARAMETRE 1",
+    statTitle2: "PARAMETRE 2",
+    statTitle3: "PARAMETRE 3",
+    privateAmenities: "Özel Ayrıcalıklar",
+    bespokeServices: "SEÇKİN VİLLA HİZMETLERİ",
+    secureRes: "GİRİŞ BAŞVURUSU YAP →",
+    privilegedRequest: "Ayrıcalıklı Talep",
+    enquirePrivate: "ZİYARET VE EMLAK BAŞVURUSU",
+    formDesc: "Özel mimari koordinatörlerimizle iletişime geçerek yapılandırılmış villa gezilerini planlayın.",
+    fieldsName: "İsim Soyisim",
+    fieldsEmail: "E-Posta Adresi",
+    fieldsPhone: "İletişim Numarası",
+    fieldsProperty: "Mülk Kategorisi",
+    fieldsNotes: "Özel istekler",
+    fieldsNotesPlaceholder: "Helikopter pisti talepleri, kişisel güvenlik önlemleri...",
+    dispatchForm: "GÜVENLİK FORMUNU GÖNDER",
+    diaries: "Görüşler",
+    trustedOwners: "MÜLK SAHİPLERİNİN GÜVENCESİ",
+    vipCoords: "VIP KOORDİNATLAR",
+    securityHours: "Güvenlik Birimi",
+    securityActive: "24 Saat Kesintisiz Aktif",
+    heliport: "Özel Helikopter Pisti",
+    heliportActive: "Otomatik rötar senkronizasyonu",
+    estateServices: "VİLLA HİZMETLERİ",
+    privacyRegs: "Gizlilik Sözleşmesi",
+    termsStay: "Brüt Beton Koşulları",
+    dismiss: "KAPAT",
+    enquiryActive: "ZİYARET ONAYLANDI",
+    ambassadorActive: "Güvenlik Doğrulaması Başlatıldı",
+    enquirySuccess: "Yalıkavak brüt beton villa gezi talebinizi kaydettik. Güvenlik doğrulama koordinatörümüz, giriş detaylarını onaylamak için en kısa sürede sizinle iletişime geçecektir. Teşekkürler!",
+  },
+  en: {
+    navIdeology: "Design ideology",
+    navServices: "Bespoke services",
+    navPortfolio: "Bento portfolio",
+    navEnquire: "Enquire access",
+    scheduleAccess: "Schedule Access",
+    badge: "MINIMAL MONOLITHIC VILLA",
+    sloganTail: "WITH CONCRETE LINES",
+    heroDesc: "Indulge in sheer structural luxury at Bodrum Yalıkavak coast lines. Designed with raw monolithic architectural concrete forms, zero-edge pools, and smart voice systems.",
+    scheduleVisit: "SCHEDULE VISIT",
+    estatePortfolio: "ESTATE PORTFOLIO",
+    statTitle1: "PARAMETER 1",
+    statTitle2: "PARAMETER 2",
+    statTitle3: "PARAMETER 3",
+    privateAmenities: "Private Amenities",
+    bespokeServices: "BESPOKE VILLA SERVICES",
+    secureRes: "ENQUIRE ACCESS →",
+    privilegedRequest: "Privileged Request",
+    enquirePrivate: "ENQUIRE PRIVATE ACCESS",
+    formDesc: "Connect with our somatic architectural coordinators to schedule structured property walkthroughs.",
+    fieldsName: "Name",
+    fieldsEmail: "Email",
+    fieldsPhone: "Phone",
+    fieldsProperty: "Property Category",
+    fieldsNotes: "Special details",
+    fieldsNotesPlaceholder: "Helipad requirements, personalized security levels...",
+    dispatchForm: "DISPATCH SECURITY FORM",
+    diaries: "Sommelier Reviews",
+    trustedOwners: "TRUSTED BY OWNERS",
+    vipCoords: "VIP COORDINATES",
+    securityHours: "Security Hours",
+    securityActive: "Active 24 Hours",
+    heliport: "Lounge Heliport",
+    heliportActive: "Automated delay syncing",
+    estateServices: "ESTATE SERVICES",
+    privacyRegs: "Privacy Regulations",
+    termsStay: "Terms of Concrete",
+    dismiss: "DISMISS",
+    enquiryActive: "VISIT GRANTED",
+    ambassadorActive: "Security Clearing Initiated",
+    enquirySuccess: "We have registered your executive Yalıkavak concrete villa walkthrough request. A security clearance coordinator will contact you shortly to authorize access parameters. Thank you!",
+  }
+};
+
+export default function HotelTemplate3({ data }: { data: DemoData }) {
+  const { firma, istatistikler = [], hizmetler = [], yorumlar = [] } = data;
+  const [showModal, setShowModal] = useState(false);
+  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 statistics
+  const getLocalizedStat = (deger: string, etiket: string) => {
+    if (deger.includes("Concrete")) {
+      return {
+        deger: lang === "tr" ? "Brüt Beton" : "Concrete",
+        etiket: lang === "tr" ? "Tik ağacı zemin kaplamaları ile birleştirilmiş brüt monolitik beton formlar." : etiket
+      };
+    }
+    if (deger.includes("Smart")) {
+      return {
+        deger: lang === "tr" ? "Akıllı Konut" : "Smart Estate",
+        etiket: lang === "tr" ? "Tam entegre ses arayüzleri, otomatik havalandırma ve yedek güneş enerjisi." : etiket
+      };
+    }
+    return {
+      deger: lang === "tr" ? "Deniz Manzarası" : "Sea View",
+      etiket: lang === "tr" ? "Yerden tavana kadar kesintisiz cam panellerle tasarlanmış konsol yatak odaları." : etiket
+    };
+  };
+
+  // Localized services
+  const getLocalizedService = (baslik: string, aciklama: string) => {
+    if (baslik.includes("ARCHITECTURAL")) {
+      return {
+        title: lang === "tr" ? "MİMARİ TURLAR" : "ARCHITECTURAL TOURS",
+        desc: lang === "tr" ? "Karbon yapılar, brüt beton dokular ve taşmalı havuzları gösteren özel emlak turları." : aciklama
+      };
+    }
+    if (baslik.includes("MASTERCLASSES")) {
+      return {
+        title: lang === "tr" ? "TASARIM EĞİTİMLERİ" : "DESIGN MASTERCLASSES",
+        desc: lang === "tr" ? "Minimalist yaşam, özel mobilya yerleşimi ve sürdürülebilir brüt beton tasarımı atölyelerimiz." : aciklama
+      };
+    }
+    return {
+      title: lang === "tr" ? "ÖZEL LÜKS VİLLA" : "EXECUTIVE LUXURY VILLA",
+      desc: lang === "tr" ? "Kişisel sommelier desteği, otomatik helikopter pisti ve üst düzey güvenlik ile tam mülk kiralama." : aciklama
+    };
+  };
+
+  const css = `
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
+
+    :root {
+      --color-apex-emerald: #059669;
+      --color-apex-slate: #09090C;
+      --color-apex-card: #14141A;
+      --color-apex-white: #FAF8F5;
+      --color-apex-muted: rgba(250, 248, 245, 0.5);
+    }
+
+    .font-apex-heading {
+      font-family: 'Inter', sans-serif;
+      font-weight: 900;
+      letter-spacing: -0.04em;
+    }
+
+    .font-sans-apex {
+      font-family: 'Inter', sans-serif;
+    }
+
+    .bg-apex-mesh {
+      background-image: 
+        radial-gradient(circle at 10% 20%, rgba(5, 150, 105, 0.04) 0%, transparent 45%),
+        radial-gradient(circle at 90% 80%, rgba(250, 248, 245, 0.01) 0%, transparent 50%),
+        linear-gradient(rgba(255, 255, 255, 0.005) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 255, 255, 0.005) 1px, transparent 1px);
+      background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
+    }
+
+    .emerald-glow {
+      box-shadow: 0 0 25px rgba(5, 150, 105, 0.15);
+    }
+
+    .hero-title-clamp {
+      font-size: clamp(34px, 5.5vw, 85px);
+      line-height: 0.95;
+    }
+  `;
+
+  return (
+    <>
+      <style>{css}</style>
+
+      {/* ── IMZA AN: CURTAIN REVEAL PRELOADER ── */}
+      <AnimatePresence>
+        {preloader && (
+          <motion.div 
+            className="fixed inset-0 z-50 bg-[#09090C] 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-[#059669] block font-sans-apex"
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5 }}
+              >
+                APEX ARC MONOLITHIC
+              </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-[#059669]"
+                  initial={{ width: "0%" }}
+                  animate={{ width: "100%" }}
+                  transition={{ duration: 1.2, ease: "easeInOut" }}
+                />
+              </div>
+              <motion.h2 
+                className="font-apex-heading text-white text-lg font-light tracking-wider"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: 0.4, duration: 0.5 }}
+              >
+                brutalist villa estate
+              </motion.h2>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* SLEEK BRUTALIST ARCHITECTURAL ESTATE THEME */}
+      <div className="bg-[#09090C] text-[#FAF8F5] min-h-screen font-sans-apex selection:bg-[#059669] selection:text-white overflow-hidden relative bg-apex-mesh pb-24">
+        
+        {/* Floating Ambient Emerald Orbs */}
+        <div className="absolute top-[15%] left-[-15%] w-[600px] h-[600px] bg-[#059669]/4 blur-[130px] rounded-full pointer-events-none z-0" />
+        <div className="absolute bottom-[20%] right-[-15%] w-[600px] h-[600px] bg-[#FAF8F5]/1 blur-[140px] rounded-full pointer-events-none z-0" />
+
+        {/* ── MANDATORY FLOATING DEMO BANNER ── */}
+        <div className="fixed bottom-4 left-4 z-40 bg-[#14141A]/95 backdrop-blur-md border border-white/5 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-[#059669] 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>
+
+
+
+        {/* ── HIGH CONTRAST SLATE NAVBAR ── */}
+        <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: "easeOut" }}
+        >
+          <div className="mx-auto max-w-7xl h-20 flex items-center justify-between px-8 bg-[#14141A]/95 backdrop-blur-xl border border-white/5 rounded-2xl shadow-[0_15px_30px_rgba(0,0,0,0.5)]">
+            {/* Logo */}
+            <a href="#" className="flex items-center gap-2 group">
+              <span className="text-xl font-bold tracking-[1.5px] text-white font-apex-heading flex items-center gap-2.5 uppercase">
+                <svg className="w-5 h-5 text-[#059669]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <rect x="3" y="3" width="18" height="18" rx="2" />
+                  <path d="M9 3v18" />
+                  <path d="M15 3v18" />
+                  <path d="M3 9h18" />
+                  <path d="M3 15h18" />
+                </svg>
+                {firma.adi}
+              </span>
+            </a>
+
+            {/* Links */}
+            <nav className="hidden lg:flex items-center gap-8">
+              {[
+                { label: t.navIdeology, href: "#ideology" },
+                { label: t.navServices, href: "#services" },
+                { label: t.navPortfolio, href: "#portfolio" },
+                { label: t.navEnquire, href: "#booking-flow" }
+              ].map(item => (
+                <a
+                  key={item.label}
+                  href={item.href}
+                  className="text-[10px] font-black tracking-[2px] uppercase text-[#FAF8F5]/70 hover:text-[#059669] transition-colors relative py-1 cursor-pointer group"
+                >
+                  {item.label}
+                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#059669] transition-all group-hover:w-full" />
+                </a>
+              ))}
+            </nav>
+
+            {/* Language Selector + Booking Button */}
+            <div className="flex items-center gap-4">
+              {/* Language Switcher */}
+              <div className="flex items-center gap-1 bg-white/5 border border-white/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-white text-slate-900 shadow-sm" : "text-white/60 hover:text-white"
+                  }`}
+                >
+                  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-white text-slate-900 shadow-sm" : "text-white/60 hover:text-white"
+                  }`}
+                >
+                  EN
+                </button>
+              </div>
+
+              <motion.button
+                onClick={() => setShowModal(true)}
+                className="text-[10px] font-black tracking-[2.5px] uppercase text-white bg-[#059669] hover:bg-white hover:text-black px-6 py-3.5 rounded-xl transition-all cursor-pointer shadow-[0_5px_15px_rgba(5,150,105,0.2)] hidden sm:block"
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+              >
+                {t.scheduleAccess}
+              </motion.button>
+            </div>
+          </div>
+        </motion.header>
+
+        {/* ── ARCHITECTURAL HERO BANNER ── */}
+        <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: Heading and Brutalist descriptions */}
+              <motion.div 
+                className="lg:col-span-7 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-[#059669] mb-6 bg-[#059669]/10 border border-[#059669]/20 px-4 py-2 rounded-full"
+                >
+                  <span className="w-1.5 h-1.5 rounded-full bg-[#059669]" />
+                  {t.badge}
+                </motion.div>
+
+                <motion.h1 
+                  variants={fadeUp}
+                  className="font-apex-heading text-white leading-[0.95] tracking-tight mb-8 uppercase hero-title-clamp"
+                >
+                  {firma.slogan}
+                  <br />
+                  <span className="text-[#059669]">{t.sloganTail}</span>
+                </motion.h1>
+
+                <motion.p 
+                  variants={fadeUp}
+                  className="text-[#FAF8F5]/60 text-xs lg:text-sm leading-relaxed max-w-xl mb-12 font-medium"
+                >
+                  {t.heroDesc}
+                </motion.p>
+
+                {/* Quick actions */}
+                <motion.div variants={fadeUp} className="flex gap-4">
+                  <motion.button 
+                    onClick={() => setShowModal(true)}
+                    className="px-8 py-4 rounded-xl bg-[#059669] hover:bg-white hover:text-[#09090C] text-white font-black text-[10px] tracking-[2px] uppercase transition-all shadow-[0_5px_15px_rgba(5,150,105,0.25)] cursor-pointer"
+                    whileHover={{ scale: 1.02 }}
+                  >
+                    {t.scheduleVisit}
+                  </motion.button>
+                  <a 
+                    href="#portfolio" 
+                    className="px-8 py-4 rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 text-white font-black text-[10px] tracking-[2px] uppercase transition-all cursor-pointer text-center"
+                  >
+                    {t.estatePortfolio}
+                  </a>
+                </motion.div>
+              </motion.div>
+
+              {/* Right Column: High-fidelity image (brutalist fireplace oven) */}
+              <div className="lg:col-span-5 relative flex justify-center lg:justify-end">
+                <motion.div 
+                  className="relative w-full max-w-md lg:max-w-lg h-[430px] lg:h-[510px] rounded-3xl overflow-hidden shadow-2xl border border-white/5 group"
+                  initial={{ opacity: 0, scale: 0.95 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ duration: 0.8, ease: "easeOut" }}
+                >
+                  {/* Raw concrete fireplace oven representing structural concrete warmth */}
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img 
+                    src="/sicilia_wood_oven.png" 
+                    alt="Apex Arc Monolithic Architectural Fireplace" 
+                    className="w-full h-full object-cover scale-102 group-hover:scale-105 transition-transform duration-[4000ms]"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50" />
+                </motion.div>
+              </div>
+
+            </div>
+          </div>
+        </section>
+
+        {/* ── IDEOLOGY STATISTICS BLOCK ── */}
+        <section id="ideology" className="py-24 relative z-10 px-6 bg-[#14141A]/60 border-y border-white/5">
+          <div className="max-w-7xl mx-auto">
+            <div className="grid md:grid-cols-3 gap-8">
+              {istatistikler.map((stat, idx) => {
+                const locStat = getLocalizedStat(stat.deger, stat.etiket);
+                return (
+                  <div 
+                    key={idx}
+                    className="bg-[#14141A] p-8 rounded-3xl border border-white/5 flex flex-col justify-between h-48 transition-all hover:border-[#059669]/30"
+                  >
+                    <span className="text-[10px] font-black tracking-[3px] text-[#059669] uppercase block mb-2">{idx === 0 ? t.statTitle1 : idx === 1 ? t.statTitle2 : t.statTitle3}</span>
+                    <h3 className="font-apex-heading text-2xl font-bold uppercase text-white tracking-wider">
+                      {locStat.deger}
+                    </h3>
+                    <p className="text-[#FAF8F5]/50 text-[10px] font-semibold leading-relaxed">
+                      {locStat.etiket}
+                    </p>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </section>
+
+        {/* ── BESPOKE SERVICES ── */}
+        <section id="services" 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-[#059669] font-apex-heading text-xs uppercase tracking-widest block mb-2">{t.privateAmenities}</span>
+              <h2 className="font-apex-heading text-3xl lg:text-4xl font-bold uppercase text-white">
+                {t.bespokeServices}
+              </h2>
+            </div>
+
+            {/* Bento services grid */}
+            <div className="grid md:grid-cols-3 gap-8">
+              {hizmetler.map((hizmet, idx) => {
+                const locServ = getLocalizedService(hizmet.baslik, hizmet.aciklama);
+                return (
+                  <motion.div 
+                    key={idx}
+                    className="bg-[#14141A] rounded-3xl border border-white/5 overflow-hidden transition-all duration-300 hover:border-[#059669]/30 flex flex-col justify-between group shadow-sm"
+                    initial={{ opacity: 0, y: 30 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ duration: 0.5, delay: idx * 0.1 }}
+                    whileHover={{ y: -4 }}
+                  >
+                    {/* Cover image using dark upscale culinary smoke or organic lemon */}
+                    <div className="h-44 overflow-hidden relative border-b border-white/5">
+                      {/* eslint-disable-next-line @next/next/no-img-element */}
+                      <img 
+                        src={idx === 0 ? "/sicilia_wood_oven.png" : idx === 1 ? "/chef_plating_smoke.png" : "/sicilia_lemon_heritage.png"} 
+                        alt={hizmet.baslik} 
+                        className="w-full h-full object-cover scale-102 group-hover:scale-105 transition-transform duration-1000"
+                      />
+                      <div className="absolute inset-0 bg-black/40" />
+                    </div>
+
+                    <div className="p-8 space-y-4">
+                      <h3 className="font-apex-heading font-bold text-lg text-white tracking-wider uppercase leading-snug">
+                        {locServ.title}
+                      </h3>
+                      <p className="text-[#FAF8F5]/50 text-[11px] leading-relaxed font-semibold">
+                        {locServ.desc}
+                      </p>
+                    </div>
+
+                    <div className="px-8 pb-8">
+                      <button 
+                        onClick={() => setShowModal(true)}
+                        className="text-[#059669] group-hover:text-white transition-colors text-[10px] font-black tracking-[2px] uppercase flex items-center gap-1.5 cursor-pointer"
+                      >
+                        {t.secureRes}
+                      </button>
+                    </div>
+                  </motion.div>
+                );
+              })}
+            </div>
+
+          </div>
+        </section>
+
+        {/* ── RESERVATION FLOW ── */}
+        <section id="booking-flow" className="py-24 relative z-10 px-6 border-t border-white/5 bg-[#14141A]/40">
+          <div className="max-w-3xl mx-auto">
+            
+            <div className="bg-[#14141A] rounded-3xl p-8 md:p-12 shadow-2xl border border-white/5 relative">
+              <div className="absolute top-0 left-12 right-12 h-0.5 bg-gradient-to-r from-transparent via-[#059669] to-transparent glowing-bar" />
+
+              <div className="text-center mb-10">
+                <span className="text-[#059669] font-apex-heading text-xs uppercase tracking-widest block mb-2">{t.privilegedRequest}</span>
+                <h2 className="font-apex-heading text-3xl md:text-4xl font-bold uppercase text-white">
+                  {t.enquirePrivate}
+                </h2>
+                <p className="text-[#FAF8F5]/40 text-xs mt-2 font-medium">
+                  {t.formDesc}
+                </p>
+              </div>
+
+              <div className="grid grid-cols-2 gap-5">
+                {[
+                  { label: t.fieldsName, placeholder: lang === "tr" ? "Adınız Soyadınız" : "Your Name", type: "text", full: false },
+                  { label: t.fieldsEmail, placeholder: "you@company.com", type: "email", full: false },
+                  { label: t.fieldsPhone, placeholder: lang === "tr" ? "İrtibat Numarası" : "Contact Number", type: "tel", full: false },
+                  { label: t.fieldsProperty, placeholder: lang === "tr" ? "Yalıkavak Beton Villa" : "Yalıkavak Concrete Villa", type: "text", full: false },
+                  { label: t.fieldsNotes, placeholder: t.fieldsNotesPlaceholder, type: "text", full: true },
+                ].map((field, idx) => (
+                  <div key={idx} className={field.full ? "col-span-2" : "col-span-1"}>
+                    <label className="block text-[10px] font-black text-[#FAF8F5]/50 mb-1.5 uppercase tracking-widest">{field.label}</label>
+                    <input 
+                      type={field.type} 
+                      placeholder={field.placeholder}
+                      className="w-full px-4 py-3.5 rounded-xl border border-white/5 bg-[#09090C] text-xs text-white placeholder-white/20 focus:outline-none focus:border-[#059669] focus:ring-1 focus:ring-[#059669] transition-all font-semibold"
+                    />
+                  </div>
+                ))}
+              </div>
+
+              <motion.button 
+                onClick={() => setShowModal(true)}
+                className="mt-8 w-full py-4 rounded-xl bg-[#059669] hover:bg-white hover:text-[#09090C] text-white font-bold text-[10px] tracking-[2.5px] uppercase transition-colors cursor-pointer"
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+              >
+                {t.dispatchForm}
+              </motion.button>
+            </div>
+
+          </div>
+        </section>
+
+        {/* ── TESTIMONIALS ── */}
+        <section id="testimonials" className="py-28 relative z-10 px-6 border-t border-white/5">
+          <div className="max-w-7xl mx-auto">
+            
+            <div className="text-center max-w-xl mx-auto mb-20">
+              <span className="text-[#059669] font-apex-heading text-xs uppercase tracking-widest block mb-2">{t.diaries}</span>
+              <h2 className="font-apex-heading text-3xl lg:text-4xl font-bold uppercase text-white">
+                {t.trustedOwners}
+              </h2>
+            </div>
+
+            {/* Testimonials */}
+            <div className="grid md:grid-cols-2 gap-8">
+              {yorumlar.map((y, yIdx) => (
+                <motion.div 
+                  key={yIdx}
+                  className="bg-[#14141A] border border-white/5 rounded-3xl p-8 flex flex-col justify-between transition-all duration-300 hover:border-[#059669]/30 group"
+                  initial={{ opacity: 0, y: 30 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.5, delay: yIdx * 0.1 }}
+                  whileHover={{ y: -4 }}
+                >
+                  <div className="flex gap-1.5 mb-6">
+                    {[...Array(5)].map((_, starIdx) => (
+                      <svg key={starIdx} className="w-4 h-4 fill-[#059669]" 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-[#FAF8F5]/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-white/10 flex items-center justify-center text-lg bg-[#09090C] select-none font-bold">
+                      {y.yazar.charAt(0)}
+                    </div>
+                    <div>
+                      <h4 className="font-apex-heading text-white text-xs font-black uppercase tracking-wider">
+                        {y.yazar}
+                      </h4>
+                      <span className="text-[9px] text-[#FAF8F5]/40 uppercase tracking-widest font-black">
+                        {y.tarih}
+                      </span>
+                    </div>
+                  </div>
+
+                </motion.div>
+              ))}
+            </div>
+
+          </div>
+        </section>
+
+        {/* ── FOOTER ── */}
+        <footer className="bg-[#14141A] border-t border-white/5 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/5">
+              
+              {/* About Column */}
+              <div className="md:col-span-2">
+                <span className="font-apex-heading text-2xl font-black text-white tracking-wider uppercase mb-4 block">
+                  Apex<span className="text-[#059669]">Arc</span>
+                </span>
+                <p className="text-[#FAF8F5]/50 text-xs leading-relaxed max-w-sm mb-8 font-medium">
+                  {firma.slogan} — Monolithic concrete-Teak luxury estates looking over Muğla coastlines. High-end voice smart interfaces.
+                </p>
+                <div className="text-[#FAF8F5]/60 text-xs font-medium space-y-3">
+                  <p className="flex items-center gap-2">
+                    <svg className="w-4 h-4 text-[#059669] 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-[#FAF8F5]/80">{firma.adres}</span>
+                  </p>
+                  <p className="flex items-center gap-2">
+                    <svg className="w-4 h-4 text-[#059669] 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-[#FAF8F5]/80">{firma.email}</span>
+                  </p>
+                </div>
+              </div>
+
+              {/* Coordinates Column */}
+              <div>
+                <h4 className="font-apex-heading text-[#059669] text-xs font-black uppercase tracking-wider mb-6">
+                  {t.vipCoords}
+                </h4>
+                <div className="space-y-4 text-xs text-[#FAF8F5]/50 font-semibold">
+                  <p>{t.securityHours} <br /> <span className="text-white/80">{t.securityActive}</span></p>
+                  <p>{t.heliport} <br /> <span className="text-white/80">{t.heliportActive}</span></p>
+                </div>
+              </div>
+
+              {/* Services Column */}
+              <div>
+                <h4 className="font-apex-heading text-[#059669] text-xs font-black uppercase tracking-wider mb-6">
+                  {t.estateServices}
+                </h4>
+                <div className="space-y-4">
+                  {hizmetler.map((h, hIdx) => {
+                    const locS = getLocalizedService(h.baslik, h.aciklama);
+                    return (
+                      <a 
+                        key={hIdx} 
+                        href="#services" 
+                        className="block text-[#FAF8F5]/50 hover:text-[#059669] 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-[#FAF8F5]/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>
+
+        {/* ── ENQUIRY MODAL ── */}
+        <AnimatePresence>
+          {showModal && (
+            <motion.div 
+              className="fixed inset-0 z-50 flex items-center justify-center p-6 bg-black/80 backdrop-blur-sm"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+            >
+              <motion.div 
+                className="bg-[#14141A] rounded-3xl p-8 max-w-md w-full relative shadow-2xl border border-[#059669]/20 text-white"
+                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-[#09090C] border border-white/5 flex items-center justify-center text-white/40 hover:text-[#059669] hover:border-[#059669]/20 transition-all cursor-pointer font-bold"
+                  onClick={() => setShowModal(false)}
+                >
+                  ✕
+                </button>
+                
+                {/* Success check indicator */}
+                <div className="w-16 h-16 rounded-2xl bg-[#059669]/10 border border-[#059669]/20 flex items-center justify-center mb-6">
+                  <svg className="w-8 h-8 stroke-[#059669] 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-apex-heading font-black text-white text-2xl mb-1 uppercase tracking-wider">
+                  {t.enquiryActive}
+                </h3>
+                <p className="text-[#059669] font-sans-apex text-[10px] mb-6 uppercase tracking-widest font-black">
+                  {t.ambassadorActive}
+                </p>
+                
+                <p className="text-[#FAF8F5]/60 text-xs leading-relaxed mb-8 font-semibold">
+                  {t.enquirySuccess}
+                </p>
+
+                <motion.button 
+                  className="w-full py-4.5 rounded-xl bg-[#059669] hover:bg-black hover:text-white text-white font-bold text-[9px] tracking-[2.5px] uppercase cursor-pointer shadow-md shadow-[#059669]/15"
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                  onClick={() => setShowModal(false)}
+                >
+                  {t.dismiss}
+                </motion.button>
+              </motion.div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+      </div>
+    </>
+  );
+}