"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
import ContactText from "@/components/sections/contact/ContactText";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Award } from "lucide-react";

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumSizeLargeTitles"
      background="blurBottom"
      cardStyle="soft-shadow"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Fit For A King Tailors"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Gallery", id: "/gallery" },
            { name: "About", id: "/about" },
          ]}
          button={{
            text: "Schedule Fitting",
            href: "/contact",
          }}
          animateOnLoad={true}
        />
      </div>

      <div id="about-intro" data-section="about-intro">
        <TestimonialAboutCard
          tag="Our Story"
          tagAnimation="slide-up"
          title="Fit For A King Tailors: Where Craftsmanship Meets Passion"
          description="Founded with a Vision"
          subdescription="Serving Pearland with Excellence Since Day One"
          icon={Award}
          imageSrc="http://img.b2bpic.net/free-photo/medium-shot-people-working-together_23-2150627951.jpg"
          imageAlt="Our talented team of master tailors"
          mediaAnimation="blur-reveal"
          useInvertedBackground={false}
        />
      </div>

      <div id="about-mission" data-section="about-mission">
        <FeatureCardSeven
          features={[
            {
              id: 1,
              title: "Our Commitment to Quality",
              description:
                "Every stitch tells a story. We believe that well-fitted clothes have the power to transform confidence and presence. That's why we invest in only the finest techniques and materials.",
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-cutting-fabric-pieces-by-rotary-cutter-mat-using-ruler_23-2148164443.jpg?_wi=4",
              imageAlt: "Master craftsmen at work",
            },
            {
              id: 2,
              title: "Local Pride, Global Standards",
              description:
                "Proudly serving Pearland and the Greater Houston area, we bring international tailoring standards to our community. Our team has trained under master tailors from around the world.",
              imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-choosing-jacket-shop_171337-18967.jpg?_wi=5",
              imageAlt: "Professional tailoring standards",
            },
            {
              id: 3,
              title: "Your Satisfaction is Our Promise",
              description:
                "We stand behind every alteration with a 100% satisfaction guarantee. Your comfort and confidence in your fit is what matters most to us.",
              imageSrc: "http://img.b2bpic.net/free-photo/woman-customer-looking-beautiful-fabric-drapery-shop_1157-37454.jpg?_wi=2",
              imageAlt: "Customer satisfaction guarantee",
            },
          ]}
          animationType="blur-reveal"
          title="Why We Do What We Do"
          description="Our values drive every decision and every stitch we make"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="about-cta" data-section="about-cta">
        <ContactText
          text="We'd love to meet you and share our passion for perfect fits. Visit us in Pearland or schedule a consultation today."
          animationType="entrance-slide"
          buttons={[
            { text: "Schedule Visit", href: "/contact" },
            { text: "Get in Touch", href: "tel:+1-281-999-9999" },
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Fit For A King Tailors"
          copyrightText="© 2025 Fit For A King Tailors. All rights reserved. Serving Pearland, Houston, Friendswood, League City, and Pasadena."
        />
      </div>
    </ThemeProvider>
  );
}