"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogoBillboardSplitImage from '@/components/sections/hero/HeroLogoBillboardSplitImage';
import AboutPhoneTimeline from '@/components/sections/about/AboutPhoneTimeline';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import MetricCardFive from '@/components/sections/metrics/MetricCardFive';
import ContactInline from '@/components/sections/contact/ContactInline';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

export default function LuxeHavenPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="large"
      sizing="large"
      background="animatedGrid"
      cardStyle="elevated-accent-light"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Luxe Haven"
          logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185877436-fl4vf3vx.jpg"
          logoAlt="Luxe Haven Hotel Logo"
          navItems={[
            { name: "Rooms", id: "rooms" },
            { name: "Dining", id: "dining" },
            { name: "Services", id: "services" },
            { name: "About", id: "about" }
          ]}
          button={{
            text: "Reserve Now",
            href: "#contact"
          }}
          className="fixed top-6 left-0 right-0 z-50 flex justify-center"
          navItemClassName="text-sm font-medium transition-colors"
          buttonClassName="px-6 py-2 rounded-lg font-medium"
          buttonTextClassName="font-medium"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplitImage
          logoText="LUXE HAVEN"
          description="Experience unparalleled luxury in our award-winning hotel. Where timeless elegance meets contemporary comfort. Discover the art of hospitality redefined."
          buttons={[
            { text: "Reserve Your Stay", href: "#contact" },
            { text: "Explore Rooms", href: "#rooms" }
          ]}
          layoutOrder="default"
          splitImageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg"
          splitImageAlt="Luxury hotel suite bedroom"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg"
          imageAlt="Hotel lobby and entrance"
          frameStyle="card"
          className="relative z-10"
          containerClassName="max-w-7xl mx-auto px-6"
          logoContainerClassName="mb-12"
          descriptionClassName="text-xl md:text-2xl leading-relaxed mb-8"
          buttonContainerClassName="flex gap-4"
          buttonClassName="px-8 py-3 rounded-none"
          splitMediaWrapperClassName="aspect-video rounded-lg overflow-hidden"
          mediaWrapperClassName="rounded-lg overflow-hidden"
        />
      </div>

      <div id="about" data-section="about">
        <AboutPhoneTimeline
          tag="Our Legacy"
          title="Crafted for the Discerning Traveler"
          description="Since 1985, Luxe Haven has stood as a beacon of luxury hospitality. Our commitment to excellence, attention to detail, and personalized service have earned us recognition as one of the world's premier destinations. We believe every guest deserves an experience beyond expectation."
          phoneOne={{
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184720628-griec8yy.jpg",
            imageAlt: "Hotel booking experience"
          }}
          phoneTwo={{
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185878910-obewt98e.jpg",
            imageAlt: "Reservation management"
          }}
          textboxLayout="default"
          buttons={[
            { text: "Learn Our Story", href: "#" }
          ]}
          useInvertedBackground="noInvert"
          tagClassName="text-sm font-medium"
          titleClassName="text-4xl md:text-5xl font-bold mb-6"
          descriptionClassName="text-lg leading-relaxed mb-8 opacity-90"
        />
      </div>

      <div id="rooms" data-section="rooms">
        <FeatureCardSeven
          title="Our Signature Collections"
          description="Each room is a masterpiece of design and comfort. From intimate suites to sprawling penthouses, discover accommodations that redefine luxury living."
          tag="Accommodations"
          features={[
            {
              id: 1,
              title: "Premier Suites",
              description: "Expansive living spaces with panoramic views, marble bathrooms, and personalized concierge service. Experience uncompromising luxury with amenities curated for the sophisticated traveler.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184718060-6nx8o2ui.jpg",
              imageAlt: "Premier Suite"
            },
            {
              id: 2,
              title: "Spa & Wellness Suites",
              description: "Dedicated wellness spaces featuring private steam rooms, soaking tubs, and rainfall showers. Complete with access to our world-class spa facilities and wellness programs.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184718910-pnoqmtth.jpg",
              imageAlt: "Spa Suite"
            },
            {
              id: 3,
              title: "Culinary Experiences",
              description: "In-room dining at its finest with Michelin-starred cuisine delivered to your private quarters. Our master chefs prepare bespoke menus tailored to your preferences.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184717131-qr8fo1hm.jpg",
              imageAlt: "Fine Dining Room Service"
            }
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          textBoxTitleClassName="text-4xl md:text-5xl font-bold mb-4"
          textBoxDescriptionClassName="text-lg opacity-90 mb-8"
        />
      </div>

      <div id="services" data-section="services">
        <ProductCardFour
          title="Premium Services & Amenities"
          description="Indulge in our comprehensive array of world-class services designed to enhance your stay."
          tag="Experiences"
          products={[
            {
              id: "spa",
              name: "Spa & Wellness",
              price: "Complimentary",
              variant: "6 Treatment Rooms",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184719816-2670gl5k.jpg",
              imageAlt: "Spa treatment room"
            },
            {
              id: "concierge",
              name: "24/7 Concierge",
              price: "Included",
              variant: "Personal Assistants",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg",
              imageAlt: "Concierge service"
            },
            {
              id: "gym",
              name: "Fitness Center",
              price: "Included",
              variant: "State-of-the-Art Equipment",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184718910-pnoqmtth.jpg",
              imageAlt: "Fitness facility"
            },
            {
              id: "pool",
              name: "Infinity Pool",
              price: "Included",
              variant: "Heated Year-Round",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg",
              imageAlt: "Swimming pool"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          containerStyle="default"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          textBoxTitleClassName="text-4xl md:text-5xl font-bold mb-4"
          textBoxDescriptionClassName="text-lg opacity-90 mb-8"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Guest Accolades"
          description="Hear from distinguished travelers who have experienced Luxe Haven's world-renowned hospitality."
          tag="Reviews"
          testimonials={[
            {
              id: "1",
              name: "Margaret Richardson",
              role: "Travel Critic",
              company: "Global Luxury Magazine",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg",
              imageAlt: "Margaret Richardson"
            },
            {
              id: "2",
              name: "James Wellington",
              role: "Executive",
              company: "International Hotels Group",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163678723-295psgl3.jpg",
              imageAlt: "James Wellington"
            },
            {
              id: "3",
              name: "Sofia Hartmann",
              role: "Designer",
              company: "Architectural Digest",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184724760-wxlm9bjg.jpg",
              imageAlt: "Sofia Hartmann"
            },
            {
              id: "4",
              name: "Alexander Rousseau",
              role: "Sommelier",
              company: "Michelin Guide",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg",
              imageAlt: "Alexander Rousseau"
            },
            {
              id: "5",
              name: "Elena Moretti",
              role: "Entrepreneur",
              company: "Forbes",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185880597-ieb2jad3.jpg",
              imageAlt: "Elena Moretti"
            },
            {
              id: "6",
              name: "Christopher Hayes",
              role: "Philanthropist",
              company: "Harvard Business Review",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185881440-0jwi2e86.jpg",
              imageAlt: "Christopher Hayes"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          containerStyle="default"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          textBoxTitleClassName="text-4xl md:text-5xl font-bold mb-4"
          textBoxDescriptionClassName="text-lg opacity-90 mb-8"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFive
          title="By The Numbers"
          description="Our commitment to excellence reflected in achievements and recognitions."
          metrics={[
            {
              id: "1",
              value: "450+",
              description: "Luxurious rooms and suites across multiple categories"
            },
            {
              id: "2",
              value: "38",
              description: "International awards for hospitality and design excellence"
            },
            {
              id: "3",
              value: "98%",
              description: "Guest satisfaction rating across all platforms"
            },
            {
              id: "4",
              value: "1985",
              description: "Year established as beacon of luxury hospitality"
            }
          ]}
          animationType="slide-up"
          variant="border"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          textBoxTitleClassName="text-4xl md:text-5xl font-bold mb-4"
          textBoxDescriptionClassName="text-lg opacity-90 mb-8"
          metricValueClassName="text-6xl md:text-7xl font-bold"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactInline
          text="Ready to experience luxury redefined? Reserve your stay at Luxe Haven."
          animationType="entrance-slide"
          inputPlaceholder="Enter your email address"
          buttonText="Reserve Now"
          useInvertedBackground="noInvert"
          textClassName="text-3xl md:text-4xl font-bold"
          containerClassName="py-16 md:py-24"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185877436-fl4vf3vx.jpg"
          logoWidth={40}
          logoHeight={40}
          copyrightText="© 2025 Luxe Haven Hotels. All rights reserved."
          columns={[
            {
              title: "Accommodations",
              items: [
                { label: "Premier Suites", href: "#rooms" },
                { label: "Spa Suites", href: "#rooms" },
                { label: "Penthouse Villas", href: "#rooms" }
              ]
            },
            {
              title: "Services",
              items: [
                { label: "Spa & Wellness", href: "#services" },
                { label: "Fine Dining", href: "#services" },
                { label: "Concierge", href: "#services" }
              ]
            },
            {
              title: "Information",
              items: [
                { label: "Contact Us", href: "#contact" },
                { label: "Privacy Policy", href: "#" },
                { label: "Terms & Conditions", href: "#" }
              ]
            }
          ]}
          footerClassName="bg-gradient-to-t from-black to-transparent"
          copyrightTextClassName="text-sm opacity-60"
        />
      </div>
    </ThemeProvider>
  );
}