"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroOverlay from "@/components/sections/hero/HeroOverlay";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
import FaqBase from "@/components/sections/faq/FaqBase";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";

export default function LujanAccommodationsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="medium"
      sizing="medium"
      background="aurora"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingInline
            brandName="Ginkgo Biloba"
            navItems={[
              { name: "Propiedades", id: "services" },
              { name: "Sobre Nosotros", id: "about" },
              { name: "Testimonios", id: "testimonials" },
              { name: "Contacto", id: "contact" },
            ]}
            button={{ text: "Reservar", href: "#contact" }}
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroOverlay
            title="Encontrá más que un simple alojamiento: descubrí espacios pensados para disfrutar"
            description="Espacios cuidadosamente seleccionados y gestionados para brindarte comodidad, confianza y una estadía memorable en cada visita."
            buttons={[
              { text: "Ver Propiedades", href: "#services" },
              { text: "Contactanos", href: "#contact" },
            ]}
            buttonAnimation="slide-up"
            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D5eWpM4ALi5xBnJEyisP17ihvM/uploaded-1777584056398-5pezbhf0.png?_wi=1"
            imageAlt="Marca Luján Stays"
            showDimOverlay={true}
          />
        </div>

        <div id="about" data-section="about">
          <MetricSplitMediaAbout
            tag="Nuestra Trayectoria"
            title="Referentes en hospitalidad local"
            description=""
            metrics={[
              { value: "+50", title: "Propiedades gestionadas" },
              { value: "+15k", title: "Huéspedes felices" },
            ]}
            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D5eWpM4ALi5xBnJEyisP17ihvM/uploaded-1777584330403-9p24bqi7.jpg"
            imageAlt="Equipo de Luján Stays"
            mediaAnimation="slide-up"
            metricsAnimation="slide-up"
            useInvertedBackground={false}
          />
        </div>

        <div id="services" data-section="services">
          <FeatureCardOne
            title="Servicios de Gestión"
            description="Potenciamos tu propiedad o elegí el lugar perfecto para descansar."
            features={[
              { title: "Administración Integral", description: "Nos encargamos de todo: mantenimiento, check-in y limpieza profesional.", videoSrc: "placeholder-video?_wi=1" },
              { title: "Alquileres Temporarios", description: "Propiedades seleccionadas en las mejores ubicaciones de Luján.", videoSrc: "placeholder-video?_wi=2" },
              { title: "Atención al Propietario", description: "Reportes mensuales y transparencia total en cada gestión.", videoSrc: "placeholder-video?_wi=3" }
            ]}
            gridVariant="uniform-all-items-equal"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardOne
            title="Qué dicen nuestros huéspedes"
            description="La excelencia es nuestra marca registrada. Estos son algunos comentarios de quienes ya disfrutaron de nuestros servicios en Luján."
            testimonials={[
              { id: "1", name: "Lucía Fernández", role: "Huésped", company: "Buenos Aires", rating: 5 },
              { id: "2", name: "Martín Ruiz", role: "Propietario", company: "Luján", rating: 5 }
            ]}
            gridVariant="uniform-all-items-equal"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={true}
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqBase
            title="Preguntas Frecuentes"
            description="Resolvemos tus dudas sobre nuestros alojamientos y servicios de administración."
            faqs={[
              { id: "1", title: "¿Gestionan propiedades de terceros?", content: "Sí, somos expertos en administrar propiedades de terceros con un enfoque en rentabilidad y cuidado del bien." },
              { id: "2", title: "¿Cómo hago una reserva?", content: "Podés realizar consultas directamente a través de nuestro formulario de contacto o enviándonos un mensaje." }
            ]}
            faqsAnimation="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactSplit
            tag="Contacto"
            title="Comenzá hoy mismo"
            description="¿Querés que administremos tu propiedad o buscas el lugar ideal para tu próxima visita? Escribinos y nos pondremos en contacto."
            background={{ variant: "plain" }}
            useInvertedBackground={true}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            logoText="Luján Stays"
            columns={[
              { items: [{ label: "Propiedades", href: "#services" }, { label: "Sobre Nosotros", href: "#about" }] },
              { items: [{ label: "Contacto", href: "#contact" }] }
            ]}
            className="bg-primary-cta text-primary-cta-text"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}