"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroCarouselLogo from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Award, Bike, DollarSign, Heart, Send, Shield, Sparkles, TrendingUp, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="large"
      background="grid"
      cardStyle="gradient-radial"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="MachX"
          navItems={[
            { name: "Shop", id: "products" },
            { name: "Features", id: "features" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" },
          ]}
          button={{ text: "Get Started", href: "contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="MACHX"
          description="Premium bicycles engineered for champions, priced for everyone. Experience the thrill of high-performance cycling without the premium price tag."
          buttons={[
            { text: "Shop Now", href: "products" },
            { text: "Learn More", href: "about" },
          ]}
          slides={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/male-cyclist-riding-bicycle-mountains_651396-3463.jpg",              imageAlt: "Mountain bike in action"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/low-angle-man-bicycle-outdoors_23-2150884212.jpg?_wi=1",              imageAlt: "Road bike performance"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-motor-electric-bike-ebike-bicycle_114579-344.jpg?_wi=1",              imageAlt: "Modern bicycle design"},
          ]}
          autoplayDelay={5000}
          showDimOverlay={true}
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="About Us"
          title="Redefining the Bike Industry"
          description="Founded by cycling enthusiasts"
          subdescription="MachX Cycles - Premium Performance for Everyone"
          icon={Zap}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APB5SBBD7wcSCWZA9oerufWY3z/uploaded-1772484161104-5dpj5x84.png"
          imageAlt="MachX Cycles brand identity"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardOne
          title="Featured Bikes"
          description="Discover our premium collection of high-performance bicycles designed for every rider and every terrain"
          tag="Latest Collection"
          tagIcon={Bike}
          products={[
            {
              id: "1",              name: "Apex Mountain Elite",              price: "$1,299",              imageSrc: "http://img.b2bpic.net/free-photo/bicycle-toolbox-placed-table-yard_482257-96184.jpg",              imageAlt: "Apex Mountain Elite mountain bike"},
            {
              id: "2",              name: "Velocity Road Pro",              price: "$1,599",              imageSrc: "http://img.b2bpic.net/free-photo/low-angle-man-bicycle-outdoors_23-2150884212.jpg?_wi=2",              imageAlt: "Velocity Road Pro racing bike"},
            {
              id: "3",              name: "Urban Commuter X",              price: "$899",              imageSrc: "http://img.b2bpic.net/free-photo/view-from-pleased-curly-woman-sitting-modern-motorbike-outdoors-looking-away_171337-16671.jpg",              imageAlt: "Urban Commuter X hybrid bike"},
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSeven
          title="Why Choose MachX"
          description="We combine premium engineering with affordable pricing to make high-performance cycling accessible to everyone"
          tag="Features"
          tagIcon={Award}
          features={[
            {
              id: 1,
              title: "Premium Components",              description: "Engineered with high-grade aluminum frames and precision components that deliver exceptional durability and performance on every ride.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-bicycle-gears_1170-2566.jpg?_wi=1",              imageAlt: "Premium bike components"},
            {
              id: 2,
              title: "Advanced Gearing System",              description: "Smooth, responsive gear shifting with precision-engineered drivetrain systems for optimal performance across all terrains.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-bicycle-gears_1170-2566.jpg?_wi=2",              imageAlt: "Advanced gear system"},
            {
              id: 3,
              title: "Aerodynamic Design",              description: "Cutting-edge frame geometry optimized for speed and efficiency, reducing wind resistance and maximizing your cycling potential.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-motor-electric-bike-ebike-bicycle_114579-344.jpg?_wi=2",              imageAlt: "Aerodynamic frame design"},
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted by Top Brands"
          description="Our bikes are built with components and partnerships from the world's leading bicycle manufacturers"
          tag="Industry Leaders"
          tagIcon={Shield}
          names={[
            "Specialized Components",            "Trek Engineering",            "Giant Manufacturing",            "Cannondale Innovation",            "Scott Technology",            "Cube Performance",            "Yeti Dynamics"]}
          textboxLayout="default"
          useInvertedBackground={false}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Choose Your Ride"
          description="Premium quality at prices that won't break the bank. Find the perfect bike for your budget and performance needs"
          tag="Pricing Plans"
          tagIcon={DollarSign}
          plans={[
            {
              id: "entry",              price: "$799",              name: "Entry Level",              buttons: [
                { text: "Get Started", href: "contact" },
                { text: "Learn More", href: "about" },
              ],
              features: [
                "Aluminum frame construction",                "18-speed gear system",                "Hybrid tires for versatility",                "Basic assembly included"],
            },
            {
              id: "pro",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$1,299",              name: "Pro Series",              buttons: [
                { text: "Get Started", href: "contact" },
                { text: "Learn More", href: "about" },
              ],
              features: [
                "Carbon-reinforced frame",                "21-speed precision gearing",                "Premium grip tires",                "Professional tuning included",                "1-year warranty"],
            },
            {
              id: "elite",              price: "$1,799",              name: "Elite Performance",              buttons: [
                { text: "Get Started", href: "contact" },
                { text: "Learn More", href: "about" },
              ],
              features: [
                "Full carbon frame",                "27-speed elite gearing",                "Competition-grade tires",                "Expert customization",                "2-year premium warranty",                "Lifetime support"],
            },
          ]}
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Alex Chen",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg?_wi=1",              imageAlt: "Alex Chen"},
            {
              id: "2",              name: "Sarah Mitchell",              imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg?_wi=1",              imageAlt: "Sarah Mitchell"},
            {
              id: "3",              name: "Marcus Johnson",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Marcus Johnson"},
            {
              id: "4",              name: "Emma Rodriguez",              imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg?_wi=2",              imageAlt: "Emma Rodriguez"},
            {
              id: "5",              name: "James Williams",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg?_wi=2",              imageAlt: "James Williams"},
            {
              id: "6",              name: "Lisa Anderson",              imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg?_wi=3",              imageAlt: "Lisa Anderson"},
          ]}
          cardTitle="Over 50,000 cyclists trust MachX for premium performance and exceptional value"
          cardTag="Join the community"
          cardTagIcon={Heart}
          cardAnimation="blur-reveal"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Our Impact"
          description="Real results from cyclists who chose performance and value"
          tag="Achievements"
          tagIcon={TrendingUp}
          metrics={[
            {
              id: "1",              value: "50K+",              title: "Happy Cyclists",              description: "Join thousands of satisfied riders worldwide",              imageSrc: "http://img.b2bpic.net/free-photo/group-friends-ride-mountain-bike-forest-together_53876-24859.jpg",              imageAlt: "Global cycling community"},
            {
              id: "2",              value: "15M+",              title: "Miles Ridden",              description: "Total distance covered by MachX bike owners",              imageSrc: "http://img.b2bpic.net/free-photo/man-ride-bicycle-bridgethe-image-cyclist-motion-background-morning_654080-244.jpg",              imageAlt: "Performance milestone"},
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get In Touch"
          title="Ready to Experience MachX?"
          description="Subscribe to our newsletter for exclusive deals, bike maintenance tips, and the latest in cycling technology. Join the MachX community today."
          tagIcon={Send}
          tagAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/portrait-smiling-mechanic_1170-2408.jpg"
          imageAlt="Contact us"
          mediaAnimation="opacity"
          mediaPosition="right"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="By subscribing, you agree to our Terms of Service and Privacy Policy. Unsubscribe anytime."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="MACHX"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}
