"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplitLarge from '@/components/sections/hero/HeroSplitLarge';
import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import ProductCardFive from '@/components/sections/product/ProductCardFive';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterCard from '@/components/sections/footer/FooterCard';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSmallSizeLargeTitles"
      background="noiseGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Luxe Tokyo"
          navItems={[
            { name: "About", id: "about" },
            { name: "Amenities", id: "features" },
            { name: "Rooms", id: "products" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Book Now",
            href: "contact"
          }}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroSplitLarge
          title="Experience Luxury in the Heart of Tokyo"
          description="Discover the perfect blend of traditional Japanese aesthetics and modern elegance. Your sanctuary awaits at Luxe Tokyo."
          tag="Premium Hospitality"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766837634719-5otl8omu.jpg"
          imageAlt="Luxe Tokyo exterior at night"
          buttons={[
            { text: "Reserve Now", href: "contact" },
            { text: "Learn More", href: "about" }
          ]}
        />
      </div>
      
      <div id="about" data-section="about">
        <ParallaxAbout
          title="Where Tradition Meets Modern Excellence"
          description="Since 2015, Luxe Tokyo has set the standard for luxury hospitality in the capital. Our commitment to exceptional service, sustainable practices, and authentic Japanese experiences creates unforgettable moments for every guest."
          tag="Our Story"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185878910-obewt98e.jpg"
          imageAlt="Luxe Tokyo interior design"
          buttons={[
            { text: "Explore Our Heritage", href: "#" }
          ]}
        />
      </div>
      
      <div id="features" data-section="features">
        <FeatureCardTwentyOne
          title="World-Class Amenities"
          description="Every detail crafted for your comfort and pleasure"
          tag="Amenities"
          accordionItems={[
            {
              id: "01",
              title: "Spa & Wellness",
              content: "Rejuvenate with our signature treatments featuring traditional Japanese therapies and modern wellness techniques."
            },
            {
              id: "02",
              title: "Fine Dining",
              content: "Savor exquisite cuisine from award-winning chefs blending traditional and contemporary culinary arts."
            },
            {
              id: "03",
              title: "Fitness Center",
              content: "State-of-the-art equipment and expert trainers available 24/7 to support your wellness goals."
            },
            {
              id: "04",
              title: "Sky Lounge",
              content: "Unwind with panoramic views of Tokyo's skyline while enjoying premium cocktails and curated selections."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg"
          imageAlt="Amenities showcase"
          useInvertedBackground="noInvert"
          mediaPosition="left"
        />
      </div>
      
      <div id="products" data-section="products">
        <ProductCardFive
          title="Curated Room Collection"
          description="Select from our thoughtfully designed rooms and suites"
          tag="Accommodations"
          products={[
            {
              id: "1",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg",
              imageAlt: "Deluxe Room",
              button: { text: "View Details", href: "#" }
            },
            {
              id: "2",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766849442209-g2s3b84q.jpg",
              imageAlt: "Executive Suite",
              button: { text: "View Details", href: "#" }
            },
            {
              id: "3",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg",
              imageAlt: "Premium Suite with View",
              button: { text: "View Details", href: "#" }
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="Guest Experiences"
          description="Hear what our valued guests have to say about their stay"
          tag="Reviews"
          testimonials={[
            {
              id: "1",
              name: "Sarah Anderson",
              role: "Travel Entrepreneur",
              testimonial: "Luxe Tokyo exceeded every expectation. The attention to detail, the service, and the atmosphere created memories that will last a lifetime. Truly exceptional.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850777333-gk776zjh.jpg",
              imageAlt: "Sarah Anderson"
            },
            {
              id: "2",
              name: "Michael Chen",
              role: "Business Executive",
              testimonial: "A perfect blend of business convenience and luxury comfort. The facilities are world-class and the staff understands genuine hospitality.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg",
              imageAlt: "Michael Chen"
            },
            {
              id: "3",
              name: "Hiroshi Nakamura",
              role: "Cultural Consultant",
              testimonial: "As a Tokyo native, I appreciate how seamlessly Luxe Tokyo honors tradition while embracing modernity. Exceptional in every way.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183841431-v1xtegko.jpg",
              imageAlt: "Hiroshi Nakamura"
            },
            {
              id: "4",
              name: "Emma Richardson",
              role: "Luxury Travel Blogger",
              testimonial: "Simply outstanding. The spa, the dining, the rooms, the service—every element is thoughtfully curated for maximum guest satisfaction.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg",
              imageAlt: "Emma Richardson"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Reserve Your Stay"
          description="Contact our reservations team to book your perfect getaway. We look forward to welcoming you to Luxe Tokyo."
          inputs={[
            { name: "name", type: "text", placeholder: "Full Name", required: true },
            { name: "email", type: "email", placeholder: "Email Address", required: true },
            { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
            { name: "arrival", type: "date", placeholder: "Check-in Date", required: true }
          ]}
          textarea={{
            name: "message",
            placeholder: "Additional requests or special occasions...",
            rows: 4,
            required: false
          }}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766843737297-1izy0u6f.jpg"
          imageAlt="Luxe Tokyo lobby"
          mediaPosition="right"
          buttonText="Complete Reservation"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Luxe Tokyo"
          copyrightText="© 2025 Luxe Tokyo. All rights reserved. | Privacy Policy | Terms & Conditions"
        />
      </div>
    </ThemeProvider>
  );
}