Update src/app/page.tsx

src/app/page.tsx

@@ -9,9 +9,38 @@ import ProductCardThree from "@/components/sections/product/ProductCardThree";
 import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
 import ContactText from "@/components/sections/contact/ContactText";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Award, Sparkles, BookOpen, Star } from "lucide-react";
+import { Award, Sparkles, BookOpen, Star, Phone, MessageCircle, MapPin } from "lucide-react";
+import { useState, useEffect } from "react";
 
 export default function LandingPage() {
+  const [isSticky, setIsSticky] = useState(false);
+  const [showReservationModal, setShowReservationModal] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsSticky(window.scrollY > 300);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const handleClickToCall = () => {
+    window.location.href = 'tel:+34911234567';
+  };
+
+  const handleWhatsAppBooking = () => {
+    const message = encodeURIComponent('Hola, me gustaría hacer una reserva en Restaurante Alabaster');
+    window.open(`https://wa.me/34911234567?text=${message}`, '_blank');
+  };
+
+  const handleGoogleMaps = () => {
+    window.open('https://maps.google.com/?q=Paseo+de+la+Castellana+123,+Madrid+28046', '_blank');
+  };
+
+  const handleReservationOnline = () => {
+    setShowReservationModal(true);
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -37,17 +66,100 @@ export default function LandingPage() {
             { name: "Reseñas", id: "testimonials" },
             { name: "Reservar", id: "reservation" }
           ]}
-          button={{ text: "Reservar Mesa", href: "#reservation" }}
+          button={{ text: "Reservar Mesa", onClick: handleReservationOnline }}
         />
       </div>
 
+      {isSticky && (
+        <div className="fixed bottom-6 right-6 z-50 flex flex-col gap-3">
+          <button
+            onClick={handleReservationOnline}
+            className="flex items-center justify-center gap-2 px-4 py-3 bg-primary-cta text-white rounded-lg shadow-lg hover:shadow-xl transition-all hover:scale-105 font-semibold"
+            aria-label="Reservar mesa"
+          >
+            <Calendar size={20} />
+            Reservar
+          </button>
+          <button
+            onClick={handleClickToCall}
+            className="flex items-center justify-center gap-2 px-4 py-3 bg-accent text-white rounded-lg shadow-lg hover:shadow-xl transition-all hover:scale-105 font-semibold"
+            aria-label="Llamar ahora"
+          >
+            <Phone size={20} />
+            Llamar
+          </button>
+          <button
+            onClick={handleWhatsAppBooking}
+            className="flex items-center justify-center gap-2 px-4 py-3 bg-green-500 text-white rounded-lg shadow-lg hover:shadow-xl transition-all hover:scale-105 font-semibold"
+            aria-label="Reservar por WhatsApp"
+          >
+            <MessageCircle size={20} />
+            WhatsApp
+          </button>
+          <button
+            onClick={handleGoogleMaps}
+            className="flex items-center justify-center gap-2 px-4 py-3 bg-red-500 text-white rounded-lg shadow-lg hover:shadow-xl transition-all hover:scale-105 font-semibold"
+            aria-label="Ver ubicación en Google Maps"
+          >
+            <MapPin size={20} />
+            Ubicación
+          </button>
+        </div>
+      )}
+
+      {showReservationModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 z-40 flex items-center justify-center p-4">
+          <div className="bg-white rounded-lg shadow-2xl max-w-md w-full p-6">
+            <h3 className="text-2xl font-bold mb-4">Reservar Mesa</h3>
+            <p className="text-gray-600 mb-4">Elige tu forma de reservar:</p>
+            <div className="space-y-3">
+              <button
+                onClick={() => {
+                  handleClickToCall();
+                  setShowReservationModal(false);
+                }}
+                className="w-full flex items-center gap-2 px-4 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-semibold"
+              >
+                <Phone size={20} />
+                Llamar: +34 91 123 4567
+              </button>
+              <button
+                onClick={() => {
+                  handleWhatsAppBooking();
+                  setShowReservationModal(false);
+                }}
+                className="w-full flex items-center gap-2 px-4 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-semibold"
+              >
+                <MessageCircle size={20} />
+                Reservar por WhatsApp
+              </button>
+              <button
+                onClick={() => {
+                  window.location.href = 'mailto:reservas@alabaster.es?subject=Reserva%20de%20Mesa';
+                  setShowReservationModal(false);
+                }}
+                className="w-full flex items-center gap-2 px-4 py-3 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors font-semibold"
+              >
+                Enviar Email
+              </button>
+              <button
+                onClick={() => setShowReservationModal(false)}
+                className="w-full px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors font-semibold"
+              >
+                Cerrar
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       <div id="hero" data-section="hero">
         <HeroLogoBillboard
           logoText="Cocina Gallega Contemporánea en el Corazón de Madrid"
           description="Donde la tradición gallega se encuentra con la innovación culinaria. Ingredientes premium, técnica depurada, y una experiencia única en cada plato."
           buttons={[
             { text: "Ver Carta", href: "#menu" },
-            { text: "Reservar Mesa", href: "#reservation" }
+            { text: "Reservar Mesa", onClick: handleReservationOnline }
           ]}
           buttonAnimation="slide-up"
           background={{ variant: "radial-gradient" }}
@@ -66,6 +178,9 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           title="Excelencia Culinaria con Raíces Gallegas"
           useInvertedBackground={false}
+          buttons={[
+            { text: "Ver Ubicación", onClick: handleGoogleMaps }
+          ]}
           ariaLabel="About section - Restaurante Alabaster"
         />
       </div>
@@ -180,8 +295,10 @@ export default function LandingPage() {
           background={{ variant: "plain" }}
           useInvertedBackground={true}
           buttons={[
-            { text: "Reservar Online", href: "#" },
-            { text: "Llamar Ahora", href: "tel:+34911234567" }
+            { text: "Reservar Online", onClick: handleReservationOnline },
+            { text: "Llamar Ahora", onClick: handleClickToCall },
+            { text: "WhatsApp", onClick: handleWhatsAppBooking },
+            { text: "Ver en Mapa", onClick: handleGoogleMaps }
           ]}
           ariaLabel="Sección de reservas"
         />
@@ -231,3 +348,13 @@ export default function LandingPage() {
     </ThemeProvider>
   );
 }
+
+// Calendar icon component (not from lucide-react to avoid import issues)
+const Calendar = ({ size }: { size: number }) => (
+  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+    <line x1="16" y1="2" x2="16" y2="6"></line>
+    <line x1="8" y1="2" x2="8" y2="6"></line>
+    <line x1="3" y1="10" x2="21" y2="10"></line>
+  </svg>
+);