"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { Activity, MapPin, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="medium"
        sizing="largeSizeMediumTitles"
        background="noise"
        cardStyle="subtle-shadow"
        primaryButtonStyle="flat"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Trips",
          id: "features",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="BikeJournal"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlayTestimonial
      title="Document Your Adventures"
      description="Capture the essence of every ride. Create your travel diary, share your favorite routes, and connect with fellow bike enthusiasts."
      testimonials={[
        {
          name: "Sarah J.",
          handle: "@sarah_bikes",
          testimonial: "The best platform for tracking my short weekend escapes!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-riding-mountain-bike_23-2148777254.jpg?_wi=1",
          imageAlt: "cyclist mountain sunset scenic",
        },
        {
          name: "Mike R.",
          handle: "@miketravels",
          testimonial: "I love how easy it is to share my route details and photos.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-s-hand-bicycle-with-brown-bag_23-2148176576.jpg?_wi=1",
          imageAlt: "cyclist mountain sunset scenic",
        },
        {
          name: "Elena K.",
          handle: "@elenacycles",
          testimonial: "An incredible community of like-minded enthusiasts.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/shadows-man-motorbike_23-2148321986.jpg?_wi=1",
          imageAlt: "cyclist mountain sunset scenic",
        },
        {
          name: "David L.",
          handle: "@dl_rides",
          testimonial: "My go-to diary for every cycling trip I take.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/bicycle-standing-asphalt-road-background-ocean-mountains-sunset_181624-56975.jpg?_wi=1",
          imageAlt: "cyclist mountain sunset scenic",
        },
        {
          name: "Sophie P.",
          handle: "@sophie_wheels",
          testimonial: "Simple, clean, and perfectly designed for bikers.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/pathway-forest-surrounded-by-leaves-trees-cloudy-sky_181624-17393.jpg?_wi=1",
          imageAlt: "cyclist mountain sunset scenic",
        },
      ]}
      buttons={[
        {
          text: "Start Diary",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/high-angle-man-riding-mountain-bike_23-2148777254.jpg?_wi=2"
      imageAlt="Cyclist on scenic road"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/smiling-with-happy-confident-expression-with-hand-chin_1194-406821.jpg",
          alt: "Cyclist portrait 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/front-view-young-female-sport-clothes-with-helmet-blue-wall_179666-30533.jpg",
          alt: "Cyclist portrait 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/front-view-young-female-sport-clothes-with-helmet-blue-wall_179666-26803.jpg",
          alt: "Cyclist portrait 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/front-view-young-female-sport-clothes-with-helmet-blue-wall_179666-26799.jpg",
          alt: "Cyclist portrait 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/close-up-cyclist-woman-outdors_23-2149647389.jpg",
          alt: "Cyclist portrait 5",
        },
      ]}
      avatarText="Join 500+ riders"
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="split"
      useInvertedBackground={false}
      title="Why Keep a Journal?"
      description="Every pedal stroke tells a story. Our journal helps you preserve the memories, track your progress, and inspire others to explore the paths less traveled."
      bulletPoints={[
        {
          title: "Track Routes",
          description: "Keep logs of every short trip and road difficulty.",
        },
        {
          title: "Share Moments",
          description: "Upload photos of the most scenic stops.",
        },
        {
          title: "Join Community",
          description: "Discover new routes from other enthusiasts.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/close-up-man-s-hand-bicycle-with-brown-bag_23-2148176576.jpg?_wi=2"
      imageAlt="Travel planning setup"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",
          title: "Gravel Adventures",
          subtitle: "Dust and thrill",
          category: "Trail",
          value: "20+ Trips",
        },
        {
          id: "f2",
          title: "Coastal Rides",
          subtitle: "Sun and sea",
          category: "Scenic",
          value: "15+ Trips",
        },
        {
          id: "f3",
          title: "Urban Commutes",
          subtitle: "City life rhythm",
          category: "City",
          value: "30+ Trips",
        },
      ]}
      title="Popular Categories"
      description="Explore curated collections of rides tailored for every cycling style."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "1.2k",
          title: "Routes Logged",
          description: "Journeys shared by users",
          icon: MapPin,
        },
        {
          id: "m2",
          value: "500",
          title: "Active Riders",
          description: "Community members",
          icon: Users,
        },
        {
          id: "m3",
          value: "8k",
          title: "Total Miles",
          description: "Covered by our community",
          icon: Activity,
        },
      ]}
      title="Journey Stats"
      description="See the impact of our growing community of bike enthusiasts."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",
          name: "Sarah J.",
          handle: "@sarah",
          testimonial: "Incredible platform for documenting my weekend trails.",
          imageSrc: "http://img.b2bpic.net/free-photo/professional-cyclist-woman_23-2149703278.jpg",
        },
        {
          id: "t2",
          name: "Mike R.",
          handle: "@mike",
          testimonial: "Simple design, effective tracking, love it!",
          imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-male-wearing-helmet-standing-with-bicycle-straight-road_23-2147874068.jpg",
        },
        {
          id: "t3",
          name: "Elena K.",
          handle: "@elena",
          testimonial: "The community is what truly makes this special.",
          imageSrc: "http://img.b2bpic.net/free-photo/bearded-sporty-male-sits-red-mountain-bicycle-holds-smartphone_613910-2050.jpg",
        },
        {
          id: "t4",
          name: "David L.",
          handle: "@david",
          testimonial: "My cycling journal became so much more organized.",
          imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-sad-unhappy-young-cyclist-wearing-sports-clothing-helmet-eyeglasses-sitting-big-tree-with-broken-electric-bicycle-lying-ground-waiting-friends-help-him_273609-268.jpg",
        },
        {
          id: "t5",
          name: "Sophie P.",
          handle: "@sophie",
          testimonial: "Truly inspiring platform for every enthusiast.",
          imageSrc: "http://img.b2bpic.net/free-photo/caucasian-man-looking-map-travel-explore-concept_53876-13405.jpg",
        },
      ]}
      title="Voices from the Trail"
      description="Hear what our fellow riders have to say about their experience."
    />
  </div>

  <div id="blog" data-section="blog">
      <BlogCardOne
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      title="Rider Insights"
      description="Expert tips and gear reviews for your next short cycling adventure."
      blogs={[
        {
          id: "b1",
          category: "Tips",
          title: "Gear Checklist",
          excerpt: "What to carry for your weekend ride.",
          imageSrc: "http://img.b2bpic.net/free-photo/shadows-man-motorbike_23-2148321986.jpg?_wi=2",
          authorName: "Coach Mark",
          authorAvatar: "http://img.b2bpic.net/free-photo/smiling-young-man-riding-bicycle-mountain-road_651396-2648.jpg",
          date: "Oct 12, 2024",
        },
        {
          id: "b2",
          category: "Guides",
          title: "Safety First",
          excerpt: "Essential rules for road biking.",
          imageSrc: "http://img.b2bpic.net/free-photo/bicycle-standing-asphalt-road-background-ocean-mountains-sunset_181624-56975.jpg?_wi=2",
          authorName: "Coach Mark",
          authorAvatar: "http://img.b2bpic.net/free-photo/young-adult-using-electric-bike-country-side_23-2149124567.jpg",
          date: "Oct 15, 2024",
        },
        {
          id: "b3",
          category: "Review",
          title: "Best Bike Lights",
          excerpt: "Keep your evening rides bright.",
          imageSrc: "http://img.b2bpic.net/free-photo/pathway-forest-surrounded-by-leaves-trees-cloudy-sky_181624-17393.jpg?_wi=2",
          authorName: "Coach Mark",
          authorAvatar: "http://img.b2bpic.net/free-photo/young-adult-using-electric-bike-country-side_23-2149124564.jpg",
          date: "Oct 20, 2024",
        },
      ]}
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "Is it free?",
          content: "Yes, standard access to the diary is free for all.",
        },
        {
          id: "q2",
          title: "Can I share my rides?",
          content: "Yes, you can share them with the community or private groups.",
        },
        {
          id: "q3",
          title: "How to join?",
          content: "Just sign up and start logging your first ride today.",
        },
      ]}
      title="Common Questions"
      description="Everything you need to know about starting your diary."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Stay Connected"
      description="Have questions or want to collaborate on a route? Reach out!"
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Your Name",
        },
        {
          name: "email",
          type: "email",
          placeholder: "Email Address",
        },
      ]}
      textarea={{
        name: "message",
        placeholder: "Your message here...",
      }}
      imageSrc="http://img.b2bpic.net/free-photo/cyclist-riding-bike-sunset-mountain-road_346278-468.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/mechanic-repairing-bicycle_1170-2545.jpg"
      logoText="BikeJournal"
      columns={[
        {
          title: "Product",
          items: [
            {
              label: "Features",
              href: "#features",
            },
            {
              label: "Blog",
              href: "#blog",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "FAQ",
              href: "#faq",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
