"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardMetrics from '@/components/sections/hero/HeroBillboardMetrics';
import SplitAboutMetric from '@/components/sections/about/SplitAboutMetric';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="largeSizeMediumTitles"
      background="none"
      cardStyle="glass-depth"
      primaryButtonStyle="outline"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "home" },
            { name: "Rooms", id: "rooms" },
            { name: "Amenities", id: "amenities" },
            { name: "Contact", id: "contact" },
            { name: "Booking", id: "booking" }
          ]}
          brandName="Luxe Hotel"
          bottomLeftText="Global Hospitality"
          bottomRightText="reservations@luxehotel.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardMetrics
          title="Welcome to Luxe Hotel"
          description="Experience unparalleled luxury and hospitality in the heart of the city. Our carefully curated rooms and world-class amenities await your arrival."
          tag="5-Star Luxury"
          tagIcon={Star}
          buttons={[
            { text: "Book Your Stay", href: "#booking" },
            { text: "Explore Rooms", href: "#rooms" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg"
          frameStyle="browser"
          metricsLabel="Trusted by travelers worldwide"
          metrics={[
            { id: "1", value: "25+", label: "Years of Excellence" },
            { id: "2", value: "500+", label: "Rooms" },
            { id: "3", value: "98%", label: "Guest Satisfaction" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAboutMetric
          title="A Legacy of Timeless Elegance"
          description={[
            "Since 1999, Luxe Hotel has been setting the standard for luxury hospitality. Our commitment to exceptional service, stunning architecture, and guest comfort has made us a destination of choice for discerning travelers worldwide."
          ]}
          metrics={[
            { label: "Years of Hospitality Excellence", value: "25+" },
            { label: "International Awards", value: "47" }
          ]}
          showBorder={false}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="amenities" data-section="amenities">
        <FeatureCardThree
          title="Premium Amenities"
          description="Discover world-class facilities designed for your comfort and relaxation"
          tag="Facilities"
          textboxLayout="default"
          features={[
            {
              id: "01",
              title: "Luxury Spa",
              description: "Rejuvenate with our full-service spa offering premium treatments and therapies",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184722691-mip9ww4c.jpg",
              imageAlt: "Spa treatment area"
            },
            {
              id: "02",
              title: "Fine Dining Restaurant",
              description: "Savor exquisite cuisine prepared by award-winning chefs in our elegant dining space",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185878910-obewt98e.jpg",
              imageAlt: "Restaurant interior"
            },
            {
              id: "03",
              title: "Olympic Pool",
              description: "Swim and relax in our heated Olympic-size pool with panoramic city views",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766849142731-hp8i7zi3.jpg",
              imageAlt: "Swimming pool"
            },
            {
              id: "04",
              title: "Fitness Center",
              description: "Stay active with state-of-the-art equipment and personalized training services",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766843736372-3ltc72sy.jpg",
              imageAlt: "Fitness equipment"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="rooms" data-section="rooms">
        <ProductCardFour
          title="Our Room Collection"
          description="Choose from our selection of elegantly appointed rooms, each offering unique views and amenities"
          tag="Book Now"
          textboxLayout="default"
          products={[
            {
              id: "1",
              name: "Standard Room",
              price: "$189/night",
              variant: "Queen Bed • City View",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg",
              imageAlt: "Standard room"
            },
            {
              id: "2",
              name: "Deluxe Room",
              price: "$299/night",
              variant: "King Bed • Premium View",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766452376695-4rxtbd0x.jpg",
              imageAlt: "Deluxe room"
            },
            {
              id: "3",
              name: "Grand Suite",
              price: "$499/night",
              variant: "Two Bedrooms • Panoramic View",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184721770-arv4645s.jpg",
              imageAlt: "Grand suite"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEight
          title="Guest Reviews"
          description="Hear from our delighted guests who have experienced the Luxe Hotel difference"
          textboxLayout="default"
          tag="Testimonials"
          testimonials={[
            {
              id: "1",
              name: "Sarah Mitchell",
              role: "Corporate Executive",
              company: "Fortune 500 Company",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183587552-1pqoe5c0.jpg",
              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",
              name: "James Chen",
              role: "Travel Blogger",
              company: "Wanderlust Media",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766154635301-vse33sxl.jpg",
              imageAlt: "James Chen"
            },
            {
              id: "3",
              name: "Elena Rodriguez",
              role: "Event Planner",
              company: "Luxury Events Co",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183841431-v1xtegko.jpg",
              imageAlt: "Elena Rodriguez"
            },
            {
              id: "4",
              name: "David Thompson",
              role: "Hotel Consultant",
              company: "Hospitality Associates",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766182321167-i4kvpj5f.jpg",
              imageAlt: "David Thompson"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Plan Your Visit"
          description="Have questions or ready to book? Get in touch with our reservations team. We're here to ensure your stay is unforgettable."
          inputs={[
            { name: "fullName", 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 }}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766854198888-392pi2tb.jpg"
          mediaPosition="right"
          buttonText="Send Inquiry"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Luxe Hotel"
          columns={[
            {
              title: "Navigation",
              items: [
                { label: "Home", href: "#home" },
                { label: "Rooms", href: "#rooms" },
                { label: "Amenities", href: "#amenities" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Guest Services",
              items: [
                { label: "Reservations", href: "#booking" },
                { label: "Loyalty Program", href: "#loyalty" },
                { label: "Group Bookings", href: "#groups" },
                { label: "Corporate Rates", href: "#corporate" }
              ]
            },
            {
              title: "Information",
              items: [
                { label: "About Us", href: "#about" },
                { label: "Careers", href: "#careers" },
                { label: "Press", href: "#press" },
                { label: "Blog", href: "#blog" }
              ]
            },
            {
              title: "Contact",
              items: [
                { label: "Phone: +1 (555) 123-4567", href: "tel:+15551234567" },
                { label: "Email: info@luxehotel.com", href: "mailto:info@luxehotel.com" },
                { label: "Address: 123 Premier Street", href: "#" },
                { label: "Open 24/7", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Luxe Hotel. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}