"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterCard from "@/components/sections/footer/FooterCard";

export default function AboutPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "About", id: "about" },
    { name: "Services", id: "services" },
    { name: "Reviews", id: "reviews" },
    { name: "Contact", id: "contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSmall"
      background="none"
      cardStyle="layered-gradient"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Jennifer A. Sylvia, D.M.D."
          navItems={navItems}
          button={{
            text: "Book Appointment",
            href: "#contact",
          }}
        />
      </div>

      {/* About Dr. Sylvia Section */}
      <div id="about-detail" data-section="about-detail">
        <div className="mx-auto px-4 md:px-6">
          <InlineImageSplitTextAbout
            heading={[
              {
                type: "text",
                content: "Meet Dr. Jennifer A. Sylvia",
              },
              {
                type: "text",
                content: "Dr. Jennifer A. Sylvia brings over 15 years of professional expertise and genuine compassion to dental care. Her patient-centered approach has earned her a stellar reputation and deep trust from families throughout West Harrison and surrounding communities.\n\nDr. Sylvia earned her Doctor of Dental Medicine degree with distinction and has continuously pursued advanced training in the latest dental techniques and technologies. Her commitment to continuing education ensures that patients receive the most current, evidence-based care available.\n\nOutside the office, Dr. Sylvia is dedicated to giving back to the community through dental health education and volunteer care initiatives. She believes that access to quality dental care is a fundamental right and works tirelessly to make it accessible and comfortable for all her patients.",
              },
            ]}
            useInvertedBackground={false}
            buttons={[
              { text: "Schedule Consultation", href: "#contact" },
            ]}
          />
        </div>
      </div>

      {/* Practice Philosophy Section */}
      <div id="philosophy" data-section="philosophy">
        <div className="mx-auto px-4 md:px-6">
          <MetricCardTen
            title="Our Guiding Principles"
            description="The foundation of our practice is built on core values that guide every patient interaction and clinical decision."
            metrics={[
              {
                id: "1",
                title: "Compassion",
                subtitle: "First",
                category: "Core Value",
                value: "Patient comfort and trust",
              },
              {
                id: "2",
                title: "Excellence",
                subtitle: "Always",
                category: "Clinical Standard",
                value: "Latest techniques & technology",
              },
              {
                id: "3",
                title: "Community",
                subtitle: "Focused",
                category: "Our Mission",
                value: "Accessible, quality dental care",
              },
            ]}
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
          />
        </div>
      </div>

      {/* Contact Section */}
      <div id="contact" data-section="contact">
        <div className="mx-auto px-4 md:px-6">
          <ContactSplitForm
            title="Get in Touch"
            description="Have questions about Dr. Sylvia or our practice? We'd love to hear from you. Reach out today to schedule a consultation."
            inputs={[
              {
                name: "fullName",
                type: "text",
                placeholder: "Your Full Name",
                required: true,
              },
              {
                name: "email",
                type: "email",
                placeholder: "Your Email Address",
                required: true,
              },
              {
                name: "phone",
                type: "tel",
                placeholder: "(914) 948-0406",
                required: true,
              },
              {
                name: "inquiry",
                type: "text",
                placeholder: "Subject of Your Inquiry",
                required: false,
              },
            ]}
            textarea={{
              name: "message",
              placeholder: "Your message here...",
              rows: 4,
              required: false,
            }}
            useInvertedBackground={false}
            mediaAnimation="slide-up"
            mediaPosition="right"
            buttonText="Send Message"
          />
        </div>
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Jennifer A. Sylvia, D.M.D."
          copyrightText="© 2025 Jennifer A. Sylvia, D.M.D. | 282 Columbus Ave, West Harrison, NY 10604 | (914) 948-0406"
        />
      </div>
    </ThemeProvider>
  );
}