"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroSplitAvatars from '@/components/sections/hero/HeroSplitAvatars';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import MetricCardSix from '@/components/sections/metrics/MetricCardSix';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
import { Star, Heart, Quote, Compass, Home, Sparkles, Crown, TrendingUp, Smile, Award, Users, MessageCircle, HelpCircle, Facebook, Instagram, Twitter, Mail } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="noiseDiagonalGradient"
      cardStyle="solid"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="Luxe Hotels"
          button={{
            text: "Book Now",
            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitAvatars
          title="Experience Luxury Hospitality"
          description="Discover our world-class accommodations and exceptional service designed for unforgettable stays"
          tag="5-Star Hotel"
          tagIcon={Star}
          avatarText="Trusted by 10,000+ guests"
          avatars={[
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg", alt: "Guest 1" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183843211-zal0n8gj.jpg", alt: "Guest 2" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183844045-gbini56u.jpg", alt: "Guest 3" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766971771014-s49lscnq.jpg", alt: "Guest 4" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766810996198-rgoz7x9l.jpg", alt: "Guest 5" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg"
          imageAlt="Luxury hotel lobby"
          imagePosition="right"
          buttons={[
            { text: "Book a Room", href: "contact" },
            { text: "Learn More", href: "about" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="Guest Experience"
          tagIcon={Heart}
          title="Our guests consistently rate us as the most welcoming and attentive hotel in the city."
          description="Margaret Sullivan"
          subdescription="Travel Blogger & Hotel Critic"
          icon={Quote}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766452376695-4rxtbd0x.jpg"
          imageAlt="Guest enjoying hotel experience"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardNineteen
          title="Your Journey With Us"
          description="From the moment you decide to stay until you depart, we ensure every step is seamless"
          tag="Process"
          tagIcon={Compass}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              tag: "Step One",
              title: "Easy Booking",
              subtitle: "Quick and secure reservation",
              description: "Browse our rooms, select your dates, and complete your booking in minutes with our user-friendly platform",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg",
              imageAlt: "Online booking interface"
            },
            {
              id: 2,
              tag: "Step Two",
              title: "Warm Welcome",
              subtitle: "Personalized check-in experience",
              description: "Our dedicated staff greets you with genuine hospitality and handles your check-in efficiently",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184721770-arv4645s.jpg",
              imageAlt: "Hotel reception area"
            },
            {
              id: 3,
              tag: "Step Three",
              title: "Comfortable Stay",
              subtitle: "Exceptional accommodations",
              description: "Relax in your beautifully appointed room with premium amenities and attentive service throughout",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184722691-mip9ww4c.jpg",
              imageAlt: "Luxury hotel room"
            },
            {
              id: 4,
              tag: "Step Four",
              title: "Smooth Departure",
              subtitle: "Hassle-free checkout",
              description: "We ensure your checkout is quick and convenient, with opportunities to provide feedback",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185878910-obewt98e.jpg",
              imageAlt: "Hotel checkout process"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Room Types & Pricing"
          description="Choose from our carefully curated selection of accommodations"
          tag="Rooms"
          tagIcon={Home}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          plans={[
            {
              id: "deluxe",
              tag: "Deluxe Room",
              tagIcon: Sparkles,
              price: "$149",
              period: "per night",
              description: "Comfortable room with modern amenities and city view",
              button: {
                text: "Book Deluxe",
                href: "contact"
              },
              featuresTitle: "Room Amenities",
              features: [
                "Queen-size bed with luxury linens",
                "Marble bathroom with spa amenities",
                "42-inch flat-screen TV",
                "Free high-speed WiFi",
                "Work desk and ergonomic chair"
              ]
            },
            {
              id: "suite",
              tag: "Premium Suite",
              tagIcon: Star,
              price: "$249",
              period: "per night",
              description: "Spacious suite with separate living area and premium furnishings",
              button: {
                text: "Book Suite",
                href: "contact"
              },
              featuresTitle: "Suite Features",
              features: [
                "Separate living and sleeping areas",
                "King-size bed with premium linens",
                "Marble spa bathroom with soaking tub",
                "55-inch smart TV",
                "Complimentary champagne upon arrival"
              ]
            },
            {
              id: "penthouse",
              tag: "Penthouse Suite",
              tagIcon: Crown,
              price: "$499",
              period: "per night",
              description: "Ultimate luxury with breathtaking views and exclusive services",
              button: {
                text: "Book Penthouse",
                href: "contact"
              },
              featuresTitle: "Penthouse Exclusives",
              features: [
                "Multi-room penthouse with panoramic views",
                "Personal concierge service 24/7",
                "Private terrace with hot tub",
                "Complimentary spa treatments",
                "Private dining and catering available"
              ]
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSix
          title="Why Guests Choose Luxe Hotels"
          description="Our commitment to excellence reflected in numbers"
          tag="Stats"
          tagIcon={TrendingUp}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          metrics={[
            {
              id: "1",
              value: "98%",
              tag: "Satisfaction",
              tagIcon: Smile,
              title: "Guest Satisfaction Rate"
            },
            {
              id: "2",
              value: "25+",
              tag: "Years",
              tagIcon: Award,
              title: "Years of Excellence"
            },
            {
              id: "3",
              value: "500+",
              tag: "Rooms",
              tagIcon: Home,
              title: "Premium Accommodations"
            },
            {
              id: "4",
              value: "50k+",
              tag: "Guests",
              tagIcon: Users,
              title: "Happy Guests Annually"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEight
          title="What Our Guests Say"
          description="Real experiences from travelers who've stayed with us"
          tag="Reviews"
          tagIcon={MessageCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              name: "Sarah Mitchell",
              role: "Business Traveler",
              company: "Tech Solutions Inc.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766810997055-ljmx5kmk.jpg",
              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",
              name: "James Rodriguez",
              role: "Vacation Guest",
              company: "Travel Enthusiast",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766810998079-7q01ylvn.jpg",
              imageAlt: "James Rodriguez"
            },
            {
              id: "3",
              name: "Emily Chen",
              role: "Event Coordinator",
              company: "Corporate Events Co.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766810999070-gd08tyfo.jpg",
              imageAlt: "Emily Chen"
            },
            {
              id: "4",
              name: "Jennifer Williams",
              role: "Luxury Travel Blogger",
              company: "Wanderlust Diaries",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767041586058-xwgpxd5o.jpg",
              imageAlt: "Jennifer Williams"
            },
            {
              id: "5",
              name: "Michael Thompson",
              role: "Frequent Guest",
              company: "Hotel Loyalty Member",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766824445238-vktdx6tt.jpg",
              imageAlt: "Michael Thompson"
            },
            {
              id: "6",
              name: "Lisa Anderson",
              role: "Honeymoon Couple",
              company: "Just Married",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767041587075-yi36zpfv.jpg",
              imageAlt: "Lisa Anderson"
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about your stay"
          tag="Help"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "What are your check-in and check-out times?",
              content: "Standard check-in time is 3:00 PM and check-out is 11:00 AM. Early check-in and late check-out are available subject to room availability. Please contact our front desk to arrange these services."
            },
            {
              id: "2",
              title: "Do you offer airport shuttle service?",
              content: "Yes, we provide complimentary airport shuttle service for all guests. Please arrange this in advance by contacting our concierge at least 24 hours before your arrival."
            },
            {
              id: "3",
              title: "What is your cancellation policy?",
              content: "Cancellations made 48 hours before arrival receive a full refund. Cancellations within 48 hours of arrival are subject to one night's room rate charge. No-shows are charged the full booking amount."
            },
            {
              id: "4",
              title: "Are pets allowed in the hotel?",
              content: "We welcome well-behaved pets with a one-time fee of $50 per stay. Pets must be kept in rooms and not left unattended. Please inform us upon booking if you're traveling with a pet."
            },
            {
              id: "5",
              title: "Do you have conference and event facilities?",
              content: "Yes, we offer state-of-the-art meeting rooms and event spaces for conferences, weddings, and corporate functions. Contact our events team for customized packages and pricing."
            },
            {
              id: "6",
              title: "What dining options are available?",
              content: "Our hotel features a fine dining restaurant, casual café, and room service available 24 hours. We accommodate dietary restrictions with advance notice."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Ready to Book Your Stay?"
          description="Contact our team to reserve your room or inquire about our services. We look forward to welcoming you."
          useInvertedBackground="noInvert"
          buttonText="Send Inquiry"
          inputs={[
            {
              name: "fullName",
              type: "text",
              placeholder: "Full Name",
              required: true
            },
            {
              name: "email",
              type: "email",
              placeholder: "Email Address",
              required: true
            },
            {
              name: "phone",
              type: "tel",
              placeholder: "Phone Number",
              required: true
            },
            {
              name: "checkIn",
              type: "date",
              placeholder: "Check-in Date",
              required: true
            }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us about your stay or special requests...",
            rows: 5,
            required: true
          }}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseSocial
          description="Luxe Hotels offers world-class accommodations with exceptional service. We're committed to making every stay memorable and comfortable."
          logoText="Luxe Hotels"
          copyrightText="© 2025 Luxe Hotels. All rights reserved."
          columns={[
            {
              title: "Navigation",
              items: [
                { label: "Rooms", href: "pricing" },
                { label: "About Us", href: "about" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              title: "Policies",
              items: [
                { label: "Terms of Service", href: "#terms" },
                { label: "Privacy Policy", href: "#privacy" },
                { label: "Cancellation", href: "faq" }
              ]
            },
            {
              title: "Support",
              items: [
                { label: "FAQ", href: "faq" },
                { label: "Booking Help", href: "contact" },
                { label: "Guest Services", href: "contact" }
              ]
            }
          ]}
          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"
            },
            {
              icon: Mail,
              href: "mailto:info@luxehotels.com",
              ariaLabel: "Email"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}