"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 HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Activity, Clock, Users } 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="hero" data-section="hero">
      <HeroOverlay
      title="Compassionate Care, Modern Management"
      description="Streamlining your path to health with advanced scheduling and specialized medical services."
      buttons={[
        {
          text: "Book Appointment",
          href: "/book",
        },
        {
          text: "View Services",
          href: "/services",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/empty-hallway-background_23-2149408824.jpg"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/fuzzy-room-with-television_1203-947.jpg",
          alt: "Staff Member 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/empty-desk-with-table-medical-paperwork-clinical-appointment_482257-22694.jpg",
          alt: "Staff Member 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/new-normal-with-face-mask-safety-measures_23-2148656701.jpg",
          alt: "Staff Member 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/nobody-doctors-office-with-medical-equipment-tools_482257-27168.jpg",
          alt: "Staff Member 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/empty-hallway-background_23-2149408824.jpg",
          alt: "Modern facility overview",
        },
      ]}
      avatarText="Trusted by 500+ patients daily"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentySix
      textboxLayout="inline-image"
      useInvertedBackground={true}
      features={[
        {
          title: "General Consultation",
          description: "Expert guidance from our seasoned specialists.",
          buttonIcon: "ArrowRight",
          imageSrc: "http://img.b2bpic.net/free-vector/digital-health-flat_98292-655.jpg",
          imageAlt: "medical consultation flat icon",
        },
        {
          title: "Emergency Services",
          description: "24/7 round-the-clock emergency medical response.",
          buttonIcon: "ArrowRight",
          imageSrc: "http://img.b2bpic.net/free-photo/empty-hallway-background_23-2149408824.jpg",
          imageAlt: "medical consultation flat icon",
        },
        {
          title: "Diagnostic Imaging",
          description: "State-of-the-art MRI, CT and X-ray services.",
          buttonIcon: "ArrowRight",
          imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-doing-sport-with-stats_23-2150040517.jpg",
          imageAlt: "medical consultation flat icon",
        },
        {
          title: "Dental Wellness",
          description: "Comprehensive dental checkups and procedures.",
          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: "medical consultation flat icon",
        },
      ]}
      title="Comprehensive Care Services"
      description="Our hospital offers a wide range of specialized medical departments to ensure you receive the highest quality of treatment."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="The appointment booking process was seamless, and the medical care I received was truly exceptional and professional."
      rating={5}
      author="Alice Thompson"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/they-aren-t-traditional-senior-marriage_329181-7783.jpg",
          alt: "Alice Thompson",
        },
        {
          src: "http://img.b2bpic.net/free-photo/african-american-doctor-hospital-room-discussing-diagnosis-treatment-with-sick-senior-man-lay_482257-2862.jpg",
          alt: "John Doe",
        },
        {
          src: "http://img.b2bpic.net/free-photo/senior-couple-with-mugs-coffee_23-2148014529.jpg",
          alt: "Sarah Smith",
        },
        {
          src: "http://img.b2bpic.net/free-photo/caring-grandchild-hugging-sick-elderly-grandparent-showing-love_482257-20397.jpg",
          alt: "Robert Chen",
        },
        {
          src: "http://img.b2bpic.net/free-photo/retired-woman-enjoying-visit-from-little-girl-mother-hospital-ward-niece-daughter-visiting-hospitalized-grandma-with-sickness-bed-talking-together-with-mom-old-man_482257-37153.jpg",
          alt: "Maria Garcia",
        },
      ]}
      ratingAnimation="blur-reveal"
      avatarsAnimation="blur-reveal"
    />
  </div>

  <div id="metric" data-section="metric">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      title="Our Clinical Impact"
      description="Proven results for patients across our network."
      metrics={[
        {
          id: "m1",
          value: "15k+",
          title: "Patients Served",
          description: "Happy patients seen",
          icon: Users,
        },
        {
          id: "m2",
          value: "120",
          title: "Specialists",
          description: "Board certified",
          icon: Activity,
        },
        {
          id: "m3",
          value: "24/7",
          title: "Care Access",
          description: "Available daily",
          icon: Clock,
        },
      ]}
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      title="Leadership Team"
      description="Meet the medical professionals guiding our vision."
      members={[
        {
          id: "t1",
          name: "Dr. Aris V.",
          role: "Chief Medical Officer",
          description: "30 years in surgery.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-doctor-with-stethoscope-lights_181624-15323.jpg",
        },
        {
          id: "t2",
          name: "Dr. Sarah L.",
          role: "Head of Pediatrics",
          description: "Expert in child care.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-pediatrician-work_23-2151686838.jpg",
        },
      ]}
    />
  </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>
  );
}
