"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { Instagram, Facebook } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="largeSmallSizeLargeTitles"
        background="blurBottom"
        cardStyle="soft-shadow"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="bold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
            <NavbarLayoutFloatingInline
            navItems={[
                { name: "Home", id: "/" },
                { name: "Our Premium Fleet", id: "/fleet" },
                { name: "Contact us", id: "/contact-us" },
            ]}
            brandName="CleanScene"
            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777837799704-b8guhfm1.png"
            logoAlt="CleanScene Logo"
            button={{ text: "Get My Free Estimate", href: "/estimate" }}
            className="py-2"
            />
        </div>

        <div id="hero" data-section="hero">
            <HeroSplitKpi
            background={{ variant: "gradient-bars" }}
            title="Premium Portable Restrooms"
            titleClassName="text-[#0a7039]"
            description="Proudly serving Northeast Wisconsin."
            kpis={[
                { value: "10+", label: "Counties Served" },
                { value: "100%", label: "Guest Comfort" },
                { value: "100%", label: "Local Team" },
            ]}
            enableKpiAnimation={true}
            buttons={[
                { text: "Get My Free Estimate", href: "/estimate" },
                { text: "View The Fleet", href: "/fleet" },
            ]}
            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777135032652-q27squi7.jpg?_wi=1"
            mediaAnimation="slide-up"
            />
        </div>

        <div id="about" data-section="about">
            <TextSplitAbout
            useInvertedBackground={false}
            title="The CleanScene Difference"
            titleClassName="text-[#0a7039]"
            description={[
                "Transform the standard event experience by providing premium restroom facilities that your guests will truly appreciate.", 
                "Hiring premium restroom trailers means you are ensuring immaculate comfort and sophisticated design for your event."
            ]}
            />
        </div>

        <div id="fleet-preview" data-section="fleet-preview">
            <ProductCardTwo
            animationType="slide-up"
            textboxLayout="split-description"
            gridVariant="asymmetric-60-wide-40-narrow"
            useInvertedBackground={false}
            products={[
                { id: "p1", brand: "CleanScene", name: "3 Station, Private Floorplan Restroom Trailer", price: "$1,375 per day", rating: 5, reviewCount: "12", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777832277795-ebq2l26f.png?_wi=2", onProductClick: () => {} },
                { id: "p2", brand: "CleanScene", name: "4 Station, Community Floorplan Restroom Trailer", price: "$1,825 per day", rating: 5, reviewCount: "15", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Cr9i1HT3S4vLNiV9XJ6S4fk81W/uploaded-1777832470445-mr4qosuh.png?_wi=1", onProductClick: () => {} },
            ]}
            title="Our Premium Fleet"
            textBoxTitleClassName="text-[#0a7039]"
            description="Made-in-USA trailers designed for peak comfort."
            buttons={[{ text: "View Full Specifications", href: "/fleet" }]}
            />
        </div>

        <div id="footer" data-section="footer">
            <div className="flex flex-col items-center py-8">
              <div className="flex items-center mb-4 gap-4">
                <a href="https://www.instagram.com/cleanscene" target="_blank" rel="noopener noreferrer" aria-label="Follow CleanScene on Instagram" className="text-[#0a7039] hover:opacity-80 transition-opacity">
                  <Instagram size={24} />
                </a>
                <a href="https://www.facebook.com/people/CleanScene-Restroom-Rentals/61588358724791/?sk=about" target="_blank" rel="noopener noreferrer" aria-label="CleanScene Restroom Rentals on Facebook" className="text-[#0a7039] hover:opacity-80 transition-opacity">
                  <Facebook size={24} />
                </a>
              </div>
              <FooterLogoEmphasis
                columns={[
                  { items: [{ label: "Home", href: "/" }, { label: "Our Premium Fleet", href: "/fleet" }, { label: "Get My Free Estimate", href: "/estimate" }] },
                  { items: [{ label: "Contact Us", href: "/contact-us" }, { label: "Privacy Policy", href: "/privacy" }, { label: "Terms and Conditions", href: "/terms" }] },
                ]}
                logoText=""
              />
            </div>
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}