"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Phone } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeLargeTitles"
      background="animatedGrid"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Luxury Hotel"
          navItems={[
            { name: "Home", id: "home" },
            { name: "Rooms", id: "rooms" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "reviews" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Book Now",
            href: "booking"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Welcome to Luxury Hotel"
          description="Experience world-class hospitality with stunning views, exceptional service, and unforgettable memories"
          tag="Premium Accommodation"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767201173726-lqzk6yht.jpg"
          imageAlt="Luxury hotel exterior and lobby"
          buttons={[
            {
              text: "Book Your Stay",
              href: "booking"
            },
            {
              text: "Explore Rooms",
              href: "rooms"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            {
              type: "text",
              content: "Crafting exceptional experiences for"
            },
            {
              type: "image",
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767201174754-02ukki29.jpg",
              alt: "Hotel lobby"
            },
            {
              type: "text",
              content: "discerning guests since 1995"
            }
          ]}
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "Our Story",
              href: "about"
            },
            {
              text: "Awards & Recognition",
              href: "awards"
            }
          ]}
        />
      </div>

      <div id="rooms" data-section="rooms">
        <FeatureCardTwelve
          title="Our Room Collections"
          description="Choose from our carefully curated selection of rooms and suites designed for your comfort"
          features={[
            {
              id: "deluxe",
              label: "Deluxe",
              title: "Comfort and elegance in every detail",
              items: [
                "King or twin beds",
                "Modern amenities",
                "City or garden views",
                "Work desk area"
              ],
              buttons: [
                {
                  text: "View Details",
                  href: "deluxe"
                }
              ]
            },
            {
              id: "suite",
              label: "Suite",
              title: "Premium space for ultimate luxury",
              items: [
                "Separate living area",
                "Marble bathroom",
                "Premium toiletries",
                "Concierge service"
              ],
              buttons: [
                {
                  text: "View Details",
                  href: "suite"
                }
              ]
            },
            {
              id: "penthouse",
              label: "Penthouse",
              title: "The pinnacle of opulence and grandeur",
              items: [
                "Panoramic views",
                "Private spa",
                "Chef's kitchen",
                "Personal butler service"
              ],
              buttons: [
                {
                  text: "View Details",
                  href: "penthouse"
                }
              ]
            }
          ]}
          animationType="opacity"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Why Choose Us"
          description="Industry-leading hospitality with proven excellence"
          metrics={[
            {
              id: "1",
              value: "28+",
              title: "Years of Excellence",
              items: [
                "Established 1995",
                "Continuous innovation",
                "Trust and reliability"
              ]
            },
            {
              id: "2",
              value: "450+",
              title: "Luxury Rooms",
              items: [
                "Premium suites",
                "Modern facilities",
                "Guest satisfaction guaranteed"
              ]
            },
            {
              id: "3",
              value: "98%",
              title: "Guest Satisfaction",
              items: [
                "Consistent ratings",
                "Award-winning service",
                "Repeat clientele"
              ]
            },
            {
              id: "4",
              value: "5★",
              title: "Critical Acclaim",
              items: [
                "International awards",
                "Media recognition",
                "Industry leadership"
              ]
            }
          ]}
          animationType="slide-up"
          gridVariant="four-items-2x2-equal-grid"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEight
          title="Guest Experiences"
          description="Hear from our satisfied guests about their unforgettable stays"
          testimonials={[
            {
              id: "1",
              name: "Margaret Johnson",
              role: "Travel Enthusiast",
              company: "New York",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766810996198-rgoz7x9l.jpg",
              imageAlt: "Margaret Johnson"
            },
            {
              id: "2",
              name: "David Chen",
              role: "Business Executive",
              company: "San Francisco",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163678723-295psgl3.jpg",
              imageAlt: "David Chen"
            },
            {
              id: "3",
              name: "Sophie Laurent",
              role: "Designer",
              company: "Paris",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184724760-wxlm9bjg.jpg",
              imageAlt: "Sophie Laurent"
            },
            {
              id: "4",
              name: "James Wilson",
              role: "Corporate Director",
              company: "London",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766810997055-ljmx5kmk.jpg",
              imageAlt: "James Wilson"
            },
            {
              id: "5",
              name: "Elena Rodriguez",
              role: "Honeymoon Guest",
              company: "Barcelona",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766810996198-rgoz7x9l.jpg",
              imageAlt: "Elena Rodriguez"
            },
            {
              id: "6",
              name: "Thomas Anderson",
              role: "Frequent Guest",
              company: "Chicago",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163678723-295psgl3.jpg",
              imageAlt: "Thomas Anderson"
            }
          ]}
          textboxLayout="default"
          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 are your check-in and check-out times?",
              content: "Check-in is available from 3:00 PM and check-out is at 11:00 AM. Early check-in and late check-out may be available upon request based on room availability."
            },
            {
              id: "2",
              title: "Do you offer airport transportation?",
              content: "Yes, we provide complimentary airport shuttle service for all guests. Please arrange this when making your reservation or contact our concierge upon arrival."
            },
            {
              id: "3",
              title: "What amenities are included in the room rate?",
              content: "All room rates include complimentary WiFi, fitness center access, business center, and access to our spa facilities. Premium rooms include additional amenities such as free breakfast and parking."
            },
            {
              id: "4",
              title: "Can I cancel my reservation?",
              content: "Cancellations made 48 hours before arrival receive a full refund. Cancellations within 48 hours of arrival will incur a one-night charge. Early bird bookings may have different cancellation policies."
            },
            {
              id: "5",
              title: "Do you have meeting and event facilities?",
              content: "Yes, we feature over 5,000 square feet of flexible event space suitable for conferences, weddings, and celebrations. Contact our events team for customized packages."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184711453-096e89ja.jpg"
          imageAlt="Hotel concierge desk"
          mediaPosition="left"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to book your stay?"
          ctaDescription="Contact our reservations team for personalized assistance and special offers"
          ctaButton={{
            text: "Contact Reservations",
            href: "https://example.com/contact"
          }}
          ctaIcon={Phone}
          faqs={[
            {
              id: "1",
              title: "What payment methods do you accept?",
              content: "We accept all major credit cards, digital wallets, and bank transfers. A valid credit card is required at booking to secure your reservation."
            },
            {
              id: "2",
              title: "Are pets allowed?",
              content: "We welcome well-behaved pets in select rooms. A pet fee of $50 per night applies. Please notify us at booking or call ahead to arrange pet-friendly accommodation."
            },
            {
              id: "3",
              title: "Do you offer loyalty programs?",
              content: "Yes, our VIP Club offers exclusive benefits including room upgrades, late checkout, and discounted rates. Enroll during your stay or sign up online."
            }
          ]}
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Luxury Hotel"
          columns={[
            {
              title: "Rooms",
              items: [
                { label: "Deluxe Rooms", href: "#rooms" },
                { label: "Suites", href: "#rooms" },
                { label: "Penthouse", href: "#rooms" },
                { label: "Room Amenities", href: "#amenities" }
              ]
            },
            {
              title: "Services",
              items: [
                { label: "Spa & Wellness", href: "#spa" },
                { label: "Fine Dining", href: "#dining" },
                { label: "Event Services", href: "#events" },
                { label: "Concierge", href: "#concierge" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "#about" },
                { label: "Careers", href: "#careers" },
                { label: "Blog", href: "#blog" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Terms of Service", href: "/terms" },
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Cookie Policy", href: "/cookies" },
                { label: "Accessibility", href: "/accessibility" }
              ]
            }
          ]}
          copyrightText="© 2025 Luxury Hotel. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}