"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import MediaAbout from "@/components/sections/about/MediaAbout";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Phone, Mail, MapPin } from "lucide-react";

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

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="largeSizeMediumTitles"
      background="aurora"
      cardStyle="subtle-shadow"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Dynamite Plumbing"
          navItems={navItems}
        />
      </div>

      <div id="about-us" data-section="about-us">
        <MediaAbout
          title="About Dynamite Plumbing"
          description="With over 15 years of experience serving Hunt County, we've built our reputation on honesty, reliability, and superior craftsmanship. Every job receives the same attention to detail and commitment to excellence. We're locally owned and operated, and proud to be part of the communities we serve."
          tag="Your Local Plumbing Experts"
          tagAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/young-female-male-plumbers-keep-hand-as-pray_273609-8786.jpg?_wi=6"
          imageAlt="team plumber professional worker"
          buttons={[{ text: "Get In Touch", href: "/contact" }]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="about-metrics" data-section="about-metrics">
        <MetricCardTwo
          title="Our Journey & Success"
          description="Building trust through quality service and customer satisfaction"
          tag="Why We Stand Out"
          tagAnimation="slide-up"
          metrics={[
            { id: "1", value: "15+", description: "Years of Experience" },
            { id: "2", value: "1000+", description: "Homes Served" },
            { id: "3", value: "5.0★", description: "Average Rating" },
            { id: "4", value: "24/7", description: "Emergency Support" },
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Dynamite Plumbing"
          copyrightText="© 2025 Dynamite Plumbing of Texas. All rights reserved."
          socialLinks={[
            { icon: Phone, href: "tel:469-410-2657", ariaLabel: "Call us" },
            { icon: Mail, href: "mailto:contact@dynamiteplumbing.com", ariaLabel: "Email us" },
            { icon: MapPin, href: "#", ariaLabel: "Visit us" },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}