"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Compass } from "lucide-react";

export default function TravelPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="largeSmall"
      background="floatingGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Wanderlust"
          navItems={[
            { name: "Destinations", id: "destinations" },
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Book Now", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          background={{ variant: "radial-gradient" }}
          title="Discover Your Next Adventure"
          description="Explore the world's most captivating destinations with expert guidance and unforgettable experiences crafted just for you."
          tag="Travel Beyond Limits"
          tagIcon={Compass}
          imageSrc="https://img.b2bpic.net/free-photo/young-woman-traveler-journey-concept_53876-15952.jpg"
          imageAlt="Beautiful travel destination with mountains and ocean"
          buttons={[
            { text: "Explore Destinations", href: "destinations" },
            { text: "Get Started" }
          ]}
        />
      </div>

      <div id="destinations" data-section="destinations">
        <ProductCardFour
          title="Featured Destinations"
          description="Handpicked locations offering unforgettable experiences, from pristine beaches to vibrant urban adventures."
          tag="Top Picks"
          textboxLayout="default"
          useInvertedBackground={false}
          products={[
            {
              id: "1",              name: "Bali Retreat",              price: "$1,299",              variant: "7-10 Days  All-Inclusive",              imageSrc: "https://img.b2bpic.net/free-photo/young-handsome-bearded-man-traveler-by-ocean-atuh-beach-nusa-penida-island-indonesia-travel-concept-indonesia_1321-1944.jpg",              imageAlt: "Bali tropical destination"
            },
            {
              id: "2",              name: "Paris Romance",              price: "$1,499",              variant: "5-7 Days  Luxury Package",              imageSrc: "https://img.b2bpic.net/free-photo/young-beautiful-woman-is-walking-paris-photo-background-eiffel-tower-happy-travel-photo-concept_1321-3506.jpg",              imageAlt: "Paris romantic getaway"
            },
            {
              id: "3",              name: "Tokyo Experience",              price: "$1,399",              variant: "6-8 Days  Cultural Tour",              imageSrc: "https://img.b2bpic.net/free-photo/fantastic-cityscape-with-skyscrapers-trees_1203-2007.jpg",              imageAlt: "Tokyo modern city tour"
            },
            {
              id: "4",              name: "Morocco Desert",              price: "$1,199",              variant: "5-6 Days  Adventure Pack",              imageSrc: "https://img.b2bpic.net/free-photo/shadows-camels-sahara-desert-merzouga_661209-129.jpg",              imageAlt: "Morocco Sahara desert experience"
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardSeven
          title="Why Choose Us"
          description="Experience world-class travel services with personalized attention and expert local knowledge."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="blur-reveal"
          features={[
            {
              id: 1,
              title: "Expert Local Guides",              description: "Our knowledgeable guides provide insider access to hidden gems and authentic cultural experiences.",              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-traveler-journey-concept_53876-15952.jpg"
            },
            {
              id: 2,
              title: "Customized Itineraries",              description: "Every journey is tailored to your interests, budget, and travel style for a truly personalized adventure.",              imageSrc: "https://img.b2bpic.net/free-photo/young-handsome-bearded-man-traveler-by-ocean-atuh-beach-nusa-penida-island-indonesia-travel-concept-indonesia_1321-1944.jpg"
            },
            {
              id: 3,
              title: "24/7 Support",              description: "Our dedicated team is always available to assist you before, during, and after your trip.",              imageSrc: "https://img.b2bpic.net/free-photo/young-beautiful-woman-is-walking-paris-photo-background-eiffel-tower-happy-travel-photo-concept_1321-3506.jpg"
            },
            {
              id: 4,
              title: "Best Price Guarantee",              description: "We offer competitive rates with exclusive deals and flexible payment plans for all budgets.",              imageSrc: "https://img.b2bpic.net/free-photo/fantastic-cityscape-with-skyscrapers-trees_1203-2007.jpg"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="This travel agency transformed my dream vacation into reality. Every detail was perfectly planned, and the local guides made the experience truly unforgettable. I've already booked my next adventure with them!"
          rating={5}
          author="Sarah Martinez"
          useInvertedBackground={false}
          avatars={[
            {
              src: "https://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg",              alt: "Sarah Martinez"
            },
            {
              src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "John Davis"
            },
            {
              src: "https://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg",              alt: "Emma Wilson"
            },
            {
              src: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              alt: "Michael Chen"
            }
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Our Track Record"
          description="Trusted by thousands of travelers worldwide to create unforgettable journeys."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "50K+",              title: "Happy Travelers",              items: ["98% satisfaction rate", "Average 4.9/5 stars", "Repeat customer base"]
            },
            {
              id: "2",              value: "150+",              title: "Destinations Covered",              items: ["6 continents", "Local partnerships", "Exclusive access"]
            },
            {
              id: "3",              value: "20+",              title: "Years Experience",              items: ["Industry leaders", "Award winners", "Proven expertise"]
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about our travel packages and services."
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          faqs={[
            {
              id: "1",              title: "What is included in your travel packages?",              content: "Our comprehensive packages typically include accommodation, guided tours, transportation, and many meals. Each package can be customized based on your preferences and budget. We'll provide a detailed itinerary breakdown before you book."
            },
            {
              id: "2",              title: "How far in advance should I book?",              content: "We recommend booking 2-3 months in advance for popular destinations, though we can often accommodate last-minute requests. Peak seasons may require earlier bookings for the best rates and availability."
            },
            {
              id: "3",              title: "Do you offer travel insurance?",              content: "Yes, we partner with reputable travel insurance providers to offer comprehensive coverage options. We can help you select the right plan based on your destination and travel duration."
            },
            {
              id: "4",              title: "What is your cancellation policy?",              content: "Our flexible cancellation policy allows free cancellations up to 30 days before travel. Closer to your departure date, fees may apply. Travel insurance can provide additional protection for cancellations."
            },
            {
              id: "5",              title: "Are group discounts available?",              content: "Absolutely! Groups of 8 or more qualify for special discounts. We also offer custom group itineraries tailored to your team's interests and objectives."
            },
            {
              id: "6",              title: "Do you arrange visas and documentation?",              content: "We provide guidance on visa requirements for your destination and can recommend trusted visa services. Our team will help you understand all documentation needs for a smooth travel experience."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get In Touch"
          title="Ready to Plan Your Journey?"
          description="Contact our travel experts today to start planning your dream vacation. We'll work with you to create an unforgettable experience tailored to your wishes."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          imageSrc="https://img.b2bpic.net/free-photo/flat-lay-map-magnifier-documents-cup-coffee-hands-woman_169016-16629.jpg"
          imageAlt="World map travel planning"
          inputPlaceholder="your@email.com"
          buttonText="Subscribe"
          termsText="We respect your privacy and will only send travel inspiration and special offers."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-vector/earth-map-dotted_1284-34073.jpg"
          imageAlt="World map background"
          logoText="Wanderlust"
          copyrightText="© 2025 Wanderlust Travel Agency. All rights reserved."
          columns={[
            {
              title: "Services",              items: [
                { label: "Destinations", href: "#destinations" },
                { label: "Custom Tours", href: "#services" },
                { label: "Group Travel", href: "#" },
                { label: "Adventure Packages", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Team", href: "#" },
                { label: "Testimonials", href: "#testimonials" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact", href: "#contact" },
                { label: "FAQ", href: "#faq" },
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}