Switch to version 1: modified src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -9,38 +9,9 @@ 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, Phone, MessageCircle, MapPin } from "lucide-react";
-import { useState, useEffect } from "react";
+import { Award, Sparkles, BookOpen, Star } from "lucide-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"
@@ -66,100 +37,17 @@ export default function LandingPage() {
             { name: "Reseñas", id: "testimonials" },
             { name: "Reservar", id: "reservation" }
           ]}
-          button={{ text: "Reservar Mesa", onClick: handleReservationOnline }}
+          button={{ text: "Reservar Mesa", href: "#reservation" }}
         />
       </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", onClick: handleReservationOnline }
+            { text: "Reservar Mesa", href: "#reservation" }
           ]}
           buttonAnimation="slide-up"
           background={{ variant: "radial-gradient" }}
@@ -178,9 +66,6 @@ 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>
@@ -295,10 +180,8 @@ export default function LandingPage() {
           background={{ variant: "plain" }}
           useInvertedBackground={true}
           buttons={[
-            { text: "Reservar Online", onClick: handleReservationOnline },
-            { text: "Llamar Ahora", onClick: handleClickToCall },
-            { text: "WhatsApp", onClick: handleWhatsAppBooking },
-            { text: "Ver en Mapa", onClick: handleGoogleMaps }
+            { text: "Reservar Online", href: "#" },
+            { text: "Llamar Ahora", href: "tel:+34911234567" }
           ]}
           ariaLabel="Sección de reservas"
         />
@@ -348,13 +231,3 @@ 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>
-);