"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import {
  Star,
  HelpCircle,
} from "lucide-react";

const navItems = [
  { name: "Home", id: "home" },
  { name: "Trainers", id: "trainers" },
  { name: "Events", id: "events" },
  { name: "Communities", id: "communities" },
  { name: "Pricing", id: "pricing" },
  { name: "Dashboard", id: "dashboard" },
];

const footerColumns = [
  {
    title: "Platform",
    items: [
      { label: "Find Trainers", href: "/trainers" },
      { label: "Discover Events", href: "/events" },
      { label: "Join Communities", href: "/communities" },
      { label: "Pricing", href: "/" },
    ],
  },
  {
    title: "Community",
    items: [
      { label: "Success Stories", href: "/" },
      { label: "Trainer Directory", href: "/trainers" },
      { label: "Events Calendar", href: "/events" },
      { label: "Member Forum", href: "/" },
    ],
  },
  {
    title: "Company",
    items: [
      { label: "About FitMumbai", href: "/" },
      { label: "Our Mission", href: "/" },
      { label: "Careers", href: "/" },
      { label: "Press", href: "/" },
    ],
  },
  {
    title: "Support",
    items: [
      { label: "Help Center", href: "/" },
      { label: "Contact Us", href: "/" },
      { label: "Privacy Policy", href: "/" },
      { label: "Terms of Service", href: "/" },
    ],
  },
];

export default function TrainersPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="small"
      sizing="mediumSizeLargeTitles"
      background="circleGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="FitMumbai"
          bottomLeftText="Mumbai's Fitness Hub"
          bottomRightText="hello@fitmumbai.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Find & Book Verified Personal Trainers in Mumbai"
          description="Discover experienced fitness professionals across all specializations. Every trainer is certified, background-checked, and rated by our community for your peace of mind."
          background={{ variant: "radial-gradient" }}
          kpis={[
            { value: "500+", label: "Verified Trainers" },
            { value: "98%", label: "Client Satisfaction" },
            { value: "10K+", label: "Successful Bookings" },
          ]}
          enableKpiAnimation={true}
          tag="CERTIFIED PROFESSIONALS"
          tagAnimation="slide-up"
          buttons={[
            { text: "Browse All Trainers", href: "#trainers-grid" },
            { text: "See How It Works", href: "#" },
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/young-adult-doing-indoor-sport-gym_23-2149205574.jpg?_wi=2"
          imageAlt="Professional Fitness Trainers"
          mediaAnimation="blur-reveal"
          imagePosition="right"
        />
      </div>

      <div id="trainers-grid" data-section="trainers-grid">
        <ProductCardThree
          title="Our Top Trainers"
          description="Browse our complete directory of certified fitness professionals. Filter by specialization, location, and availability to find your perfect match."
          tag="CERTIFIED & VERIFIED"
          tagIcon={Star}
          tagAnimation="slide-up"
          products={[
            {
              id: "trainer-arjun",
              name: "Arjun Sharma",
              price: "₹1,200/session",
              imageSrc: "http://img.b2bpic.net/free-photo/young-adult-doing-indoor-sport-gym_23-2149205574.jpg?_wi=3",
              imageAlt: "Arjun Sharma - Strength Training Specialist",
              priceButtonProps: { text: "Book Now" },
            },
            {
              id: "trainer-priya",
              name: "Priya Desai",
              price: "₹1,000/session",
              imageSrc: "http://img.b2bpic.net/free-photo/man-goes-sport-takes-break-listens-motivation-music-wireless-headphones-refreshes-with-water-wears-casual-t-shirt-poses-blurred-exercises-outdoors_273609-56014.jpg?_wi=2",
              imageAlt: "Priya Desai - Yoga & Wellness Expert",
              priceButtonProps: { text: "Book Now" },
            },
            {
              id: "trainer-vikram",
              name: "Vikram Singh",
              price: "₹1,500/session",
              imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-training-gym-bodybuilding_23-2149552356.jpg?_wi=2",
              imageAlt: "Vikram Singh - CrossFit Coach",
              priceButtonProps: { text: "Book Now" },
            },
            {
              id: "trainer-neha",
              name: "Neha Kapoor",
              price: "₹950/session",
              imageSrc: "http://img.b2bpic.net/free-photo/pretty-smiling-business-woman-standing-window_1262-1069.jpg?_wi=2",
              imageAlt: "Neha Kapoor - Pilates Instructor",
              priceButtonProps: { text: "Book Now" },
            },
            {
              id: "trainer-rohan",
              name: "Rohan Mehta",
              price: "₹1,350/session",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-businesswoman-extend-hand-handshake-greeting-business-partner-saleswoman-wel_1258-119227.jpg?_wi=2",
              imageAlt: "Rohan Mehta - Nutrition & Fitness Coach",
              priceButtonProps: { text: "Book Now" },
            },
            {
              id: "trainer-sara",
              name: "Sara Singh",
              price: "₹1,100/session",
              imageSrc: "http://img.b2bpic.net/free-photo/group-active-people-zumba-class_23-2149074929.jpg?_wi=2",
              imageAlt: "Sara Singh - Group Fitness Specialist",
              priceButtonProps: { text: "Book Now" },
            },
          ]}
          gridVariant="bento-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          carouselMode="auto"
        />
      </div>

      <div id="trainer-faq" data-section="trainer-faq">
        <FaqDouble
          title="Trainer Booking Questions"
          description="Learn more about booking sessions, trainer qualifications, cancellations, and payment options."
          tag="BOOKING SUPPORT"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          faqs={[
            {
              id: "faq-trainer-1",
              title: "How do I select the right trainer for my goals?",
              content: "Each trainer profile lists their specializations, certifications, and client reviews. Use our filters to narrow by fitness goal (weight loss, muscle gain, flexibility, etc.), location, and availability. You can also message trainers before booking.",
            },
            {
              id: "faq-trainer-2",
              title: "What qualifications do FitMumbai trainers have?",
              content: "All trainers are certified by recognized bodies (ACE, NASM, ISSA, YTT, etc.), have completed background checks, and maintain current CPR certification. Many hold specialized credentials in yoga, CrossFit, nutrition, and other disciplines.",
            },
            {
              id: "faq-trainer-3",
              title: "Can I schedule recurring sessions?",
              content: "Yes! Book package deals for recurring sessions (4, 8, or 12 sessions per month) and save up to 15%. Trainers will hold consistent time slots for regular clients, and you can pause or reschedule anytime.",
            },
          ]}
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="smooth"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2024 FitMumbai. All rights reserved."
          bottomRightText="hello@fitmumbai.com | +91 98765 43210"
        />
      </div>
    </ThemeProvider>
  );
}