"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import AboutMetric from "@/components/sections/about/AboutMetric";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import FooterCard from "@/components/sections/footer/FooterCard";
import { ShieldCheck, Truck, DollarSign, Package, Facebook, Instagram, MessageCircle } from "lucide-react";

export default function AboutPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Products", id: "/products" },
    { name: "About", id: "/about" },
    { name: "Contact", id: "/contact" },
    { name: "WhatsApp", id: "https://wa.me/1234567890" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="small"
      sizing="largeSmallSizeMediumTitles"
      background="blurBottom"
      cardStyle="glass-elevated"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="NS"
          bottomLeftText="Premium Tailoring Supplies"
          bottomRightText="contact@nstailoring.com"
        />
      </div>

      <div id="about-commitment" data-section="about-commitment">
        <AboutMetric
          title="NS - Nine Years of Committed Excellence in Tailoring Materials"
          metrics={[
            { icon: ShieldCheck, label: "High Quality Materials", value: "Premium Grade" },
            { icon: Truck, label: "Reliable Supply", value: "Always Stocked" },
            { icon: DollarSign, label: "Affordable Pricing", value: "Best Value" },
            { icon: Package, label: "Wide Variety", value: "5+ Categories" },
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="our-values" data-section="our-values">
        <FeatureCardThree
          title="Our Core Values"
          description="Since our founding, NS has been built on principles that guide every decision and interaction."
          features={[
            {
              id: "01",
              title: "Quality First",
              description: "Every product in our catalog is carefully selected to meet the highest standards of craftsmanship and durability.",
              imageSrc: "http://img.b2bpic.net/free-photo/top-view-fabric_23-2148817485.jpg?_wi=3",
              imageAlt: "Premium quality fabrics",
            },
            {
              id: "02",
              title: "Professional Partnership",
              description: "We understand the tailoring business deeply. We're not just suppliers—we're partners in your success.",
              imageSrc: "http://img.b2bpic.net/free-photo/sewing-threads-different-colors-with-lots-needles_169016-5008.jpg?_wi=2",
              imageAlt: "Professional sewing supplies",
            },
            {
              id: "03",
              title: "Reliable Consistency",
              description: "Our customers trust us to deliver quality materials consistently, year after year. That trust is sacred to us.",
              imageSrc: "http://img.b2bpic.net/free-photo/top-view-measuring-tape-with-thread_23-2148739412.jpg?_wi=4",
              imageAlt: "Quality measuring tools",
            },
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="customer-trust" data-section="customer-trust">
        <TestimonialCardThirteen
          title="Why Professional Tailors Trust NS"
          description="Our reputation is built on nine years of delivering premium materials and exceptional service."
          testimonials={[
            {
              id: "1",
              name: "Rajesh Kumar",
              handle: "@rajesh_tailoring",
              testimonial: "NS has been my go-to supplier for 9 years. The quality of materials is consistently excellent and their pricing is very competitive. Highly recommended!",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/dark-blonde-bearded-man-crosses-his-hands-chest-posing-black-shirt_8353-1116.jpg?_wi=3",
              imageAlt: "Rajesh Kumar",
            },
            {
              id: "2",
              name: "Meera Gupta",
              handle: "@meera_couture",
              testimonial: "NS is reliable, professional, and truly understands the tailoring business. They're not just suppliers - they're partners in my success.",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-businesswoman-looking-camera-head-shot-portrait_1163-4928.jpg?_wi=2",
              imageAlt: "Meera Gupta",
            },
            {
              id: "3",
              name: "Vikram Singh",
              handle: "@vikram_tailors",
              testimonial: "Been ordering from NS for years. Never disappointed with quality or delivery. They have everything a professional tailor needs.",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-personal-shopper-working_23-2148924143.jpg?_wi=3",
              imageAlt: "Vikram Singh",
            },
          ]}
          showRating={true}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="NS"
          copyrightText="© 2025 NS Tailoring Supplies. All rights reserved. Premium tailoring materials and sewing supplies."
          socialLinks={[
            { icon: Facebook, href: "https://facebook.com/nstailoring", ariaLabel: "Facebook" },
            { icon: Instagram, href: "https://instagram.com/nstailoring", ariaLabel: "Instagram" },
            { icon: MessageCircle, href: "https://wa.me/1234567890", ariaLabel: "WhatsApp" },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}