"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Utensils } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="mediumLarge"
      background="noiseDiagonalGradient"
      cardStyle="outline"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Rooms", id: "rooms" },
            { name: "Amenities", id: "features" },
            { name: "Gallery", id: "hero" },
            { name: "Contact", id: "contact" },
          ]}
          brandName="The Grand Hotel"
          bottomLeftText="Your Luxurious Escape"
          bottomRightText="reservations@grandhotel.com"
          topBarClassName="h-20"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Experience Unrivaled Luxury"
          description="Welcome to The Grand Hotel, where timeless elegance meets modern comfort. Indulge in an unforgettable stay."
          background={{ variant: 'plain' }}
          mediaItems={[
            { imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg", imageAlt: "Luxury hotel room with a view" },
            { imageSrc: "https://img.b2bpic.net/free-photo/elegant-stools-table-huge-bright-hall_1127-3339.jpg", imageAlt: "Grand hotel lobby" },
            { imageSrc: "https://img.b2bpic.net/free-photo/luxury-poolside-experience-where-guests-bask-opulence-cabanas_1268-31113.jpg", imageAlt: "Hotel infinity pool overlooking city" },
            { imageSrc: "https://img.b2bpic.net/free-photo/gourmet-meal-served-with-wine_23-2148516896.jpg", imageAlt: "Fine dining restaurant in hotel" },
            { imageSrc: "https://img.b2bpic.net/free-photo/spa-equipments-with-soap-cotton-flower_23-2147844979.jpg", imageAlt: "Tranquil hotel spa" },
          ]}
          buttons={[
            { text: "Book Your Stay", href: "#contact" },
            { text: "Explore Rooms", href: "#rooms" },
          ]}
          tag="Your Perfect Escape"
          tagAnimation="blur-reveal"
          buttonAnimation="blur-reveal"
          ariaLabel="Hero section with hotel imagery carousel"
          containerClassName="h-screen"
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          title="A Legacy of Hospitality Excellence"
          description="The Grand Hotel has been a beacon of luxury and comfort for decades, offering impeccable service and exquisite amenities. Our commitment to guest satisfaction is reflected in every detail, ensuring a truly memorable experience."
          metrics={[
            { value: "50+", title: "Years of Service" },
            { value: "5-Star", title: "Rating" },
          ]}
          useInvertedBackground={false}
          tag="About Us"
          imageSrc="https://img.b2bpic.net/free-photo/chateau-frontenac-night-quebec-city_649448-2204.jpg"
          imageAlt="Elegant exterior of The Grand Hotel"
          mediaAnimation="blur-reveal"
          metricsAnimation="blur-reveal"
          ariaLabel="About our hotel section"
          titleClassName="text-foreground"
          descriptionClassName="text-foreground"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Amenities Designed for Your Comfort"
          description="Discover a world of convenience and luxury with our carefully curated amenities, tailored to enhance every aspect of your stay."
          features={[
            { title: "Spa & Wellness", description: "Indulge in rejuvenating treatments and find tranquility at our world-class spa.", bentoComponent: 'globe' },
            { title: "Gourmet Dining", description: "Savor exquisite culinary creations at our renowned restaurants and bars.", bentoComponent: 'marquee', centerIcon: Utensils, variant: 'text', texts: ["Award-Winning Chefs", "Local & International Cuisine", "Elegant Ambiance", "Private Dining Available"] },
            { title: "Luxurious Pool", description: "Relax by our stunning infinity pool with breathtaking views.", bentoComponent: 'media-stack', items: [{ imageSrc: "https://img.b2bpic.net/free-photo/luxury-poolside-experience-where-guests-bask-opulence-cabanas_1268-31113.jpg", imageAlt: "Hotel infinity pool" }, { imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg", imageAlt: "Hotel room" }, { imageSrc: "https://img.b2bpic.net/free-photo/elegant-stools-table-huge-bright-hall_1127-3339.jpg", imageAlt: "Hotel lobby" }] },
            { title: "State-of-the-Art Gym", description: "Maintain your fitness routine with access to our modern gym facilities.", bentoComponent: 'animated-bar-chart' },
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Our Offerings"
          tagAnimation="blur-reveal"
          descriptionClassName="text-foreground"
          titleClassName="text-foreground"
          cardClassName="border-2 border-accent"
        />
      </div>

      <div id="rooms" data-section="rooms">
        <ProductCardOne
          title="Our Exquisite Accommodations"
          description="Choose from a selection of beautifully appointed rooms and suites, each designed to provide unparalleled comfort and style."
          products={[
            { id: "suite-1", name: "The Grand Suite", price: "From $850/night", imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg", imageAlt: "Interior of The Grand Suite" },
            { id: "room-1", name: "Deluxe City View Room", price: "From $450/night", imageSrc: "https://img.b2bpic.net/free-photo/asian-women-wake-up-from-sleep-are-stretch-herself-morning-weekend-sit-bed-luxury-room-relax-weekend-concept_1253-1031.jpg", imageAlt: "Deluxe room with city view" },
            { id: "room-2", name: "Executive Garden View", price: "From $550/night", imageSrc: "https://img.b2bpic.net/free-photo/young-businessman-sitting-bed-working-laptop-hotel_1163-5504.jpg", imageAlt: "Executive room with garden view" },
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Rooms & Suites"
          tagAnimation="blur-reveal"
          titleClassName="text-foreground"
          descriptionClassName="text-foreground"
          cardClassName="border-2 border-accent"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            { id: "1", name: "Eleanor Vance", imageSrc: "https://img.b2bpic.net/free-photo/pretty-charming-blonde-woman-white-blouse-smiles-sincerely_197531-23127.jpg", imageAlt: "Portrait of Eleanor Vance" },
            { id: "2", name: "Marcus Thorne", imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-businessman-sitting-chair-waiting-area_107420-95804.jpg", imageAlt: "Portrait of Marcus Thorne" },
            { id: "3", name: "Isabelle Dubois", imageSrc: "https://img.b2bpic.net/free-photo/mother-daughter-using-digital-tablet-bedroom_1170-2784.jpg", imageAlt: "Portrait of Isabelle Dubois" },
            { id: "4", name: "Liam O'Connell", imageSrc: "https://img.b2bpic.net/free-photo/flirting-couple-with-sparkling-wine-roof_1153-3776.jpg", imageAlt: "Portrait of Liam O'Connell" },
            { id: "5", name: "Sophia Rodriguez", imageSrc: "https://img.b2bpic.net/free-photo/pretty-charming-blonde-woman-white-blouse-smiles-sincerely_197531-23127.jpg", imageAlt: "Portrait of Sophia Rodriguez" },
          ]}
          cardTitle="Our guests consistently rave about their extraordinary experiences at The Grand Hotel."
          cardTag="What Our Guests Say"
          cardAnimation="blur-reveal"
          useInvertedBackground={false}
          ariaLabel="Testimonials from satisfied guests"
          cardClassName="border-2 border-accent"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted by Leading Travel & Lifestyle Publications"
          description="We are honored to be recognized and partnered with the best in the industry, ensuring a standard of excellence for our guests."
          names={["Luxury Travel Magazine", "Hotel Awards", "Gourmet Dining Guide", "Event Planning Partner", "Tourism Board", "Wedding Planner", "Conference Organizer"]}
          logos={[
            "https://img.b2bpic.net/free-vector/green-logo-design_53876-91712.jpg",            "https://img.b2bpic.net/free-vector/gradient-golden-luxury-badge-pack_23-2149044199.jpg",            "https://img.b2bpic.net/free-vector/restaurant-retro-logo-collection_23-2148359162.jpg",            "https://img.b2bpic.net/free-vector/luxurious-golden-logo-template_23-2148843538.jpg",            "https://img.b2bpic.net/free-vector/flat-vintage-travel-label-set_52683-11164.jpg",            "https://img.b2bpic.net/free-vector/linear-flat-wedding-monograms-collection_23-2148983859.jpg",            "https://img.b2bpic.net/free-vector/flat-design-business-workshop-labels-template_23-2149412868.jpg"
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          tag="Our Partners & Accolades"
          tagAnimation="blur-reveal"
          buttonAnimation="blur-reveal"
          speed={30}
          showCard={true}
          textBoxTitleClassName="text-foreground"
          textBoxDescriptionClassName="text-foreground"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Find answers to common questions about your stay, bookings, and our services."
          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 transportation?", content: "Yes, we offer complimentary airport shuttle services for our guests. Please arrange your pick-up or drop-off with our concierge service at least 24 hours in advance." },
            { id: "faq-3", title: "Is Wi-Fi available throughout the hotel?", content: "Complimentary high-speed Wi-Fi is available in all guest rooms and public areas of The Grand Hotel." },
            { id: "faq-4", title: "Are pets allowed?", content: "Unfortunately, The Grand Hotel does not accommodate pets, with the exception of service animals." },
          ]}
          faqsAnimation="blur-reveal"
          useInvertedBackground={false}
          textPosition="left"
          animationType="smooth"
          showCard={true}
          sideTitleClassName="text-foreground"
          sideDescriptionClassName="text-foreground"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Connect With Us"
          title="Ready for an Unforgettable Stay?"
          description="Our dedicated team is here to assist you with reservations, special requests, and any inquiries you may have. We look forward to welcoming you."
          buttons={[
            { text: "Book Now", href: "#hero" },
            { text: "Call Us", href: "tel:+1234567890" },
          ]}
          background={{ variant: 'plain' }}
          useInvertedBackground={false}
          tagAnimation="blur-reveal"
          buttonAnimation="blur-reveal"
          titleClassName="text-foreground"
          descriptionClassName="text-foreground"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            { title: "Explore", items: [{ label: "Rooms & Suites", href: "#rooms" }, { label: "Amenities", href: "#features" }, { label: "Gallery", href: "#hero" }] },
            { title: "Services", items: [{ label: "Dining", href: "#hero" }, { label: "Spa", href: "#features" }, { label: "Events" }] },
            { title: "About", items: [{ label: "Our Story", href: "#about" }, { label: "Careers" }, { label: "Press" }] },
            { title: "Legal", items: [{ label: "Privacy Policy" }, { label: "Terms of Service" }] },
          ]}
          bottomLeftText="© 2024 The Grand Hotel. All rights reserved."
          bottomRightText="Crafted with Distinction"
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}
