Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -11,8 +11,11 @@ import FaqSplitText from "@/components/sections/faq/FaqSplitText";
 import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 import FooterBase from "@/components/sections/footer/FooterBase";
 import { Home, Users, Star, Globe } from "lucide-react";
+import { useState } from "react";
 
 export default function HomePage() {
+  const [selectedVillaId, setSelectedVillaId] = useState<string | null>(null);
+
   const navItems = [
     { name: "Anasayfa", id: "home" },
     { name: "Villalar", id: "villas" },
@@ -22,7 +25,8 @@ export default function HomePage() {
   ];
 
   const navButton = {
-    text: "Rezervasyon Yap",    href: "/villas"};
+    text: "Rezervasyon Yap",    href: "/villas"
+  };
 
   const footerColumns = [
     {
@@ -51,6 +55,15 @@ export default function HomePage() {
     },
   ];
 
+  const handleVillaClick = (villaId: string) => {
+    setSelectedVillaId(villaId);
+    // Scroll to contact section to show reservation activation
+    const contactSection = document.getElementById("contact");
+    if (contactSection) {
+      contactSection.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="bounce-effect"
@@ -97,11 +110,14 @@ export default function HomePage() {
           tagAnimation="slide-up"
           products={[
             {
-              id: "villa-001",              name: "Azure Dreams Villa",              price: "₺12.500 / gün",              imageSrc: "http://img.b2bpic.net/free-photo/luxury-poolside-experience-where-guests-bask-opulence-cabanas_1268-31113.jpg?_wi=1",              imageAlt: "Azure Dreams Villa - Özel Havuzlu Lüks Konak"},
+              id: "villa-001",              name: "Azure Dreams Villa",              price: "₺12.500 / gün",              imageSrc: "http://img.b2bpic.net/free-photo/luxury-poolside-experience-where-guests-bask-opulence-cabanas_1268-31113.jpg?_wi=1",              imageAlt: "Azure Dreams Villa - Özel Havuzlu Lüks Konak",              onProductClick: () => handleVillaClick("villa-001"),
+            },
             {
-              id: "villa-002",              name: "Mediterranean Pearl",              price: "₺15.000 / gün",              imageSrc: "http://img.b2bpic.net/free-photo/scenic-view-sandy-beach-beach-with-sun-beds-umbrellas-open-against-sea-mountains-hotel-resort-tekirova-kemer-turkey_146671-18877.jpg?_wi=1",              imageAlt: "Mediterranean Pearl - Sunset Terrace Villa"},
+              id: "villa-002",              name: "Mediterranean Pearl",              price: "₺15.000 / gün",              imageSrc: "http://img.b2bpic.net/free-photo/scenic-view-sandy-beach-beach-with-sun-beds-umbrellas-open-against-sea-mountains-hotel-resort-tekirova-kemer-turkey_146671-18877.jpg?_wi=1",              imageAlt: "Mediterranean Pearl - Sunset Terrace Villa",              onProductClick: () => handleVillaClick("villa-002"),
+            },
             {
-              id: "villa-003",              name: "Aegean Sunset",              price: "₺18.500 / gün",              imageSrc: "http://img.b2bpic.net/free-photo/modern-infinity-pool-perched-edge-cliff-overlooking-breathtaking-landscape_1268-31154.jpg?_wi=1",              imageAlt: "Aegean Sunset - Private Pool & Sea View"},
+              id: "villa-003",              name: "Aegean Sunset",              price: "₺18.500 / gün",              imageSrc: "http://img.b2bpic.net/free-photo/modern-infinity-pool-perched-edge-cliff-overlooking-breathtaking-landscape_1268-31154.jpg?_wi=1",              imageAlt: "Aegean Sunset - Private Pool & Sea View",              onProductClick: () => handleVillaClick("villa-003"),
+            },
           ]}
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
@@ -169,23 +185,26 @@ export default function HomePage() {
 
       <div id="contact" data-section="contact">
         <ContactSplitForm
-          title="Bizimle İletişime Geçin"
-          description="Kalkan villa kiralama hakkında sorularınız mı var? Bize e-mail gönderin veya doğrudan WhatsApp ile bağlantı kurun. 24 saat içinde yanıt alacaksınız."
+          title={selectedVillaId ? `${selectedVillaId} için Rezervasyon` : "Bizimle İletişime Geçin"}
+          description={selectedVillaId ? "Seçtiğiniz villa için reservasyon bilgilerini giriniz. 24 saat içinde sizinle iletişime geçeceğiz." : "Kalkan villa kiralama hakkında sorularınız mı var? Bize e-mail gönderin veya doğrudan WhatsApp ile bağlantı kurun. 24 saat içinde yanıt alacaksınız."}
           inputs={[
             { name: "name", type: "text", placeholder: "Adınız" },
             { name: "email", type: "email", placeholder: "E-mail Adresiniz" },
             { name: "phone", type: "tel", placeholder: "Telefon Numaranız (Opsiyonel)" },
           ]}
           textarea={{
-            name: "message",            placeholder: "Sorunuz veya talebiniz...",            rows: 5,
+            name: "message",            placeholder: selectedVillaId ? "Rezervasyon talebiniz ve sorularınız..." : "Sorunuz veya talebiniz...",            rows: 5,
           }}
           useInvertedBackground={false}
           imageSrc="http://img.b2bpic.net/free-photo/scenic-view-sandy-beach-beach-with-sun-beds-umbrellas-open-against-sea-mountains-hotel-resort-tekirova-kemer-turkey_146671-18880.jpg?_wi=2"
           imageAlt="Kalkan Villa Manzarası"
           mediaAnimation="slide-up"
           mediaPosition="right"
-          buttonText="Mesaj Gönder"
-          onSubmit={(data) => console.log("Form submitted:", data)}
+          buttonText={selectedVillaId ? "Rezervasyon Talebi Gönder" : "Mesaj Gönder"}
+          onSubmit={(data) => {
+            console.log("Form submitted:", { ...data, selectedVilla: selectedVillaId });
+            setSelectedVillaId(null);
+          }}
         />
       </div>