"use client"

import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import AboutMetric from '@/components/sections/about/AboutMetric';
import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterSocial from '@/components/sections/footer/FooterSocial';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Award, Users, Star, Globe, Facebook, Instagram, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="medium"
      sizing="large"
      background="animatedAurora"
      cardStyle="gradient-radial"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Luxury Hotels"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Rooms", id: "rooms" },
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Book Now", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Experience Luxury Hospitality"
          description="Discover our world-class hotel with premium accommodations, fine dining, and exceptional service designed for your comfort"
          tag="Welcome"
          buttons={[
            { text: "Book Your Stay", href: "contact" },
            { text: "Explore Rooms", href: "rooms" }
          ]}
          mediaItems={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg", imageAlt: "Luxury hotel bedroom" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg", imageAlt: "Modern hotel suite" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767262927273-27ad9o26.jpg", imageAlt: "Hotel lobby interior" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184720628-griec8yy.jpg", imageAlt: "Hotel pool and resort" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184718060-6nx8o2ui.jpg", imageAlt: "Hotel restaurant dining" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="A Legacy of Exceptional Hospitality Since 1995"
          useInvertedBackground="noInvert"
          metrics={[
            { icon: Award, label: "Awards Won", value: "28+" },
            { icon: Users, label: "Happy Guests", value: "150K+" },
            { icon: Star, label: "Guest Rating", value: "4.9/5" },
            { icon: Globe, label: "Years Operating", value: "29" }
          ]}
        />
      </div>

      <div id="rooms" data-section="rooms">
        <ProductCardSeven
          title="Our Room Collection"
          description="Choose from our selection of beautifully appointed rooms and suites, each designed with your comfort in mind"
          tag="Accommodations"
          products={[
            { id: "1", name: "Standard Room", price: "$149/night", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766849439310-dyxpjdwv.jpg", imageAlt: "Standard hotel room" },
            { id: "2", name: "Deluxe Suite", price: "$249/night", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184717131-qr8fo1hm.jpg", imageAlt: "Deluxe hotel suite" },
            { id: "3", name: "Luxury Penthouse", price: "$499/night", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767195026929-zu71bw7f.jpg", imageAlt: "Luxury penthouse suite" }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardEight
          title="Premium Hotel Services"
          description="We offer comprehensive amenities and services to make your stay unforgettable"
          tag="Amenities"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            { id: 1, title: "Wellness Center", description: "State-of-the-art fitness facility with personal trainers and spa services available 24/7", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766849440242-p7cj613y.jpg" },
            { id: 2, title: "Gourmet Dining", description: "Award-winning restaurant featuring international cuisine and local specialties", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767262928410-ozh1cuq7.jpg" }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="What Our Guests Say"
          description="Hear from travelers who have experienced our hospitality"
          tag="Guest Reviews"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            { id: "1", name: "Sarah Johnson", role: "Business Traveler", testimonial: "Exceptional service and stunning accommodations. This hotel exceeded all my expectations. I'll definitely return on my next visit.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184200876-idjoemdc.jpg", imageAlt: "Sarah Johnson" },
            { id: "2", name: "Michael Chen", role: "Vacation Guest", testimonial: "The staff went above and beyond to make our family vacation memorable. The rooms are immaculate and the amenities are world-class.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183841431-v1xtegko.jpg", imageAlt: "Michael Chen" },
            { id: "3", name: "Emily Rodriguez", role: "Honeymoon Guest", testimonial: "Perfect romantic getaway. Every detail was thoughtfully curated. We felt completely pampered throughout our stay.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184199984-xnv4032m.jpg", imageAlt: "Emily Rodriguez" },
            { id: "4", name: "David Thompson", role: "Corporate Client", testimonial: "Outstanding conference facilities and hospitality. Our team had everything we needed for a successful event.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184707769-zzdny5qa.jpg", imageAlt: "David Thompson" }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Book Your Stay"
          description="Reserve your room now and experience luxury hospitality. Fill out the form below and our team will confirm your booking."
          buttonText="Reserve Now"
          inputs={[
            { name: "name", type: "text", placeholder: "Your 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 additional information", rows: 4, required: false }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSocial
          logoText="Luxury Hotels"
          copyrightText="© Luxury Hotels, Inc. 2025. All rights reserved."
          columns={[
            { title: "Company", items: [{ label: "About Us", href: "about" }, { label: "Our Team", href: "#" }, { label: "Careers", href: "#" }] },
            { title: "Services", items: [{ label: "Accommodations", href: "rooms" }, { label: "Amenities", href: "services" }, { label: "Events", href: "#" }] },
            { title: "Guest Info", items: [{ label: "Contact", href: "contact" }, { label: "Booking", href: "contact" }, { label: "Cancellation", href: "#" }] },
            { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms & Conditions", href: "#" }, { label: "Cookie Policy", href: "#" }] }
          ]}
          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" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}