"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardMetrics from '@/components/sections/hero/HeroBillboardMetrics';
import SplitAbout from '@/components/sections/about/SplitAbout';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MetricCardSix from '@/components/sections/metrics/MetricCardSix';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactInline from '@/components/sections/contact/ContactInline';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Star, Leaf, MapPin, Home, Utensils, Clock, Facebook, Instagram, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumLargeSizeLargeTitles"
      background="fluid"
      cardStyle="shadow-colored"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Luxe Haven"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Rooms", id: "rooms" },
            { name: "About", id: "about" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Book Now", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardMetrics
          title="Welcome to Luxe Haven"
          description="Experience world-class hospitality in the heart of luxury. Our award-winning hotel offers stunning accommodations, exceptional service, and unforgettable moments."
          tag="Premium Accommodation"
          buttons={[
            { text: "Book Your Stay", href: "contact" },
            { text: "Explore Rooms", href: "rooms" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184711453-096e89ja.jpg"
          imageAlt="Luxe Haven Hotel Lobby"
          frameStyle="browser"
          metricsLabel="Trusted by discerning travelers worldwide"
          metrics={[
            { id: "1", value: "500+", label: "Guest Reviews" },
            { id: "2", value: "25+", label: "Years of Excellence" },
            { id: "3", value: "98%", label: "Guest Satisfaction" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="Our Story"
          description="Since 1998, Luxe Haven has been a beacon of hospitality excellence. We believe in creating memorable experiences through attention to detail, warm service, and sophisticated comfort."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          imagePosition="right"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767211437426-jhqsalo3.jpg"
          imageAlt="Luxe Haven Hotel Architecture"
          bulletPoints={[
            {
              title: "Excellence in Service",
              description: "Our dedicated team ensures every guest feels valued and cared for",
              icon: Star
            },
            {
              title: "Sustainable Luxury",
              description: "Committed to eco-friendly practices without compromising comfort",
              icon: Leaf
            },
            {
              title: "Prime Location",
              description: "Perfectly situated to access attractions and business districts",
              icon: MapPin
            }
          ]}
          buttons={[{ text: "Learn More", href: "contact" }]}
        />
      </div>

      <div id="rooms" data-section="rooms">
        <ProductCardTwo
          title="Our Room Collection"
          description="Choose from our carefully curated selection of rooms, each designed for comfort and elegance"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          products={[
            {
              id: "1",
              brand: "Luxe Haven",
              name: "Standard Room",
              price: "$89/night",
              rating: 4,
              reviewCount: "342",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184199984-xnv4032m.jpg",
              imageAlt: "Standard Room at Luxe Haven"
            },
            {
              id: "2",
              brand: "Luxe Haven",
              name: "Deluxe Suite",
              price: "$159/night",
              rating: 5,
              reviewCount: "521",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766837631730-3p442mol.jpg",
              imageAlt: "Deluxe Suite at Luxe Haven"
            },
            {
              id: "3",
              brand: "Luxe Haven",
              name: "Presidential Suite",
              price: "$299/night",
              rating: 5,
              reviewCount: "189",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767041396095-f4hs15gt.jpg",
              imageAlt: "Presidential Suite at Luxe Haven"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSix
          title="By The Numbers"
          description="Our commitment to excellence reflected in meaningful statistics"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            {
              id: "1",
              value: "250",
              tag: "Rooms",
              tagIcon: Home,
              title: "Comfortable Accommodations"
            },
            {
              id: "2",
              value: "5",
              tag: "Stars",
              tagIcon: Star,
              title: "Award Winning Quality"
            },
            {
              id: "3",
              value: "12",
              tag: "Venues",
              tagIcon: Utensils,
              title: "Dining & Entertainment"
            },
            {
              id: "4",
              value: "24/7",
              tag: "Service",
              tagIcon: Clock,
              title: "Concierge Assistance"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Guest Experiences"
          description="Hear from our satisfied guests about their unforgettable stays"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          testimonials={[
            {
              id: "1",
              name: "Sarah Mitchell",
              role: "Travel Blogger",
              company: "Wanderlust Chronicles",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766154635301-vse33sxl.jpg",
              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",
              name: "James Chen",
              role: "Business Executive",
              company: "Global Tech Corp",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183842429-uezzjpov.jpg",
              imageAlt: "James Chen"
            },
            {
              id: "3",
              name: "Emma Rodriguez",
              role: "Travel Consultant",
              company: "Luxury Escapes",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184309647-aqbmmuiq.jpg",
              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",
              name: "Michael Thompson",
              role: "Hotel Reviewer",
              company: "Travel Magazine",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766849444575-td00y2fe.jpg",
              imageAlt: "Michael Thompson"
            },
            {
              id: "5",
              name: "Lisa Anderson",
              role: "Wedding Planner",
              company: "Perfect Moments",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766849445373-zmzxg3xm.jpg",
              imageAlt: "Lisa Anderson"
            },
            {
              id: "6",
              name: "David Park",
              role: "Frequent Guest",
              company: "Platinum Member",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766152144682-htnjk2vn.jpg",
              imageAlt: "David Park"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactInline
          text="Ready for your next luxury escape?"
          inputPlaceholder="Enter your email address"
          buttonText="Book Now"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Luxe Haven"
          copyrightText="© 2025 Luxe Haven Hotel. All rights reserved."
          socialLinks={[
            { icon: Facebook, href: "https://facebook.com/luxehaven", ariaLabel: "Facebook" },
            { icon: Instagram, href: "https://instagram.com/luxehaven", ariaLabel: "Instagram" },
            { icon: Twitter, href: "https://twitter.com/luxehaven", ariaLabel: "Twitter" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}