"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Star, Award, Users, Heart } from "lucide-react";

const navItems = [
  { name: "Home", id: "home" },
  { name: "Shop", id: "shop" },
  { name: "Services", id: "services" },
  { name: "About", id: "about" },
  { name: "Contact", id: "contact" }
];

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="medium"
      background="blurBottom"
      cardStyle="solid"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple navItems={navItems} brandName="Sadek Music" />
      </div>

      <div id="about-intro" data-section="about-intro">
        <div className="mx-auto px-4 md:px-6">
          <InlineImageSplitTextAbout
            heading={[
              { type: "text", content: "About Sadek Musical Instruments" }
            ]}
            buttons={[
              { text: "Visit Us Today", href: "/contact" },
              { text: "Browse Products", href: "/shop" }
            ]}
            useInvertedBackground={false}
          />
        </div>
      </div>

      <div id="our-values" data-section="our-values">
        <div className="mx-auto px-4 md:px-6">
          <FeatureBento
            title="Our Core Values"
            description="What drives us to be Dubai's most trusted music store"
            animationType="slide-up"
            features={[
              {
                title: "Quality First",
                description: "We stock only the finest instruments from world-renowned brands",
                bentoComponent: "reveal-icon",
                icon: Award
              },
              {
                title: "Expert Knowledge",
                description: "Our team consists of passionate musicians with years of industry experience",
                bentoComponent: "reveal-icon",
                icon: Star
              },
              {
                title: "Customer Support",
                description: "We're committed to helping you find the perfect instrument for your needs",
                bentoComponent: "reveal-icon",
                icon: Heart
              },
              {
                title: "Community Focused",
                description: "Supporting Dubai's vibrant music community through education and events",
                bentoComponent: "reveal-icon",
                icon: Users
              }
            ]}
            textboxLayout="default"
            useInvertedBackground={false}
          />
        </div>
      </div>

      <div id="about-metrics" data-section="about-metrics">
        <div className="mx-auto px-4 md:px-6">
          <MetricCardOne
            title="Our Journey"
            description="Building Dubai's music legacy since 1998"
            animationType="slide-up"
            gridVariant="uniform-all-items-equal"
            textboxLayout="default"
            useInvertedBackground={false}
            metrics={[
              {
                id: "1",
                value: "25+",
                title: "Years in Business",
                description: "Since 1998",
                icon: Award
              },
              {
                id: "2",
                value: "5000+",
                title: "Satisfied Customers",
                description: "Musicians & professionals",
                icon: Users
              },
              {
                id: "3",
                value: "4.6★",
                title: "Customer Rating",
                description: "From 800+ reviews",
                icon: Star
              }
            ]}
          />
        </div>
      </div>

      <div id="footer" data-section="footer">
        <div className="mx-auto px-4 md:px-6">
          <FooterLogoReveal
            logoText="Sadek Music"
            leftLink={{ text: "Privacy Policy", href: "/" }}
            rightLink={{ text: "Contact Us", href: "/contact" }}
          />
        </div>
      </div>
    </ThemeProvider>
  );
}