"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterBase from '@/components/sections/footer/FooterBase';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import { Smile, Star } 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="services-body" data-section="services-body">
      <FeatureCardTwentySix
      textboxLayout="inline-image"
      useInvertedBackground={true}
      features={[
        {
          title: "Cardiology",
          description: "Heart care by top-tier cardiologists.",
          buttonIcon: "ArrowRight",
          imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-doing-sport-with-stats_23-2150040517.jpg",
          imageAlt: "emergency medical care icon",
        },
        {
          title: "Pediatrics",
          description: "Gentle care for your little ones.",
          buttonIcon: "ArrowRight",
          imageSrc: "http://img.b2bpic.net/free-photo/empty-hallway-background_23-2149408824.jpg",
          imageAlt: "emergency medical care icon",
        },
        {
          title: "Oncology",
          description: "Supportive and advanced cancer treatments.",
          buttonIcon: "ArrowRight",
          imageSrc: "http://img.b2bpic.net/free-vector/digital-health-flat_98292-655.jpg",
          imageAlt: "emergency medical care icon",
        },
        {
          title: "Neurology",
          description: "Advanced brain and nerve center services.",
          buttonIcon: "ArrowRight",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-scientist-collecting-checking-blood-test-tubes-drug-test-doing-medical-study_482257-133591.jpg",
          imageAlt: "emergency medical care icon",
        },
      ]}
      title="Our Specialized Departments"
      description="Dedicated wards for every medical need."
    />
  </div>

  <div id="metric" data-section="metric">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      title="Service Standards"
      description="Quality care metrics."
      metrics={[
        {
          id: "m4",
          value: "99%",
          title: "Satisfaction",
          description: "Patient feedback",
          icon: Smile,
        },
        {
          id: "m5",
          value: "4.9",
          title: "Rating",
          description: "Average hospital rating",
          icon: Star,
        },
      ]}
    />
  </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>
  );
}
