"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import TagMediaSplitAbout from '@/components/sections/about/TagMediaSplitAbout';
import ProductCardFive from '@/components/sections/product/ProductCardFive';
import FeatureCardThirteen from '@/components/sections/feature/FeatureCardThirteen';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
import { Sparkles, Building2, Home, Star, CreditCard, HelpCircle, Facebook, Twitter, Instagram, Linkedin, Crown } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSmall"
      background="dotGrid"
      cardStyle="gradient-radial"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Luxe Hotels"
          navItems={[
            { name: "Rooms", id: "rooms" },
            { name: "Amenities", id: "amenities" },
            { name: "Reviews", id: "reviews" },
            { name: "Contact", id: "contact" },
            { name: "Book Now", id: "booking" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Welcome to Luxe Hotels"
          description="Experience world-class hospitality with breathtaking views, exceptional service, and unforgettable memories in our premier destinations."
          tag="5-Star Luxury"
          tagIcon={Sparkles}
          buttons={[
            { text: "Book Your Stay", href: "booking" },
            { text: "Explore Rooms", href: "rooms" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg"
          imageAlt="Luxurious hotel lobby with elegant design"
          frameStyle="card"
        />
      </div>

      <div id="about" data-section="about">
        <TagMediaSplitAbout
          title="Your Perfect Getaway Awaits"
          description="Discover the art of hospitality at its finest"
          textboxLayout="default"
          contentTag="OUR STORY"
          contentTagIcon={Building2}
          contentTitle="Luxury Redefined"
          contentDescription="Since 1995, Luxe Hotels has been setting the standard for luxury hospitality. Our commitment to excellence, attention to detail, and personalized service have made us the choice destination for travelers seeking the finest experiences. From corporate retreats to romantic getaways, we create memories that last a lifetime."
          contentButtons={[{ text: "Learn More", href: "#" }]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767209261226-izrwuf3i.jpg"
          imageAlt="Luxe Hotels exterior architecture"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="rooms" data-section="rooms">
        <ProductCardFive
          title="Our Rooms"
          description="Choose from our curated selection of rooms, each designed for ultimate comfort and style"
          tag="Accommodation"
          tagIcon={Home}
          textboxLayout="default"
          products={[
            {
              id: "deluxe",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg",
              imageAlt: "Deluxe Room with city view",
              button: { text: "View Details", href: "#" }
            },
            {
              id: "suite",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766849442209-g2s3b84q.jpg",
              imageAlt: "Executive Suite with panoramic view",
              button: { text: "View Details", href: "#" }
            },
            {
              id: "standard",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg",
              imageAlt: "Standard Room with modern amenities",
              button: { text: "View Details", href: "#" }
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="amenities" data-section="amenities">
        <FeatureCardThirteen
          title="World-Class Amenities"
          description="Indulge in our comprehensive range of facilities designed for your comfort and relaxation"
          textboxLayout="default"
          tag="Services"
          tagIcon={Sparkles}
          features={[
            {
              id: "01",
              title: "Luxury Spa",
              description: "Rejuvenate your body and mind with our full-service spa offering premium treatments and wellness packages."
            },
            {
              id: "02",
              title: "Fine Dining Restaurant",
              description: "Savor exquisite cuisines prepared by award-winning chefs in our elegant restaurant settings."
            },
            {
              id: "03",
              title: "Infinity Pool",
              description: "Enjoy breathtaking views while swimming in our state-of-the-art infinity pool complex."
            },
            {
              id: "04",
              title: "Fitness Center",
              description: "Stay active with our modern gym equipped with latest cardio and strength training equipment."
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardOne
          title="What Our Guests Say"
          description="Real experiences from travelers who have stayed with us"
          tag="Testimonials"
          tagIcon={Star}
          textboxLayout="default"
          testimonials={[
            {
              id: "1",
              name: "Sarah Mitchell",
              role: "CEO",
              company: "Tech Innovations Inc",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183841431-v1xtegko.jpg",
              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",
              name: "James Chen",
              role: "Entrepreneur",
              company: "Global Ventures",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850777333-gk776zjh.jpg",
              imageAlt: "James Chen"
            },
            {
              id: "3",
              name: "Emily Rodriguez",
              role: "Travel Writer",
              company: "Wanderlust Magazine",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766735981305-ohmchoon.jpg",
              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",
              name: "David Thompson",
              role: "Business Consultant",
              company: "Strategic Partners",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183844045-gbini56u.jpg",
              imageAlt: "David Thompson"
            },
            {
              id: "5",
              name: "Lisa Johnson",
              role: "Fashion Designer",
              company: "Haute Couture Studios",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg",
              imageAlt: "Lisa Johnson"
            },
            {
              id: "6",
              name: "Michael Park",
              role: "Film Director",
              company: "Creative Productions",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766849444575-td00y2fe.jpg",
              imageAlt: "Michael Park"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Room Rates"
          description="Transparent pricing for every type of traveler and occasion"
          textboxLayout="default"
          tag="Booking"
          tagIcon={CreditCard}
          plans={[
            {
              id: "standard",
              tag: "Standard Room",
              tagIcon: Home,
              price: "$149",
              period: "/night",
              description: "Perfect for solo travelers and short stays with essential amenities",
              button: { text: "Book Now", href: "#" },
              featuresTitle: "Includes:",
              features: [
                "Queen bed or twin beds",
                "Flat-screen TV",
                "Free WiFi",
                "Work desk",
                "Bathroom amenities"
              ]
            },
            {
              id: "deluxe",
              tag: "Deluxe Room",
              tagIcon: Star,
              price: "$249",
              period: "/night",
              description: "Enhanced comfort with premium furnishings and city views",
              button: { text: "Book Now", href: "#" },
              featuresTitle: "Includes:",
              features: [
                "King bed with luxury linens",
                "City view balcony",
                "Premium toiletries",
                "Espresso machine",
                "55-inch smart TV",
                "Spa robe and slippers"
              ]
            },
            {
              id: "suite",
              tag: "Executive Suite",
              tagIcon: Crown,
              price: "$449",
              period: "/night",
              description: "Ultimate luxury with separate living areas and personalized service",
              button: { text: "Book Now", href: "#" },
              featuresTitle: "Includes:",
              features: [
                "Bedroom and living room",
                "Panoramic views",
                "Marble bathroom with soaking tub",
                "Concierge service",
                "Champagne welcome",
                "Late checkout",
                "Spa credits"
              ]
            }
          ]}
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about your stay with us"
          textboxLayout="default"
          tag="Help"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",
              title: "What is your cancellation policy?",
              content: "We offer flexible cancellation up to 48 hours before check-in for a full refund. Cancellations made less than 48 hours before arrival may be subject to one night's charge."
            },
            {
              id: "2",
              title: "Do you offer airport transportation?",
              content: "Yes, we provide complimentary airport shuttle service for all guests. Simply notify us of your arrival details when making your reservation."
            },
            {
              id: "3",
              title: "Are pets allowed?",
              content: "We welcome well-behaved pets in our pet-friendly rooms for an additional fee of $25 per night. Please inform us during booking."
            },
            {
              id: "4",
              title: "What time is check-in and check-out?",
              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 upon request, subject to availability."
            },
            {
              id: "5",
              title: "Do you offer complimentary WiFi?",
              content: "Yes, high-speed WiFi is complimentary for all guests throughout the hotel, including rooms, lobby, and restaurant areas."
            },
            {
              id: "6",
              title: "Is breakfast included?",
              content: "Continental breakfast is included for suite guests. Other room types can add breakfast at $15 per person per day."
            }
          ]}
          animationType="smooth"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Get in Touch"
          description="Have questions or need special arrangements? Contact us and we will be happy to assist you."
          useInvertedBackground="noInvert"
          buttonText="Send Inquiry"
          inputs={[
            { name: "name", type: "text", placeholder: "Your Full Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email Address", required: true },
            { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
            { name: "checkIn", type: "text", placeholder: "Check-in Date", required: false }
          ]}
          textarea={{ name: "message", placeholder: "Tell us about your inquiry or special requests...", rows: 5, required: true }}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseSocial
          logoText="Luxe Hotels"
          description="Experience world-class hospitality and unforgettable moments at our premium hotel destinations."
          copyrightText="© 2025 Luxe Hotels. All rights reserved."
          columns={[
            {
              title: "Quick Links",
              items: [
                { label: "Rooms", href: "rooms" },
                { label: "Amenities", href: "amenities" },
                { label: "Booking", href: "booking" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              title: "Information",
              items: [
                { label: "About Us", href: "about" },
                { label: "FAQ", href: "faq" },
                { label: "Reviews", href: "reviews" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Terms of Service", href: "#" },
                { label: "Privacy Policy", href: "#" },
                { label: "Cancellation Policy", href: "#" }
              ]
            }
          ]}
          socialLinks={[
            { icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}