"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Star, TrendingUp } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLarge"
      background="blurBottom"
      cardStyle="gradient-mesh"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Rooms", id: "product" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "testimonial" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="Luxury Hotel"
          bottomLeftText="Premium Accommodations"
          bottomRightText="reservations@luxuryhotel.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="Experience Timeless Luxury & Comfort"
          description="Discover our premium accommodations designed to provide the ultimate retreat. From elegant suites to world-class amenities, every moment is crafted for your comfort."
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg", alt: "Guest review" },
            { src: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", alt: "Guest review" },
            { src: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg", alt: "Guest review" }
          ]}
          avatarText="Trusted by 10,000+ satisfied guests"
          buttons={[
            { text: "Book Your Stay", href: "#product" },
            { text: "Explore Amenities", href: "#about" }
          ]}
          background={{ variant: "downward-rays-static" }}
          ariaLabel="Hotel hero section"
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="About Us"
          description={[
            "Established in 1995, our hotel has been welcoming guests with unparalleled service for nearly three decades. We combine classic elegance with modern comfort.",            "To create unforgettable experiences through exceptional hospitality, attention to detail, and a commitment to excellence in every guest interaction.",            "We believe in sustainable practices, cultural appreciation, and ensuring every guest feels valued and cherished during their stay with us."
          ]}
          showBorder={true}
          useInvertedBackground={false}
          buttons={[
            { text: "Learn More", href: "#contact" }
          ]}
          ariaLabel="About section"
        />
      </div>

      <div id="product" data-section="product">
        <ProductCardTwo
          title="Discover Our Room Collection"
          description="Each room is meticulously designed to provide comfort, elegance, and all the amenities you need for a perfect stay."
          tag="Featured Rooms"
          tagIcon={Star}
          products={[
            {
              id: "deluxe-room",              brand: "Premium Collection",              name: "Deluxe Ocean View Suite",              price: "$280/night",              rating: 5,
              reviewCount: "524",              imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg",              imageAlt: "Deluxe Ocean View Suite"
            },
            {
              id: "standard-room",              brand: "Standard Collection",              name: "Elegant Standard Room",              price: "$150/night",              rating: 5,
              reviewCount: "312",              imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg",              imageAlt: "Elegant Standard Room"
            },
            {
              id: "presidential",              brand: "Exclusive Collection",              name: "Presidential Penthouse Suite",              price: "$450/night",              rating: 5,
              reviewCount: "187",              imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg",              imageAlt: "Presidential Penthouse Suite"
            },
            {
              id: "garden-room",              brand: "Premium Collection",              name: "Garden Villa with Terrace",              price: "$320/night",              rating: 5,
              reviewCount: "298",              imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg",              imageAlt: "Garden Villa with Terrace"
            }
          ]}
          gridVariant="bento-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Room collection section"
        />
      </div>

      <div id="metric" data-section="metric">
        <MetricCardOne
          title="Hotel Excellence"
          description="We pride ourselves on delivering exceptional experiences to our guests"
          tag="By The Numbers"
          metrics={[
            { id: "1", value: "98", title: "percent", description: "Guest Satisfaction Rate", icon: TrendingUp },
            { id: "2", value: "25", title: "years", description: "Years of Excellence", icon: TrendingUp },
            { id: "3", value: "150", title: "rooms", description: "Luxury Rooms & Suites", icon: TrendingUp },
            { id: "4", value: "5", title: "stars", description: "Average Rating", icon: TrendingUp }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Hotel metrics section"
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardSix
          title="What Our Guests Say"
          description="Experience genuine testimonials from travelers who've stayed with us"
          tag="Guest Reviews"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              handle: "Luxury Traveler",              testimonial: "An absolutely magnificent hotel! The attention to detail and exceptional service made our anniversary celebration unforgettable. Highly recommended!",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              handle: "Business Executive",              testimonial: "Perfect for business trips. The rooms are spacious, the WiFi is lightning fast, and the restaurant serves incredible cuisine. Will definitely return.",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emily Rodriguez",              handle: "Family Vacationer",              testimonial: "Our kids loved the pool, the staff was incredibly helpful, and the family suites are spacious and comfortable. Best vacation ever!",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",              name: "David Park",              handle: "Adventure Seeker",              testimonial: "The location is perfect for exploring the city, and the hotel's concierge service helped us plan amazing activities. Outstanding experience!",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg",              imageAlt: "David Park"
            },
            {
              id: "5",              name: "Jessica Williams",              handle: "Romance Enthusiast",              testimonial: "This is the perfect destination for a romantic getaway. The sunset views, fine dining, and luxurious spa made it truly special.",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg",              imageAlt: "Jessica Williams"
            },
            {
              id: "6",              name: "Robert Anderson",              handle: "Frequent Guest",              testimonial: "I've stayed at many hotels, but this one consistently exceeds expectations. The staff remembers my preferences, and the quality is unmatched.",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",              imageAlt: "Robert Anderson"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          speed={40}
          ariaLabel="Guest testimonials section"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Special Offers & Packages"
          description="Book your perfect stay with our curated packages designed for every type of traveler"
          tag="Limited Time"
          plans={[
            {
              id: "weekend-escape",              tag: "Weekend Escape",              price: "$350",              period: "/night",              description: "Perfect for a short weekend getaway with special perks",              button: { text: "Book Now", href: "#contact" },
              featuresTitle: "What's Included:",              features: [
                "Deluxe room upgrade",                "Complimentary breakfast",                "Spa credit ($50)",                "Late checkout (2pm)"
              ]
            },
            {
              id: "romantic-package",              tag: "Romance Package",              price: "$420",              period: "/night",              description: "Create unforgettable memories with your special someone",              button: { text: "Book Now", href: "#contact" },
              featuresTitle: "What's Included:",              features: [
                "Oceanview suite",                "Champagne & roses",                "Couples spa treatment",                "Romantic dinner for two"
              ]
            },
            {
              id: "corporate-retreat",              tag: "Corporate Retreat",              price: "$200",              period: "/night",              description: "Ideal for team building and business meetings",              button: { text: "Book Now", href: "#contact" },
              featuresTitle: "What's Included:",              features: [
                "Standard/Deluxe rooms",                "Meeting facilities",                "High-speed WiFi",                "Group dining discounts"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Pricing packages section"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Find answers to common questions about our hotel, rooms, and services"
          tag="Help & Support"
          faqs={[
            {
              id: "1",              title: "What is your cancellation policy?",              content: "We offer flexible cancellation up to 7 days before arrival for a full refund. Cancellations within 7 days may incur a one-night charge. Last-minute bookings have different terms. Contact our reservations team for specific details."
            },
            {
              id: "2",              title: "Do you offer airport transportation?",              content: "Yes! We provide complimentary airport shuttle service for all guests. Simply notify us of your arrival details at least 24 hours in advance. For groups of 6 or more, please arrange directly with our concierge."
            },
            {
              id: "3",              title: "Are pets allowed?",              content: "We welcome well-behaved pets in select rooms. There is a pet fee of $25 per night. Please contact us in advance to arrange pet-friendly accommodations and discuss any specific requirements."
            },
            {
              id: "4",              title: "What amenities are included in room rates?",              content: "All rooms include high-speed WiFi, flat-screen TV, premium toiletries, air conditioning, and access to our fitness center and pool. Room service and some dining options are available for an additional charge."
            },
            {
              id: "5",              title: "Can we arrange special events or celebrations?",              content: "Absolutely! We offer event planning services for weddings, anniversaries, corporate functions, and more. Contact our events team at events@luxuryhotel.com to discuss your special occasion."
            },
            {
              id: "6",              title: "Is there complimentary WiFi?",              content: "Yes, high-speed WiFi is complimentary for all guests throughout the hotel. No password is required in public areas, and room WiFi can be activated by contacting front desk."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/trip-planning-map-others-stuff_53876-138227.jpg"
          imageAlt="Hotel location map"
          mediaPosition="left"
          mediaAnimation="slide-up"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="FAQ section"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to book your dream getaway? Contact our reservations team today and let us create an unforgettable experience for you."
          animationType="entrance-slide"
          buttons={[
            { text: "Reserve Now", href: "https://booking.example.com" },
            { text: "Contact Us", href: "mailto:reservations@luxuryhotel.com" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          ariaLabel="Contact call-to-action section"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Luxury Hotel"
          columns={[
            {
              items: [
                { label: "Home", href: "#hero" },
                { label: "Rooms", href: "#product" },
                { label: "About", href: "#about" },
                { label: "Reviews", href: "#testimonial" }
              ]
            },
            {
              items: [
                { label: "Amenities", href: "#features" },
                { label: "Special Offers", href: "#pricing" },
                { label: "FAQ", href: "#faq" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms & Conditions", href: "#" },
                { label: "Booking Terms", href: "#" },
                { label: "Accessibility", href: "#" }
              ]
            },
            {
              items: [
                { label: "Facebook", href: "https://facebook.com" },
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "LinkedIn", href: "https://linkedin.com" }
              ]
            }
          ]}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}