"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplitAvatars from '@/components/sections/hero/HeroSplitAvatars';
import TagMediaSplitAbout from '@/components/sections/about/TagMediaSplitAbout';
import ProductCardSix from '@/components/sections/product/ProductCardSix';
import FeatureCardEighteen from '@/components/sections/feature/FeatureCardEighteen';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Sparkles, Building2, Award, Home, Gem, Heart, Phone, Facebook, Instagram, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="small"
      sizing="medium"
      background="noiseGradient"
      cardStyle="elevated-accent"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Luxury Hotels"
          navItems={[
            { name: "Rooms", id: "rooms" },
            { name: "Amenities", id: "amenities" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Book Now",
            href: "contact"
          }}
          className="bg-white/80 backdrop-blur-md"
          navItemClassName="text-foreground font-medium hover:text-primary-cta transition-colors"
          buttonClassName="bg-primary-cta text-white hover:opacity-90"
          buttonTextClassName="font-semibold"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitAvatars
          title="Welcome to Luxury Hotels"
          description="Experience world-class hospitality with breathtaking accommodations, premium amenities, and unforgettable service. Your perfect getaway awaits."
          tag="Premium Hospitality"
          tagIcon={Sparkles}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg"
          imageAlt="Luxurious hotel lobby with elegant design"
          imagePosition="right"
          avatars={[
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183586665-q5sajrdt.jpg", alt: "Guest 1" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766154634313-y5tjxwwi.jpg", alt: "Guest 2" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183587552-1pqoe5c0.jpg", alt: "Guest 3" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163678723-295psgl3.jpg", alt: "Guest 4" }
          ]}
          avatarText="Trusted by 10,000+ happy guests"
          buttons={[
            { text: "Book Your Stay", href: "contact" },
            { text: "Explore Rooms", href: "rooms" }
          ]}
          className="py-20"
          titleClassName="text-5xl font-extrabold text-foreground"
          descriptionClassName="text-lg text-foreground/80"
          buttonClassName="px-8 py-3 rounded-sharp"
          buttonTextClassName="font-semibold"
        />
      </div>

      <div id="about" data-section="about">
        <TagMediaSplitAbout
          variant="card"
          title="Our Story"
          description="For over 25 years, we have been committed to delivering exceptional hospitality experiences. Our passion for excellence reflects in every detail of your stay."
          textboxLayout="default"
          tag="About Us"
          tagIcon={Building2}
          contentTag="HERITAGE"
          contentTagIcon={Award}
          contentTitle="Timeless Luxury & Modern Comfort"
          contentDescription="We blend classic elegance with contemporary amenities to create the perfect sanctuary. Every room is thoughtfully designed, every service personalized, and every moment memorable."
          contentButtons={[{ text: "Learn More", href: "#" }]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184718060-6nx8o2ui.jpg"
          imageAlt="Beautiful hotel exterior architecture"
          imagePosition="right"
          useInvertedBackground="noInvert"
          className="py-20"
          contentTitleClassName="text-3xl font-extrabold text-foreground"
          contentDescriptionClassName="text-base text-foreground/75"
          contentButtonClassName="px-6 py-2 rounded-sharp"
        />
      </div>

      <div id="rooms" data-section="rooms">
        <ProductCardSix
          title="Our Rooms"
          description="Choose from our exquisite collection of beautifully appointed rooms and suites, each designed for your comfort and convenience."
          tag="Accommodations"
          tagIcon={Home}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          products={[
            {
              id: "1",
              name: "Deluxe Room",
              price: "$150/night",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg",
              imageAlt: "Deluxe hotel room"
            },
            {
              id: "2",
              name: "Premium Suite",
              price: "$250/night",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766243008667-twrhhm4j.jpg",
              imageAlt: "Premium suite"
            },
            {
              id: "3",
              name: "Presidential Suite",
              price: "$450/night",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg",
              imageAlt: "Presidential suite"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          containerStyle="default"
          carouselMode="buttons"
          className="py-20"
          textBoxTitleClassName="text-4xl font-extrabold text-foreground"
          textBoxDescriptionClassName="text-lg text-foreground/75"
          cardNameClassName="text-2xl font-bold text-white"
        />
      </div>

      <div id="amenities" data-section="amenities">
        <FeatureCardEighteen
          title="World-Class Amenities"
          description="Discover our comprehensive range of facilities designed to enhance your stay and provide ultimate relaxation."
          tag="Services"
          tagIcon={Gem}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          negativeCard={{
            title: "Without Our Amenities",
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184717131-qr8fo1hm.jpg",
            imageAlt: "Standard accommodations",
            items: [
              "Limited recreation options",
              "Basic facilities",
              "Standard service",
              "No wellness programs"
            ]
          }}
          positiveCard={{
            title: "With Our Amenities",
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184722691-mip9ww4c.jpg",
            imageAlt: "Premium amenities",
            items: [
              "World-class spa and wellness center",
              "Fine dining restaurant",
              "24-hour concierge service",
              "Fitness center and pool",
              "Business facilities"
            ]
          }}
          animationType="slide-up"
          className="py-20"
          textBoxTitleClassName="text-4xl font-extrabold text-foreground"
          textBoxDescriptionClassName="text-lg text-foreground/75"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Our Guests Say"
          description="Real experiences from travelers who have stayed with us and discovered the true meaning of luxury hospitality."
          tag="Reviews"
          tagIcon={Heart}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              name: "Sarah Mitchell",
              role: "Executive",
              company: "Travel Enthusiast",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183586665-q5sajrdt.jpg",
              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",
              name: "David Chen",
              role: "Entrepreneur",
              company: "Business Traveler",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766154634313-y5tjxwwi.jpg",
              imageAlt: "David Chen"
            },
            {
              id: "3",
              name: "Emma Thompson",
              role: "Marketing Director",
              company: "Luxury Experiences",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183587552-1pqoe5c0.jpg",
              imageAlt: "Emma Thompson"
            },
            {
              id: "4",
              name: "James Rodriguez",
              role: "Travel Blogger",
              company: "Wanderlust Magazine",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163678723-295psgl3.jpg",
              imageAlt: "James Rodriguez"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          containerStyle="default"
          carouselMode="buttons"
          className="py-20"
          textBoxTitleClassName="text-4xl font-extrabold text-foreground"
          textBoxDescriptionClassName="text-lg text-foreground/75"
          uniformGridCustomHeightClasses="min-h-95 2xl:min-h-105"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Book?"
          ctaDescription="Reserve your perfect room today and experience luxury hospitality at its finest. Our team is here to help."
          ctaIcon={Phone}
          ctaButton={{
            text: "Reserve Now",
            href: "#"
          }}
          faqs={[
            {
              id: "1",
              title: "What are your check-in and check-out times?",
              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 based on availability."
            },
            {
              id: "2",
              title: "Do you offer airport transportation?",
              content: "Yes, we provide complimentary airport shuttle service for all guests. Please arrange pickup 24 hours in advance by contacting our concierge."
            },
            {
              id: "3",
              title: "What cancellation policies do you have?",
              content: "Cancellations made 7 days prior to arrival receive a full refund. Cancellations within 7 days are subject to one night's room rate charge."
            },
            {
              id: "4",
              title: "Are pets allowed?",
              content: "Yes, we welcome well-behaved pets. A non-refundable pet fee of $50 per stay applies. Please notify us when booking."
            },
            {
              id: "5",
              title: "What dining options are available?",
              content: "Our on-site restaurant serves breakfast, lunch, and dinner. Room service is available 24/7. We also have a coffee lounge and bar."
            },
            {
              id: "6",
              title: "Do you have event spaces?",
              content: "Yes, we offer versatile event spaces for conferences, weddings, and private functions. Contact our events team for customized packages."
            }
          ]}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          accordionAnimationType="smooth"
          showCard={true}
          className="py-20"
          ctaTitleClassName="text-2xl font-extrabold text-foreground"
          ctaDescriptionClassName="text-base text-foreground/75"
          ctaButtonClassName="px-8 py-3 rounded-sharp"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Luxury Hotels"
          copyrightText="© 2025 Luxury Hotels. All rights reserved."
          socialLinks={[
            { icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" }
          ]}
          className="bg-foreground/5"
          containerClassName="max-w-5xl mx-auto"
          cardClassName="bg-card rounded-sharp p-10"
          logoClassName="text-2xl font-extrabold text-foreground mb-6"
          copyrightTextClassName="text-sm text-foreground/60"
          socialIconClassName="w-5 h-5 text-primary-cta hover:text-primary-cta/70"
        />
      </div>
    </ThemeProvider>
  );
}