"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import MediaSplitAbout from '@/components/sections/about/MediaSplitAbout';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterSocial from '@/components/sections/footer/FooterSocial';
import { Sparkles, Instagram, Facebook, Twitter, Linkedin } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="large"
      sizing="small"
      background="radialGradient"
      cardStyle="accent-corner-border"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Rooms", id: "rooms" },
            { name: "Amenities", id: "amenities" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="Luxe Haven"
          button={{
            text: "Book Now",
            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Luxe Haven"
          description="Experience jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjelegance and comfort at our five-star luxury hotel. Discover world-class amenities, impeccable service, and breathtaking views in the heart of the city."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hrknaj"
          imageAlt="Luxury hotel lobby with elegant design"
          frameStyle="card"
        />
      </div>

      <div id="rooms" data-section="rooms">
        <ProductCardFour
          title="Our Rooms"
          description="Choose from our carefully curated selection of luxurious accommodations designed for your comfort and convenience."
          tag="Premium Stays"
          tagIcon={Sparkles}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          containerStyle="default"
          products={[
            {
              id: "1",
              name: "Standard Room",
              price: "$149",
              variant: "1 Queen Bed • City View",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg",
              imageAlt: "Standard hotel room with queen bed"
            },
            {
              id: "2",
              name: "Deluxe Room",
              price: "$249",
              variant: "1 King Bed • Mountain View",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766626651847-t469h1ri.jpg",
              imageAlt: "Deluxe hotel room with king bed"
            },
            {
              id: "3",
              name: "Luxury Suite",
              price: "$449",
              variant: "2 Beds • Panoramic View",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg",
              imageAlt: "Premium luxury suite with panoramic views"
            }
          ]}
        />
      </div>

      <div id="amenities" data-section="amenities">
        <FeatureCardTwelve
          title="World-Class Amenities"
          description="Enjoy exceptional facilities and services designed to enhance your stay."
          features={[
            {
              id: "spa",
              label: "Spa & Wellness",
              title: "Rejuvenate Your Body and Mind",
              items: [
                "Full-service spa",
                "Sauna and steam rooms",
                "Yoga classes",
                "Fitness center"
              ]
            },
            {
              id: "dining",
              label: "Fine Dining",
              title: "Culinary Excellence",
              items: [
                "3 à la carte restaurants",
                "24-hour room service",
                "Michelin-star chef",
                "Wine cellar"
              ]
            },
            {
              id: "meetings",
              label: "Events & Meetings",
              title: "Perfect Venue for Your Events",
              items: [
                "Ballroom capacity 500",
                "Conference facilities",
                "AV technology",
                "Catering services"
              ]
            }
          ]}
          animationType="opacity"
          variant="card"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitAbout
          title="About Luxe Haven"
          description="For over 25 years, Luxe Haven has been the destination of choice for discerning travelers seeking uncompromising luxury and service excellence. Our commitment to perfection, attention to detail, and passion for hospitality define every guest experience. From our architecturally stunning property to our world-renowned staff, every element is crafted to exceed expectations."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg"
          imageAlt="Luxe Haven hotel exterior and architecture"
          imagePosition="right"
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "Our Story",
              href: "#about"
            },
            {
              text: "Learn More",
              href: "#"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEight
          title="Guest Reviews"
          description="Discover what our valued guests say about their unforgettable experiences at Luxe Haven."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              name: "Sarah Anderson",
              role: "Business Executive",
              company: "Fortune 500 Company",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184200876-idjoemdc.jpg",
              imageAlt: "Sarah Anderson"
            },
            {
              id: "2",
              name: "Michael Chen",
              role: "Travel Photographer",
              company: "National Geographic",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184199984-xnv4032m.jpg",
              imageAlt: "Michael Chen"
            },
            {
              id: "3",
              name: "Emma Richardson",
              role: "Event Planner",
              company: "Elite Events Co.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184201718-hfojd9bk.jpg",
              imageAlt: "Emma Richardson"
            },
            {
              id: "4",
              name: "James Mitchell",
              role: "Hospitality Director",
              company: "Travel & Leisure",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183841431-v1xtegko.jpg",
              imageAlt: "James Mitchell"
            },
            {
              id: "5",
              name: "Victoria Wells",
              role: "Luxury Travel Agent",
              company: "Prestige Travels",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140103339-f3be0gdh.jpg",
              imageAlt: "Victoria Wells"
            },
            {
              id: "6",
              name: "David Summers",
              role: "Lifestyle Blogger",
              company: "Wanderlust Diaries",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766626653444-tt27kqk5.jpg",
              imageAlt: "David Summers"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Book Your Stay"
          description="Reserve your room today and experience luxury hospitality at its finest. Our reservations team is here to assist you."
          useInvertedBackground="noInvert"
          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: "specialRequests",
            placeholder: "Special Requests or Notes...",
            rows: 4,
            required: false
          }}
          buttonText="Reserve Now"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSocial
          logoText="Luxe Haven"
          copyrightText="© Luxe Haven Hotels, 2025. All rights reserved."
          columns={[
            {
              title: "Guest Services",
              items: [
                { label: "Reservations", href: "#contact" },
                { label: "Room Service", href: "#" },
                { label: "Concierge", href: "#" },
                { label: "Check-in Info", href: "#" }
              ]
            },
            {
              title: "Amenities",
              items: [
                { label: "Spa & Wellness", href: "#amenities" },
                { label: "Fine Dining", href: "#amenities" },
                { label: "Event Venues", href: "#amenities" },
                { label: "Business Center", href: "#amenities" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "#about" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#contact" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Terms & Conditions", href: "#" },
                { label: "Privacy Policy", href: "#" },
                { label: "Cancellation Policy", href: "#" },
                { label: "Accessibility", href: "#" }
              ]
            }
          ]}
          socialLinks={[
            {
              icon: Instagram,
              href: "https://instagram.com",
              ariaLabel: "Instagram"
            },
            {
              icon: Facebook,
              href: "https://facebook.com",
              ariaLabel: "Facebook"
            },
            {
              icon: Twitter,
              href: "https://twitter.com",
              ariaLabel: "Twitter"
            },
            {
              icon: Linkedin,
              href: "https://linkedin.com",
              ariaLabel: "LinkedIn"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}