"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FooterCard from '@/components/sections/footer/FooterCard';
import Link from 'next/link';
import { ArrowRight, Twitter, Linkedin, Instagram, Github } from 'lucide-react';

export default function ContactPage() {
  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="contact" data-section="contact">
        <ContactCTA
          tag="Get in Touch"
          tagIcon={ArrowRight}
          tagAnimation="slide-up"
          title="Ready to Build Your Next Training Phase?"
          description="Let's work together to create something amazing. Our team is ready to help you bring your performance goals to life with PeakFlow."
          buttons={[
            { text: "Contact Us", href: "#" },
            { text: "Schedule a Demo", href: "#" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Everything you need to know about PeakFlow, from getting started to advanced features."
          faqs={[
            {
              id: "1",
              title: "What is CTL, ATL, and TSB?",
              content: "CTL (Chronic Training Load) measures long-term training stress. ATL (Acute Training Load) tracks recent fatigue. TSB (Training Stress Balance) indicates your form and readiness. PeakFlow calculates these automatically from your workouts."
            },
            {
              id: "2",
              title: "How does the AI coaching work?",
              content: "Our AI analyzes your training data, recovery patterns, and performance trends to suggest real-time adjustments. If you're fatigued, it recommends easier workouts. If you're peaking, it suggests intensity. It learns from your responses."
            },
            {
              id: "3",
              title: "Which devices integrate with PeakFlow?",
              content: "We integrate with Garmin, Wahoo, Polar, Apple Health, and Strava. Data syncs automatically when you connect your device. You can also manually upload workouts."
            },
            {
              id: "4",
              title: "Can coaches manage multiple athletes?",
              content: "Yes! Coach Pro plan lets you manage unlimited athletes with individual dashboards, performance tracking, and communication tools. Perfect for coaching groups or teams."
            },
            {
              id: "5",
              title: "Is my health data secure?",
              content: "Absolutely. All health data is encrypted end-to-end and GDPR compliant. We never sell your data. Only you and authorized coaches can access your information."
            },
            {
              id: "6",
              title: "Can I export my training data?",
              content: "Yes. You can export all your training data in standard formats. PeakFlow respects your data ownership. Cancel anytime without losing your history."
            }
          ]}
          textPosition="left"
          useInvertedBackground={false}
          showCard={true}
          faqsAnimation="slide-up"
        />
      </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>
  );
}