"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { MapPin, Phone } from "lucide-react";

export default function AboutPage() {
  const footerColumns = [
    {
      title: "Services",
      items: [
        { label: "Wedding Dress Alterations", href: "/wedding-alterations" },
        { label: "Everyday Alterations", href: "/services" },
        { label: "Embroidery & Custom", href: "/services" },
        { label: "Uniform Tailoring", href: "/services" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About Us", href: "/about" },
        { label: "Gallery", href: "/gallery" },
        { label: "Contact", href: "/contact" },
        { label: "FAQ", href: "#faq" },
      ],
    },
    {
      title: "Connect",
      items: [
        { label: "Phone: (281) 555-0123", href: "tel:+1-281-555-0123" },
        { label: "Location: Pearland, TX", href: "#" },
        { label: "Hours: Mon-Sat 9AM-6PM", href: "#" },
        { label: "Privacy Policy", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="noise"
      cardStyle="subtle-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Gallery", id: "/gallery" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" },
          ]}
          button={{
            text: "Schedule Fitting",
            href: "/contact",
          }}
          brandName="Fit For A King Tailors"
        />
      </div>

      <div id="why-us" data-section="why-us">
        <TextSplitAbout
          title="Our Story & Values"
          description={[
            "Founded with a passion for excellence, Fit For A King Tailors has been serving the Pearland community with pride and dedication.",
            "We believe that everyone deserves to wear clothes that fit perfectly and make them feel confident. Our family business is built on trust, quality, and exceptional customer service.",
            "Every garment that passes through our hands receives the same care and attention as if it were being tailored for a king. We take pride in our work and the relationships we build with our customers.",
            "Our experienced tailors have combined decades of expertise in alterations, custom tailoring, embroidery, and special services.",
            "We're committed to providing fast turnaround times, affordable pricing, and solutions for every tailoring need—from emergency last-minute fixes to intricate custom work.",
          ]}
          buttons={[{ text: "View Our Services", href: "/services" }]}
          buttonAnimation="slide-up"
          showBorder={true}
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Our Impact & Commitment"
          description="Proudly serving the Pearland and Greater Houston area with expert tailoring services"
          tag="Local Impact"
          tagIcon={MapPin}
          tagAnimation="slide-up"
          metrics={[
            {
              id: "1",
              value: "500+",
              title: "Satisfied Customers",
              description: "Trusted by families and professionals alike",
              imageSrc:
                "http://img.b2bpic.net/free-photo/excited-boss-congratulating-woman-with-promotion_1262-5006.jpg?_wi=2",
            },
            {
              id: "2",
              value: "15+",
              title: "Years of Service",
              description: "Over a decade of expert craftsmanship and dedication",
              imageSrc:
                "http://img.b2bpic.net/free-photo/close-up-woman-with-luggages_23-2148927418.jpg?_wi=4",
            },
            {
              id: "3",
              value: "100%",
              title: "Satisfaction Guaranteed",
              description: "Quality assurance on every project we undertake",
              imageSrc:
                "http://img.b2bpic.net/free-photo/cubes-spelling-save-money-table-with-spanish-dinero-bills-coins_181624-20528.jpg?_wi=2",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact-cta" data-section="contact-cta">
        <ContactCTA
          tag="Join Our Family"
          tagIcon={Phone}
          tagAnimation="slide-up"
          title="Experience The Difference"
          description="Visit us in Pearland and discover why hundreds of customers trust Fit For A King Tailors with their wardrobe. Let us help you look and feel your best."
          buttons={[
            { text: "Schedule a Fitting", href: "/contact" },
            { text: "Call (281) 555-0123", href: "tel:+1-281-555-0123" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={footerColumns}
          copyrightText="© 2025 Fit For A King Tailors. All rights reserved. Professional tailoring and alterations serving Pearland and the greater Houston area."
        />
      </div>
    </ThemeProvider>
  );
}