"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import SplitAboutMetric from '@/components/sections/about/SplitAboutMetric';
import ProductCardSix from '@/components/sections/product/ProductCardSix';
import FeatureCardFourteen from '@/components/sections/feature/FeatureCardFourteen';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Phone } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="medium"
      background="grid"
      cardStyle="solid-accent-light"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          brandName="Luxe Stay"
          navItems={[
            {"name": "Rooms", "id": "rooms"},
            {"name": "Amenities", "id": "amenities"},
            {"name": "About", "id": "about"},
            {"name": "Reviews", "id": "reviews"},
            {"name": "Contact", "id": "contact"}
          ]}
          button={{"text": "Book Now", "href": "contact"}}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroBillboardScroll 
          title="Experience Luxury Hospitality"
          description="Discover our world-class hotel with premium rooms, exceptional service, and unforgettable experiences"
          tag="Five-Star Accommodation"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg"
          imageAlt="Luxury hotel lobby with elegant design"
          buttons={[
            {"text": "Book Your Stay", "href": "contact"},
            {"text": "Explore Rooms", "href": "rooms"}
          ]}
        />
      </div>
      
      <div id="about" data-section="about">
        <SplitAboutMetric 
          title="A Haven of Comfort and Elegance"
          description={[
            "For over two decades, Luxe Stay has been the premier destination for discerning travelers seeking exceptional hospitality. Our commitment to excellence is reflected in every aspect of our service, from our meticulously designed rooms to our award-winning culinary experiences. We pride ourselves on creating memorable moments that guests will cherish for a lifetime."
          ]}
          metrics={[
            {"label": "Premium Rooms", "value": "250+"},
            {"label": "Years of Excellence", "value": "20+"}
          ]}
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="rooms" data-section="rooms">
        <ProductCardSix 
          title="Our Room Collection"
          description="Choose from our curated selection of luxurious rooms and suites, each designed with your comfort in mind"
          products={[
            {"id": "1", "name": "Deluxe Room", "price": "$199/night", "imageSrc": "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766452376695-4rxtbd0x.jpg", "imageAlt": "Deluxe hotel room with king bed"},
            {"id": "2", "name": "Premium Suite", "price": "$349/night", "imageSrc": "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg", "imageAlt": "Luxury suite with living area"},
            {"id": "3", "name": "Standard Room", "price": "$129/night", "imageSrc": "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185878910-obewt98e.jpg", "imageAlt": "Standard room with modern amenities"}
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="amenities" data-section="amenities">
        <FeatureCardFourteen 
          title="World-Class Amenities"
          description="Indulge in our exceptional facilities designed for relaxation, wellness, and entertainment"
          features={[
            {"id": "1", "title": "Olympic Pool", "description": "Relax by our stunning heated pool with panoramic views", "imageSrc": "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184721770-arv4645s.jpg", "imageAlt": "Resort swimming pool"},
            {"id": "2", "title": "Spa & Wellness", "description": "Rejuvenate with our full-service spa and wellness center", "imageSrc": "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184722691-mip9ww4c.jpg", "imageAlt": "Luxury spa facility"},
            {"id": "3", "title": "Fine Dining", "description": "Savor culinary excellence at our award-winning restaurants", "imageSrc": "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766849142731-hp8i7zi3.jpg", "imageAlt": "Upscale restaurant dining"},
            {"id": "4", "title": "Fitness Center", "description": "State-of-the-art equipment for your wellness goals", "imageSrc": "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766843736372-3ltc72sy.jpg", "imageAlt": "Modern fitness center"}
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="reviews" data-section="reviews">
        <TestimonialCardFifteen 
          testimonial="Luxe Stay exceeded all my expectations. The service was impeccable, the rooms were immaculate, and the views were breathtaking. I cannot wait to return and recommend this hotel to everyone I know."
          rating={5}
          author="Sarah Mitchell, Travel Enthusiast"
          avatars={[
            {"src": "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183587552-1pqoe5c0.jpg", "alt": "Guest Sarah Mitchell"},
            {"src": "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766154635301-vse33sxl.jpg", "alt": "Guest review"},
            {"src": "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183841431-v1xtegko.jpg", "alt": "Guest review"},
            {"src": "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766182321167-i4kvpj5f.jpg", "alt": "Guest review"},
            {"src": "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183842429-uezzjpov.jpg", "alt": "Guest review"},
            {"src": "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg", "alt": "Guest review"}
          ]}
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="faq" data-section="faq">
        <FaqSplitMedia 
          title="Frequently Asked Questions"
          description="Find answers to common questions about your stay with us"
          faqs={[
            {"id": "1", "title": "What time is check-in and check-out?", "content": "Standard check-in is at 3:00 PM and check-out is at 11:00 AM. Early check-in and late check-out are available upon request subject to availability."},
            {"id": "2", "title": "Do you offer airport transportation?", "content": "Yes, we provide complimentary airport shuttle service for all guests. Please arrange pickup details at the front desk or contact us in advance."},
            {"id": "3", "title": "What is your cancellation policy?", "content": "Reservations can be cancelled up to 48 hours before arrival for a full refund. Cancellations within 48 hours will be charged one night's rate."},
            {"id": "4", "title": "Are pets allowed?", "content": "We welcome pets with prior arrangement. A pet fee of $50 per stay applies. Please inform us about your pet when making your reservation."},
            {"id": "5", "title": "Is WiFi included?", "content": "High-speed WiFi is complimentary for all guests throughout the hotel including rooms, lobbies, and common areas."}
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg"
          imageAlt="Hotel reception area"
          mediaPosition="right"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactFaq 
          ctaTitle="Ready to Book?"
          ctaDescription="Contact our reservations team to secure your perfect getaway today."
          ctaButton={{"text": "Book Now", "href": "#"}}
          ctaIcon={Phone}
          faqs={[
            {"id": "1", "title": "How do I make a reservation?", "content": "You can book directly through our website, call our reservations line at 1-800-LUXE-STAY, or use popular booking platforms. Our team is available 24/7 to assist you."},
            {"id": "2", "title": "What payment methods do you accept?", "content": "We accept all major credit cards, debit cards, and bank transfers. Payment is required to secure your reservation."},
            {"id": "3", "title": "Can I modify my reservation?", "content": "Yes, you can modify dates and room types up to 48 hours before check-in subject to availability. Contact our reservations team for changes."}
          ]}
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterLogoReveal 
          logoText="Luxe Stay"
        />
      </div>
    </ThemeProvider>
  );
}