Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -8,9 +8,36 @@ import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwe
 import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { Calendar, Heart, Quote, Shield, Smile, Sparkles, Star } from 'lucide-react';
+import { Heart, Quote, Shield, Smile, Sparkles, Star, MessageCircle, Brain } from 'lucide-react';
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [chatOpen, setChatOpen] = useState(false);
+  const [chatMessages, setChatMessages] = useState<Array<{role: string, content: string}>>([]);
+  const [inputValue, setInputValue] = useState('');
+
+  const handleSendMessage = () => {
+    if (inputValue.trim()) {
+      const newMessages = [
+        ...chatMessages,
+        { role: 'user', content: inputValue }
+      ];
+      setChatMessages(newMessages);
+      setInputValue('');
+      
+      // Simulate AI response
+      setTimeout(() => {
+        const responses = [
+          "I'd be happy to help you book an appointment! What date and time work best for you?",          "Our available time slots are 9 AM - 1 PM and 3 PM - 7 PM. Which suits you?",          "Perfect! I've noted your preferences. Can you share your name and phone number?",          "Great! Your appointment is confirmed. We'll send you a reminder via SMS."
+        ];
+        setChatMessages(prev => [
+          ...prev,
+          { role: 'assistant', content: responses[Math.floor(Math.random() * responses.length)] }
+        ]);
+      }, 500);
+    }
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
@@ -119,6 +146,69 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="booking" data-section="booking">
+        <div className="w-content-width mx-auto py-20 px-vw-1_5">
+          <div className="text-center mb-16">
+            <div className="flex justify-center mb-6">
+              <Brain className="w-12 h-12 text-primary-cta" />
+            </div>
+            <h2 className="text-4xl font-bold mb-4">AI Booking Assistant</h2>
+            <p className="text-lg text-foreground/75">Chat with our intelligent assistant to book your appointment instantly</p>
+          </div>
+          
+          <div className="max-w-2xl mx-auto">
+            <div className="rounded-lg border-2 border-primary-cta/30 bg-card/50 overflow-hidden">
+              {/* Chat Container */}
+              <div className="h-96 bg-background/50 overflow-y-auto p-6 space-y-4">
+                <div className="flex justify-start">
+                  <div className="bg-primary-cta/20 rounded-lg p-4 max-w-xs">
+                    <p className="text-foreground text-sm">👋 Hello! I'm your dental booking assistant. How can I help you schedule an appointment today?</p>
+                  </div>
+                </div>
+                
+                {chatMessages.map((msg, idx) => (
+                  <div key={idx} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+                    <div className={`rounded-lg p-4 max-w-xs ${
+                      msg.role === 'user' 
+                        ? 'bg-primary-cta text-white' 
+                        : 'bg-primary-cta/20 text-foreground'
+                    }`}>
+                      <p className="text-sm">{msg.content}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+              
+              {/* Input Area */}
+              <div className="border-t border-primary-cta/20 p-4 bg-card">
+                <div className="flex gap-3">
+                  <input
+                    type="text"
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                    onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
+                    placeholder="Type your message..."
+                    className="flex-1 px-4 py-2 bg-background border border-accent/30 rounded-lg text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta/50"
+                  />
+                  <button
+                    onClick={handleSendMessage}
+                    className="px-6 py-2 bg-primary-cta text-primary-cta-text rounded-lg hover:opacity-90 transition-opacity font-medium"
+                  >
+                    Send
+                  </button>
+                </div>
+              </div>
+            </div>
+            
+            <div className="mt-6 p-4 bg-background/50 rounded-lg border border-accent/20">
+              <p className="text-foreground/75 text-sm text-center">
+                Our AI assistant will help you find the perfect appointment time and collect your information.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div id="whyus" data-section="whyus">
         <FeatureCardTwentySeven
           title="Why Patients Trust Our Dental Care"
@@ -200,7 +290,7 @@ export default function LandingPage() {
       <div id="contact" data-section="contact">
         <ContactSplit
           tag="Get Started"
-          tagIcon={Calendar}
+          tagIcon={MessageCircle}
           title="Book Your Dental Consultation Today"
           description="Schedule your appointment with Dr. Fauzdar and experience premium dental care. Our team will contact you shortly to confirm your booking."
           background={{ variant: "plain" }}