"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import SplitAbout from '@/components/sections/about/SplitAbout';
import ProductCardFive from '@/components/sections/product/ProductCardFive';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterSplit from '@/components/sections/footer/FooterSplit';
import { Sparkles, Heart, Award, Crown, MapPin, Leaf, Home, Mail, Phone } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSmallSizeMediumTitles"
      background="grid"
      cardStyle="outline"
      primaryButtonStyle="outline"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="LuxeStay"
          navItems={[
            { name: "Rooms", id: "rooms" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "reviews" },
            { name: "Contact", id: "contact" },
            { name: "Book", id: "booking" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Experience Luxury Hospitality"
          description="Discover our world-class accommodations, exceptional service, and unforgettable moments. Book your perfect stay today."
          tag="Premium Hotel"
          tagIcon={Sparkles}
          buttons={[
            { text: "Book Now", href: "booking" },
            { text: "Explore Rooms", href: "rooms" }
          ]}
          mediaItems={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg", imageAlt: "Luxury hotel lobby with modern design" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185878910-obewt98e.jpg", imageAlt: "Elegant hotel bedroom suite" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg", imageAlt: "Resort swimming pool and amenities" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184721770-arv4645s.jpg", imageAlt: "Fine dining restaurant interior" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184711453-096e89ja.jpg", imageAlt: "Hotel room with city skyline view" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="Welcome to LuxeStay"
          description="Since 1995, we've been dedicated to providing world-class hospitality and unforgettable experiences. Our commitment to excellence, attention to detail, and personalized service sets us apart."
          tag="Our Story"
          tagIcon={Heart}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          bulletPoints={[
            { title: "Award-Winning Service", description: "Recognized internationally for exceptional guest care and hospitality", icon: Award },
            { title: "Luxury Accommodations", description: "Thoughtfully designed rooms and suites with premium amenities", icon: Crown },
            { title: "Prime Locations", description: "Strategically positioned in the heart of vibrant city centers", icon: MapPin },
            { title: "Sustainable Practices", description: "Committed to environmental responsibility and ethical operations", icon: Leaf }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184717131-qr8fo1hm.jpg"
          imageAlt="Luxurious hotel exterior and architecture"
          imagePosition="right"
          buttons={[
            { text: "Learn More", href: "#" }
          ]}
        />
      </div>

      <div id="rooms" data-section="rooms">
        <ProductCardFive
          title="Our Room Collections"
          description="Choose from our carefully curated selection of rooms and suites, each designed for maximum comfort and style"
          tag="Room Types"
          tagIcon={Home}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          products={[
            { id: "room-standard", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767283268654-ajb2u3n1.jpg", imageAlt: "Standard Room", button: { text: "View Details" }, isFavorited: false },
            { id: "room-deluxe", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766452377555-j35y7gow.jpg", imageAlt: "Deluxe Room", button: { text: "View Details" }, isFavorited: false },
            { id: "room-suite", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766843736372-3ltc72sy.jpg", imageAlt: "Premium Suite", button: { text: "View Details" }, isFavorited: false }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          carouselMode="buttons"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Room Rates"
          description="Transparent pricing for all seasons. Choose the room type that best fits your needs and budget."
          tag="Pricing"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          plans={[
            {
              id: "standard",
              tag: "Standard Room",
              price: "$129",
              period: "/night",
              description: "Comfortable and cozy room for solo travelers or couples",
              button: { text: "Book Now" },
              featuresTitle: "Amenities Included:",
              features: ["Flat-screen TV", "Free WiFi", "En-suite bathroom", "Air conditioning", "Work desk"]
            },
            {
              id: "deluxe",
              tag: "Deluxe Room",
              price: "$189",
              period: "/night",
              description: "Spacious room with premium furnishings and city views",
              button: { text: "Book Now" },
              featuresTitle: "Amenities Included:",
              features: ["King bed", "City view balcony", "Smart TV", "Premium WiFi", "Marble bathroom", "Mini bar", "Bathrobe and slippers"]
            },
            {
              id: "suite",
              tag: "Premium Suite",
              price: "$299",
              period: "/night",
              description: "Luxury penthouse suite with separate living area",
              button: { text: "Book Now" },
              featuresTitle: "Amenities Included:",
              features: ["Separate living room", "Panoramic views", "Jacuzzi", "Premium linens", "Concierge service", "Evening turndown", "Complimentary spa access"]
            }
          ]}
          animationType="slide-up"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="By The Numbers"
          description="Trusted by thousands of guests worldwide"
          tag="Our Impact"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          metrics={[
            { id: "1", value: "28K+", description: "Happy Guests Annually" },
            { id: "2", value: "4.8★", description: "Average Rating" },
            { id: "3", value: "95%", description: "Return Guests" },
            { id: "4", value: "50+", description: "Global Awards" }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          carouselMode="buttons"
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardTen
          title="Guest Testimonials"
          description="Hear from our satisfied guests about their unforgettable experiences"
          tag="Reviews"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              title: "An Unforgettable Stay",
              quote: "LuxeStay exceeded all my expectations. The service was impeccable, and every detail was perfect. I've already booked my next stay!",
              name: "Sarah Mitchell",
              role: "Business Traveler",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399072529-1z8sle2r.jpg",
              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",
              title: "Perfect for Our Honeymoon",
              quote: "The suite was absolutely stunning with breathtaking views. The staff made our honeymoon truly special with personalized touches.",
              name: "Michael Johnson",
              role: "Newlywed",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766871939047-6ikc1hsp.jpg",
              imageAlt: "Michael Johnson"
            },
            {
              id: "3",
              title: "Best Hotel Experience Ever",
              quote: "From check-in to check-out, everything was seamless. The restaurant serves amazing food, and the room was incredibly comfortable.",
              name: "Emily Rodriguez",
              role: "Leisure Guest",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140153329-bmp1nqc3.jpg",
              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",
              title: "Outstanding Hospitality",
              quote: "The team went above and beyond to make my stay special. This is luxury hospitality at its finest. Highly recommended!",
              name: "David Chen",
              role: "Frequent Guest",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183841431-v1xtegko.jpg",
              imageAlt: "David Chen"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Stay Connected"
          title="Subscribe to Our Newsletter"
          description="Get exclusive offers, travel tips, and updates about special promotions delivered to your inbox."
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767276885456-fyy7s6lx.jpg"
          imageAlt="Hotel reception and service"
          mediaPosition="right"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime."
          tagIcon={Mail}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSplit
          logoText="LuxeStay"
          title="Your destination for luxury hospitality and unforgettable moments."
          columns={[
            {
              title: "Rooms",
              items: [
                { label: "Standard Rooms", href: "#" },
                { label: "Deluxe Rooms", href: "#" },
                { label: "Premium Suites", href: "#" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "#" },
                { label: "Our Story", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Support",
              items: [
                { label: "Contact Us", href: "#" },
                { label: "FAQs", href: "#" },
                { label: "Booking Help", href: "#" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Terms & Conditions", href: "#" },
                { label: "Privacy Policy", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
          contactItems={[
            { icon: Phone, text: "+1 (555) 123-4567" },
            { icon: Mail, text: "reservations@luxestay.com" },
            { icon: MapPin, text: "123 Premium Lane, City Center, NY 10001" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}