"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MediaAbout from '@/components/sections/about/MediaAbout';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="large"
        background="grid"
        cardStyle="layered-gradient"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "home"},
        {
          name: "Services",          id: "services"},
        {
          name: "Doctors",          id: "doctors"},
        {
          name: "Booking",          id: "booking"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="EliteMed Clinic"
    />
  </div>

  <div id="home" data-section="home">
      <HeroLogo
      logoText="Your Trusted Healthcare Partner"
      description="Professional medical care with experienced doctors and advanced healthcare solutions for your family's health."
      buttons={[
        {
          text: "Book Appointment",          href: "#booking"},
        {
          text: "Call Now",          href: "tel:1234567890"},
      ]}
      buttonAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/doctors-nurses-sitting-staircase_107420-84780.jpg"
      imageAlt="medical doctor clinical hallway"
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={false}
      title="Excellence in Healthcare"
      description="At EliteMed, our mission is to provide world-class medical services in a welcoming, patient-first environment. Our dedicated team of specialists utilizes advanced medical technology to ensure personalized, effective treatment plans for every patient."
      tag="About EliteMed"
      imageSrc="http://img.b2bpic.net/free-photo/no-people-empty-hospital-reception-waiting-room-medical-facility-with-healthcare-service-cure-patients-with-disease-nobody-clinic-lobby-waiting-area-covid-19-pandemic_482257-46054.jpg"
      imageAlt="modern clinic interior"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentyOne
      useInvertedBackground={false}
      title="Medical Services"
      description="We offer a wide range of specialized medical services tailored to your specific health needs."
      accordionItems={[
        {
          id: "gen",          title: "General Consultation",          content: "Professional diagnostic assessment for acute and chronic conditions by experienced clinicians."},
        {
          id: "den",          title: "Dental Care",          content: "Comprehensive dental services, from preventative cleaning to advanced restorative procedures."},
        {
          id: "ped",          title: "Pediatric Care",          content: "Specialized medical services for children in a comforting, kid-friendly clinical environment."},
        {
          id: "skin",          title: "Skin Treatment",          content: "Advanced dermatological services for skin wellness, health, and medical aesthetic needs."},
        {
          id: "diag",          title: "Diagnostic Testing",          content: "Modern laboratory and imaging facilities providing accurate and timely diagnostic insights."},
        {
          id: "emer",          title: "Emergency Care",          content: "24/7 urgent medical support and stabilization services for all emergency health issues."},
      ]}
      mediaAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/hospital-reception-desk-with-computer-making-healthcare-appointments-patients-with-disease-registration-work-with-medical-checkup-reports-papers-forms-facility-lobby_482257-50665.jpg"
      imageAlt="Hospital reception desk with computer, making healthcare appointments for patients with disease. Registration work with medical checkup reports and papers forms in facility lobby."
    />
  </div>

  <div id="doctors" data-section="doctors">
      <TeamCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      members={[
        {
          id: "d1",          name: "Dr. Sarah Miller",          role: "Pediatrician",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-healthy-medical-worker-young-woman-doctor-looking-happy-standing-white-coat-stethosco_1258-120116.jpg",          imageAlt: "professional pediatrician portrait"},
        {
          id: "d2",          name: "Dr. James Wilson",          role: "Chief Surgeon",          imageSrc: "http://img.b2bpic.net/free-photo/specialist-comforting-patient-cabinet-by-holding-his-hand-supporting_482257-124735.jpg",          imageAlt: "professional male surgeon portrait"},
        {
          id: "d3",          name: "Dr. Elena Rossi",          role: "General Practitioner",          imageSrc: "http://img.b2bpic.net/free-photo/doctors-shaking-hands-with-patient-standing-corridor-hospital_1303-21239.jpg",          imageAlt: "general practitioner woman"},
        {
          id: "d4",          name: "Dr. Mark Thorne",          role: "Cardiologist",          imageSrc: "http://img.b2bpic.net/free-photo/smiley-female-doctor-posing-suit-stethoscope_23-2149014356.jpg",          imageAlt: "Smiley female doctor posing in suit and stethoscope"},
        {
          id: "d5",          name: "Dr. Julia Vane",          role: "Dermatologist",          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-blonde-doctor-woman-with-blue-eyes-wearing-coat-stethoscope-smiling-confident-gesturing-with-hand-doing-small-size-sign-with-fingers-looking-camera-measure-concept_839833-23256.jpg",          imageAlt: "Young beautiful blonde doctor woman with blue eyes wearing coat and stethoscope smiling and confident gesturing with hand doing small size sign with fingers looking and the camera Measure concept"},
      ]}
      title="Meet Our Specialists"
      description="Our team of board-certified doctors brings years of specialized expertise to provide compassionate healthcare."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardTwo
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      plans={[
        {
          id: "basic",          badge: "Standard",          price: "$80",          subtitle: "Essential Consultation",          features: [
            "30 min doctor time",            "Basic diagnostics",            "Digital records"],
          buttons: [
            {
              text: "Book Now",              href: "#booking"},
          ],
        },
        {
          id: "pro",          badge: "Premium",          price: "$150",          subtitle: "Comprehensive Checkup",          features: [
            "Full physical exam",            "Priority lab tests",            "Annual health report",            "Dedicated care coordinator"],
          buttons: [
            {
              text: "Book Now",              href: "#booking"},
          ],
        },
      ]}
      title="Consultation Plans"
      description="Flexible and affordable care options designed to fit your healthcare budget perfectly."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",          name: "Alice Johnson",          role: "Patient",          company: "Local Community",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/experienced-female-medic-practitioner-consulting-patient-health-insurance_482257-126948.jpg",          imageAlt: "Experienced female medic practitioner consulting a patient on health insurance"},
        {
          id: "t2",          name: "Mark Stevens",          role: "Patient",          company: "Local Community",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/woman-medic-examining-male-patient-office-routine-checkup-discussing-about-treatment-plan_482257-135628.jpg",          imageAlt: "Woman medic examining a male patient in office for routine checkup discussing about treatment plan"},
        {
          id: "t3",          name: "Emma Roberts",          role: "Patient",          company: "Local Community",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/medical-specialist-explaining-diagnostics-through-test-results-with-old-patient-checkup-doing_482257-135867.jpg",          imageAlt: "Medical specialist explaining diagnostics through test results with old patient at checkup doing"},
        {
          id: "t4",          name: "David Miller",          role: "Patient",          company: "Local Community",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/doctors-shaking-hands-with-patient-standing-corridor-hospital_1303-21238.jpg",          imageAlt: "Doctors shaking hands with patient, standing in the corridor of the hospital"},
        {
          id: "t5",          name: "Sarah Connor",          role: "Patient",          company: "Local Community",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/doctor-standing-with-thumb-up-horizontal-medium-shot_1098-18147.jpg",          imageAlt: "Doctor Standing With Thumb Up Horizontal Medium Shot"},
      ]}
      title="Patient Reviews"
      description="What our patients say about their experience at EliteMed."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq1",          title: "How to book an appointment?",          content: "Use our simple booking form below or call our clinic directly."},
        {
          id: "faq2",          title: "What are your consultation fees?",          content: "Consultation fees start at $80 and vary based on the specialization."},
        {
          id: "faq3",          title: "Clinic timings?",          content: "We are open Monday to Saturday, 8:00 AM to 8:00 PM."},
        {
          id: "faq4",          title: "Do you offer emergency support?",          content: "Yes, we provide 24/7 urgent medical assistance."},
      ]}
      title="Frequently Asked Questions"
      description="Get quick answers to common questions about your visits."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "animated-grid"}}
      text="Ready to get started? Our professional medical team is here to assist you with any health queries. Same-day appointments available—contact us today or schedule your visit."
      buttons={[
        {
          text: "Book Now",          href: "#booking"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="EliteMed Clinic"
      copyrightText="© 2026 EliteMed Healthcare. All Rights Reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}