"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoCarousel from '@/components/sections/hero/HeroLogoCarousel';
import AboutPhoneTimeline from '@/components/sections/about/AboutPhoneTimeline';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Phone } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="smallMedium"
      sizing="large"
      background="aurora"
      cardStyle="elevated-accent"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Luxe Hotel"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Rooms", id: "feature" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "testimonial" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Book Now",
            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoCarousel
          logoText="Luxe Hotel"
          description="Experience timeless elegance and world-class hospitality at our five-star luxury hotel. Discover comfort, refinement, and unforgettable moments."
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg",
              imageAlt: "Grand hotel lobby with elegant design"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766452376695-4rxtbd0x.jpg",
              imageAlt: "Luxurious suite bedroom with premium furnishings"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg",
              imageAlt: "Resort pool area with spa facilities"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184721770-arv4645s.jpg",
              imageAlt: "Fine dining restaurant interior"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185878910-obewt98e.jpg",
              imageAlt: "Luxury hotel exterior architecture"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184722691-mip9ww4c.jpg",
              imageAlt: "Professional concierge service"
            }
          ]}
          logoLineHeight={1.1}
          ariaLabel="Luxe Hotel hero section"
        />
      </div>

      <div id="about" data-section="about">
        <AboutPhoneTimeline
          tag="Our Mission"
          title="Redefining Hospitality Excellence"
          description="At Luxe Hotel, we believe every stay should be a memorable journey. Our commitment to exceptional service, luxurious accommodations, and thoughtful attention to detail sets us apart. We create moments that guests cherish long after they leave."
          phoneOne={{
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766242509936-5sra46kr.jpg",
            imageAlt: "Hotel booking app interface"
          }}
          phoneTwo={{
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766347536220-k0f3hjlf.jpg",
            imageAlt: "Reservation management app"
          }}
          textboxLayout="default"
          buttons={[
            { text: "Book Your Stay", href: "contact" },
            { text: "Learn More", href: "#" }
          ]}
          useInvertedBackground="noInvert"
          ariaLabel="About our hotel mission"
        />
      </div>

      <div id="feature" data-section="feature">
        <FeatureCardNineteen
          tag="Room Types"
          title="Discover Our Collection"
          description="From cozy comfort to ultimate luxury, we offer room types to suit every traveler's needs."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              tag: "Comfort",
              title: "Standard Room",
              subtitle: "Perfect for solo travelers and couples",
              description: "Our Standard Rooms offer contemporary comfort with essential amenities. Each room features a comfortable bed, modern bathroom, high-speed WiFi, and a work desk. Enjoy city views and access to all hotel facilities.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766849142731-hp8i7zi3.jpg",
              imageAlt: "Standard room accommodation"
            },
            {
              id: 2,
              tag: "Premium",
              title: "Deluxe Room",
              subtitle: "Spacious luxury for discerning guests",
              description: "Deluxe Rooms provide extra space and enhanced amenities. Features include premium bedding, marble bathroom with rainfall shower, sitting area, and exclusive access to our club lounge. Perfect for extended stays.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766843736372-3ltc72sy.jpg",
              imageAlt: "Deluxe room with luxury amenities"
            },
            {
              id: 3,
              tag: "Ultimate",
              title: "Penthouse Suite",
              subtitle: "The pinnacle of luxury hospitality",
              description: "Our Penthouse Suite is the crown jewel of accommodation. Featuring panoramic views, separate living and sleeping areas, private spa bath, premium service, and butler assistance. An unparalleled experience.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766854198888-392pi2tb.jpg",
              imageAlt: "Penthouse suite with luxury furnishings"
            },
            {
              id: 4,
              tag: "Wellness",
              title: "Spa Suite",
              subtitle: "Rejuvenation and relaxation combined",
              description: "Spa Suites integrate luxury accommodation with wellness features. Includes hydrotherapy bathtub, sauna access, spa treatments, and wellness consultations. Designed for ultimate relaxation and renewal.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767006036722-1o803gi1.jpg",
              imageAlt: "Spa suite with wellness features"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardNine
          tag="Room Rates"
          title="Our Room Packages"
          description="Transparent pricing for world-class accommodations. Rates include breakfast, WiFi, and access to all hotel facilities."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          plans={[
            {
              id: "standard",
              title: "Standard Room",
              price: "$149",
              period: "/night",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767006037732-pjwx8627.jpg",
              imageAlt: "Standard room image",
              button: {
                text: "Reserve Room",
                href: "contact"
              },
              features: [
                "Queen or twin beds",
                "Modern bathroom",
                "High-speed WiFi",
                "Work desk and chair",
                "City or garden view",
                "24-hour room service"
              ]
            },
            {
              id: "deluxe",
              title: "Deluxe Room",
              price: "$249",
              period: "/night",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767006038597-n7qc8lnx.jpg",
              imageAlt: "Deluxe room image",
              button: {
                text: "Reserve Room",
                href: "contact"
              },
              features: [
                "King bed with luxury linens",
                "Marble bathroom with rainfall shower",
                "Sitting area",
                "Club lounge access",
                "Premium toiletries",
                "Concierge service"
              ]
            },
            {
              id: "penthouse",
              title: "Penthouse Suite",
              price: "$549",
              period: "/night",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184199984-xnv4032m.jpg",
              imageAlt: "Penthouse suite image",
              button: {
                text: "Reserve Suite",
                href: "contact"
              },
              features: [
                "Separate living and sleeping areas",
                "Panoramic city views",
                "Private spa bath",
                "Butler service",
                "Premium minibar",
                "Exclusive suite amenities"
              ]
            }
          ]}
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardFifteen
          testimonial="Luxe Hotel exceeded all our expectations. The service was impeccable, the accommodations luxurious, and every detail was thoughtfully attended to. We'll definitely return for our next vacation."
          rating={5}
          author="Sarah Mitchell, Travel Enthusiast"
          avatars={[
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163678723-295psgl3.jpg",
              alt: "Guest review avatar"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184724760-wxlm9bjg.jpg",
              alt: "Guest review avatar"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185880597-ieb2jad3.jpg",
              alt: "Guest review avatar"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185881440-0jwi2e86.jpg",
              alt: "Guest review avatar"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767006040246-qjrduxzp.jpg",
              alt: "Guest review avatar"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg",
              alt: "Guest review avatar"
            }
          ]}
          useInvertedBackground="noInvert"
          ariaLabel="Guest testimonials"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get in Touch"
          description="We'd love to hear from you. Send us a message and our team will respond within 24 hours."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true }
          ]}
          textarea={{
            name: "message",
            placeholder: "Tell us about your inquiry...",
            rows: 5,
            required: true
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg"
          imageAlt="Hotel contact section"
          mediaPosition="right"
          buttonText="Send Message"
          onSubmit={(data) => console.log("Form submitted:", data)}
          ariaLabel="Contact form section"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Hotel",
              items: [
                { label: "About Us", href: "about" },
                { label: "Rooms & Suites", href: "feature" },
                { label: "Amenities", href: "#" },
                { label: "Gallery", href: "#" }
              ]
            },
            {
              title: "Services",
              items: [
                { label: "Room Service", href: "#" },
                { label: "Spa & Wellness", href: "#" },
                { label: "Restaurant", href: "#" },
                { label: "Events & Meetings", href: "#" }
              ]
            },
            {
              title: "Contact",
              items: [
                { label: "Reservations", href: "contact" },
                { label: "Customer Support", href: "#" },
                { label: "Privacy Policy", href: "#" },
                { label: "Terms & Conditions", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Luxe Hotel. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}