"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import { Award, DollarSign, Heart, Shield } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="smallMedium"
        sizing="medium"
        background="none"
        cardStyle="gradient-bordered"
        primaryButtonStyle="flat"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",
          id: "home",
        },
        {
          name: "Services",
          id: "services",
        },
        {
          name: "Doctors",
          id: "doctors",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="MediCare Clinic"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboard
      background={{
        variant: "gradient-bars",
      }}
      title="Your Trusted Healthcare Partner"
      description="Professional medical care with experienced doctors and advanced healthcare solutions."
      buttons={[
        {
          text: "Book Appointment",
          href: "#contact",
        },
        {
          text: "Call Now",
          href: "tel:+1234567890",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/doctor-wrking-their-clinic_23-2149281065.jpg?_wi=1"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/female-doctor-her-office_1098-21369.jpg",
          alt: "Doctor profile 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-happy-confident-doctor-with-arms-crossed-medical-clinic_637285-1463.jpg",
          alt: "Doctor profile 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-woman-nurse-smiling-wearing-uniform-office-sitting-desk-medical-assistant-with-stethoscope-looking-camera-getting-ready-help-doctor-appointment_482257-41834.jpg",
          alt: "Doctor profile 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/black-nurse-their-workspace_52683-100570.jpg",
          alt: "Doctor profile 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-man-doctor-with-stethoscope-lights_181624-15323.jpg",
          alt: "Doctor profile 5",
        },
      ]}
      avatarText="Over 50+ medical staff ready to care for you"
      marqueeItems={[
        {
          type: "text",
          text: "24/7 Emergency Care",
        },
        {
          type: "text",
          text: "State-of-the-art Tech",
        },
        {
          type: "text",
          text: "Award-winning Doctors",
        },
        {
          type: "text",
          text: "Patient-Centered Care",
        },
        {
          type: "text",
          text: "Compassionate Approach",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={true}
      title="Excellence in Healthcare"
      description="We are dedicated to providing compassionate, high-quality medical care to our community with state-of-the-art facilities and experienced specialists."
      metrics={[
        {
          value: "10+",
          title: "Experienced Doctors",
        },
        {
          value: "15,000+",
          title: "Happy Patients",
        },
        {
          value: "24/7",
          title: "Emergency Support",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/clinic-registration-counter-waiting-room-lobby-computer-make-checkup-appointments-with-healthcare-report-papers-empty-hospital-reception-desk-with-medical-forms-insurance-support_482257-50666.jpg"
      mediaAnimation="blur-reveal"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardMedia
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "s1",
          title: "General Consultation",
          description: "Comprehensive checkups for holistic wellness.",
          tag: "Primary Care",
          imageSrc: "http://img.b2bpic.net/free-vector/medicine-online_24877-49094.jpg",
        },
        {
          id: "s2",
          title: "Dental Care",
          description: "Expert oral health and cosmetic dentistry.",
          tag: "Dentistry",
          imageSrc: "http://img.b2bpic.net/free-vector/dental-icons-set_1284-4392.jpg",
        },
        {
          id: "s3",
          title: "Pediatric Care",
          description: "Dedicated care for infants and children.",
          tag: "Pediatrics",
          imageSrc: "http://img.b2bpic.net/free-photo/cardboard-family-shapes-medical-pills_23-2148439052.jpg",
        },
        {
          id: "s4",
          title: "Skin Treatment",
          description: "Advanced dermatological services for healthy skin.",
          tag: "Dermatology",
          imageSrc: "http://img.b2bpic.net/free-vector/skin-treatment-icons-set_98292-1973.jpg",
        },
        {
          id: "s5",
          title: "Diagnostic Testing",
          description: "Accurate laboratory testing and screening.",
          tag: "Diagnostics",
          imageSrc: "http://img.b2bpic.net/free-vector/medical-isometric-icons_1284-3952.jpg",
        },
        {
          id: "s6",
          title: "Emergency Care",
          description: "Urgent attention when you need it most.",
          tag: "Emergency",
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-paper-heart-with-heartbeat-world-heart-day_23-2148635246.jpg",
        },
      ]}
      title="Our Medical Services"
      description="Comprehensive healthcare solutions tailored to your unique needs."
    />
  </div>

  <div id="doctors" data-section="doctors">
      <TeamCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      groups={[
        {
          id: "group-1",
          groupTitle: "Medical Professionals",
          members: [
            {
              id: "doc1",
              title: "Dr. Sarah Miller",
              subtitle: "Chief of Cardiology",
              detail: "15 years experience in cardiovascular health.",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-male-doctor_171337-1491.jpg",
            },
            {
              id: "doc2",
              title: "Dr. James Chen",
              subtitle: "Senior Pediatrician",
              detail: "Expert in developmental child health.",
              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-doctor-wearing-coat_23-2148816198.jpg",
            },
            {
              id: "doc3",
              title: "Dr. Elena Rossi",
              subtitle: "Dermatologist",
              detail: "Specializing in advanced skin treatments.",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-young-medical-doctor-grey-background_613910-123.jpg",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/doctor-wrking-their-clinic_23-2149281065.jpg?_wi=2",
          imageAlt: "doctor studio portrait",
        },
      ]}
      title="Meet Our Specialists"
      description="Our team of highly qualified medical professionals is committed to your well-being."
    />
  </div>

  <div id="why-us" data-section="why-us">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          title: "Experienced Doctors",
          value: "10+",
          icon: Award,
        },
        {
          id: "m2",
          title: "Advanced Equipment",
          value: "Latest",
          icon: Shield,
        },
        {
          id: "m3",
          title: "Affordable Care",
          value: "Transparent",
          icon: DollarSign,
        },
        {
          id: "m4",
          title: "Patient Trust",
          value: "15k+",
          icon: Heart,
        },
      ]}
      title="Why Choose Us?"
      description="Quality care, advanced equipment, and a patient-first approach."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",
          title: "Excellent Care",
          quote: "The doctors here are professional and very compassionate. I am back to my best thanks to their treatment.",
          name: "Mark Stevens",
          role: "Patient",
          imageSrc: "http://img.b2bpic.net/free-photo/smiley-female-doctor-posing-suit-stethoscope_23-2149014356.jpg",
        },
        {
          id: "t2",
          title: "Highly Professional",
          quote: "Great experience with the pediatric unit for my son. Quick appointments and clear diagnosis.",
          name: "Jane Doe",
          role: "Patient",
          imageSrc: "http://img.b2bpic.net/free-photo/listen-your-heart_268835-945.jpg",
        },
        {
          id: "t3",
          title: "Fast Diagnostics",
          quote: "The laboratory testing was efficient and results were delivered fast. Highly recommended.",
          name: "Robert Smith",
          role: "Patient",
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-doctor-wearing-white-coat_23-2149844582.jpg",
        },
        {
          id: "t4",
          title: "Skincare Success",
          quote: "My skin treatment has given me immense confidence. Dr. Rossi is an absolute expert.",
          name: "Emily White",
          role: "Patient",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-practitioner-nurse-with-medical-stethoscope-analyzing-pharmaceutical-prescription-clinical-appointment-hospital-office-woman-asisstance-checking-sickness-symptoms_482257-28575.jpg",
        },
        {
          id: "t5",
          title: "Quality Support",
          quote: "The entire team is friendly, professional, and very helpful. Trust them with your health.",
          name: "David Brown",
          role: "Patient",
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-doctor-examining-patients-report_107420-74135.jpg",
        },
      ]}
      title="Patient Stories"
      description="Hear what our patients have to say about their care."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",
          title: "How to book an appointment?",
          content: "You can book through our online portal or call our reception directly.",
        },
        {
          id: "f2",
          title: "Consultation fees?",
          content: "Fees vary by service and specialist. Detailed pricing available on request.",
        },
        {
          id: "f3",
          title: "Clinic timings?",
          content: "We are open Monday through Friday, 9:00 AM - 7:00 PM.",
        },
        {
          id: "f4",
          title: "Emergency support?",
          content: "Our clinic offers 24/7 urgent care support for emergencies.",
        },
      ]}
      title="Frequently Asked Questions"
      description="Answers to commonly asked questions about our services."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={true}
      background={{
        variant: "plain",
      }}
      tag="Booking Form"
      title="Book Your Appointment"
      description="Fill out the details below to schedule your visit with our medical team."
      inputPlaceholder="Enter your phone number"
      buttonText="Submit Appointment Request"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="MediCare Clinic"
      columns={[
        {
          title: "Quick Links",
          items: [
            {
              label: "Home",
              href: "#home",
            },
            {
              label: "Services",
              href: "#services",
            },
            {
              label: "Doctors",
              href: "#doctors",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
        {
          title: "Services",
          items: [
            {
              label: "Dental Care",
              href: "#services",
            },
            {
              label: "Skin Care",
              href: "#services",
            },
            {
              label: "Pediatrics",
              href: "#services",
            },
          ],
        },
        {
          title: "Contact",
          items: [
            {
              label: "123 Medical St, Health City",
              href: "#",
            },
            {
              label: "+1 234 567 890",
              href: "tel:+1234567890",
            },
            {
              label: "contact@medicare.com",
              href: "mailto:contact@medicare.com",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
