"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import MediaAbout from "@/components/sections/about/MediaAbout";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { Shield, Calendar } from "lucide-react";

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmallSizeMediumTitles"
      background="noise"
      cardStyle="glass-depth"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="City Hospital"
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "/about" },
            { name: "Services", id: "/services" },
            { name: "Doctors", id: "/doctors" },
            { name: "Contact", id: "/contact" },
          ]}
          button={{ text: "Book Appointment", href: "/contact" }}
        />
      </div>

      <div id="about-mission" data-section="about-mission">
        <MediaAbout
          title="Our Mission: Safe, Compassionate Maternal Care"
          description="City Hospital Maternity Home has been serving the Karachi community since 2010 with unwavering commitment to safe delivery, comprehensive prenatal care, and supportive postpartum services. We believe every mother deserves expert care delivered with compassion and dignity."
          tag="About Us"
          tagIcon={Shield}
          tagAnimation="entrance-slide"
          imageSrc="http://img.b2bpic.net/free-photo/team-doctors-standing-together-hospital-premises_107420-84769.jpg?_wi=2"
          imageAlt="City Hospital Maternity Home - Our Dedicated Team"
          buttons={[{ text: "Visit Our Services", href: "/services" }]}
          buttonAnimation="entrance-slide"
          useInvertedBackground={false}
        />
      </div>

      <div id="our-values" data-section="our-values">
        <MetricCardSeven
          metrics={[
            {
              id: "1",
              value: "15+",
              title: "Years of Dedicated Service",
              items: [
                "Over 15 years of maternal healthcare excellence",
                "Continuously updated medical practices",
                "Trusted by 5000+ families in Karachi",
              ],
            },
            {
              id: "2",
              value: "50+",
              title: "Expert Medical Staff",
              items: [
                "Experienced gynecologists and obstetricians",
                "Trained nursing and midwifery team",
                "Continuous professional development",
              ],
            },
            {
              id: "3",
              value: "99%",
              title: "Patient Satisfaction Rate",
              items: [
                "Compassionate, patient-centered approach",
                "Comprehensive prenatal and postpartum support",
                "Personalized care plans for each mother",
              ],
            },
          ]}
          title="Our Foundation: Values & Excellence"
          description="Built on principles of compassion, expertise, and accessibility, City Hospital Maternity Home continues to set the standard for maternal healthcare in Karachi."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="entrance-slide"
        />
      </div>

      <div id="contact-about" data-section="contact-about">
        <ContactCenter
          tag="Learn More"
          title="Have Questions About Our Facility?"
          description="Get in touch with our team to learn more about our services, meet our doctors, or schedule a facility tour. We're here to answer all your questions about maternity care at City Hospital."
          tagIcon={Calendar}
          tagAnimation="entrance-slide"
          background={{ variant: "rotated-rays-animated" }}
          useInvertedBackground={false}
          inputPlaceholder="Enter your email"
          buttonText="Send Inquiry"
          termsText="We respect your privacy. A member of our team will contact you within 24 hours."
        />
      </div>

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