"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import SplitAbout from '@/components/sections/about/SplitAbout';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterCard from '@/components/sections/footer/FooterCard';
import Link from 'next/link';
import { Zap, Sparkles, Target, Brain, BarChart3, Users, TrendingUp, Star, ArrowRight, DollarSign, MessageSquare, Activity, Twitter, Linkedin, Instagram, Github } from 'lucide-react';

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="medium"
      background="blurBottom"
      cardStyle="soft-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="PeakFlow"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "About", id: "about" },
            { name: "Docs", id: "docs" }
          ]}
          button={{ text: "Get Started", href: "#contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Train Smarter with AI-Powered Performance Insights"
          description="PeakFlow combines data-driven training plans, real-time AI coaching, and community accountability to help ambitious endurance athletes reach their peak performance."
          tag="AI Training Platform"
          tagIcon={Zap}
          tagAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
          buttons={[
            { text: "Start Free Trial", href: "#" },
            { text: "View Demo", href: "#" }
          ]}
          buttonAnimation="slide-up"
          mediaItems={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/a-modern-training-platform-dashboard-int-1772483103517-e2c1fcc1.png", imageAlt: "PeakFlow Training Dashboard" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/performance-analytics-dashboard-showing--1772483101908-2fe1baaf.png", imageAlt: "Performance Analytics View" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/ai-powered-training-plan-builder-interfa-1772483100403-2820e1ef.png", imageAlt: "AI Training Plan Builder" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/athlete-profile-dashboard-showing-person-1772483101553-ac7ed363.png", imageAlt: "Athlete Profile Dashboard" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/community-training-groups-interface-show-1772483100532-60583de3.png", imageAlt: "Community Training Groups" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/key-performance-metrics-dashboard-displa-1772483100805-71bf7417.png", imageAlt: "Key Performance Metrics" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyThree
          title="Powerful Training Features Built for Athletes"
          description="Everything you need to optimize your endurance training with data-driven insights and AI coaching recommendations."
          tag="Features"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          features={[
            {
              id: "1",
              title: "AI-Powered Training Adaptation",
              tags: ["Real-Time", "Intelligent"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/ai-coaching-recommendation-interface-sho-1772483100318-230b636a.png?_wi=1",
              imageAlt: "AI Coaching Interface"
            },
            {
              id: "2",
              title: "Advanced Performance Metrics",
              tags: ["CTL/ATL/TSB", "Analytics"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/advanced-performance-metrics-visualizati-1772483100040-1a6c3fc4.png?_wi=1",
              imageAlt: "Performance Metrics"
            },
            {
              id: "3",
              title: "Intelligent Workout Builder",
              tags: ["Intervals", "Zones"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/intelligent-workout-builder-interface-wi-1772483101176-6bc3d7a5.png?_wi=1",
              imageAlt: "Workout Builder"
            },
            {
              id: "4",
              title: "Device Integration",
              tags: ["Garmin, Wahoo", "Auto-Sync"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/device-integration-screen-showing-garmin-1772483099834-3807290f.png?_wi=1",
              imageAlt: "Device Integration"
            },
            {
              id: "5",
              title: "Community & Accountability",
              tags: ["Groups", "Challenges"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/community-training-features-showing-grou-1772483102430-44c43295.png?_wi=1",
              imageAlt: "Community Features"
            },
            {
              id: "6",
              title: "Coach Collaboration Tools",
              tags: ["Multi-Athlete", "Real-Time"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/coach-collaboration-dashboard-managing-m-1772483103448-bd2483a2.png?_wi=1",
              imageAlt: "Coach Tools"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="Why PeakFlow Stands Out"
          description="Built by athletes, for athletes. PeakFlow combines the power of data science with intuitive design to create the most advanced training platform available."
          tag="Our Advantage"
          tagIcon={Target}
          tagAnimation="slide-up"
          bulletPoints={[
            {
              title: "Real-Time AI Coaching",
              description: "Automatic training adjustments based on your performance, recovery, and life events. No need to wait for your coach.",
              icon: Brain
            },
            {
              title: "Intuitive Performance Dashboards",
              description: "Complex training metrics simplified into actionable insights. Understand your form, fatigue, and readiness at a glance.",
              icon: BarChart3
            },
            {
              title: "Community Accountability",
              description: "Connect with training partners, join challenges, and leverage social proof to stay motivated and consistent.",
              icon: Users
            },
            {
              title: "Transparent Pricing",
              description: "No hidden fees. Clear pricing tiers for individual athletes, coaches, and teams with exactly what you need."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/comprehensive-training-platform-overview-1772483100136-8611cf9d.png?_wi=1"
          imageAlt="PeakFlow Training Interface"
          mediaAnimation="slide-up"
          imagePosition="right"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Proven Results & Impact"
          description="Join thousands of endurance athletes who are training smarter with PeakFlow"
          tag="By The Numbers"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          metrics={[
            {
              id: "1",
              value: "15K",
              title: "Active Athletes",
              description: "Training smarter every week",
              icon: Users
            },
            {
              id: "2",
              value: "2M",
              title: "Workouts Tracked",
              description: "Hours of performance data analyzed",
              icon: Activity
            },
            {
              id: "3",
              value: "92%",
              title: "Retention Rate",
              description: "Athletes return month after month",
              icon: TrendingUp
            },
            {
              id: "4",
              value: "4.8★",
              title: "User Rating",
              description: "Loved by the endurance community",
              icon: Star
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="Trusted by Endurance Athletes Worldwide"
          description="See what athletes and coaches are saying about their PeakFlow experience"
          tag="Community Stories"
          tagIcon={MessageSquare}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",
              name: "Sarah Johnson, Triathlon Coach",
              date: "Date: 15 January 2025",
              title: "Game-Changing Platform for My Athletes",
              quote: "PeakFlow's AI coaching has cut my planning time in half while improving athlete outcomes. The real-time adaptation is incredible—my athletes see better results and feel more supported than ever.",
              tag: "Coach Pro Plan",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/professional-headshot-of-a-female-triath-1772483099054-9abaf7bb.png",
              avatarAlt: "Sarah Johnson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/female-triathlon-coach-working-with-athl-1772483098776-d68c1b5e.png?_wi=1",
              imageAlt: "Triathlon Coach"
            },
            {
              id: "2",
              name: "Marcus Chen, Pro Cyclist",
              date: "Date: 22 January 2025",
              title: "Finally, a Platform That Understands Cyclists",
              quote: "The CTL/ATL/TSB tracking is exactly what I needed. PeakFlow helped me identify my peak performance window and avoided overtraining. My FTP is up 5% and I'm feeling fresher.",
              tag: "Premium Athlete",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/professional-headshot-of-a-male-professi-1772483099122-257a648c.png",
              avatarAlt: "Marcus Chen",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/professional-cyclist-on-a-high-end-road--1772483099145-aba975b4.png?_wi=1",
              imageAlt: "Pro Cyclist"
            },
            {
              id: "3",
              name: "Emily Rodriguez, Marathon Runner",
              date: "Date: 18 January 2025",
              title: "Accountability Partner That Actually Works",
              quote: "The community features keep me accountable. Training with a virtual group is motivating, and the challenges make workouts more fun. Hit my goal 3 weeks early!",
              tag: "Premium Athlete",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/professional-headshot-of-a-female-marath-1772483098735-c6004fab.png",
              avatarAlt: "Emily Rodriguez",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/female-runner-during-a-marathon-race-ene-1772483099512-cb473a96.png?_wi=1",
              imageAlt: "Marathon Runner"
            },
            {
              id: "4",
              name: "James Wilson, Age-Group Triathlete",
              date: "Date: 25 January 2025",
              title: "Data-Driven Training Made Simple",
              quote: "As someone new to data-driven training, PeakFlow's dashboards are incredibly intuitive. I understand my training zones, recovery needs, and peak days. Worth every penny.",
              tag: "Premium Athlete",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/professional-headshot-of-a-male-age-grou-1772483099780-f21a5062.png",
              avatarAlt: "James Wilson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/male-triathlete-transitioning-between-bi-1772483099973-51932a7d.png?_wi=1",
              imageAlt: "Age-Group Triathlete"
            },
            {
              id: "5",
              name: "Lisa Thompson, Running Club Director",
              date: "Date: 20 January 2025",
              title: "Perfect for Club Management",
              quote: "Managing 40+ athletes across different training levels used to be chaos. PeakFlow's coach tools let me scale personalized coaching. My members love the support.",
              tag: "Coach Pro Plan",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/professional-headshot-of-a-female-runnin-1772483098964-a8b12f9a.png",
              avatarAlt: "Lisa Thompson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/female-running-club-director-leading-a-g-1772483100077-6a082189.png?_wi=1",
              imageAlt: "Running Club Director"
            },
            {
              id: "6",
              name: "David Park, Mountain Bike Coach",
              date: "Date: 28 January 2025",
              title: "Injury Prevention Through Smart Analytics",
              quote: "The injury risk warnings actually prevented an overtraining situation. The real-time alerts about recovery needs help me keep athletes healthy and performing optimally.",
              tag: "Coach Pro Plan",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/professional-headshot-of-a-male-mountain-1772483099339-f89e085d.png",
              avatarAlt: "David Park",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP8a8goFKT6kOt6i8o2OojduTe/male-mountain-bike-coach-instructing-ath-1772483100923-a4549197.png?_wi=1",
              imageAlt: "Mountain Bike Coach"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Peak?"
          tagIcon={ArrowRight}
          tagAnimation="slide-up"
          title="Start Your Training Transformation Today"
          description="Join thousands of athletes training smarter with PeakFlow. Try premium features free for 14 days—no credit card required."
          buttons={[
            { text: "Start Free Trial", href: "#" },
            { text: "Schedule Demo", href: "#" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="PeakFlow"
          copyrightText="© 2025 PeakFlow. All rights reserved."
          socialLinks={[
            { icon: Twitter, href: "https://twitter.com/peakflowapp", ariaLabel: "Twitter" },
            { icon: Linkedin, href: "https://linkedin.com/company/peakflowapp", ariaLabel: "LinkedIn" },
            { icon: Instagram, href: "https://instagram.com/peakflowapp", ariaLabel: "Instagram" },
            { icon: Github, href: "https://github.com/peakflowapp", ariaLabel: "GitHub" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}