"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import AboutMetric from '@/components/sections/about/AboutMetric';
import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Hotel, Star, Users, Award, Sparkles } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumLarge"
      background="animatedGrid"
      cardStyle="gradient-subtle"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="minimal"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Luxe Hotels"
          navItems={[
            { name: "Rooms", id: "rooms" },
            { name: "Amenities", id: "amenities" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Book Now",
            href: "#contact"
          }}
          navItemClassName="text-sm font-medium"
          buttonClassName="px-6 py-2"
          buttonTextClassName="font-semibold"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="LUXE HOTELS"
          description="Experience unparalleled luxury and comfort at our award-winning five-star hotel. Discover world-class amenities, exceptional service, and unforgettable moments."
          layoutOrder="default"
          buttons={[
            { text: "Book a Room", href: "#rooms" },
            { text: "Learn More", href: "#about" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg"
          imageAlt="Luxury hotel lobby"
          frameStyle="browser"
          logoLineHeight={1.2}
          containerClassName="gap-8"
          descriptionClassName="text-lg md:text-2xl leading-relaxed"
          buttonClassName="px-8 py-3 rounded-full font-semibold transition-all"
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Setting the standard for luxury hospitality excellence since our founding"
          metrics={[
            { icon: Hotel, label: "Premium Rooms", value: "250+" },
            { icon: Star, label: "Guest Rating", value: "4.9/5" },
            { icon: Users, label: "Happy Guests", value: "50K+" },
            { icon: Award, label: "Awards Won", value: "25+" }
          ]}
          useInvertedBackground="noInvert"
          titleClassName="text-3xl md:text-5xl font-light"
          metricValueClassName="text-5xl md:text-6xl font-light tracking-tight"
          metricLabelClassName="text-sm md:text-base font-medium"
        />
      </div>

      <div id="rooms" data-section="rooms">
        <ProductCardSeven
          title="Our Rooms"
          description="Choose from our carefully curated selection of luxurious accommodations"
          products={[
            {
              id: "1",
              name: "Standard Room",
              price: "$199/night",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184721770-arv4645s.jpg",
              imageAlt: "Standard hotel room"
            },
            {
              id: "2",
              name: "Deluxe Suite",
              price: "$349/night",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766452376695-4rxtbd0x.jpg",
              imageAlt: "Deluxe suite"
            },
            {
              id: "3",
              name: "Presidential Suite",
              price: "$599/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"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          tagIcon={Sparkles}
          tag="Luxury Stays"
          cardNameClassName="font-semibold text-base"
          cardPriceClassName="text-sm font-medium"
        />
      </div>

      <div id="amenities" data-section="amenities">
        <FeatureCardEight
          title="World-Class Amenities"
          description="Discover the facilities that make our hotel extraordinary"
          tag="Premium Facilities"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              title: "Spa & Wellness",
              description: "Full-service spa with massages, sauna, and wellness treatments",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184722691-mip9ww4c.jpg"
            },
            {
              id: 2,
              title: "Fine Dining",
              description: "Michelin-starred restaurant featuring international cuisine",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185878910-obewt98e.jpg"
            },
            {
              id: 3,
              title: "Fitness Center",
              description: "State-of-the-art gym with personal training and classes",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766849142731-hp8i7zi3.jpg"
            },
            {
              id: 4,
              title: "Swimming Pool",
              description: "Olympic-sized pool with heated waters and cabanas",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766843736372-3ltc72sy.jpg"
            }
          ]}
          titleClassName="text-3xl md:text-5xl font-light"
          cardTitleClassName="text-xl font-semibold"
          cardDescriptionClassName="text-sm leading-relaxed"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Loved by Our Guests"
          description="Read what our visitors have to say about their experience"
          tag="Guest Reviews"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              title: "Exceptional Service and Elegance",
              quote: "Our stay was absolutely perfect. The staff was attentive, the rooms were immaculate, and every detail showed the hotel's commitment to excellence. We'll definitely be back!",
              name: "Sarah Mitchell",
              role: "Travel Enthusiast",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183587552-1pqoe5c0.jpg",
              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",
              title: "A Home Away From Home",
              quote: "Luxe Hotels exceeded all my expectations. The amenities are top-notch, the location is perfect, and the hospitality is genuine. Best hotel experience I've had.",
              name: "Michael Chen",
              role: "Business Executive",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766154635301-vse33sxl.jpg",
              imageAlt: "Michael Chen"
            },
            {
              id: "3",
              title: "Unforgettable Family Vacation",
              quote: "We brought our family for a week and everyone had an amazing time. The kids loved the pool, we loved the spa, and everyone adored the restaurant. Thank you!",
              name: "Emily Rodriguez",
              role: "Family Traveler",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183841431-v1xtegko.jpg",
              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",
              title: "Pure Luxury and Comfort",
              quote: "Every moment at Luxe Hotels was memorable. From the sophisticated design to the impeccable service, this is what true luxury hospitality looks like.",
              name: "David Kim",
              role: "Luxury Travel Blogger",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766182321167-i4kvpj5f.jpg",
              imageAlt: "David Kim"
            }
          ]}
          titleClassName="text-3xl md:text-5xl font-light"
          testimonialTitleClassName="text-lg font-semibold mb-2"
          quoteClassName="text-base leading-relaxed italic"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Reserve Your Stay"
          description="Book your perfect room or contact our team with any questions. We look forward to hosting you."
          inputs={[
            { name: "name", type: "text", placeholder: "Full Name", required: true },
            { name: "email", type: "email", placeholder: "Email Address", required: true },
            { name: "checkin", type: "date", placeholder: "Check-in Date", required: true },
            { name: "checkout", type: "date", placeholder: "Check-out Date", required: true }
          ]}
          textarea={{
            name: "message",
            placeholder: "Special requests or questions...",
            rows: 4,
            required: false
          }}
          buttonText="Reserve Now"
          useInvertedBackground="noInvert"
          titleClassName="text-3xl md:text-5xl font-light mb-4"
          descriptionClassName="text-base text-gray-600 mb-8"
          contentClassName="max-w-2xl mx-auto"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766854198888-392pi2tb.jpg"
          imageAlt="Luxe Hotels exterior at night"
          logoText="Luxe Hotels"
          copyrightText="© 2025 Luxe Hotels. All rights reserved."
          columns={[
            {
              title: "Reservations",
              items: [
                { label: "Book a Room", href: "#rooms" },
                { label: "Check Availability", href: "#contact" },
                { label: "Special Offers", href: "#" }
              ]
            },
            {
              title: "Amenities",
              items: [
                { label: "Dining", href: "#amenities" },
                { label: "Spa & Wellness", href: "#amenities" },
                { label: "Activities", href: "#amenities" }
              ]
            },
            {
              title: "Contact",
              items: [
                { label: "Phone: +1 (555) 123-4567", href: "#" },
                { label: "Email: info@luxehotels.com", href: "#" },
                { label: "123 Park Avenue, City", href: "#" }
              ]
            }
          ]}
          columnTitleClassName="font-semibold text-base mb-4"
          columnItemClassName="text-sm hover:underline transition-all"
          copyrightTextClassName="text-sm"
        />
      </div>
    </ThemeProvider>
  );
}