"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
import TextAbout from "@/components/sections/about/TextAbout";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Award, TrendingUp, Trophy, Zap, Star, Dumbbell, Heart, Lightbulb, Compass, Mail, Instagram, Twitter, Linkedin } from "lucide-react";

export default function PersonalTrainerPage() {
    return (
        <ThemeProvider
            defaultButtonVariant="directional-hover"
            defaultTextAnimation="background-highlight"
            borderRadius="pill"
            contentWidth="medium"
            sizing="mediumLarge"
            background="aurora"
            cardStyle="gradient-bordered"
            primaryButtonStyle="primary-glow"
            secondaryButtonStyle="layered"
            headingFontWeight="semibold"
        >
            <ReactLenis root>
                <div id="nav" data-section="nav">
                    <NavbarStyleFullscreen
                        navItems={[
                            { name: "Home", id: "home" },
                            { name: "About", id: "about" },
                            { name: "Certifications", id: "achievements" },
                            { name: "Services", id: "services" },
                        ]}
                        brandName="Personal Trainer"
                        bottomLeftText="Certified Professional"
                        bottomRightText="contact@trainer.com"
                    />
                </div>

                <div id="hero" data-section="hero">
                    <HeroSplitKpi
                        title="Transform Your Body, Transform Your Life"
                        description="Expert personal training designed for your goals. Whether you're starting your fitness journey or taking your performance to the next level, I provide personalized coaching, proven methods, and unwavering support to help you achieve lasting results."
                        background={{ variant: "rotated-rays-static-grid" }}
                        kpis={[
                            { value: "500+", label: "Clients Transformed" },
                            { value: "10+", label: "Years Experience" },
                            { value: "95%", label: "Goal Achievement Rate" }
                        ]}
                        enableKpiAnimation={true}
                        tag="Professional Coach"
                        tagIcon={Award}
                        imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DbxJR6IxC1XHwzUSsYvpr3NNCx/uploaded-1778565239456-76fxax8u.jpg"
                        imageAlt="Professional Personal Trainer"
                        imagePosition="right"
                        buttons={[
                            { text: "Start Your Journey", href: "#about" },
                            { text: "View Training Programs", href: "#services" }
                        ]}
                        mediaAnimation="slide-up"
                    />
                </div>

                <div id="about" data-section="about">
                    <TextAbout
                        title="My Commitment to Your Success: Every client deserves a personalized approach. With over a decade of experience in fitness coaching, I combine evidence-based training methods with genuine passion for helping you reach your potential. My philosophy centers on sustainable results, injury prevention, and building habits that last a lifetime."
                        useInvertedBackground={false}
                        buttons={[
                            { text: "Learn My Story", href: "#achievements" },
                            { text: "Explore Methods", href: "#philosophy" }
                        ]}
                    />
                </div>

                <div id="achievements" data-section="achievements">
                    <MetricCardOne
                        title="Professional Credentials & Experience"
                        description="Certified expertise in personal training and athletic development"
                        tag="Qualifications"
                        tagIcon={TrendingUp}
                        metrics={[
                            { id: "1", value: "150", title: "Certified Personal Trainer", description: "National Academy of Sports Medicine certification", icon: Trophy },
                            { id: "2", value: "500", title: "Specializations", description: "Strength, conditioning, nutrition, mobility, recovery", icon: Zap },
                            { id: "3", value: "950", title: "Success Stories", description: "Clients who achieved their fitness goals with guidance", icon: Star },
                        ]}
                        gridVariant="uniform-all-items-equal"
                        animationType="slide-up"
                        textboxLayout="default"
                        useInvertedBackground={false}
                    />
                </div>

                <div id="services" data-section="services">
                    <FeatureCardSeven
                        title="Personalized Training Programs"
                        description="Customized fitness solutions tailored to your unique goals and lifestyle"
                        tag="Service Offerings"
                        tagIcon={Dumbbell}
                        features={[
                            {
                                title: "One-on-One Personal Training",                                description: "Individual coaching sessions focused entirely on your goals, form, and progression. Each workout is designed based on your fitness level, preferences, and objectives with real-time feedback and adjustments.",                                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DbxJR6IxC1XHwzUSsYvpr3NNCx/uploaded-1778565319822-rjdf8fid.jpg",                                imageAlt: "One-on-one personal training session"
                            },
                            {
                                title: "Small Group Training Classes",                                description: "Build community while reaching your fitness goals in small, focused groups. Receive personalized attention in a motivating environment with other like-minded individuals committed to transformation.",                                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DbxJR6IxC1XHwzUSsYvpr3NNCx/uploaded-1778565341961-l7pyl2nu.jpg",                                imageAlt: "Small group fitness class"
                            },
                            {
                                title: "Online Coaching Programs",                                description: "Train from anywhere with customized workout plans, nutrition guidance, and video form checks. Stay connected with regular progress assessments and program adjustments based on your results and feedback.",                                imageSrc: "https://img.b2bpic.net/free-photo/people-training-athletics_23-2151077709.jpg?id=150856792",                                imageAlt: "Online fitness coaching platform"
                            }
                        ]}
                        textboxLayout="default"
                        animationType="slide-up"
                        useInvertedBackground={false}
                        buttons={[
                            { text: "Book Consultation", href: "#contact" }
                        ]}
                    />
                </div>

                <div id="philosophy" data-section="philosophy">
                    <FeatureBento
                        title="My Training Philosophy"
                        description="Holistic approach to fitness and wellness"
                        tag="Training Method"
                        tagIcon={Compass}
                        features={[
                            {
                                title: "Progressive Overload",                                description: "Systematically increase intensity and challenge to drive continuous improvement and prevent plateaus in your fitness journey",                                bentoComponent: "animated-bar-chart"
                            },
                            {
                                title: "Functional Fitness",                                description: "Training that improves real-world strength, mobility, and movement patterns for better performance in daily life",                                bentoComponent: "3d-stack-cards",                                items: [
                                    { icon: Dumbbell, title: "Strength", subtitle: "Build Power", detail: "Compound movements for lasting gains" },
                                    { icon: Heart, title: "Endurance", subtitle: "Boost Stamina", detail: "Cardiovascular and muscular conditioning" },
                                    { icon: Lightbulb, title: "Mobility", subtitle: "Improve Range", detail: "Enhanced flexibility and joint health" }
                                ]
                            },
                            {
                                title: "Sustainable Habits",                                description: "Build consistent routines that fit your lifestyle and lead to long-term results, not quick fixes",                                bentoComponent: "timeline",                                heading: "Your Training Journey",                                subheading: "Three phases to transformation",                                items: [
                                    { label: "Foundation", detail: "Building proper form and establishing baseline fitness" },
                                    { label: "Progression", detail: "Gradually increasing intensity and complexity" },
                                    { label: "Mastery", detail: "Peak performance and maintaining long-term results" }
                                ],
                                completedLabel: "Your transformation begins"
                            }
                        ]}
                        textboxLayout="default"
                        animationType="slide-up"
                        useInvertedBackground={true}
                        buttons={[
                            { text: "Start Training", href: "#contact" }
                        ]}
                    />
                </div>

                <div id="testimonials" data-section="testimonials">
                    <SocialProofOne
                        title="Trusted by Fitness Enthusiasts"
                        description="Hear from clients who have achieved their transformation goals."
                        names={["Jessica C.", "Marcus R.", "David W.", "Alex K.", "Sarah P.", "Jordan B.", "Elena M.", "Kevin L."]}
                        useInvertedBackground={false}
                        textboxLayout="default"
                    />
                </div>

                <div id="contact" data-section="contact">
                    <ContactSplitForm
                        title="Ready to Start Your Transformation?"
                        description="Fill out the form below to book your free consultation and kickstart your fitness journey. I look forward to working with you!"
                        inputs={[
                            { name: "name", type: "text", placeholder: "Full Name" },
                            { name: "email", type: "email", placeholder: "Email Address" }
                        ]}
                        textarea={{ name: "goals", placeholder: "Briefly describe your fitness goals..." }}
                        buttonText="Submit Request"
                        onSubmit={(data) => console.log(data)}
                        useInvertedBackground={true}
                        imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DbxJR6IxC1XHwzUSsYvpr3NNCx/uploaded-1778565369691-92lmelu9.jpg"
                    />
                </div>

                <div id="footer" data-section="footer">
                    <FooterSimple
                        columns={[
                            { title: "Company", items: [{ label: "About" }, { label: "Careers" }] },
                            { title: "Support", items: [{ label: "Contact" }, { label: "FAQ" }] },
                            { title: "Legal", items: [{ label: "Privacy Policy" }, { label: "Terms of Service" }] }
                        ]}
                        bottomLeftText="© 2025 Professional Personal Training"
                        bottomRightText="All rights reserved."
                    />
                </div>
            </ReactLenis>
        </ThemeProvider>
    );
}