"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Activity, Award, CheckCircle, Clock, PhoneCall, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="small"
        sizing="largeSmall"
        background="noise"
        cardStyle="solid"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Services",
          id: "features",
        },
        {
          name: "Team",
          id: "team",
        },
        {
          name: "Testimonials",
          id: "testimonials",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Metro Poly Clinic"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="Excellence in Every Patient Care"
      description="Metro Poly Clinic provides world-class medical expertise with a compassionate, personalized approach, ensuring your health journey is met with comfort and precision."
      buttons={[
        {
          text: "Book Appointment",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/illuminated-couch-armchair_1203-771.jpg"
      imageAlt="Luxurious medical clinic waiting area"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/alpine-hotel-hosting-winter-sports_482257-102253.jpg",
          alt: "Alpine hotel hosting winter sports",
        },
        {
          src: "http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797749.jpg",
          alt: "Modern office space with futuristic decor and furniture",
        },
        {
          src: "http://img.b2bpic.net/free-photo/fuzzy-room-with-television_1203-947.jpg",
          alt: "Fuzzy room with a television",
        },
        {
          src: "http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797686.jpg",
          alt: "Modern office space with futuristic decor and furniture",
        },
        {
          src: "http://img.b2bpic.net/free-photo/illuminated-couch-armchair_1203-771.jpg",
          alt: "Luxurious medical clinic waiting area",
        },
      ]}
      avatarText="Trusted by 15,000+ happy patients"
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={false}
      title="Our Medical Milestones"
      metrics={[
        {
          icon: Users,
          label: "Patients Served",
          value: "15,000+",
        },
        {
          icon: Award,
          label: "Board Certified",
          value: "50+",
        },
        {
          icon: Clock,
          label: "Years Active",
          value: "20+",
        },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardNineteen
      textboxLayout="split"
      useInvertedBackground={true}
      features={[
        {
          tag: "Expertise",
          title: "Precision Diagnostics",
          subtitle: "Advanced imaging technology.",
          description: "Our state-of-the-art diagnostic facilities provide the clarity needed for accurate and early diagnosis.",
          imageSrc: "http://img.b2bpic.net/free-photo/doctor-discussing-upcoming-surgery_1098-21537.jpg",
        },
        {
          tag: "Technology",
          title: "Modern Treatments",
          subtitle: "Innovative medical approach.",
          description: "We utilize the latest in medical technology to provide treatments that are safe, effective, and minimally invasive.",
          imageSrc: "http://img.b2bpic.net/free-photo/doctor-from-future-concept_23-2151111239.jpg",
        },
        {
          tag: "Quality",
          title: "Patient Advocacy",
          subtitle: "Dedicated care management.",
          description: "We prioritize clear communication and support for all patients, ensuring you feel empowered throughout your health journey.",
          imageSrc: "http://img.b2bpic.net/free-photo/chemist-nurse-sitting-scientific-equipped-lab-examining-virus-evolution-using-high-tech-researching-treatment-against-covid19-virus_482257-480.jpg",
        },
      ]}
      title="Comprehensive Care Services"
      description="Our clinic integrates advanced technology with traditional patient-focused care."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "99.9%",
          title: "Diagnostic Accuracy",
          description: "Unmatched precision in clinical testing.",
          icon: CheckCircle,
        },
        {
          id: "m2",
          value: "98%",
          title: "Patient Recovery",
          description: "Consistently meeting wellness milestones.",
          icon: Activity,
        },
        {
          id: "m3",
          value: "24/7",
          title: "Emergency Support",
          description: "Always here when you need us.",
          icon: PhoneCall,
        },
      ]}
      title="Quality Indicators"
      description="Excellence defined by data and patient outcomes."
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      members={[
        {
          id: "t1",
          name: "Dr. Sarah Miller",
          role: "Chief Medical Officer",
          description: "With over 20 years of expertise in internal medicine, Dr. Miller leads our clinical strategy with excellence.",
          imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-bald-male-doctor-wearing-medical-robe-stethoscope-sitting-desk-work-with-medical-tools-isolated-green-background_141793-63449.jpg",
        },
        {
          id: "t2",
          name: "Dr. James Aris",
          role: "Surgical Specialist",
          description: "An internationally recognized surgeon focusing on minimally invasive techniques and patient recovery.",
          imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-doctor-with-stethoscope-clinic_1303-19764.jpg",
        },
        {
          id: "t3",
          name: "Dr. Elena Vance",
          role: "Pediatric Consultant",
          description: "Dr. Vance is known for her exceptionally empathetic care and precise diagnostic skills with younger patients.",
          imageSrc: "http://img.b2bpic.net/free-photo/asian-child-wearing-doctor-s-suit-having-stethoscope_35913-2711.jpg",
        },
      ]}
      title="Meet Our Medical Experts"
      description="A multidisciplinary team dedicated to your holistic well-being and exceptional patient outcomes."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Alice Thompson",
          imageSrc: "http://img.b2bpic.net/free-photo/happy-african-american-healthcare-expert-looking-camera_637285-11471.jpg",
        },
        {
          id: "2",
          name: "Robert Jenkins",
          imageSrc: "http://img.b2bpic.net/free-photo/seniors-restaurant_1098-14617.jpg",
        },
        {
          id: "3",
          name: "Susan P. O'Connor",
          imageSrc: "http://img.b2bpic.net/free-photo/smiley-women-communicating-through-sign-language_23-2148681074.jpg",
        },
        {
          id: "4",
          name: "Mark Henderson",
          imageSrc: "http://img.b2bpic.net/free-photo/visits-this-doctor-always-are-pleasure_329181-2230.jpg",
        },
        {
          id: "5",
          name: "Chloe Davies",
          imageSrc: "http://img.b2bpic.net/free-photo/happy-senior-woman-shaking-hands-with-surgeon-hospital-hallway_637285-5280.jpg",
        },
      ]}
      cardTitle="Patient Success Stories"
      cardTag="Trusted by our Community"
      cardAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",
          title: "Do you accept walk-ins?",
          content: "We prioritize scheduled appointments to ensure dedicated time for every patient, but we strive to accommodate emergencies.",
        },
        {
          id: "q2",
          title: "What insurance do you take?",
          content: "We partner with major regional insurance providers. Please contact our reception to confirm coverage details.",
        },
        {
          id: "q3",
          title: "How can I get my records?",
          content: "Medical records are easily accessible via our secure, encrypted digital patient portal.",
        },
      ]}
      sideTitle="Your Questions, Answered"
      sideDescription="We believe in transparency and providing clear, accessible information for our patients."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Book Your Consultation"
      description="Take the next step in your health journey. Schedule an appointment or reach out with any questions."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Your Full Name",
          required: true,
        },
        {
          name: "email",
          type: "email",
          placeholder: "Your Email Address",
          required: true,
        },
        {
          name: "phone",
          type: "tel",
          placeholder: "Your Phone Number",
          required: true,
        },
      ]}
      textarea={{
        name: "message",
        placeholder: "How can we assist you?",
        rows: 4,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/nobody-empty-waiting-room-lobby-with-desktop-reception-helping-patients-with-medical-insurance-attend-checkup-visit-appointment-waiting-area-with-counter-hospital_482257-47691.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/blur-hospital-clinic-interior_1203-8607.jpg"
      logoText="Metro Poly Clinic"
      columns={[
        {
          title: "Clinic",
          items: [
            {
              label: "Services",
              href: "#features",
            },
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Team",
              href: "#team",
            },
          ],
        },
        {
          title: "Legal",
          items: [
            {
              label: "Privacy",
              href: "#",
            },
            {
              label: "Terms",
              href: "#",
            },
          ],
        },
        {
          title: "Social",
          items: [
            {
              label: "LinkedIn",
              href: "#",
            },
            {
              label: "Instagram",
              href: "#",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
