"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="mediumLarge"
        background="floatingGradient"
        cardStyle="layered-gradient"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="solid"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "About",          id: "#about"},
        {
          name: "Amenities",          id: "#amenities"},
        {
          name: "Rooms",          id: "#rooms"},
        {
          name: "Reviews",          id: "#reviews"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="Hôtel Velsatis"
      button={{
        text: "Book Now",        href: "#contact"}}
    />
  </div>

  <div id="home" data-section="home">
      <HeroLogoBillboard
      background={{
        variant: "radial-gradient"}}
      logoText="Hôtel Velsatis"
      description="Experience unparalleled Moroccan hospitality in the heart of Beni Mellal. Hôtel Velsatis offers a luxurious retreat with breathtaking views and exquisite service, perfect for leisure and business travelers alike."
      buttons={[
        {
          text: "Book Your Stay",          href: "#contact"},
        {
          text: "Explore Rooms",          href: "#rooms"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/royal-dining-room-with-wooden-furniture-chandeliers_114579-2222.jpg"
      imageAlt="Luxurious hotel lobby with Moroccan design elements"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={true}
      title="A Sanctuary in Beni Mellal"
    />
  </div>

  <div id="amenities" data-section="amenities">
      <FeatureCardTwentyEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "amenity-1",          title: "Infinity Pool",          subtitle: "Dive into relaxation with stunning panoramic views.",          category: "Leisure",          value: "Open Daily"},
        {
          id: "amenity-2",          title: "Gourmet Dining",          subtitle: "Savor authentic Moroccan and international cuisine.",          category: "Cuisine",          value: "Award-Winning"},
        {
          id: "amenity-3",          title: "Luxury Spa",          subtitle: "Rejuvenate your senses with traditional hammam and treatments.",          category: "Wellness",          value: "Private Sessions"},
        {
          id: "amenity-4",          title: "Fitness Center",          subtitle: "Stay active with state-of-the-art gym equipment.",          category: "Health",          value: "24/7 Access"},
        {
          id: "amenity-5",          title: "Conference Facilities",          subtitle: "Host seamless events with our modern meeting rooms.",          category: "Business",          value: "High-Tech"},
      ]}
      title="World-Class Amenities"
      description="Indulge in a range of premium facilities designed to enhance your stay, from rejuvenating spa treatments to exquisite dining experiences."
    />
  </div>

  <div id="rooms" data-section="rooms">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "room-1",          name: "Standard Double Room",          price: "MAD 950/night",          imageSrc: "http://img.b2bpic.net/free-photo/delicious-breakfast-with-cereals_23-2148877646.jpg",          imageAlt: "Cozy standard double room"},
        {
          id: "room-2",          name: "Deluxe King Room",          price: "MAD 1300/night",          imageSrc: "http://img.b2bpic.net/free-photo/background-white-luxury-nature-roll_1203-6350.jpg",          imageAlt: "Spacious deluxe king room"},
        {
          id: "room-3",          name: "Executive Suite",          price: "MAD 2500/night",          imageSrc: "http://img.b2bpic.net/free-photo/travel-beach-filter-water-luxury_1203-3967.jpg",          imageAlt: "Elegant executive suite"},
        {
          id: "room-4",          name: "Family Room",          price: "MAD 1800/night",          imageSrc: "http://img.b2bpic.net/free-photo/child-having-fun-playtime_23-2149382744.jpg",          imageAlt: "Comfortable family room"},
        {
          id: "room-5",          name: "Room with Balcony",          price: "MAD 1100/night",          imageSrc: "http://img.b2bpic.net/free-photo/woman-doing-fitness-home-balcony_23-2148928928.jpg",          imageAlt: "Room with private balcony and view"},
        {
          id: "room-6",          name: "Presidential Suite",          price: "MAD 4500/night",          imageSrc: "http://img.b2bpic.net/free-photo/hotel-guest-entering-reception-with-luggage-travelling-abroad-attend-important-business-meetings-entrepreneur-approaching-front-desk-check-booking-accommodation-close-up_482257-65305.jpg",          imageAlt: "Grand presidential suite"},
      ]}
      title="Our Luxurious Rooms & Suites"
      description="Choose from a selection of elegantly designed rooms and suites, each offering supreme comfort and modern amenities for a truly restful stay."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "metric-1",          value: "9.5/10",          title: "Guest Satisfaction",          description: "Consistently high ratings from our valued guests.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-guy-with-breakfast-bed-girlfriend_23-2148334447.jpg",          imageAlt: "Smiling guests interacting with hotel staff"},
        {
          id: "metric-2",          value: "5 Stars",          title: "Hotel Rating",          description: "Recognized for superior service and luxurious facilities.",          imageSrc: "http://img.b2bpic.net/free-photo/customer-using-nfc-mobile-payment-buy-coffee-from-bar_482257-101079.jpg",          imageAlt: "Golden five star rating icon"},
        {
          id: "metric-3",          value: "20+ Years",          title: "In Hospitality",          description: "Decades of experience in creating unforgettable stays.",          imageSrc: "http://img.b2bpic.net/free-photo/low-angle-concrete-building-city-with-trees_23-2148798629.jpg",          imageAlt: "Historic hotel building facade"},
      ]}
      title="Our Commitment to Excellence"
      description="Hôtel Velsatis prides itself on delivering an exceptional experience for every guest, a testament to our dedication and passion for hospitality."
    />
  </div>

  <div id="reviews" data-section="reviews">
      <TestimonialCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",          name: "Sarah J.",          role: "Tourist, France",          testimonial: "An absolutely stunning hotel with impeccable service. The staff went above and beyond to make our stay unforgettable. The views from our room were breathtaking!",          imageSrc: "http://img.b2bpic.net/free-photo/home-affairs-family-relationship-concept-young-handsome-man-with-afro-hairstyle_273609-8922.jpg",          imageAlt: "Portrait of Sarah J."},
        {
          id: "2",          name: "Omar K.",          role: "Business Traveler, UAE",          testimonial: "Hôtel Velsatis provides a perfect blend of luxury and convenience. The facilities are top-notch, and the dining experience was exquisite. Highly recommend for business trips.",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-with-suitcase-takes-selfies-mobile-phone-shares-photos-social-media-going_1258-314081.jpg",          imageAlt: "Portrait of Omar K."},
        {
          id: "3",          name: "Amina & Ben",          role: "Couple, UK",          testimonial: "Our romantic getaway at Hôtel Velsatis was magical. The ambiance, the food, and the warmth of the staff truly made it special. We can't wait to come back!",          imageSrc: "http://img.b2bpic.net/free-photo/couple-looking-each-other-beautiful-day_23-2148301387.jpg",          imageAlt: "Portrait of Amina and Ben"},
        {
          id: "4",          name: "The Rodriguez Family",          role: "Family Vacation, Spain",          testimonial: "A fantastic family-friendly hotel! The kids loved the pool, and we appreciated the spacious rooms and helpful advice from the concierge. A wonderful experience for all of us.",          imageSrc: "http://img.b2bpic.net/free-photo/boys-having-fun-swimming-pool-with-pool-float-water-gun_23-2149025419.jpg",          imageAlt: "Portrait of the Rodriguez Family"},
        {
          id: "5",          name: "David L.",          role: "Solo Explorer, Canada",          testimonial: "As a solo traveler, safety and comfort are key. Hôtel Velsatis delivered on both. The serene environment was perfect after a day of exploring Beni Mellal.",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-walking-blue-sky_23-2148193995.jpg",          imageAlt: "Portrait of David L."},
      ]}
      title="What Our Guests Say"
      description="Read the authentic experiences of travelers who have enjoyed their stay at Hôtel Velsatis."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq-1",          title: "What are the check-in and check-out times?",          content: "Check-in is at 3:00 PM, and check-out is at 12:00 PM. Early check-in or late check-out may be available upon request and subject to availability."},
        {
          id: "faq-2",          title: "Does the hotel offer airport transfer services?",          content: "Yes, we offer airport transfer services from Casablanca (CMN) and Marrakech (RAK) airports. Please contact our concierge to arrange your transfer in advance."},
        {
          id: "faq-3",          title: "Are pets allowed at Hôtel Velsatis?",          content: "Unfortunately, pets are not allowed at Hôtel Velsatis to ensure the comfort and safety of all our guests."},
        {
          id: "faq-4",          title: "Is Wi-Fi available throughout the hotel?",          content: "Yes, complimentary high-speed Wi-Fi is available in all rooms and public areas of the hotel."},
        {
          id: "faq-5",          title: "What dining options are available at the hotel?",          content: "Hôtel Velsatis features a gourmet Moroccan restaurant, an international buffet, and a cozy café for light snacks and beverages. Room service is also available 24/7."},
      ]}
      sideTitle="Frequently Asked Questions"
      sideDescription="Find quick answers to the most common questions about Hôtel Velsatis, our services, and your stay."
      faqsAnimation="slide-up"
      textPosition="left"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={true}
      background={{
        variant: "plain"}}
      tag="Contact Us"
      title="Plan Your Perfect Stay"
      description="Ready to experience the best of Beni Mellal? Get in touch with us to inquire about bookings, special offers, or any questions you may have. Our team is here to assist you."
      inputPlaceholder="Enter your email for inquiries"
      buttonText="Send Inquiry"
      termsText="By sending an inquiry, you agree to our privacy policy and terms of service."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/china-city-night_1127-4192.jpg"
      imageAlt="Sunset over Beni Mellal, Morocco"
      logoText="Hôtel Velsatis"
      columns={[
        {
          title: "Hotel",          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Rooms & Suites",              href: "#rooms"},
            {
              label: "Amenities",              href: "#amenities"},
          ],
        },
        {
          title: "Guest Services",          items: [
            {
              label: "FAQs",              href: "#faq"},
            {
              label: "Contact",              href: "#contact"},
            {
              label: "Book Now",              href: "#contact"},
          ],
        },
        {
          title: "Legal",          items: [
            {
              label: "Privacy Policy",              href: "#"},
            {
              label: "Terms of Service",              href: "#"},
          ],
        },
      ]}
      copyrightText="© 2024 Hôtel Velsatis. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
