"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterCard from '@/components/sections/footer/FooterCard';
import Link from 'next/link';
import { Sparkles, TrendingUp, Users, Activity, Star, ArrowRight, Twitter, Linkedin, Instagram, Github } from 'lucide-react';

export default function FeaturesPage() {
  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="features" data-section="features">
        <FeatureCardTwentyThree
          title="Complete Feature Suite for Advanced Training"
          description="Explore all the powerful tools PeakFlow offers to optimize your endurance training and achieve peak performance."
          tag="Full 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=2",
              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=2",
              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=2",
              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=2",
              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=2",
              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=2",
              imageAlt: "Coach Tools"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Why Athletes Choose PeakFlow"
          description="Our features deliver measurable results and athlete satisfaction"
          tag="Feature Impact"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          metrics={[
            {
              id: "1",
              value: "50%",
              title: "Faster Planning",
              description: "Coaches save time on training design",
              icon: Users
            },
            {
              id: "2",
              value: "5%",
              title: "Average FTP Gain",
              description: "Performance improvement within 3 months",
              icon: Activity
            },
            {
              id: "3",
              value: "92%",
              title: "Injury Prevention",
              description: "Reduction in overtraining incidents",
              icon: TrendingUp
            },
            {
              id: "4",
              value: "4x",
              title: "More Engagement",
              description: "Compared to traditional training methods",
              icon: Star
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Peak?"
          tagIcon={ArrowRight}
          tagAnimation="slide-up"
          title="Experience All Features Free for 14 Days"
          description="Get full access to all PeakFlow features without a credit card. Start your training transformation now."
          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>
  );
}