"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Award, ShieldCheck, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="mediumLarge"
        sizing="mediumLargeSizeLargeTitles"
        background="noise"
        cardStyle="subtle-shadow"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        { name: "Home", id: "hero" },
        { name: "About", id: "about" },
        { name: "Departments", id: "features" },
        { name: "Doctors", id: "team" },
        { name: "Contact", id: "contact" },
      ]}
      brandName="Dar ElSalam Hospital"
      button={{
        text: "Book Appointment",        href: "#contact"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardGallery
      background={{ variant: "gradient-bars" }}
      title="Excellence in Care, Compassion in Action"
      description="Dar ElSalam Hospital is committed to providing world-class medical services with a patient-centered approach. Your health is our priority."
      buttons={[{ text: "Book Appointment", href: "#contact" }]}
      mediaItems={[
        { imageSrc: "http://img.b2bpic.net/free-photo/turnstile-entrance-subway_1339-6344.jpg", imageAlt: "modern hospital entrance" },
        { imageSrc: "http://img.b2bpic.net/free-photo/old-specialist-meeting-with-woman-patient-discuss-results-cabinet_482257-126979.jpg", imageAlt: "medical imaging equipment" },
        { 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: "patient consultation room" },
        { imageSrc: "http://img.b2bpic.net/free-photo/senior-woman-undergoing-x-ray-test_107420-63773.jpg", imageAlt: "Senior woman undergoing an x-ray test" },
        { imageSrc: "http://img.b2bpic.net/free-photo/mature-woman-medical-technician-hand-xray-scan-hospital-xaxa_637285-509.jpg", imageAlt: "Mature woman and medical technician during hand Xray scan" }
      ]}
      mediaAnimation="slide-up"
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={true}
      title="About Dar ElSalam"
      description="With over 20 years of experience, we provide cutting-edge technology and a team of top-tier medical specialists. Our vision is to set the standard for healthcare in the region."
      imageSrc="http://img.b2bpic.net/free-photo/portrait-happy-man-surgeon-standing-operating-room-ready-work-patient-male-medical-worker-surgical-uniform-operation-theater_657921-735.jpg"
      imageAlt="surgeon portrait"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardNine
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Emergency Services",          description: "Available 24/7 for urgent care, trauma, and life-critical assistance.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/hospital-room-interior_181624-34428.jpg" },
          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/team-doctors-consulting-analytics-green-screen-laptop_482257-123276.jpg" }
        },
        {
          title: "Pediatrics",          description: "Expert care for your children in a friendly, supportive environment.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-stylish-white-office-successful-doctor_8353-9587.jpg" },
          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/empty-reception-desk-appointments-medical-facility-waiting-area-with-chairs-sit-rows-before-attending-checkup-consultation-healthcare-clinical-space-emergency-center_482257-46930.jpg" }
        },
        {
          title: "Cardiology",          description: "Advanced heart care, diagnostics, and surgical interventions.",          phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/high-angle-ct-scan-machine-room_23-2149341486.jpg" },
          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/medical-technician-starting-xray-scan-mature-patient-s-hand-medical-clinic_637285-5183.jpg" }
        }
      ]}
      showStepNumbers={false}
      title="Medical Departments"
      description="Our comprehensive departments ensure specialized care for every patient need."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="depth-3d"
      textboxLayout="split"
      useInvertedBackground={true}
      metrics={[
        { id: "m1", icon: Users, title: "Patients Served", value: "50,000+" },
        { id: "m2", icon: Award, title: "Success Rate", value: "99.8%" },
        { id: "m3", icon: ShieldCheck, title: "Expert Doctors", value: "150+" }
      ]}
      title="Impact at a Glance"
      description="Providing quality healthcare with measurable results."
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardOne
      animationType="depth-3d"
      textboxLayout="split"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      members={[
        { id: "d1", name: "Dr. Ahmed Hassan", role: "Cardiologist", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-male-doctor-wearing-medical-robe-stethoscope-sitting-desk-with-work-tools-putting-hands-desk-isolated-pink-wall_141793-97604.jpg" },
        { id: "d2", name: "Dr. Sarah Kamal", role: "Pediatrician", imageSrc: "http://img.b2bpic.net/free-photo/empty-medical-office-with-technology_482257-110140.jpg" },
        { id: "d3", name: "Dr. Omar Khaled", role: "Surgeon", imageSrc: "http://img.b2bpic.net/free-photo/side-view-doctor-is-unhappy-posing_179666-43653.jpg" },
        { id: "d4", name: "Dr. Layla Noor", role: "Neurologist", imageSrc: "http://img.b2bpic.net/free-photo/medical-equipment-with-stethoscope_23-2148150941.jpg" }
      ]}
      title="Our Expert Doctors"
      description="Led by pioneers in medical science, our team is dedicated to your well-being."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={true}
      testimonial="The level of professionalism at Dar ElSalam Hospital is unmatched. From the front desk to my surgery recovery, everything was seamless."
      rating={5}
      author="Fatma Mahmoud"
      avatars={[
        { src: "http://img.b2bpic.net/free-photo/african-american-doctor-talking-senior-man-home-visit_637285-11304.jpg", alt: "happy recovered patient" },
        { src: "http://img.b2bpic.net/free-photo/patient-consulting-doctor_1170-2096.jpg", alt: "Patient consulting a doctor" },
        { src: "http://img.b2bpic.net/free-photo/medium-shot-couple-holding-hands_23-2148962432.jpg", alt: "Medium shot couple holding hands" },
        { src: "http://img.b2bpic.net/free-photo/senior-woman-evaluating-diagnostic-results-with-her-medic-cabinet_482257-126854.jpg", alt: "Senior woman evaluating diagnostic results" },
        { src: "http://img.b2bpic.net/free-photo/portrait-smiling-senior-businessman-businesswoman-showing-thumb-up-sign-office_23-2147923402.jpg", alt: "Portrait of smiling senior businessman" }
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="blur-reveal"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        { id: "f1", title: "How do I book an appointment?", content: "You can use our online form, call us, or message us on WhatsApp." },
        { id: "f2", title: "Do you accept insurance?", content: "Yes, we work with all major local and international health insurance providers." },
        { id: "f3", title: "What are your emergency hours?", content: "Our emergency department is open 24/7, every day of the year." }
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/facades-with-reflections_1127-2170.jpg"
      title="Frequently Asked Questions"
      description="Have questions? We're here to help."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={true}
      title="Book Your Appointment"
      description="Fill in the details below, and our team will get in touch to confirm your booking."
      inputs={[
        { name: "fullName", type: "text", placeholder: "Full Name", required: true },
        { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
        { name: "department", type: "text", placeholder: "Department" },
        { name: "date", type: "date", placeholder: "Preferred Date" }
      ]}
      textarea={{ name: "notes", placeholder: "Medical notes or queries" }}
      imageSrc="http://img.b2bpic.net/free-photo/female-doctor-listening-diverse-male-patients-clinic-lobby_482257-131184.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Dar ElSalam"
      columns={[
        {
          title: "Quick Links",          items: [
            { label: "About Us", href: "#about" },
            { label: "Departments", href: "#features" },
            { label: "Careers", href: "#" }
          ]
        },
        {
          title: "Emergency",          items: [
            { label: "Hotline", href: "tel:+2012345678" },
            { label: "Ambulance", href: "tel:+2012345678" }
          ]
        }
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}