"use client"

import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FeatureCardEleven from '@/components/sections/feature/FeatureCardEleven';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterSocial from '@/components/sections/footer/FooterSocial';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Facebook, Instagram, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumLarge"
      background="dotGrid"
      cardStyle="outline"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Rooms", id: "product" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "testimonial" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Book Now", href: "contact" }}
          brandName="Luxury Stay"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Experience Luxury Hospitality"
          description="Discover our world-class hotel offering elegant rooms, premium amenities, and unforgettable stays in a stunning location."
          kpis={[
            { value: "500+", label: "Guest Reviews" },
            { value: "98%", label: "Satisfaction Rate" },
            { value: "25+", label: "Years Excellence" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg"
          imageAlt="Luxury hotel lobby with modern architecture"
          imagePosition="right"
          buttons={[
            { text: "Book Your Stay", href: "contact" },
            { text: "Explore Rooms", href: "product" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="About Our Hotel"
          description={[
            "Founded in 1999, our hotel has been a beacon of luxury and hospitality for over two decades. We pride ourselves on delivering exceptional service and creating memorable experiences for every guest.",
            "Our dedicated team of professionals ensures that every detail is perfect, from the moment you arrive until you depart. We combine timeless elegance with modern comfort to create an atmosphere where guests feel truly at home."
          ]}
          useInvertedBackground="noInvert"
          showBorder={true}
          buttons={[
            { text: "Learn More", href: "#" }
          ]}
        />
      </div>

      <div id="product" data-section="product">
        <ProductCardFour
          title="Our Rooms & Suites"
          description="Choose from our carefully curated selection of rooms, each designed with comfort and style in mind."
          products={[
            {
              id: "1",
              name: "Standard Room",
              price: "$150/night",
              variant: "Queen Bed, City View",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg",
              imageAlt: "Standard hotel room with queen bed"
            },
            {
              id: "2",
              name: "Deluxe Suite",
              price: "$280/night",
              variant: "King Bed, Premium Amenities",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766452376695-4rxtbd0x.jpg",
              imageAlt: "Spacious deluxe suite with king bed"
            },
            {
              id: "3",
              name: "Penthouse",
              price: "$500/night",
              variant: "Luxury Experience, Private Terrace",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184721770-arv4645s.jpg",
              imageAlt: "Exclusive penthouse suite with panoramic views"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="feature" data-section="feature">
        <FeatureCardEleven
          title="World-Class Amenities"
          description="Indulge in our premium facilities designed for your ultimate comfort and relaxation."
          features={[
            {
              id: 1,
              title: "Luxury Spa & Wellness",
              description: "Rejuvenate yourself with our full-service spa offering massages, facials, and wellness treatments by certified professionals.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184722691-mip9ww4c.jpg"
            },
            {
              id: 2,
              title: "Fine Dining Restaurant",
              description: "Experience culinary excellence at our award-winning restaurant featuring international cuisine and local delicacies.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185878910-obewt98e.jpg"
            },
            {
              id: 3,
              title: "State-of-the-Art Fitness Center",
              description: "Maintain your fitness routine with modern equipment, personal training, and group fitness classes.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766849142731-hp8i7zi3.jpg"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          usePrimaryButtonImage={false}
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardEight
          title="What Our Guests Say"
          description="Discover why travelers choose us for their most important stays."
          testimonials={[
            {
              id: "1",
              name: "Sarah Mitchell",
              role: "Travel Blogger",
              company: "Wanderlust Chronicles",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183587552-1pqoe5c0.jpg",
              imageAlt: "Sarah Mitchell portrait"
            },
            {
              id: "2",
              name: "James Richardson",
              role: "Business Executive",
              company: "Global Corp",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766154635301-vse33sxl.jpg",
              imageAlt: "James Richardson portrait"
            },
            {
              id: "3",
              name: "Emily Chen",
              role: "Hospitality Manager",
              company: "Travel Insights",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183841431-v1xtegko.jpg",
              imageAlt: "Emily Chen portrait"
            },
            {
              id: "4",
              name: "Michael Torres",
              role: "Luxury Travel Consultant",
              company: "Elite Journeys",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766182321167-i4kvpj5f.jpg",
              imageAlt: "Michael Torres portrait"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Reserve Your Room Today"
          description="Fill out the form below to book your stay or contact us with any questions. Our team will respond within 24 hours."
          inputs={[
            { name: "fullName", type: "text", placeholder: "Your Full Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email Address", required: true },
            { name: "checkInDate", type: "date", placeholder: "Check-in Date", required: true },
            { name: "checkOutDate", type: "date", placeholder: "Check-out Date", required: true }
          ]}
          textarea={{
            name: "message",
            placeholder: "Special requests or questions...",
            rows: 4,
            required: false
          }}
          buttonText="Book Now"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSocial
          logoText="Luxury Stay"
          copyrightText="© Luxury Stay Hotel, 2025. All rights reserved."
          columns={[
            {
              title: "Hotel",
              items: [
                { label: "About Us", href: "about" },
                { label: "Rooms & Suites", href: "product" },
                { label: "Amenities", href: "feature" }
              ]
            },
            {
              title: "Guest Services",
              items: [
                { label: "Reservations", href: "contact" },
                { label: "Check-in Info", href: "#" },
                { label: "FAQs", href: "#" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms & Conditions", href: "#" },
                { label: "Cookies", href: "#" }
              ]
            }
          ]}
          socialLinks={[
            { icon: Facebook, href: "https://facebook.com", ariaLabel: "Follow us on Facebook" },
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Follow us on Instagram" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Follow us on Twitter" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}