"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FeatureCardEighteen from '@/components/sections/feature/FeatureCardEighteen';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Facebook, Instagram, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSizeMediumTitles"
      background="dotGrid"
      cardStyle="outline"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "home" },
            { name: "Rooms", id: "rooms" },
            { name: "Amenities", id: "amenities" },
            { name: "Contact", id: "contact" },
            { name: "Book Now", id: "booking" }
          ]}
          brandName="LuxeStay"
          bottomLeftText="Luxury Hospitality"
          bottomRightText="reservations@luxestay.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Welcome to LuxeStay"
          description="Experience world-class hospitality in our beautifully designed luxury hotel. Book your perfect getaway today."
          tag="5-Star Luxury"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg"
          imageAlt="Luxury hotel lobby with elegant décor"
          frameStyle="card"
          buttons={[
            { text: "Book Now", href: "booking" },
            { text: "Explore Rooms", href: "rooms" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="About LuxeStay"
          description={[
            "Since 1998, LuxeStay has been a beacon of luxury hospitality, providing unforgettable experiences to guests from around the world.",
            "Our commitment to excellence, attention to detail, and world-class service make us a premier destination for travelers seeking comfort and sophistication."
          ]}
          useInvertedBackground="noInvert"
          showBorder={true}
          buttons={[{ text: "Learn More", href: "#" }]}
        />
      </div>

      <div id="rooms" data-section="rooms">
        <ProductCardFour
          title="Our Room Collection"
          description="Choose from our carefully curated selection of elegant rooms and suites, each designed for ultimate comfort."
          tag="Premium Accommodations"
          products={[
            {
              id: "standard",
              name: "Standard Room",
              price: "$120",
              variant: "King Bed | City View",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766837895688-zmwuys3h.jpg",
              imageAlt: "Standard hotel room with king bed"
            },
            {
              id: "deluxe",
              name: "Deluxe Room",
              price: "$180",
              variant: "King Bed | Garden View",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg",
              imageAlt: "Deluxe hotel room with premium amenities"
            },
            {
              id: "suite",
              name: "Executive Suite",
              price: "$280",
              variant: "King Bed | Ocean View",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg",
              imageAlt: "Luxury executive suite with sitting area"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
        />
      </div>

      <div id="amenities" data-section="amenities">
        <FeatureCardEighteen
          title="World-Class Amenities"
          description="Discover our extensive facilities designed to enhance your stay and create lasting memories."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          negativeCard={{
            title: "Standard Hotels",
            items: [
              "Limited facility options",
              "Generic room service",
              "Crowded common areas",
              "Basic breakfast offerings"
            ],
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766754946104-xq2fat7f.jpg"
          }}
          positiveCard={{
            title: "LuxeStay Experience",
            items: [
              "Full-service spa and wellness center",
              "Fine dining restaurant with chef cuisine",
              "Olympic-size heated pool and hot tub",
              "24-hour concierge and room service",
              "State-of-the-art fitness center",
              "Business center and conference facilities"
            ],
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766754765343-zikp31v3.jpg"
          }}
          animationType="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="Guest Reviews"
          description="See what our valued guests have to say about their LuxeStay experience."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              name: "Sarah Mitchell",
              handle: "Verified Guest",
              testimonial: "An absolutely wonderful stay! The staff was incredibly attentive and the rooms were immaculate. Will definitely return.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183587552-1pqoe5c0.jpg",
              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",
              name: "James Anderson",
              handle: "Business Traveler",
              testimonial: "Perfect location, exceptional service, and outstanding amenities. This is my go-to hotel for business trips.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766154635301-vse33sxl.jpg",
              imageAlt: "James Anderson"
            },
            {
              id: "3",
              name: "Maria Garcia",
              handle: "Honeymoon Guest",
              testimonial: "Our honeymoon was magical thanks to the romantic room setup and thoughtful staff. Highly recommended!",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183841431-v1xtegko.jpg",
              imageAlt: "Maria Garcia"
            },
            {
              id: "4",
              name: "David Chen",
              handle: "Frequent Guest",
              testimonial: "Luxurious accommodations, world-class dining, and impeccable service. Worth every penny!",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766182321167-i4kvpj5f.jpg",
              imageAlt: "David Chen"
            },
            {
              id: "5",
              name: "Emma Wilson",
              handle: "Family Vacation",
              testimonial: "The kids loved the pool, we loved the spa, and everyone loved the food. Perfect family destination!",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183842429-uezzjpov.jpg",
              imageAlt: "Emma Wilson"
            },
            {
              id: "6",
              name: "Robert Martinez",
              handle: "Verified Guest",
              testimonial: "From check-in to check-out, everything was flawless. True luxury experience at its finest.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg",
              imageAlt: "Robert Martinez"
            }
          ]}
          animationType="slide-up"
          speed={30}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardNine
          title="Room Rates"
          description="Transparent pricing for all room types. Rates vary by season and availability."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          plans={[
            {
              id: "standard",
              title: "Standard Room",
              price: "$120",
              period: "/night",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766837895688-zmwuys3h.jpg",
              imageAlt: "Standard room",
              features: [
                "Queen bed",
                "City view",
                "Free WiFi",
                "Work desk",
                "Flat-screen TV"
              ],
              button: { text: "Book Now", href: "booking" }
            },
            {
              id: "deluxe",
              title: "Deluxe Room",
              price: "$180",
              period: "/night",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg",
              imageAlt: "Deluxe room",
              features: [
                "King bed",
                "Garden view",
                "Premium toiletries",
                "Mini bar",
                "Spa bath",
                "Complimentary breakfast"
              ],
              button: { text: "Book Now", href: "booking" }
            },
            {
              id: "suite",
              title: "Executive Suite",
              price: "$280",
              period: "/night",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg",
              imageAlt: "Executive suite",
              features: [
                "King bed with sitting area",
                "Ocean view",
                "Luxury amenities",
                "Private balcony",
                "VIP lounge access",
                "Personal concierge",
                "Complimentary dining"
              ],
              button: { text: "Book Now", href: "booking" }
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Make Your Reservation"
          description="Complete the form below and our team will confirm your booking within 24 hours."
          useInvertedBackground="noInvert"
          inputs={[
            { name: "fullName", type: "text", placeholder: "Full Name", required: true },
            { name: "email", type: "email", placeholder: "Email Address", required: true },
            { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
            { name: "checkIn", type: "date", placeholder: "Check-in Date", required: true }
          ]}
          textarea={{
            name: "message",
            placeholder: "Special requests or additional information...",
            rows: 4,
            required: false
          }}
          buttonText="Complete Booking"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="LuxeStay"
          copyrightText="© 2025 LuxeStay Hotel. All rights reserved."
          socialLinks={[
            { icon: Facebook, href: "https://facebook.com/luxestay", ariaLabel: "Facebook" },
            { icon: Instagram, href: "https://instagram.com/luxestay", ariaLabel: "Instagram" },
            { icon: Twitter, href: "https://twitter.com/luxestay", ariaLabel: "Twitter" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}