From f7dcd20267bc6aeb2d7f5b5ce2c34ae8406181bd Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 11 Mar 2026 09:01:56 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 130 +++++++++++++++++++++++++++--------------------
 1 file changed, 75 insertions(+), 55 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 41c6139..9c50026 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,23 +8,33 @@ 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, Phone, MessageCircle } from 'lucide-react';
+import { Heart, Quote, Shield, Smile, Sparkles, Star, MessageCircle, Brain } from 'lucide-react';
 import { useState } from 'react';
 
 export default function LandingPage() {
-  const [bookingOption, setBookingOption] = useState<'calendly' | 'call' | 'whatsapp' | null>(null);
+  const [chatOpen, setChatOpen] = useState(false);
+  const [chatMessages, setChatMessages] = useState<Array<{role: string, content: string}>>([]);
+  const [inputValue, setInputValue] = useState('');
 
-  const handleBookingClick = (option: 'calendly' | 'call' | 'whatsapp') => {
-    setBookingOption(option);
-    if (option === 'calendly') {
-      // Open Calendly integration
-      window.open('https://calendly.com', '_blank');
-    } else if (option === 'call') {
-      // Trigger phone call
-      window.location.href = 'tel:+919068808583';
-    } else if (option === 'whatsapp') {
-      // Open WhatsApp chat
-      window.open('https://wa.me/919068808583?text=Hello%20Dr.%20Fauzdar%27s%20Dental', '_blank');
+  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);
     }
   };
 
@@ -139,51 +149,61 @@ export default function LandingPage() {
       <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">
-            <h2 className="text-4xl font-bold mb-4">Advanced Booking System</h2>
-            <p className="text-lg text-foreground/75">Choose your preferred way to book an appointment</p>
+            <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="grid grid-cols-1 md:grid-cols-3 gap-8">
-            {/* Calendly Integration */}
-            <div className="p-8 rounded-lg border-2 border-primary-cta/30 hover:border-primary-cta/60 transition-all cursor-pointer bg-card/50 hover:bg-card" onClick={() => handleBookingClick('calendly')}>
-              <div className="flex justify-center mb-4">
-                <Calendar className="w-12 h-12 text-primary-cta" />
+          <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>
-              <h3 className="text-xl font-semibold text-center mb-2">Book via Calendly</h3>
-              <p className="text-foreground/70 text-center text-sm mb-4">
-                Choose your preferred date and time from our interactive calendar. Instant confirmation.
-              </p>
-              <button className="w-full py-2 px-4 bg-primary-cta text-primary-cta-text rounded-lg hover:opacity-90 transition-opacity font-medium">
-                Open Calendar
-              </button>
             </div>
-
-            {/* Call Now */}
-            <div className="p-8 rounded-lg border-2 border-accent/30 hover:border-accent/60 transition-all cursor-pointer bg-card/50 hover:bg-card" onClick={() => handleBookingClick('call')}>
-              <div className="flex justify-center mb-4">
-                <Phone className="w-12 h-12 text-accent" />
-              </div>
-              <h3 className="text-xl font-semibold text-center mb-2">Call Now</h3>
-              <p className="text-foreground/70 text-center text-sm mb-4">
-                Speak directly with our team. Available during business hours for immediate assistance.
+            
+            <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>
-              <button className="w-full py-2 px-4 bg-accent text-foreground rounded-lg hover:opacity-90 transition-opacity font-medium">
-                +91 90688 08583
-              </button>
-            </div>
-
-            {/* WhatsApp Chat */}
-            <div className="p-8 rounded-lg border-2 border-green-500/30 hover:border-green-500/60 transition-all cursor-pointer bg-card/50 hover:bg-card" onClick={() => handleBookingClick('whatsapp')}>
-              <div className="flex justify-center mb-4">
-                <MessageCircle className="w-12 h-12 text-green-500" />
-              </div>
-              <h3 className="text-xl font-semibold text-center mb-2">WhatsApp Chat</h3>
-              <p className="text-foreground/70 text-center text-sm mb-4">
-                Quick messaging service. Get instant replies and appointment confirmations via WhatsApp.
-              </p>
-              <button className="w-full py-2 px-4 bg-green-500 text-white rounded-lg hover:opacity-90 transition-opacity font-medium">
-                Start Chat
-              </button>
             </div>
           </div>
         </div>
@@ -270,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" }}
@@ -319,4 +339,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1