"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import MediaAbout from "@/components/sections/about/MediaAbout";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Users, Star, CheckCircle, Award } from "lucide-react";

export default function AboutPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "/services" },
    { name: "Service Areas", id: "/service-areas" },
    { name: "About", id: "/about" },
    { name: "Contact", id: "/contact" },
  ];

  const handleNavClick = (id: string) => {
    if (id.startsWith("/")) {
      window.location.href = id;
    }
  };

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="large"
      background="none"
      cardStyle="layered-gradient"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="ProServe"
          navItems={navItems}
          button={{
            text: "Get a Quote",
            href: "/contact",
          }}
        />
      </div>

      <div id="about-hero" data-section="about-hero">
        <MediaAbout
          title="About ProServe"
          description="For over 15 years, ProServe has been the trusted choice for professional home services in the community. We're committed to delivering exceptional results through certified technicians, transparent pricing, and unwavering customer dedication."
          tag="Our Story"
          imageSrc="http://img.b2bpic.net/free-photo/builder-man-wearing-construction-uniform-standing-with-arms-crossed-with-confident-smile-isolated-orange-wall_141793-14478.jpg?_wi=2"
          imageAlt="ProServe professional team"
          buttons={[{ text: "Contact Us", href: "/contact" }]}
          useInvertedBackground={false}
        />
      </div>

      <div id="about-metrics" data-section="about-metrics">
        <MetricCardThree
          title="Our Impact"
          description="Building trust and delivering results for over a decade and a half."
          metrics={[
            {
              id: "1",
              icon: Users,
              title: "Satisfied Customers",
              value: "12,500+",
            },
            { id: "2", icon: Star, title: "5-Star Reviews", value: "4,800+" },
            {
              id: "3",
              icon: CheckCircle,
              title: "Successful Jobs",
              value: "18,000+",
            },
            { id: "4", icon: Award, title: "Years in Business", value: "15+" },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="about-testimonials" data-section="about-testimonials">
        <TestimonialCardTwelve
          cardTitle="Trusted by thousands of homeowners who count on ProServe for reliable, professional, and honest service every single day."
          cardTag="Customer Stories"
          testimonials={[
            {
              id: "1",
              name: "Sarah Johnson",
              imageSrc:
                "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg?_wi=3",
              imageAlt: "Sarah Johnson",
            },
            {
              id: "2",
              name: "Michael Chen",
              imageSrc:
                "http://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg?_wi=3",
              imageAlt: "Michael Chen",
            },
            {
              id: "3",
              name: "Emily Rodriguez",
              imageSrc:
                "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg?_wi=2",
              imageAlt: "Emily Rodriguez",
            },
            {
              id: "4",
              name: "David Kim",
              imageSrc:
                "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=2",
              imageAlt: "David Kim",
            },
            {
              id: "5",
              name: "Jessica Martinez",
              imageSrc:
                "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg?_wi=4",
              imageAlt: "Jessica Martinez",
            },
            {
              id: "6",
              name: "Robert Thompson",
              imageSrc:
                "http://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg?_wi=4",
              imageAlt: "Robert Thompson",
            },
          ]}
          cardAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-vector/dark-polygonal-background_23-2148122780.jpg?_wi=3"
          imageAlt="Professional services background"
          logoText="ProServe"
          copyrightText="© 2025 ProServe. All rights reserved. | Licensed & Insured"
          columns={[
            {
              title: "Services",
              items: [
                { label: "HVAC Services", href: "/services" },
                { label: "Plumbing Solutions", href: "/services" },
                { label: "Electrical Work", href: "/services" },
                { label: "Emergency Service", href: "/contact" },
              ],
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "/about" },
                { label: "Service Areas", href: "/service-areas" },
                { label: "Contact", href: "/contact" },
                { label: "Reviews", href: "/" },
              ],
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "/" },
                { label: "Terms of Service", href: "/" },
                { label: "License Information", href: "/" },
                { label: "Insurance Verification", href: "/" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}