"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import FooterBase from '@/components/sections/footer/FooterBase';
import { useBlogPosts } from "@/hooks/useBlogPosts";

export default function BlogPage() {
    const { posts, isLoading } = useBlogPosts();

    return (
        <ThemeProvider
            defaultButtonVariant="hover-magnetic"
            defaultTextAnimation="background-highlight"
            borderRadius="rounded"
            contentWidth="medium"
            sizing="mediumLarge"
            background="fluid"
            cardStyle="subtle-shadow"
            primaryButtonStyle="primary-glow"
            secondaryButtonStyle="glass"
            headingFontWeight="semibold"
        >
            <ReactLenis root>
                <div id="nav" data-section="nav">
                    <NavbarLayoutFloatingInline
                        navItems={[
                            { name: "Home", id: "/" },
                            { name: "Services", id: "services" },
                            { name: "Why Choose Us", id: "why-choose-us" },
                            { name: "About Us", id: "about" },
                            { name: "Maintenance", id: "maintenance" },
                        ]}
                        brandName="ProTech"
                        button={{ text: "Call Now", href: "tel:815-777-2744" }}
                        className="py-4 px-6"
                        navItemClassName="text-foreground hover:text-primary-cta"
                        buttonClassName="bg-primary-cta text-secondary-cta px-6 py-3 rounded-full hover:scale-105 transition-transform duration-300"
                        buttonTextClassName="font-semibold"
                    />
                </div>

                    {isLoading ? (
                        <div className="w-content-width mx-auto py-20 text-center">
                            <p className="text-foreground">Loading posts...</p>
                        </div>
                    ) : (
                        <div id="blog" data-section="blog">
                            <BlogCardOne
                                blogs={posts}
                                title="Latest Articles"
                                description="Insights and updates from our team"
                                animationType="slide-up"
                                textboxLayout="default"
                                useInvertedBackground={false}
                                carouselMode="buttons"
                            />
                        </div>
                    )}

                    <div id="footer" data-section="footer">
                        <FooterBase
                            columns={[
                                { title: "Services", items: [{ label: "Furnace Repair", href: "#services" }, { label: "AC Replacement", href: "#services" }, { label: "Emergency HVAC", href: "#services" }, { label: "Maintenance Plans", href: "#maintenance-plan" }] },
                                { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Why Choose Us", href: "#why-choose-us" }, { label: "Contact", href: "#contact" }, { label: "Reviews", href: "#social-proof" }] },
                                { title: "Legal", items: [{ label: "Privacy Policy", href: "/privacy" }, { label: "Terms of Service", href: "/terms" }] }
                            ]}
                            logoText="ProTech Heating & Cooling"
                            copyrightText="© 2024 ProTech Heating & Cooling Inc. All rights reserved."
                            className="py-12 md:py-16 lg:py-20 bg-foreground text-background-accent"
                            containerClassName="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-4 gap-8"
                            logoTextClassName="text-2xl font-bold text-background mb-6"
                            columnsClassName="grid grid-cols-2 md:grid-cols-3 gap-8 col-span-full md:col-span-3"
                            columnTitleClassName="text-lg font-semibold text-background mb-4"
                            columnItemClassName="text-background/80 hover:text-primary-cta transition-colors duration-200"
                            copyrightContainerClassName="mt-8 md:mt-0 text-background/60 text-sm"
                            copyrightTextClassName="mb-2"
                            privacyButtonClassName="text-primary-cta hover:underline"
                        />
                    </div>
            </ReactLenis>
        </ThemeProvider>
    );
}
