"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Briefcase, Heart, Sparkles, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="mediumLargeSizeMediumTitles"
        background="none"
        cardStyle="solid"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "About",          id: "#about"},
        {
          name: "Amenities",          id: "#features"},
        {
          name: "Rooms",          id: "#rooms"},
        {
          name: "Offers",          id: "#pricing"},
        {
          name: "Reviews",          id: "#testimonials"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="Elysian Hotel"
      button={{
        text: "Book Now",        href: "#contact"}}
    />
  </div>

  <div id="home" data-section="home">
      <HeroBillboardScroll
      background={{
        variant: "radial-gradient"}}
      title="Your Luxurious Escape Awaits"
      description="Experience unparalleled comfort and exquisite service at Elysian Hotel, where every moment is crafted to perfection."
      tag="Welcome Home"
      buttons={[
        {
          text: "Explore Rooms",          href: "#rooms"},
        {
          text: "Book Your Stay",          href: "#contact"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/lounge-area-hotel-front-desk_482257-76248.jpg"
      imageAlt="Grand hotel lobby with elegant decor"
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={true}
      title="Discover Our Story"
      description="Nestled in the heart of [City/Region], Elysian Hotel offers a blend of classic elegance and modern luxury. With a rich history of hospitality, we are dedicated to providing an experience that transcends expectation. Our commitment to excellence is reflected in every detail, from our exquisite decor to our personalized service."
      tag="Our Heritage"
      buttons={[
        {
          text: "Learn More",          href: "#"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/woman-black-evening-dress-with-glass-wine-tropical-balcony_343596-3762.jpg"
      imageAlt="Elysian Hotel exterior architecture with lush gardens"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "spa",          title: "Rejuvenating Spa & Wellness",          tags: [
            "Relaxation",            "Health"],
          imageSrc: "http://img.b2bpic.net/free-photo/room-with-massage-tables-wall-with-lights-it_188544-36461.jpg",          imageAlt: "Luxury hotel spa with serene ambiance"},
        {
          id: "dining",          title: "Gourmet Dining Experiences",          tags: [
            "Cuisine",            "Fine Dining"],
          imageSrc: "http://img.b2bpic.net/free-photo/couple-is-drinking-white-wine-romantic-dinner-restaurant-holding-hands_8353-10579.jpg",          imageAlt: "Fine dining restaurant with elegant table setting"},
        {
          id: "pool",          title: "Stunning Infinity Pool",          tags: [
            "Leisure",            "Views"],
          imageSrc: "http://img.b2bpic.net/free-photo/travel-relaxation-lounge-rest-resort_1203-4472.jpg",          imageAlt: "Infinity pool at a luxury hotel with stunning view"},
        {
          id: "fitness",          title: "State-of-the-Art Fitness Center",          tags: [
            "Fitness",            "Workout"],
          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-pregnant-woman-doing-sport-outdoors_23-2150493154.jpg",          imageAlt: "Hotel fitness center with modern equipment"},
        {
          id: "concierge",          title: "Personalized Concierge Service",          tags: [
            "Service",            "Assistance"],
          imageSrc: "http://img.b2bpic.net/free-photo/serene-spa-pool-meditation-space_23-2151935105.jpg",          imageAlt: "Luxury hotel spa with serene ambiance"},
        {
          id: "events",          title: "Elegant Event Spaces",          tags: [
            "Events",            "Meetings"],
          imageSrc: "http://img.b2bpic.net/free-photo/fine-cuisine-luxury-lounge-breast-duck-with-red-wine_482257-10378.jpg",          imageAlt: "Fine dining restaurant with elegant table setting"},
      ]}
      title="World-Class Amenities"
      description="From our rejuvenating spa to gourmet dining, every detail is crafted for your utmost pleasure and relaxation."
      tag="Indulge Yourself"
    />
  </div>

  <div id="rooms" data-section="rooms">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      products={[
        {
          id: "standard-room",          name: "Standard Comfort Room",          price: "$250/night",          variant: "King or Twin Beds",          imageSrc: "http://img.b2bpic.net/free-photo/white-unmade-bed_1203-1226.jpg",          imageAlt: "Cozy standard hotel room with elegant decor"},
        {
          id: "deluxe-room",          name: "Deluxe View Room",          price: "$380/night",          variant: "City or Ocean View",          imageSrc: "http://img.b2bpic.net/free-photo/elegant-modern-black-bedroom-with-monstera-leaf-art_23-2151978957.jpg",          imageAlt: "Spacious deluxe hotel room with city view"},
        {
          id: "executive-suite",          name: "Executive Business Suite",          price: "$600/night",          variant: "Separate Living Area",          imageSrc: "http://img.b2bpic.net/free-photo/internationals-people-standing-cafe-with-shopping-bags_1157-31452.jpg",          imageAlt: "Luxury executive hotel suite with large living area"},
        {
          id: "presidential-suite",          name: "Presidential Grand Suite",          price: "$1200/night",          variant: "Opulent Design & Services",          imageSrc: "http://img.b2bpic.net/free-photo/bride-looking-through-window-from-hotel-room_1153-6512.jpg",          imageAlt: "Opulent presidential suite with lavish decor"},
        {
          id: "family-suite",          name: "Family Getaway Suite",          price: "$750/night",          variant: "Multiple Bedrooms",          imageSrc: "http://img.b2bpic.net/free-photo/single-beds-hotel_1253-276.jpg",          imageAlt: "Family hotel suite with multiple beds and amenities"},
        {
          id: "penthouse",          name: "Penthouse Luxury",          price: "$2000/night",          variant: "Private Terrace & Pool",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-spa_23-2148000417.jpg",          imageAlt: "Luxury penthouse suite with city views and private terrace"},
      ]}
      title="Our Exquisite Rooms & Suites"
      description="Indulge in unparalleled comfort with breathtaking views and premium facilities in every accommodation."
      tag="Your Perfect Stay"
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "weekend-getaway",          badge: "Popular",          badgeIcon: Sparkles,
          price: "$499",          subtitle: "Per Couple",          buttons: [
            {
              text: "Book Now",              href: "#contact"},
          ],
          features: [
            "2 Nights Stay",            "Breakfast Included",            "Spa Credit",            "Late Checkout"],
        },
        {
          id: "romantic-retreat",          badge: "Signature",          badgeIcon: Heart,
          price: "$799",          subtitle: "Per Couple",          buttons: [
            {
              text: "Book Now",              href: "#contact"},
          ],
          features: [
            "3 Nights Stay",            "Gourmet Dinner",            "Couples Massage",            "Champagne Welcome"],
        },
        {
          id: "business-travel",          badge: "Executive",          badgeIcon: Briefcase,
          price: "$350",          subtitle: "Per Night",          buttons: [
            {
              text: "Book Now",              href: "#contact"},
          ],
          features: [
            "Flexible Dates",            "High-Speed Wi-Fi",            "Meeting Room Access",            "Airport Transfer"],
        },
      ]}
      title="Exclusive Packages & Offers"
      description="Find the perfect stay tailored to your desires, with exceptional value and unforgettable experiences."
      tag="Special Offers"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        {
          id: "years-in-service",          value: "25+",          title: "Years in Service",          items: [
            "Decades of excellence",            "Trusted hospitality"],
        },
        {
          id: "satisfied-guests",          value: "98%",          title: "Satisfied Guests",          items: [
            "Exceptional reviews",            "Guest satisfaction"],
        },
        {
          id: "awards-won",          value: "10+",          title: "Awards Won",          items: [
            "Industry recognition",            "Prestigious honors"],
        },
      ]}
      title="Unforgettable Stays, Lasting Memories"
      description="Proudly serving guests with exceptional hospitality and creating cherished moments for years."
      tag="Our Achievements"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Sophia L.",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-handsome-tourist-man-with-road-travel-map-sits-floor-near-suitcase-shows-okay-ok-sign_1258-270605.jpg",          imageAlt: "Sophia L."},
        {
          id: "2",          name: "David K.",          imageSrc: "http://img.b2bpic.net/free-photo/older-guest-arriving-vacation_482257-76543.jpg",          imageAlt: "David K."},
        {
          id: "3",          name: "Emily R.",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-bathrobe-reading-magazine-while-relaxing-beauty-spa-looking-camera_637285-7434.jpg",          imageAlt: "Emily R."},
        {
          id: "4",          name: "Michael S.",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-family-with-baby_23-2149141876.jpg",          imageAlt: "Michael S."},
        {
          id: "5",          name: "Olivia M.",          imageSrc: "http://img.b2bpic.net/free-photo/mature-couple-looking-tablet-bed_23-2148404436.jpg",          imageAlt: "Olivia M."},
      ]}
      cardTitle="Exceptional Experiences"
      cardTag="Guest Reviews"
      cardTagIcon={Star}
      cardAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "faq-1",          title: "What are your 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: "Do you offer airport shuttle services?",          content: "Yes, we provide airport shuttle services. Please contact our concierge team at least 24 hours in advance to arrange your transfer."},
        {
          id: "faq-3",          title: "Is breakfast included with the room rate?",          content: "Breakfast inclusion varies by room rate and package. Please check your booking confirmation or inquire at the reception for details."},
        {
          id: "faq-4",          title: "Do you have pet-friendly rooms?",          content: "Unfortunately, Elysian Hotel does not currently accommodate pets. We apologize for any inconvenience."},
      ]}
      title="Frequently Asked Questions"
      description="Find quick answers to common questions about your stay, bookings, and hotel services."
      tag="Need Help?"
      faqsAnimation="slide-up"
      accordionClassName="border border-[var(--background-accent)] rounded-lg"
      separatorClassName="bg-[var(--background-accent)]"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={true}
      background={{
        variant: "plain"}}
      tag="Plan Your Visit"
      title="Book Your Unforgettable Stay"
      description="Contact us today to reserve your room or inquire about our exclusive packages. Our dedicated team is ready to assist you."
      inputPlaceholder="Your Email"
      buttonText="Submit"
      onSubmit={(email) => console.log(`Contact form submitted with email: ${email}`)}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Elysian Hotel"
      logoTextClassName="text-transparent bg-clip-text text-8xl md:text-9xl font-extrabold stroke-1 stroke-foreground uppercase"
      columns={[
        {
          title: "Hotel",          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Rooms",              href: "#rooms"},
          ],
        },
        {
          title: "Support",          items: [
            {
              label: "Contact Us",              href: "#contact"},
            {
              label: "FAQ",              href: "#faq"},
          ],
        },
        {
          title: "Legal",          items: [
            {
              label: "Privacy Policy",              href: "#"},
            {
              label: "Terms of Service",              href: "#"},
          ],
        },
      ]}
      copyrightText="© 2024 Elysian Hotel. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
