"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import MetricCardSix from '@/components/sections/metrics/MetricCardSix';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Award, Building2, Headset, Heart, Star, UtensilsCrossed, Users, Wifi } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="mediumLargeSizeLargeTitles"
      background="grid"
      cardStyle="gradient-radial"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Luxe Haven"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Rooms", id: "feature" },
            { name: "About", id: "about" },
            { name: "Guest Reviews", id: "testimonial" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Luxe Haven"
          description="Experience unparalleled luxury and comfort at our five-star hotel. Discover elegantly appointed rooms, world-class amenities, and exceptional hospitality."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184711453-096e89ja.jpg"
          imageAlt="Luxury hotel lobby entrance"
          frameStyle="card"
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Where Elegance Meets Hospitality. Over two decades of creating unforgettable memories for our guests."
          useInvertedBackground="noInvert"
          metrics={[
            { icon: Building2, label: "Rooms Available", value: "250+" },
            { icon: Star, label: "Guest Rating", value: "4.9/5" },
            { icon: Users, label: "Satisfied Guests", value: "50K+" },
            { icon: Award, label: "Years Excellence", value: "20+" }
          ]}
        />
      </div>

      <div id="feature" data-section="feature">
        <FeatureCardSeven
          title="Our Room Categories"
          description="Choose from a selection of beautifully designed rooms tailored to your needs"
          tag="Accommodations"
          features={[
            {
              id: 1,
              title: "Deluxe Rooms",
              description: "Spacious rooms with premium furnishings, city views, and modern amenities for the discerning traveler.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg"
            },
            {
              id: 2,
              title: "Standard Rooms",
              description: "Comfortable and well-appointed rooms perfect for business travelers and families seeking quality accommodation.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg"
            },
            {
              id: 3,
              title: "Executive Suites",
              description: "Luxurious suites with separate living areas, premium bedding, and exclusive access to our lounge facilities.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184718060-6nx8o2ui.jpg"
            }
          ]}
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metric" data-section="metric">
        <MetricCardSix
          title="Premium Amenities & Services"
          description="World-class facilities designed for your comfort and relaxation"
          tag="Services"
          metrics={[
            {
              id: "1",
              value: "24/7",
              tag: "Concierge",
              tagIcon: Headset,
              title: "Round-the-Clock Concierge Service"
            },
            {
              id: "2",
              value: "5★",
              tag: "Dining",
              tagIcon: UtensilsCrossed,
              title: "Award-Winning Restaurants"
            },
            {
              id: "3",
              value: "∞",
              tag: "Wellness",
              title: "Full-Service Spa & Wellness Center"
            },
            {
              id: "4",
              value: "100%",
              tag: "WiFi",
              tagIcon: Wifi,
              title: "High-Speed Internet Throughout"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardTwelve
          cardTitle="Join thousands of delighted guests who have experienced the Luxe Haven difference"
          cardTag="Guest Testimonials"
          cardTagIcon={Heart}
          testimonials={[
            {
              id: "1",
              name: "Sarah Mitchell",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183587552-1pqoe5c0.jpg",
              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",
              name: "James Richardson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766154635301-vse33sxl.jpg",
              imageAlt: "James Richardson"
            },
            {
              id: "3",
              name: "Emma Watson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183841431-v1xtegko.jpg",
              imageAlt: "Emma Watson"
            },
            {
              id: "4",
              name: "Michael Chen",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766182321167-i4kvpj5f.jpg",
              imageAlt: "Michael Chen"
            },
            {
              id: "5",
              name: "Victoria Brooks",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183842429-uezzjpov.jpg",
              imageAlt: "Victoria Brooks"
            },
            {
              id: "6",
              name: "Daniel Foster",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg",
              imageAlt: "Daniel Foster"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to book your perfect getaway? Contact our reservations team today and let us create an unforgettable experience for you."
          animationType="entrance-slide"
          buttons={[
            { text: "Book Now", href: "#" },
            { text: "Request Information", href: "#" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Luxe Haven"
          columns={[
            {
              title: "Hotel",
              items: [
                { label: "Rooms & Suites", href: "#" },
                { label: "Amenities", href: "#" },
                { label: "Dining", href: "#" },
                { label: "Spa & Wellness", href: "#" }
              ]
            },
            {
              title: "Guest Services",
              items: [
                { label: "Reservations", href: "#" },
                { label: "Group Bookings", href: "#" },
                { label: "Corporate Events", href: "#" },
                { label: "Travel Packages", href: "#" }
              ]
            },
            {
              title: "About",
              items: [
                { label: "Our Story", href: "#" },
                { label: "Awards", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Press", href: "#" }
              ]
            },
            {
              title: "Contact",
              items: [
                { label: "Phone: +1 (555) 123-4567", href: "#" },
                { label: "Email: info@luxehaven.com", href: "#" },
                { label: "Address: 123 Luxury Lane", href: "#" },
                { label: "Check Availability", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Luxe Haven Hotel. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}