"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import TestimonialCardNine from '@/components/sections/testimonial/TestimonialCardNine';
import TeamCardFour from '@/components/sections/team/TeamCardFour';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactInline from '@/components/sections/contact/ContactInline';
import FooterSplit from '@/components/sections/footer/FooterSplit';
import { Star, Building2, DoorOpen, Heart, Users, HelpCircle, Sparkles, Crown, Gem, Zap, Phone, Mail, MapPin } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSmall"
      background="animatedGrid"
      cardStyle="inset"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Luxury Stay"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Rooms", id: "pricing" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "testimonial" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Book Now",
            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Experience Luxury Hospitality"
          description="Discover our world-class rooms, impeccable service, and unforgettable experiences in the heart of the city"
          tag="5-Star Hotel"
          tagIcon={Star}
          buttons={[
            { text: "Reserve Your Stay", href: "contact" },
            { text: "Explore Rooms", href: "pricing" }
          ]}
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766626651847-t469h1ri.jpg",
              imageAlt: "Luxury hotel bedroom"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg",
              imageAlt: "Elegant hotel lobby"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767211376648-u4jwiie1.jpg",
              imageAlt: "Modern hotel room"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184719816-2670gl5k.jpg",
              imageAlt: "Resort pool and amenities"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766849439310-dyxpjdwv.jpg",
              imageAlt: "Fine dining restaurant"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <ParallaxAbout
          title="Your Perfect Getaway Awaits"
          description="Nestled in a prime location, our hotel combines timeless elegance with modern amenities. Each room is carefully designed to provide comfort, luxury, and personalized service that exceeds expectations."
          tag="About Us"
          tagIcon={Building2}
          buttons={[
            { text: "Learn Our Story", href: "#" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767211377476-lqj9nqoo.jpg"
          imageAlt="Luxury hotel exterior"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardOne
          title="Choose Your Room"
          description="Select the perfect accommodation for your stay. All rooms include premium amenities and exclusive access to hotel facilities."
          tag="Room Types"
          tagIcon={DoorOpen}
          buttons={[
            { text: "View All Offers", href: "contact" }
          ]}
          plans={[
            {
              id: "1",
              badge: "Popular Choice",
              badgeIcon: Sparkles,
              price: "$199/night",
              subtitle: "Comfortable and spacious",
              features: [
                "32 sq m room",
                "City view",
                "Premium bedding",
                "Marble bathroom",
                "Free WiFi"
              ]
            },
            {
              id: "2",
              badge: "Luxury Option",
              badgeIcon: Crown,
              price: "$349/night",
              subtitle: "Premium experience",
              features: [
                "55 sq m suite",
                "Panoramic views",
                "Jacuzzi bathtub",
                "Walk-in closet",
                "Concierge service",
                "Complimentary drinks"
              ]
            },
            {
              id: "3",
              badge: "Ultimate Luxury",
              badgeIcon: Gem,
              price: "$599/night",
              subtitle: "Exclusive penthouse",
              features: [
                "150 sq m penthouse",
                "360-degree views",
                "Private pool",
                "Home theater",
                "Personal butler",
                "Fine dining access"
              ]
            },
            {
              id: "4",
              badge: "Best Value",
              badgeIcon: Zap,
              price: "$149/night",
              subtitle: "Cozy and welcoming",
              features: [
                "20 sq m room",
                "Courtyard view",
                "Quality bedding",
                "Modern bathroom",
                "Free WiFi"
              ]
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardNine
          title="Loved by Our Guests"
          description="Hear what our satisfied guests have to say about their experience at our hotel"
          tag="Reviews"
          tagIcon={Heart}
          testimonials={[
            {
              id: "1",
              quote: "Exceptional service and stunning rooms. Our anniversary stay was absolutely perfect. We will definitely return!",
              name: "Sarah Mitchell",
              role: "Guest from New York",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850777333-gk776zjh.jpg",
              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",
              quote: "The attention to detail is remarkable. From check-in to check-out, everything was seamless and welcoming.",
              name: "James Chen",
              role: "Corporate Guest",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767211379032-bmphak5n.jpg",
              imageAlt: "James Chen"
            },
            {
              id: "3",
              quote: "Best hotel experience of my life. The staff went above and beyond to make our stay memorable.",
              name: "Emma Rodriguez",
              role: "Travel Blogger",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932170169-pgcsy25o.jpg",
              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",
              quote: "Luxurious accommodations with world-class service. Highly recommended for business and leisure travel.",
              name: "Michael Thompson",
              role: "Business Traveler",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767211379837-oysoohmr.jpg",
              imageAlt: "Michael Thompson"
            },
            {
              id: "5",
              quote: "The views from our suite were breathtaking. Every moment of our stay felt special and curated.",
              name: "Lisa Anderson",
              role: "Honeymoon Guest",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg",
              imageAlt: "Lisa Anderson"
            },
            {
              id: "6",
              quote: "Impeccable cleanliness, comfortable beds, and the most helpful staff. A true gem in the city.",
              name: "David Wilson",
              role: "Regular Guest",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767174020152-9baq80aq.jpg",
              imageAlt: "David Wilson"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardFour
          title="Meet Our Team"
          description="Dedicated professionals committed to delivering exceptional service and creating memorable experiences"
          tag="Our Staff"
          tagIcon={Users}
          team={[
            {
              id: "1",
              name: "Victoria Laurent",
              role: "General Manager",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767211380778-hll43zh3.jpg",
              imageAlt: "Victoria Laurent"
            },
            {
              id: "2",
              name: "Marco Rossi",
              role: "Head Chef",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767211381596-qej4j3za.jpg",
              imageAlt: "Marco Rossi"
            },
            {
              id: "3",
              name: "Sophie Chen",
              role: "Guest Relations Manager",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767211382294-hccn50tn.jpg",
              imageAlt: "Sophie Chen"
            },
            {
              id: "4",
              name: "Antonio Moretti",
              role: "Concierge Director",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767211383176-wx9cttoh.jpg",
              imageAlt: "Antonio Moretti"
            },
            {
              id: "5",
              name: "Elena Nováková",
              role: "Spa Manager",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163678723-295psgl3.jpg",
              imageAlt: "Elena Nováková"
            },
            {
              id: "6",
              name: "Carlos Santos",
              role: "Front Desk Manager",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767211384860-r968eszr.jpg",
              imageAlt: "Carlos Santos"
            },
            {
              id: "7",
              name: "Yasmin Al-Rashid",
              role: "Events Coordinator",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767211385590-1zkqdsl7.jpg",
              imageAlt: "Yasmin Al-Rashid"
            },
            {
              id: "8",
              name: "Nicole Beaumont",
              role: "Housekeeping Director",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767211386769-p2ril130.jpg",
              imageAlt: "Nicole Beaumont"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          speed={35}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Common Questions"
          description="Find answers to frequently asked questions about our rooms, services, and policies"
          tag="Help & Support"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "What is your cancellation policy?",
              content: "We offer flexible cancellation up to 48 hours before check-in with a full refund. Cancellations made within 48 hours of check-in may incur a one-night charge."
            },
            {
              id: "2",
              title: "Do you offer airport transportation?",
              content: "Yes, we provide airport shuttle service for all guests. Please arrange this during booking or contact our concierge team at least 24 hours in advance."
            },
            {
              id: "3",
              title: "Are there parking facilities?",
              content: "Yes, we have both valet parking and self-parking available. Valet parking is included with suite bookings, while standard rooms receive a discounted rate."
            },
            {
              id: "4",
              title: "What amenities are included with all rooms?",
              content: "All rooms include free WiFi, 24-hour room service, air conditioning, premium toiletries, and access to our fitness center and pool facilities."
            },
            {
              id: "5",
              title: "Do you accommodate special dietary requirements?",
              content: "Absolutely. Our restaurant team can accommodate vegan, vegetarian, gluten-free, and other dietary requirements. Please notify us during booking or upon arrival."
            },
            {
              id: "6",
              title: "What is the check-in and check-out time?",
              content: "Standard check-in is at 3:00 PM and check-out is at 11:00 AM. Early check-in and late check-out are available based on room availability, subject to additional charges."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactInline
          text="Ready to book your perfect stay?"
          animationType="reveal-blur"
          inputPlaceholder="Enter your email to reserve"
          buttonText="Get in Touch"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSplit
          logoText="Luxury Stay"
          title="Exceptional hospitality meets modern comfort in every stay"
          columns={[
            {
              title: "Rooms & Booking",
              items: [
                { label: "View All Rooms", href: "#pricing" },
                { label: "Special Offers", href: "#pricing" },
                { label: "Group Bookings", href: "#contact" },
                { label: "Loyalty Program", href: "#" }
              ]
            },
            {
              title: "Hotel Services",
              items: [
                { label: "Dining & Bar", href: "#" },
                { label: "Spa & Wellness", href: "#" },
                { label: "Concierge", href: "#" },
                { label: "Event Venues", href: "#" }
              ]
            },
            {
              title: "Policies",
              items: [
                { label: "Cancellation Policy", href: "#faq" },
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Accessibility", href: "#" }
              ]
            },
            {
              title: "About Us",
              items: [
                { label: "Our Story", href: "#about" },
                { label: "Our Team", href: "#team" },
                { label: "Careers", href: "#" },
                { label: "Contact Us", href: "#contact" }
              ]
            }
          ]}
          contactItems={[
            { icon: Phone, text: "+1 (555) 123-4567" },
            { icon: Mail, text: "reservations@luxurystay.com" },
            { icon: MapPin, text: "123 Premium Avenue, City Center, ST 12345" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}