"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import { Clock, Map, Mountain } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="large"
        background="blurBottom"
        cardStyle="layered-gradient"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        { name: "Explore", id: "#hero" },
        { name: "Trails", id: "#features" },
        { name: "Insights", id: "#metrics" }
      ]}
      brandName="PeakPath"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDualMedia
      background={{
        variant: "sparkles-gradient"
      }}
      title="Explore trails like never before"
      description="Immersive 3D scrolling experiences bring hiking destinations to life. Discover your next adventure through interactive, dynamic storytelling."
      tag="Next Gen Exploration"
      buttons={[
        {
          text: "Start Exploring",          href: "#features"
        }
      ]}
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/dramatic-mountain-ridge-stormy-sky_84443-83786.jpg",          imageAlt: "Mountain Landscape"
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-with-live-abstract-wallpaper-coming-out-screen_23-2151033601.jpg",          imageAlt: "3D Topography"
        }
      ]}
      mediaAnimation="slide-up"
      rating={5}
      ratingText="Trusted by 5,000+ Hikers"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      animationType="depth-3d"
      textboxLayout="split-description"
      useInvertedBackground={true}
      metrics={[
        {
          id: "m1",          value: "1.2k+",          title: "Active Trails",          items: [
            "Well-mapped routes",            "Real-time updates",            "Verified paths"
          ]
        },
        {
          id: "m2",          value: "450k",          title: "Hiker Miles",          items: [
            "Community logged",            "High reliability",            "Verified ascents"
          ]
        },
        {
          id: "m3",          value: "98%",          title: "Satisfaction",          items: [
            "User-rated trails",            "Detailed guides",            "Safe recommendations"
          ]
        }
      ]}
      title="Trail Stats at a Glance"
      description="Visualize your journey with real-time data insights."
    />
  </div>

  <div id="features" data-section="features">
      <FeatureBorderGlow
      animationType="blur-reveal"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          icon: Map,
          title: "Real-time 3D Maps",          description: "Interactive WebGL terrain models you can zoom, rotate, and traverse digitally."
        },
        {
          icon: Mountain,
          title: "Elevation Profiles",          description: "Precise topographical data visualization to help you prepare for the climb ahead."
        },
        {
          icon: Clock,
          title: "Live Trail Conditions",          description: "Stay updated on weather, path accessibility, and crowd density in real-time."
        }
      ]}
      title="Explore Your Way"
      description="Cutting-edge tools to preview, plan, and navigate the most breathtaking trails on Earth."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "National Geographic",        "Outdoor Life",        "AllTrails",        "REI Adventures",        "The North Face",        "Patagonia",        "TrailFinder"
      ]}
      title="Trusted by Industry Leaders"
      description="Join thousands of enthusiasts who trust PeakPath for their wilderness explorations."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient"
      }}
      tag="Get Started"
      title="Ready for your next adventure?"
      description="Sign up for early access to our immersive 3D trail preview platform and start planning your next escape today."
      buttons={[
        {
          text: "Register Now",          href: "#"
        }
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="PeakPath"
      columns={[
        {
          title: "Company",          items: [
            {
              label: "About",              href: "#"
            },
            {
              label: "Careers",              href: "#"
            }
          ]
        },
        {
          title: "Resources",          items: [
            {
              label: "Trail Map",              href: "#"
            },
            {
              label: "Safety Tips",              href: "#"
            }
          ]
        },
        {
          title: "Legal",          items: [
            {
              label: "Privacy",              href: "#"
            },
            {
              label: "Terms",              href: "#"
            }
          ]
        }
      ]}
      copyrightText="© 2024 PeakPath. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}