"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import { Camera, MapPin, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",
          id: "/",
        },
        {
          name: "Services",
          id: "/services",
        },
        {
          name: "Gallery",
          id: "/gallery",
        },
        {
          name: "Contact",
          id: "/contact",
        },
      ]}
      brandName="High Rise Roofing"
    />
  </div>

  <div id="gallery-body" data-section="gallery-body">
      <ProductCardOne
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      products={[
        {
          id: "g1",
          name: "Before & After",
          price: "Completed",
          imageSrc: "http://img.b2bpic.net/free-photo/residential-house_53876-23089.jpg?_wi=3",
        },
        {
          id: "g2",
          name: "Detail Shot",
          price: "Completed",
          imageSrc: "http://img.b2bpic.net/free-photo/brick-wall-background-texture_1048-16945.jpg?_wi=4",
        },
        {
          id: "g3",
          name: "Wide Exterior",
          price: "Completed",
          imageSrc: "http://img.b2bpic.net/free-photo/facade-modern-new-building_23-2147694757.jpg?_wi=3",
        },
        {
          id: "g4",
          name: "Roof Slate",
          price: "Completed",
          imageSrc: "http://img.b2bpic.net/free-photo/residential-house_53876-23089.jpg?_wi=4",
        },
        {
          id: "g5",
          name: "Skylight Install",
          price: "Completed",
          imageSrc: "http://img.b2bpic.net/free-photo/brick-wall-background-texture_1048-16945.jpg?_wi=5",
        },
        {
          id: "g6",
          name: "Property View",
          price: "Completed",
          imageSrc: "http://img.b2bpic.net/free-photo/facade-modern-new-building_23-2147694757.jpg?_wi=4",
        },
      ]}
      title="Our Craftsmanship"
      description="See the precision behind every project."
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={false}
      title="Gallery Stats"
      metrics={[
        {
          icon: Camera,
          label: "Projects Captured",
          value: "200+",
        },
        {
          icon: MapPin,
          label: "Regions Served",
          value: "5",
        },
        {
          icon: Star,
          label: "Avg Rating",
          value: "4.9",
        },
      ]}
      metricsAnimation="blur-reveal"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="High Rise Roofing"
      columns={[
        {
          title: "Services",
          items: [
            {
              label: "Installation",
              href: "/services",
            },
            {
              label: "Repairs",
              href: "/services",
            },
            {
              label: "Inspections",
              href: "/services",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "About Us",
              href: "/about",
            },
            {
              label: "Our Work",
              href: "/gallery",
            },
            {
              label: "Contact",
              href: "/contact",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
