"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import { Box, CheckCircle, Clock, Lock, Smartphone } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="mediumLarge"
        sizing="medium"
        background="none"
        cardStyle="inset"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingInline
            navItems={[
              { name: "Dashboard", id: "dashboard" },
              { name: "Management", id: "management" },
              { name: "Finance", id: "finance" },
              { name: "Reports", id: "reports" },
            ]}
            brandName="SmartLocker"
            button={{ text: "Get Started", href: "#contact" }}
          />
        </div>

        <div id="kpi" data-section="kpi">
          <MetricCardOne
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="uniform-all-items-equal"
            useInvertedBackground={false}
            metrics={[
              { id: "m1", value: "14", title: "Devices", description: "Active locker banks", icon: Smartphone },
              { id: "m2", value: "124", title: "Total Boxes", description: "All available slots", icon: Box },
              { id: "m3", value: "48", title: "Vacant", description: "Ready for delivery", icon: CheckCircle },
              { id: "m4", value: "12", title: "Reserved", description: "Pending pickup", icon: Clock },
              { id: "m5", value: "64", title: "In Use", description: "Currently occupied", icon: Lock },
            ]}
            title="Locker Bank Overview"
            description="Real-time occupancy status across all managed locker units."
          />
        </div>

        <div id="features" data-section="features">
          <FeatureCardOne
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="four-items-2x2-equal-grid"
            useInvertedBackground={true}
            features={[
              { title: "Bank A - Lobby North", description: "85% utilization across 24 units.", imageSrc: "http://img.b2bpic.net/free-vector/20-computer-hardware-line-icon-pack-like-presentation-hardware-computer-floppy-computer_1142-15526.jpg?_wi=1" },
              { title: "Bank B - Lobby South", description: "40% utilization across 24 units.", imageSrc: "http://img.b2bpic.net/free-vector/20-computer-hardware-line-icon-pack-like-presentation-hardware-computer-floppy-computer_1142-15526.jpg?_wi=2" },
              { title: "Control Unit", description: "System operational status: Online.", imageSrc: "http://img.b2bpic.net/free-vector/20-computer-hardware-line-icon-pack-like-presentation-hardware-computer-floppy-computer_1142-15526.jpg?_wi=3" },
              { title: "Bank D - Basement", description: "92% utilization across 20 units.", imageSrc: "http://img.b2bpic.net/free-vector/20-computer-hardware-line-icon-pack-like-presentation-hardware-computer-floppy-computer_1142-15526.jpg?_wi=4" },
            ]}
            title="System Control & Status"
            description="Interactive locker bank grid interface for building managers."
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactSplitForm
            useInvertedBackground={false}
            title="Reporting & Activity Feed"
            description="Recent maintenance alerts and delivery logs."
            inputs={[
              { name: "managerName", type: "text", placeholder: "Manager Name", required: true },
              { name: "issue", type: "text", placeholder: "Support Issue", required: true },
            ]}
            textarea={{ name: "description", placeholder: "Detail report here...", rows: 4, required: true }}
            imageSrc="http://img.b2bpic.net/free-photo/transportation-concept-with-vehicles_23-2148996438.jpg"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            columns={[
              { items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] },
              { items: [{ label: "Help Desk", href: "#" }, { label: "Status", href: "#" }] },
            ]}
            logoText="TekLocker"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}