"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 PricingCardOne from "@/components/sections/pricing/PricingCardOne";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Award, Dumbbell, Zap, Star, ShieldCheck, CheckCircle2 } from "lucide-react";

export default function ChristinaFitLifePage() {
    return (
        <ThemeProvider
            defaultButtonVariant="hover-bubble"
            defaultTextAnimation="reveal-blur"
            borderRadius="soft"
            contentWidth="medium"
            sizing="medium"
            background="noise"
            cardStyle="glass-elevated"
            primaryButtonStyle="gradient"
            secondaryButtonStyle="glass"
            headingFontWeight="semibold"
        >
            <ReactLenis root>
                <div id="nav" data-section="nav">
                    <NavbarStyleFullscreen
                        navItems={[
                            { name: "Home", id: "hero" },
                            { name: "About", id: "about" },
                            { name: "Programs", id: "services" },
                            { name: "Pricing", id: "pricing" },
                            { name: "Contact", id: "contact" }
                        ]}
                        brandName="Christina’s Fit Life"
                    />
                </div>

                <div id="hero" data-section="hero">
                    <HeroSplitKpi
                        title="Elevate Your Life, One Step at a Time"
                        description="Customized fitness coaching designed for the busy mom who wants to regain her confidence, vitality, and strength. Join a community built on balance, not deprivation."
                        background={{ variant: "sparkles-gradient" }}
                        kpis={[
                            { value: "100%", label: "Personalized" },
                            { value: "Flexible", label: "Approach" },
                            { value: "Mom-Tested", label: "Methods" }
                        ]}
                        enableKpiAnimation={true}
                        buttons={[
                            { text: "Apply for Coaching", href: "#contact" },
                            { text: "View Programs", href: "#services" },
                            { text: "Learn More", href: "#about" }
                        ]}
                        imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DbxJR6IxC1XHwzUSsYvpr3NNCx/uploaded-1778565239456-76fxax8u.jpg"
                        imageAlt="Christina fit life"
                    />
                </div>

                <div id="about" data-section="about">
                    <TextAbout
                        title="Hi, I'm Christina. I know the unique challenges of being a mom and wanting to feel like yourself again. My mission is to simplify fitness so you can thrive as a parent and a woman, without the burnout."
                        ariaLabel="About section"
                    />
                </div>

                <div id="services" data-section="services">
                    <FeatureCardSeven
                        title="My Coaching Programs"
                        description="Progressive paths to your best self."
                        tag="Coaching"
                        tagIcon={Dumbbell}
                        features={[
                            { title: "Foundation", description: "Building healthy habits and establishing your base.", imageSrc: "https://img.b2bpic.net/free-photo/people-training-athletics_23-2151077709.jpg?id=150856792" },
                            { title: "Elevation", description: "Taking your fitness to the next level of performance.", imageSrc: "https://img.b2bpic.net/free-photo/people-training-athletics_23-2151077709.jpg?id=150856792" },
                            { title: "Transformation", description: "Complete lifestyle shift for long-term health.", imageSrc: "https://img.b2bpic.net/free-photo/people-training-athletics_23-2151077709.jpg?id=150856792" }
                        ]}
                        animationType="slide-up"
                        useInvertedBackground={false}
                    />
                </div>

                <div id="pricing" data-section="pricing">
                    <PricingCardOne
                        title="Investment Options"
                        description="Flexible payment plans to suit your budget, including Affirm and Afterpay."
                        plans={[
                            { id: "plan1", badge: "Affirm/Afterpay", price: "$199/mo", subtitle: "Essential access", features: ["Custom workouts", "Support"] },
                            { id: "plan2", badge: "Most Popular", price: "$299/mo", subtitle: "Complete transformation", features: ["Custom workouts", "Nutrition", "Weekly check-ins"] },
                            { id: "plan3", badge: "Premium", price: "$499/mo", subtitle: "1-on-1 focus", features: ["Personal coaching", "Direct access", "Full support"] }
                        ]}
                        animationType="slide-up"
                        useInvertedBackground={true}
                    />
                </div>

                <div id="testimonials" data-section="testimonials">
                    <SocialProofOne
                        title="Social Community"
                        names={["Instagram", "Facebook", "Twitter", "LinkedIn"]}
                        description="Follow along for daily tips and mom-hacks."
                    />
                </div>

                <div id="contact" data-section="contact">
                    <ContactCTA
                        tag="Join the Movement"
                        title="Ready to start your journey?"
                        description="Apply today to reserve your spot in my coaching program."
                        buttons={[{ text: "Submit Application", href: "#contact" }]}
                        background={{ variant: "sparkles-gradient" }}
                        useInvertedBackground={false}
                    />
                </div>

                <div id="footer" data-section="footer">
                    <FooterSimple
                        columns={[{ title: "Company", items: [{ label: "About" }, { label: "Privacy" }] }]}
                    />
                </div>
            </ReactLenis>
        </ThemeProvider>
    );
}