"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Leaf, Crown, Sparkles, Waves, TrendingUp, Heart, HelpCircle } from 'lucide-react';

export default function LuxuryJungleEscapePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Luxury Jungle Escape"
          navItems={[
            { name: "Experiences", id: "services" },
            { name: "The Retreat", id: "about" },
            { name: "Amenities", id: "experience" },
            { name: "Guest Stories", id: "testimonials" },
            { name: "Information", id: "faq" },
            { name: "Reservations", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Welcome to Luxury Redefined"
          description="Escape into a world where modern sophistication meets untamed natural beauty. Our exclusive jungle mansion retreat offers unparalleled luxury, world-class amenities, and transformative experiences in a setting of extraordinary elegance and serenity."
          tag="Exclusive Luxury Retreat"
          tagIcon={Crown}
          buttons={[
            { text: "Reserve Your Escape", href: "#contact" },
            { text: "Explore Experiences", href: "#services" }
          ]}
          carouselItems={[
            {
              id: "1",              imageSrc: "asset://hero-image-1",              imageAlt: "Modern luxury mansion overlooking jungle canopy"
            },
            {
              id: "2",              imageSrc: "asset://hero-image-2",              imageAlt: "Sophisticated interior with natural wood and stone"
            },
            {
              id: "3",              imageSrc: "asset://hero-image-3",              imageAlt: "Infinity pool merging with jungle landscape"
            },
            {
              id: "4",              imageSrc: "asset://hero-image-4",              imageAlt: "Luxury spa sanctuary with waterfall features"
            },
            {
              id: "5",              imageSrc: "asset://hero-image-5",              imageAlt: "Private dining pavilion overlooking nature"
            },
            {
              id: "6",              imageSrc: "asset://hero-image-6",              imageAlt: "Evening ambiance with elegant lighting and tropical setting"
            }
          ]}
          autoPlay={true}
          autoPlayInterval={5000}
          containerClassName="w-full"
          titleClassName="text-8xl md:text-9xl font-bold"
          ariaLabel="Luxury Jungle Escape hero section with mansion imagery carousel"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "A Sanctuary of" },
            { type: "image", src: "asset://leaf-accent", alt: "Elegant leaf motif" },
            { type: "text", content: "Modern Elegance" }
          ]}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Discover the Retreat", href: "#services" },
            { text: "Plan Your Visit", href: "#contact" }
          ]}
          ariaLabel="About our luxury jungle escape mansion retreat"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentyOne
          title="Curated Experiences"
          description="Immerse yourself in bespoke luxury experiences designed for the most discerning travelers. From rejuvenating wellness rituals to gourmet culinary journeys, each moment is crafted to exceed expectations."
          tag="Premium Amenities"
          tagIcon={Sparkles}
          imageSrc="asset://service-image-1"
          imageAlt="Luxury wellness spa with natural materials and ambient lighting"
          mediaPosition="right"
          useInvertedBackground="invertDefault"
          accordionItems={[
            {
              id: "1",              title: "Private Spa & Wellness",              content: "Experience world-class spa treatments in our open-air sanctuary. Ancient healing traditions meet modern luxury with organic products, expert therapists, and a setting that soothes the soul."
            },
            {
              id: "2",              title: "Gourmet Culinary Arts",              content: "Our Michelin-trained chefs craft personalized menus using finest ingredients and locally-sourced jungle botanicals. Dine in intimate settings with natural vistas or private pavilions overlooking the landscape."
            },
            {
              id: "3",              title: "Infinity Pools & Water Gardens",              content: "Dive into luxury at our private infinity pools that seem to merge with the jungle. Natural thermal springs and cascading waterfall features create an immersive aquatic paradise."
            },
            {
              id: "4",              title: "Guided Nature Journeys",              content: "Expert naturalists lead exclusive excursions through pristine jungle trails, wildlife viewing, botanical explorations, and transformative forest bathing sessions in complete harmony with nature."
            },
            {
              id: "5",              title: "Luxury Accommodations",              content: "Each suite is a masterpiece of modern architecture seamlessly integrated into the landscape. Private pools, premium bedding, smart home technology, and panoramic views define our world-class rooms."
            }
          ]}
          buttons={[
            { text: "Book Your Experience", href: "#contact" }
          ]}
          ariaLabel="Premium luxury experiences and amenities"
        />
      </div>

      <div id="experience" data-section="experience">
        <MetricCardTwo
          title="The Luxury Difference"
          description="Our commitment to excellence is reflected in every aspect of your stay, from personalized service to architectural innovation and environmental stewardship."
          tag="By The Numbers"
          tagIcon={TrendingUp}
          metrics={[
            { id: "1", value: "5000+", description: "Hours of Design Craftsmanship" },
            { id: "2", value: "98%", description: "Guest Return Rate" },
            { id: "3", value: "24/7", description: "Concierge Excellence" },
            { id: "4", value: "20+", description: "Bespoke Services" }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          ariaLabel="Luxury retreat excellence metrics"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Alexandra Sterling",              imageSrc: "asset://guest-image-1",              imageAlt: "Alexandra Sterling"
            },
            {
              id: "2",              name: "Victoria Beaumont",              imageSrc: "asset://guest-image-2",              imageAlt: "Victoria Beaumont"
            },
            {
              id: "3",              name: "Natasha Mendez",              imageSrc: "asset://guest-image-3",              imageAlt: "Natasha Mendez"
            },
            {
              id: "4",              name: "Catherine Laurent",              imageSrc: "asset://guest-image-4",              imageAlt: "Catherine Laurent"
            }
          ]}
          cardTitle="Discover why the world's most discerning travelers choose our exclusive jungle escape for transformative luxury experiences."
          cardTag="Guest Testimonials"
          cardTagIcon={Heart}
          useInvertedBackground="invertDefault"
          ariaLabel="Luxury guest testimonials and experiences"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Planning Your Escape"
          description="Find comprehensive information about reservations, accommodations, services, and what to expect during your luxury jungle retreat experience."
          tag="Frequently Asked"
          tagIcon={HelpCircle}
          imageSrc="asset://faq-image-1"
          imageAlt="Tranquil jungle pool with ambient evening lighting"
          mediaPosition="left"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",              title: "What is the best time to visit?",              content: "Our retreat operates year-round with each season offering unique experiences. Dry season (November-April) provides clear skies and optimal wildlife viewing. Wet season (May-October) showcases dramatic jungle verdancy and offers exclusive rates for adventurous travelers."
            },
            {
              id: "2",              title: "How do I make a reservation?",              content: "Reservations can be made through our website, by calling our concierge team at +1-800-LUXURY-1, or via email at reservations@luxuryjungleescape.com. We recommend booking 3-6 months in advance for peak seasons. Our team handles all arrangements including flights."
            },
            {
              id: "3",              title: "What are your accommodation options?",              content: "We offer five exquisite suite categories: Forest View Suites, Jungle Premier Suites with private infinity pools, The Mansion Master Suite, and exclusive private villas. Each features cutting-edge amenities, bespoke décor, and unparalleled natural vistas."
            },
            {
              id: "4",              title: "Are meals included in my stay?",              content: "Gourmet breakfast and afternoon tea are complimentary. Lunch and dinner can be customized through our à la carte menu or arranged as multi-course tasting menus. Dietary preferences and restrictions are accommodated with advance notice."
            },
            {
              id: "5",              title: "What activities and excursions are available?",              content: "Activities include guided jungle treks, wildlife photography safaris, spa treatments, yoga sessions, culinary classes, private pool time, wellness consultations, and bespoke adventure planning. All activities are customized to your preferences and fitness level."
            },
            {
              id: "6",              title: "Is transportation provided?",              content: "Yes. Complimentary transportation from the nearest international airport is included. We arrange helicopter transfers, private car services, and guided journey options to make your arrival seamless and memorable."
            }
          ]}
          ariaLabel="FAQ about luxury retreat reservations and services"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Begin Your Transformation"
          description="Ready to escape into unparalleled luxury? Contact our concierge team to reserve your exclusive jungle mansion experience. We'll curate every detail of your unforgettable retreat."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true },
            { name: "dates", type: "text", placeholder: "Preferred Dates", required: false },
            { name: "interests", type: "text", placeholder: "Interests & Preferences", required: false }
          ]}
          textarea={{ name: "message", placeholder: "Tell us about your vision for the perfect luxury escape...", rows: 5, required: true }}
          useInvertedBackground="invertDefault"
          imageSrc="asset://contact-image-1"
          imageAlt="Moonlit mansion courtyard with sophisticated ambient lighting"
          mediaPosition="right"
          buttonText="Reserve Your Escape"
          ariaLabel="Contact form to reserve luxury jungle escape experience"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Luxury Jungle Escape"
          columns={[
            {
              items: [
                { label: "Experiences", href: "services" },
                { label: "Accommodations", href: "about" },
                { label: "Amenities", href: "experience" },
                { label: "Reservations", href: "contact" }
              ]
            },
            {
              items: [
                { label: "Wellness & Spa", href: "services" },
                { label: "Culinary Excellence", href: "services" },
                { label: "Nature Journeys", href: "services" },
                { label: "Concierge Services", href: "contact" }
              ]
            },
            {
              items: [
                { label: "Jungle Sanctuary Location", href: "#" },
                { label: "Costa Rica", href: "#" },
                { label: "+1-800-LUXURY-1", href: "tel:+1-800-LUXURY-1" },
                { label: "reservations@luxuryjungleescape.com", href: "mailto:reservations@luxuryjungleescape.com" }
              ]
            },
            {
              items: [
                { label: "Instagram", href: "https://instagram.com/luxuryjungleescape" },
                { label: "Policies", href: "#" },
                { label: "Privacy", href: "#" },
                { label: "Sustainability", href: "#" }
              ]
            }
          ]}
          ariaLabel="Luxury Jungle Escape footer navigation"
        />
      </div>
    </ThemeProvider>
  );
}
