"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import { Instagram } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="mediumSizeLargeTitles"
        background="circleGradient"
        cardStyle="outline"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="glass"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Inicio",          id: "/"},
        {
          name: "Nosotros",          id: "#about"},
        {
          name: "Características",          id: "#features"},
        {
          name: "Precios",          id: "#pricing"},
        {
          name: "Testimonios",          id: "#testimonials"},
        {
          name: "Preguntas Frecuentes",          id: "#faq"},
        {
          name: "Contacto",          id: "#contact"},
      ]}
      brandName="SIX PADEL"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogo
      logoText="SIX PADEL"
      description="¡Vive la emoción del pádel en nuestras canchas premium, diseñadas para jugadores de todos los niveles. Reserva tu cancha y únete a la vibrante comunidad de pádel en SIX PADEL!"
      buttons={[
        {
          text: "Reserva Tu Cancha",          href: "#contact"},
        {
          text: "Saber Más",          href: "#about"},
      ]}
      buttonAnimation="blur-reveal"
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EyDIj9lOWYbqXmvPVpV8CPW0y9/uploaded-1781142580069-xv6vxrta.png"
      imageAlt="Interior de una cancha de pádel con iluminación brillante"
    />
  </div>

  <div id="about" data-section="about">
      <InlineImageSplitTextAbout
      useInvertedBackground={true}
      heading={[
        {
          type: "text",          content: "Acerca de SIX PADEL"},
      ]}
      buttons={[
        {
          text: "Ver Nuestras Canchas",          href: "#features"},
      ]}
      buttonAnimation="blur-reveal"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Canchas de Última Generación",          description: "Juega en nuestras dos canchas de pádel meticulosamente mantenidas con iluminación óptima para partidos de día y de noche. Nuestras superficies de alta calidad garantizan un rebote consistente y un juego placentero en todo momento.",          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/woman-stands-outdoor-gym-with-phone_140725-16426.jpg",            imageAlt: "Aplicación de reserva de cancha de pádel en el teléfono"},
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/sports-girl-resting_1157-17054.jpg",            imageAlt: "Controles de iluminación de cancha de pádel en el teléfono"}
        },
        {
          title: "Reserva y Horarios Flexibles",          description: "Disfruta de opciones de reserva convenientes y horarios extendidos para adaptarse a tu apretada agenda. Estamos abiertos por las tardes entre semana y todo el día los fines de semana, asegurando que siempre encuentres un momento para jugar.",          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hand-holding-smartphone_23-2149743756.jpg",            imageAlt: "Horario de cancha de pádel en el teléfono"},
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/back-view-businesswoman-with-smartphone_23-2147702450.jpg",            imageAlt: "Calendario de reserva de cancha de pádel en el teléfono"}
        },
        {
          title: "Refrigerios y Gran Servicio",          description: "Nuestro amable personal ofrece un excelente servicio, haciendo tu visita placentera. Visita nuestra cantina de servicio completo para bebidas refrescantes y refrigerios para mantenerte energizado durante tu partido, todo a precios accesibles.",          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/craft-beer-concept-with-hipster-couple_23-2148111280.jpg",            imageAlt: "Menú de bebidas en el teléfono"},
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/defocused-young-male-athlete-showing-mobile-phone-screen-toward-camera_23-2148162105.jpg",            imageAlt: "Confirmación de reserva de cancha de pádel en el teléfono"}
        }
      ]}
      showStepNumbers={true}
      title="¿Por Qué Elegir SIX PADEL?"
      description="Ofrecemos una experiencia de pádel superior con instalaciones de primera categoría y un servicio excepcional."
      buttons={[
        {
          text: "Hacer una Reserva",          href: "#contact"
        }
      ]}
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "peak-hour",          title: "Juego en Hora Pico",          price: "$20",          period: "/hora",          features: [
            "Acceso de 5pm a 12am entre semana",            "Acceso de 10am a 12am los fines de semana",            "Perfecto para partidos después del trabajo"],
          button: {
            text: "Reservar Franja Pico",            href: "#contact"},
          imageSrc: "http://img.b2bpic.net/free-photo/3d-composition-basketball-sport_52683-117173.jpg",          imageAlt: "Cancha de pádel durante horas pico"},
        {
          id: "off-peak",          title: "Ahorro Fuera de Hora Pico",          price: "$15",          period: "/hora",          features: [
            "Acceso de 10am a 5pm entre semana",            "Ideal para horarios flexibles",            "Excelente valor para jugar por la mañana/tarde"],
          button: {
            text: "Reservar Fuera de Hora Pico",            href: "#contact"},
          imageSrc: "http://img.b2bpic.net/free-photo/bright-blue-colored-noisy-surface_23-2147754832.jpg",          imageAlt: "Cancha de pádel durante horas de menor afluencia"},
        {
          id: "monthly-pass",          title: "Membresía Mensual",          price: "$200",          period: "/mes",          features: [
            "Acceso ilimitado fuera de hora pico",            "2 reservas de hora pico incluidas",            "Ventana de reserva prioritaria",            "Descuento en mercadería"],
          button: {
            text: "Unirse a la Membresía",            href: "#contact"},
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-paddle-tennis-court_23-2149434128.jpg",          imageAlt: "Cancha de pádel para membresía mensual"},
      ]}
      title="Precios Flexibles de Canchas de Pádel"
      description="Elige el mejor plan para tu juego, seas un jugador ocasional o habitual."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFive
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Karina Pedrozo",          date: "hace 9 meses",          title: "Experiencia Sobresaliente",          quote: "Excelente lugar y atención !! 🤩 Las canchas son de primera y el personal siempre es muy amable. ¡Altamente recomendado!",          tag: "Jugadora",          avatarSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-attractive-woman-showing-thumb-up-outdoors_1262-12526.jpg",          avatarAlt: "Avatar de Karina Pedrozo",          imageSrc: "http://img.b2bpic.net/free-photo/people-playing-padle-tennis-inside_23-2149444551.jpg",          imageAlt: "Gente jugando pádel"},
        {
          id: "2",          name: "Javier Alvarenga",          date: "hace 1 año",          title: "Gran Valor y Servicio",          quote: "Muy buen servicio, precios accesibles de cerveza. Es el lugar perfecto para relajarse y jugar un buen partido con amigos después del trabajo.",          tag: "Guía Local",          avatarSrc: "http://img.b2bpic.net/free-photo/young-player-holding-her-squash-racket_23-2147601802.jpg",          avatarAlt: "Avatar de Javier Alvarenga",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-couple-playing-tennis_23-2148250979.jpg",          imageAlt: "Cancha de pádel al atardecer"},
        {
          id: "3",          name: "Moises Talavera",          date: "hace 2 años",          title: "Excelente Instalación",          quote: "Muy buen servicio, todo correcto. Una pequeña mejora en la ventilación para los días muy calurosos lo haría absolutamente perfecto!",          tag: "Guía Local",          avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-happy-man-outdoors_23-2148747426.jpg",          avatarAlt: "Avatar de Moisés Talavera",          imageSrc: "http://img.b2bpic.net/free-photo/person-getting-ready-play-paddle-tennis-inside_23-2149444564.jpg",          imageAlt: "Palas y pelotas de pádel"},
        {
          id: "4",          name: "Sofia G.",          date: "hace 6 meses",          title: "Mi Lugar Favorito para el Pádel",          quote: "SIX PADEL se ha convertido en mi lugar preferido para jugar pádel. Las canchas siempre están limpias y el ambiente es fantástico. ¡Verdaderamente un excelente lugar!",          tag: "Jugadora Habitual",          avatarSrc: "http://img.b2bpic.net/free-photo/woman-playing-padel_657883-319.jpg",          avatarAlt: "Avatar de Sofía G.",          imageSrc: "http://img.b2bpic.net/free-photo/sexy-woman-is-posing-photographer-while-sitting-tennis-court-with-racquet_613910-3609.jpg",          imageAlt: "Jugadores de pádel en acción"},
        {
          id: "5",          name: "Roberto M.",          date: "hace 3 meses",          title: "Comunidad Fantástica",          quote: "Más allá de las excelentes canchas, la comunidad aquí es increíble. Siempre caras amigables y partidos competitivos. No podría pedir más.",          tag: "Capitán del Equipo",          avatarSrc: "http://img.b2bpic.net/free-photo/person-getting-ready-play-paddle-tennis-inside_23-2149444559.jpg",          avatarAlt: "Avatar de Roberto M.",          imageSrc: "http://img.b2bpic.net/free-photo/paddle-tennis-white-line_23-2149459021.jpg",          imageAlt: "Cancha de pádel verde"},
      ]}
      title="Escucha a Nuestros Jugadores"
      description="A nuestra comunidad le encanta jugar en SIX PADEL. ¡Lee lo que tienen que decir!"
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "San Lorenzo Padel Club",        "Unión Atlética",        "Smash & Play",        "Maestros de Cancha",        "Deportes Victoria",        "Liga Grand Slam",        "Academia Élite de Pádel"]}
      title="Confiado por Entusiastas Locales del Pádel"
      description="SIX PADEL es la opción preferida para jugadores y clubes deportivos locales."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardFourteen
      useInvertedBackground={false}
      title="SIX PADEL en Cifras"
      tag="Nuestros Logros"
      metrics={[
        {
          id: "1",          value: "4.4",          description: "Calificación Promedio (más de 80 Reseñas)"},
        {
          id: "2",          value: "1000+",          description: "Jugadores Contentos Cada Mes"},
        {
          id: "3",          value: "3+",          description: "Años de Excelencia en Pádel"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "1",          title: "¿Cómo reservo una cancha?",          content: "Puedes reservar una cancha fácilmente a través de nuestro formulario de contacto en el sitio web o llamándonos directamente al 0994 600046 durante el horario de atención."},
        {
          id: "2",          title: "¿Cuáles son sus horarios de atención?",          content: "Estamos abiertos de miércoles a viernes de 5 PM a 12 AM, y de sábado a domingo de 10 AM a 12 AM. Los lunes y martes el horario es de 5 PM a 12 AM."},
        {
          id: "3",          title: "¿Necesito traer mi propio equipo?",          content: "Si bien eres bienvenido a traer tu propio equipo, también ofrecemos alquiler de palas y pelotas de pádel a precios competitivos en nuestras instalaciones."},
        {
          id: "4",          title: "¿Hay estacionamiento disponible?",          content: "Sí, hay un amplio espacio de estacionamiento disponible en el lugar para todos nuestros visitantes. Nuestras instalaciones se encuentran en Leopardi San Lorenzo, 1838."},
        {
          id: "5",          title: "¿Puedo cancelar o reprogramar mi reserva?",          content: "Sí, puedes cancelar o reprogramar tu reserva hasta con 24 horas de antelación sin ningún cargo. Por favor, contáctanos directamente para cualquier cambio."},
      ]}
      title="Preguntas Frecuentes"
      description="Encuentra respuestas rápidas a preguntas comunes sobre reservas, instalaciones y más."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Ponte en Contacto con SIX PADEL"
      description="¿Listo para la cancha? Envíanos un mensaje o encuéntranos en el mapa. ¡Estamos aquí para ayudarte!"
      inputs={[
        {
          name: "name",          type: "text",          placeholder: "Tu Nombre",          required: true,
        },
        {
          name: "email",          type: "email",          placeholder: "Tu Correo Electrónico",          required: true,
        },
        {
          name: "phone",          type: "tel",          placeholder: "Tu Teléfono (Opcional)",          required: false,
        },
      ]}
      textarea={{
        name: "message",        placeholder: "Tu Mensaje",        rows: 4,
        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/lonely-tennis-court_1122-1384.jpg"
      imageAlt="Vista exterior de las instalaciones de SIX PADEL y mapa de ubicación"
      mediaAnimation="opacity"
      mediaPosition="right"
      buttonText="Enviar Mensaje"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="SIX PADEL"
      copyrightText="© 2024 SIX PADEL. Todos los derechos reservados."
      socialLinks={[
        {
          icon: Instagram,
          href: "https://instagram.com/sixpadel",          ariaLabel: "Instagram"},
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}