"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import SplitAboutMetric from '@/components/sections/about/SplitAboutMetric';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Waves, Utensils, Dumbbell } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="mediumLarge"
      background="grid"
      cardStyle="inset"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="Luxury Hotels"
          button={{
            text: "Book Now",
            href: "#contact"
          }}
          className="w-full"
          buttonClassName="px-6 py-2"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Luxury Hotels"
          description="Experience unparalleled comfort and elegance. Your perfect getaway awaits in our world-class accommodations."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg"
          imageAlt="Luxurious hotel lobby with modern design"
          frameStyle="card"
          logoLineHeight={1.1}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAboutMetric
          title="Crafted for Your Comfort"
          description={[
            "Since 1998, we have been dedicated to providing exceptional hospitality experiences. Our properties are carefully designed to blend modern amenities with timeless elegance, ensuring every guest feels valued and pampered."
          ]}
          metrics={[
            {
              label: "Years of Excellence",
              value: "25+"
            },
            {
              label: "Guest Rooms Worldwide",
              value: "1,200+"
            }
          ]}
          showBorder={false}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="rooms" data-section="rooms">
        <FeatureCardSixteen
          title="Discover Our Room Types"
          description="Choose from our carefully curated selection of accommodations, each designed with your comfort and style in mind."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          negativeCard={{
            title: "Standard Room",
            items: [
              "Basic furnishings",
              "City view",
              "Standard amenities",
              "Shared facilities"
            ]
          }}
          positiveCard={{
            title: "Premium Suite",
            items: [
              "Luxury furnishings",
              "Ocean or mountain view",
              "Premium spa amenities",
              "Exclusive concierge service",
              "Private lounge access"
            ]
          }}
        />
      </div>

      <div id="amenities" data-section="amenities">
        <MetricCardThree
          title="World-Class Amenities"
          description="Enjoy our premium facilities designed to enhance your stay with comfort, wellness, and entertainment."
          metrics={[
            {
              id: "1",
              icon: Waves,
              title: "Swimming Pool",
              value: "2"
            },
            {
              id: "2",
              icon: Utensils,
              title: "Restaurants",
              value: "3"
            },
            {
              id: "3",
              icon: Dumbbell,
              title: "Fitness Center",
              value: "24/7"
            },
            {
              id: "4",
              icon: Dumbbell,
              title: "Spa & Wellness",
              value: "Full"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Our stay was absolutely unforgettable. The staff went above and beyond to make us feel welcome, and every detail of the hotel reflected excellence and care."
          rating={5}
          author="Sarah Mitchell, Traveler"
          avatars={[
            {
              src: "/placeholders/placeholder1.webp",
              alt: "Sarah Mitchell"
            },
            {
              src: "/placeholders/placeholder1.webp",
              alt: "Guest review"
            },
            {
              src: "/placeholders/placeholder1.webp",
              alt: "Guest review"
            },
            {
              src: "/placeholders/placeholder1.webp",
              alt: "Guest review"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about your stay with us."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "What is your cancellation policy?",
              content: "We offer free cancellation up to 48 hours before arrival. Cancellations within 48 hours will incur a charge of one night's stay."
            },
            {
              id: "2",
              title: "Do you offer airport transportation?",
              content: "Yes, we provide airport pickup and drop-off services. Please arrange this during your booking or contact our concierge."
            },
            {
              id: "3",
              title: "Are pets allowed?",
              content: "Selected rooms are pet-friendly with a daily fee. Please notify us at the time of booking if you plan to bring a pet."
            },
            {
              id: "4",
              title: "What is included in the room rate?",
              content: "Our rates include complimentary Wi-Fi, breakfast, access to the fitness center, and use of the business center."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Plan Your Stay"
          description="Contact our team to make a reservation, ask questions, or request special arrangements for your visit."
          inputs={[
            {
              name: "name",
              type: "text",
              placeholder: "Full Name",
              required: true
            },
            {
              name: "email",
              type: "email",
              placeholder: "Email Address",
              required: true
            }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us about your stay needs...",
            rows: 4,
            required: true
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766452376695-4rxtbd0x.jpg"
          imageAlt="Hotel reception desk"
          buttonText="Send Inquiry"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Luxury Hotels"
          columns={[
            {
              title: "Rooms & Rates",
              items: [
                {
                  label: "Deluxe Rooms",
                  href: "#rooms"
                },
                {
                  label: "Suites",
                  href: "#rooms"
                },
                {
                  label: "Group Bookings",
                  href: "#contact"
                }
              ]
            },
            {
              title: "Amenities",
              items: [
                {
                  label: "Spa & Wellness",
                  href: "#amenities"
                },
                {
                  label: "Restaurants",
                  href: "#amenities"
                },
                {
                  label: "Events",
                  href: "#contact"
                }
              ]
            },
            {
              title: "Company",
              items: [
                {
                  label: "About Us",
                  href: "#about"
                },
                {
                  label: "Contact",
                  href: "#contact"
                },
                {
                  label: "Careers",
                  href: "#contact"
                }
              ]
            },
            {
              title: "Policies",
              items: [
                {
                  label: "Terms & Conditions",
                  href: "/terms"
                },
                {
                  label: "Privacy Policy",
                  href: "/privacy"
                }
              ]
            }
          ]}
          copyrightText="© 2025 Luxury Hotels. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}