"use client"

import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import { Sparkles, Gem, Home, Zap, Star, Heart } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="large"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Rooms", id: "rooms" },
            { name: "Amenities", id: "amenities" },
            { name: "About", id: "about" },
            { name: "Pricing", id: "pricing" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="Luxe Haven"
          bottomLeftText="Premium Hospitality"
          bottomRightText="reservations@luxehaven.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Experience Luxury at Luxe Haven"
          description="Discover the perfect blend of comfort, elegance, and world-class hospitality. Our award-winning hotel offers unforgettable stays with premium amenities and exceptional service."
          background={{ variant: "glowing-orb" }}
          kpis={[
            { value: "250+", label: "Luxury Rooms" },
            { value: "4.9★", label: "Guest Rating" },
            { value: "24/7", label: "Concierge Service" }
          ]}
          enableKpiAnimation={true}
          tag="5-Star Hospitality"
          tagIcon={Sparkles}
          buttons={[
            { text: "Book Now", href: "#contact" },
            { text: "View Rooms", href: "#rooms" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/wooden-sauna-with-mountain-view-panoramic-calm_169016-70823.jpg"
          imageAlt="Luxurious hotel lobby with modern design"
          imagePosition="right"
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="Why Choose Luxe Haven?"
          description="We pride ourselves on delivering exceptional experiences that exceed expectations"
          tabs={[
            {
              id: "excellence",              label: "Excellence",              description: "Our commitment to excellence is reflected in every detail. From meticulously designed rooms to impeccable service, we ensure every guest receives the highest standard of hospitality."
            },
            {
              id: "location",              label: "Prime Location",              description: "Strategically located in the heart of the city, Luxe Haven offers convenient access to major attractions, shopping districts, and business centers while providing a peaceful retreat."
            },
            {
              id: "sustainability",              label: "Sustainability",              description: "We are committed to environmental responsibility with eco-friendly practices, sustainable sourcing, and green initiatives throughout our operations."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/elegant-stools-table-huge-bright-hall_1127-3339.jpg"
          imageAlt="Luxe Haven hotel exterior view"
          imagePosition="right"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="rooms" data-section="rooms">
        <ProductCardFour
          title="Our Room Collection"
          description="Choose from our carefully curated selection of rooms, each designed for comfort and elegance"
          tag="Premium Accommodations"
          tagIcon={Home}
          products={[
            {
              id: "1",              name: "Standard Room",              price: "$149/night",              variant: "Queen Bed • Ensuite Bathroom",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-woman-looking-out-window_23-2149622868.jpg",              imageAlt: "Standard hotel room with queen bed"
            },
            {
              id: "2",              name: "Deluxe Room",              price: "$249/night",              variant: "King Bed • City View • Premium Amenities",              imageSrc: "https://img.b2bpic.net/free-photo/modern-sauna-with-panoramic-windows-wooden-design_169016-70021.jpg",              imageAlt: "Deluxe room with king bed and city view"
            },
            {
              id: "3",              name: "Presidential Suite",              price: "$599/night",              variant: "2 Bedrooms • Living Area • Private Balcony",              imageSrc: "https://img.b2bpic.net/free-photo/panoramic-sauna-view-organic-wooden-columns-resort-style-wellness_169016-68883.jpg",              imageAlt: "Presidential suite with multiple rooms"
            }
          ]}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "View All Rooms", href: "#contact" }
          ]}
        />
      </div>

      <div id="amenities" data-section="amenities">
        <FeatureCardThree
          title="World-Class Amenities"
          description="Enjoy our comprehensive range of facilities designed to enhance your stay"
          tag="Premium Services"
          tagIcon={Gem}
          features={[
            {
              id: "01",              title: "Spa & Wellness",              description: "Rejuvenate with our full-service spa featuring massages, facials, and holistic wellness treatments",              imageSrc: "https://img.b2bpic.net/free-photo/bellhop-offering-services-woman-lounge-area-waiting-room-check-seaside-hotel-tourist-sitting-couch-talking-hotel-concierge-summer-clothes-handheld-shot_482257-67916.jpg",              imageAlt: "Luxurious spa and wellness center"
            },
            {
              id: "02",              title: "Fine Dining Restaurant",              description: "Savor exquisite cuisine from our award-winning chefs in an elegant atmosphere with panoramic views",              imageSrc: "https://img.b2bpic.net/free-photo/hotel-guest-having-fun-with-tablet_482257-81606.jpg",              imageAlt: "Elegant restaurant dining area"
            },
            {
              id: "03",              title: "Olympic Pool",              description: "Swim and relax in our heated Olympic-size pool with heated lounging areas and poolside bar",              imageSrc: "https://img.b2bpic.net/free-photo/business-partners_1098-18010.jpg",              imageAlt: "Resort swimming pool"
            },
            {
              id: "04",              title: "State-of-Art Gym",              description: "Stay fit with our modern fitness center equipped with premium equipment and personal trainers",              imageSrc: "https://img.b2bpic.net/free-photo/hotel-lobby_23-2149397559.jpg",              imageAlt: "Modern fitness gym facility"
            }
          ]}
          textboxLayout="default"
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardTwo
          title="Flexible Booking Plans"
          description="Select the perfect rate plan for your stay"
          tag="Special Offers"
          tagIcon={Zap}
          plans={[
            {
              id: "1",              badge: "Standard Rate",              price: "Best Value",              subtitle: "Flexible cancellation up to 48 hours before arrival",              buttons: [
                { text: "Book Now", href: "#contact" },
                { text: "Learn More" }
              ],
              features: ["Free cancellation", "Room accommodation", "Daily breakfast", "24/7 front desk"]
            },
            {
              id: "2",              badge: "Advanced Purchase",              badgeIcon: Star,
              price: "Save 15%",              subtitle: "Book 7 days ahead for exclusive discounts",              buttons: [
                { text: "Book Now", href: "#contact" },
                { text: "Learn More" }
              ],
              features: ["15% discount", "Free room upgrade", "Spa credit $50", "Late checkout"]
            },
            {
              id: "3",              badge: "Extended Stay",              badgeIcon: Sparkles,
              price: "Save 25%",              subtitle: "Stay 7+ nights and enjoy premium benefits",              buttons: [
                { text: "Book Now", href: "#contact" },
                { text: "Learn More" }
              ],
              features: ["25% discount", "Suite upgrade", "Daily spa service", "Concierge services"]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg"
            },
            {
              id: "2",              name: "Michael Chen",              imageSrc: "https://img.b2bpic.net/free-photo/happy-bearded-man-busines-clothes-with-crossed-arms-looking-camera-gray_171337-11335.jpg"
            },
            {
              id: "3",              name: "Emily Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1628.jpg"
            },
            {
              id: "4",              name: "David Williams",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-cheerful-teenage-girl-sitting-cafe_1262-3048.jpg"
            }
          ]}
          cardTitle="Over 5,000 satisfied guests trust Luxe Haven for their perfect getaway"
          cardTag="Trusted Hospitality"
          cardTagIcon={Heart}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to experience luxury? Book your stay at Luxe Haven today and discover hospitality like never before."
          animationType="reveal-blur"
          buttons={[
            { text: "Book Your Stay", href: "#" },
            { text: "Call Us", href: "tel:+1-555-0123" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Luxe Haven"
          columns={[
            {
              items: [
                { label: "Rooms", href: "rooms" },
                { label: "Amenities", href: "amenities" },
                { label: "Pricing", href: "pricing" }
              ]
            },
            {
              items: [
                { label: "About Us", href: "about" },
                { label: "Careers", href: "#" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              items: [
                { label: "Contact", href: "contact" },
                { label: "Support", href: "#" },
                { label: "FAQ", href: "#" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Sitemap", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}