"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import FooterBase from "@/components/sections/footer/FooterBase";
import ReactLenis from "lenis/react";
import { Heart, Users } from "lucide-react";

export default function GivingPage() {
    const navItems = [
        { name: "Home", id: "/" },
        { name: "Giving", id: "/giving" },
        { name: "Contact", id: "/contact" },
    ];

    return (
        <ThemeProvider
            defaultButtonVariant="icon-arrow"
            defaultTextAnimation="entrance-slide"
            borderRadius="rounded"
            contentWidth="medium"
            sizing="medium"
            background="none"
            cardStyle="glass-elevated"
            primaryButtonStyle="shadow"
            secondaryButtonStyle="solid"
            headingFontWeight="medium"
        >
            <ReactLenis root>
                <NavbarLayoutFloatingInline navItems={navItems} button={{ text: "Give", href: "/giving" }} />
                <MetricCardThree
                    title="Our Impact"
                    description="Your generosity makes a real difference."
                    animationType="slide-up"
                    textboxLayout="split"
                    useInvertedBackground={false}
                    metrics={[
                        { id: "1", icon: Heart, title: "Total Donated", value: "$500k" },
                        { id: "2", icon: Users, title: "Lives Impacted", value: "10k" },
                    ]}
                />
                <PricingCardThree
                    title="Support Our Mission"
                    description="Choose an option that works best for you."
                    textboxLayout="split"
                    animationType="slide-up"
                    useInvertedBackground={false}
                    plans={[
                        {
                            id: "monthly",                            name: "Monthly Partner",                            price: "$50",                            features: ["Exclusive updates", "Community access"],
                            buttons: [{ text: "Give Monthly", href: "#" }],
                        },
                        {
                            id: "one-time",                            name: "One-Time Gift",                            price: "$100",                            features: ["Receipt provided"],
                            buttons: [{ text: "Give Now", href: "#" }],
                        },
                    ]}
                />
                <FooterBase
                    logoText="Coach"
                    columns={[{ title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Giving", href: "/giving" }, { label: "Contact", href: "/contact" }] }]}
                />
            </ReactLenis>
        </ThemeProvider>
    );
}