"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="smallMedium"
        sizing="mediumLargeSizeMediumTitles"
        background="floatingGradient"
        cardStyle="gradient-radial"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="glass"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "hero"},
        {
          name: "About",          id: "about"},
        {
          name: "Services",          id: "features"},
        {
          name: "Testimonials",          id: "testimonials"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="New Janta Hospital"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitKpi
      background={{
        variant: "gradient-bars"}}
      title="Your Trusted Healthcare Partner in Buddheshwar"
      description="New Janta Hospital provides high-quality, compassionate medical care 24/7. Excellence in every treatment."
      kpis={[
        {
          value: "24/7",          label: "Emergency Care"},
        {
          value: "120+",          label: "5-Star Reviews"},
        {
          value: "Expert",          label: "Medical Team"},
      ]}
      enableKpiAnimation={true}
      buttons={[
        {
          text: "Call Now",          href: "tel:09454957086"},
        {
          text: "Get Directions",          href: "#contact"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/bottom-view-building_23-2148106954.jpg"
      imageAlt="New Janta Hospital entrance"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/buildings-with-birds_23-2148106901.jpg",          alt: "Doctor portrait 1"},
        {
          src: "http://img.b2bpic.net/free-photo/buildings-with-sky_23-2148107156.jpg",          alt: "Doctor portrait 2"},
        {
          src: "http://img.b2bpic.net/free-photo/bangkok-thailand-november-11-2024-glimpse-into-bangkok-urban-landscape_482257-123954.jpg",          alt: "Doctor portrait 3"},
        {
          src: "http://img.b2bpic.net/free-photo/industrial-park-factory-building-warehouse_1417-1916.jpg",          alt: "Doctor portrait 4"},
        {
          src: "http://img.b2bpic.net/free-photo/nurse-doctor-team-ready-work-day_23-2149309948.jpg",          alt: "Doctor portrait 5"},
      ]}
      avatarText="Trusted by over 500+ patients in Lucknow"
      marqueeItems={[
        {
          type: "text",          text: "24/7 Emergency Care"},
        {
          type: "text",          text: "Advanced Diagnostic Center"},
        {
          type: "text",          text: "Expert Medical Consultation"},
        {
          type: "text",          text: "Compassionate Nursing Care"},
        {
          type: "text",          text: "Affordable Healthcare"},
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={false}
      title="Excellence in Medical Hospitality"
      description="At New Janta Hospital, we pride ourselves on a neat, clean, and compassionate environment. Our dedicated staff and experienced doctors work tirelessly to ensure the best health outcomes for our community in Lucknow."
      buttons={[
        {
          text: "Learn More",          href: "#features"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/doctors-nurses-sitting-staircase_107420-84779.jpg"
      imageAlt="Our care team"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "24/7 Emergency",          description: "Round-the-clock emergency medical services.",          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/medical-assistant-consulting-senior-patients-about-test-results-mri-scans_482257-122824.jpg",            imageAlt: "Emergency"},
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/doctors-shaking-hands-looking-each-other_23-2147896208.jpg",            imageAlt: "Ambulance"},
        },
        {
          title: "Expert Consultation",          description: "Highly qualified doctors providing specialized care.",          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/medical-team-doctor-s-office_23-2148168382.jpg",            imageAlt: "Doc"},
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/close-up-medical-team-ready-work_23-2149152550.jpg",            imageAlt: "Consult"},
        },
        {
          title: "Advanced Diagnostics",          description: "State-of-the-art diagnostic equipment for precision.",          phoneOne: {
            imageSrc: "http://img.b2bpic.net/free-photo/happy-surgeon-senior-woman-handshaking-while-greeting-lobby-clinic-focus-is-woman_637285-644.jpg",            imageAlt: "Lab"},
          phoneTwo: {
            imageSrc: "http://img.b2bpic.net/free-photo/cropped-unrecognizable-doctor-patient-shaking-hands_1098-20628.jpg",            imageAlt: "Test"},
        },
      ]}
      showStepNumbers={false}
      title="Comprehensive Healthcare Services"
      description="Dedicated to the well-being of every patient through modern medical facilities and expert guidance."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardFourteen
      useInvertedBackground={false}
      title="Hospital Achievements"
      tag="Our Impact"
      metrics={[
        {
          id: "m1",          value: "120+",          description: "Satisfied Patients"},
        {
          id: "m2",          value: "5.0",          description: "Star Rating"},
        {
          id: "m3",          value: "24/7",          description: "Hospital Open"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={true}
      testimonial="Excellent service! Very neat and clean hospital, best medical services in Buddheshwar."
      rating={5}
      author="Pankaj Yadav"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/senior-woman-standing-window_329181-14676.jpg",          alt: "Reviewer"},
        {
          src: "http://img.b2bpic.net/free-photo/close-up-happy-girl-with-pink-sweatshirt_23-2147562258.jpg",          alt: "Reviewer"},
        {
          src: "http://img.b2bpic.net/free-photo/beautiful-strong-woman-fighting-breast-cancer_23-2148992297.jpg",          alt: "Reviewer"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-model-dressed-summer-clothes-trendy-girl-posing-street-funny-positive-woman-having-fun_158538-6277.jpg",          alt: "Reviewer"},
        {
          src: "http://img.b2bpic.net/free-photo/elderly-man-enjoying-outdoor-exercise_23-2147562282.jpg",          alt: "Reviewer"},
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",          title: "Is the hospital open 24/7?",          content: "Yes, we are open 24 hours a day to serve our patients."},
        {
          id: "f2",          title: "Where is the hospital located?",          content: "We are located at Budheshwar Chawraha, Dubagga Rd, Lucknow."},
        {
          id: "f3",          title: "How can I contact the hospital?",          content: "You can reach us at 094549 57086 or via WhatsApp."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/therapist-business-owner-swiping-credit-card-smiling-while-sitting-front-desk-spa_662251-2193.jpg"
      imageAlt="Support team"
      title="Frequently Asked Questions"
      description="Have questions? We are here to help."
      faqsAnimation="slide-up"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={true}
      background={{
        variant: "sparkles-gradient"}}
      text="Need urgent medical assistance or have a question? Contact us anytime."
      buttons={[
        {
          text: "Call Now",          href: "tel:09454957086"},
        {
          text: "WhatsApp Us",          href: "https://wa.me/919454957086"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="New Janta Hospital"
      leftLink={{
        text: "Privacy Policy",        href: "#"}}
      rightLink={{
        text: "Terms of Service",        href: "#"}}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}