"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBase from '@/components/sections/footer/FooterBase';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import { Clock, ShieldCheck } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="largeSizeMediumTitles"
        background="noise"
        cardStyle="subtle-shadow"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",
          id: "/",
        },
        {
          name: "Services",
          id: "/services",
        },
        {
          name: "Book Appointment",
          id: "/book",
        },
        {
          name: "Contact",
          id: "/contact",
        },
      ]}
      brandName="CareLink Systems"
    />
  </div>

  <div id="booking-body" data-section="booking-body">
      <ContactSplit
      useInvertedBackground={true}
      background={{
        variant: "animated-grid",
      }}
      title="Schedule Your Visit"
      description="Select your doctor and preferred slot to manage your health appointment efficiently."
      tag="Booking"
      imageSrc="http://img.b2bpic.net/free-photo/physician-meeting-with-elderly-male-patient-discuss-results-cabinet_482257-126253.jpg"
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="metric" data-section="metric">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      title="Booking Efficiency"
      description="We respect your time."
      metrics={[
        {
          id: "m6",
          value: "2 min",
          title: "Avg Booking",
          description: "Time to schedule",
          icon: Clock,
        },
        {
          id: "m7",
          value: "100%",
          title: "Digital Records",
          description: "Secured health data",
          icon: ShieldCheck,
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Navigate",
          items: [
            {
              label: "Home",
              href: "/",
            },
            {
              label: "Services",
              href: "/services",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "Book Now",
              href: "/book",
            },
            {
              label: "Contact",
              href: "/contact",
            },
          ],
        },
      ]}
      logoText="CareLink"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
