"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="medium"
        sizing="medium"
        background="circleGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        { name: "Home", id: "hero" },
        { name: "Destinations", id: "features" },
        { name: "Experiences", id: "metrics" },
        { name: "Contact", id: "contact" }
      ]}
      brandName="Jashn E Safar"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitKpi
      background={{ variant: "gradient-bars" }}
      title="Unfold the world with Jashn E Safar"
      description="Crafting bespoke travel experiences that transcend the ordinary. Every journey is a celebration of discovery and soulful exploration."
      kpis={[
        { value: "500+", label: "Journeys Crafted" },
        { value: "40+", label: "Countries Explored" },
        { value: "99%", label: "Traveler Bliss" }
      ]}
      enableKpiAnimation={true}
      imageSrc="http://img.b2bpic.net/free-photo/morning-mountains-carpathian-ukraine-aerial-view_1153-6119.jpg"
      mediaAnimation="blur-reveal"
      avatars={[
        { src: "http://img.b2bpic.net/free-photo/majestic-mountain-range-tranquil-dusk-orange-horizon-generated-by-ai_188544-15313.jpg", alt: "Traveler 1" },
        { src: "http://img.b2bpic.net/free-photo/majestic-mountain-range-dusk-tranquil-scene-generated-by-ai_188544-33352.jpg", alt: "Traveler 2" },
        { src: "http://img.b2bpic.net/free-photo/beautiful-nature-landscape-with-mountains-lake_23-2150706031.jpg", alt: "Traveler 3" },
        { src: "http://img.b2bpic.net/free-photo/sunset-snowy-mountain-range_23-2152006045.jpg", alt: "Traveler 4" },
        { src: "http://img.b2bpic.net/free-photo/dad-fishing-with-son-lake-yosemite_649448-4206.jpg", alt: "Traveler 5" }
      ]}
      avatarText="Trusted by 5,000+ explorers"
      marqueeItems={[
        { type: "text", text: "Sustainable Travel" },
        { type: "text", text: "Bespoke Routes" },
        { type: "text", text: "Luxury Lodging" },
        { type: "text", text: "Cultural Immersion" },
        { type: "text", text: "Expert Guidance" }
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="split"
      useInvertedBackground={false}
      title="The soul of the journey"
      description="At Jashn E Safar, we believe travel is not just about the destination, but the rhythm of the journey itself. We curate moments of wonder for the modern adventurer."
      bulletPoints={[
        { title: "Bespoke Itineraries", description: "Tailor-made paths designed around your personal wanderlust." },
        { title: "Cultural Immersion", description: "Connect deeply with local traditions and authentic histories." },
        { title: "Expert Guidance", description: "Experienced curators ensuring seamless and safe explorations." }
      ]}
      buttons={[{ text: "Explore Itineraries", href: "#features" }]}
      imageSrc="http://img.b2bpic.net/free-photo/tourism-mountains_1204-485.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={true}
      features={[
        { title: "Cultural Heritage", description: "Uncover hidden histories in ancient landscapes.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-people-with-instruments_23-2149223618.jpg" },
        { title: "Oceanic Escapes", description: "Find peace in pristine tropical havens.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-beach-view-koh-chang-island-seascape-trad-province-eastern-thailand-blue-sky-background_1150-10252.jpg" },
        { title: "Wild Frontiers", description: "Trek through the untouched beauty of nature.", imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-lush-daintree-rainforest-canopy-misty-mountains_1308-189529.jpg" }
      ]}
      title="Curated Experiences"
      description="A diverse collection of travel styles waiting to be explored."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardEleven
      animationType="blur-reveal"
      textboxLayout="split"
      useInvertedBackground={false}
      metrics={[
        { id: "m1", value: "12", title: "Unique Trails", description: "Off-the-beaten-path experiences.", imageSrc: "http://img.b2bpic.net/free-photo/vintage-desk-travel-concept_23-2147791080.jpg" },
        { id: "m2", value: "48", title: "Group Treks", description: "Collective adventures in wild lands.", imageSrc: "http://img.b2bpic.net/free-photo/hikers-traversing-golden-field-sunset_23-2152024905.jpg" },
        { id: "m3", value: "8", title: "Luxury Lodges", description: "Exclusive havens for relaxation.", imageSrc: "http://img.b2bpic.net/free-photo/people-relaxing-countryside_23-2151335888.jpg" }
      ]}
      title="Measured by Moments"
      description="Our passion reflected in the numbers we touch."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={true}
      testimonials={[
        { id: "1", name: "Sarah Jenkins", imageSrc: "http://img.b2bpic.net/free-photo/happy-girl-traveler-has-exploration-trip-wears-rucksack-stands-beside-stream-smiles-broadly_273609-25973.jpg" },
        { id: "2", name: "Marcus Thorne", imageSrc: "http://img.b2bpic.net/free-photo/lovely-woman-bridge_23-2147814045.jpg" },
        { id: "3", name: "Elena Rossi", imageSrc: "http://img.b2bpic.net/free-photo/traveler-talking-phone_23-2148228573.jpg" },
        { id: "4", name: "David W.", imageSrc: "http://img.b2bpic.net/free-photo/sideways-man-looking-through-binoculars_23-2148243213.jpg" },
        { id: "5", name: "Alice Chen", imageSrc: "http://img.b2bpic.net/free-photo/teenager-holding-her-hat-enjoying-sunshine_1139-274.jpg" }
      ]}
      cardTitle="Traveler Stories"
      cardTag="Voices"
      cardAnimation="blur-reveal"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        { id: "q1", title: "How are itineraries personalized?", content: "We connect with you to understand your travel preferences, pace, and interests." },
        { id: "q2", title: "Is safety a priority?", content: "Yes, we partner with verified local guides and experts for every route." },
        { id: "q3", title: "Can I request changes mid-trip?", content: "Our support team is available 24/7 to adjust your experience as needed." }
      ]}
      sideTitle="Travel Queries"
      sideDescription="Everything you need to know for your next journey."
      faqsAnimation="blur-reveal"
      buttons={[{ text: "Contact Support", href: "#contact" }]}
    />
  </div>

  <div id="blog" data-section="blog">
      <BlogCardThree
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      title="Wanderlust Chronicles"
      description="Stories from the path less traveled."
      blogs={[
        { id: "b1", category: "Trekking", title: "Autumn in the Peaks", excerpt: "Walking through golden forests...", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-river-with-strong-current-woods_181624-1234.jpg", authorName: "A. Traveler", authorAvatar: "http://img.b2bpic.net/free-photo/asian-woman-enjoying-outdoor-trip_53876-14408.jpg", date: "Oct 12" },
        { id: "b2", category: "Cultures", title: "Market Secrets", excerpt: "Finding magic in crowded bazaars.", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-shot-yellow-paper-lanterns-hung-from-metal-bars-ceiling-captured-laos_181624-19042.jpg", authorName: "A. Traveler", authorAvatar: "http://img.b2bpic.net/free-photo/full-shot-smiley-woman-standing-rock_23-2149882334.jpg", date: "Sep 25" },
        { id: "b3", category: "Destinations", title: "The Silent Lake", excerpt: "Morning reflections and peace.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-green-mountains-hills-covered-white-clouds-clear-sky_181624-3007.jpg", authorName: "A. Traveler", authorAvatar: "http://img.b2bpic.net/free-photo/beautiful-mountain-forest-landscape_23-2149063014.jpg", date: "Sep 15" }
      ]}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      background={{ variant: "sparkles-gradient" }}
      text="Ready to celebrate your next journey? Let's talk."
      buttons={[{ text: "Start Your Journey", href: "#" }]}
      useInvertedBackground={false}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        { title: "Explore", items: [{ label: "Trips", href: "#" }, { label: "Guides", href: "#" }] },
        { title: "Company", items: [{ label: "About", href: "#" }, { label: "Ethics", href: "#" }] }
      ]}
      bottomLeftText="© 2024 Jashn E Safar"
      bottomRightText="Crafting Joyful Journeys"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}