"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Users, Lightbulb, Target, Rocket } from "lucide-react";

const navItems = [
  { name: "Home", id: "/" },
  { name: "About", id: "/about" },
  { name: "Services", id: "/services" },
  { name: "Portfolio", id: "/portfolio" },
  { name: "Pricing", id: "/pricing" },
];

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="large"
      background="circleGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="MDX" navItems={navItems} />
      </div>

      {/* About Us Section */}
      <div id="about-intro" data-section="about-intro">
        <FeatureCardThree
          title="About Modern Digital Xelence"
          description="We're a team of strategic designers and developers dedicated to transforming local businesses through high-impact web solutions. Every project is built with precision, purpose, and proven results."
          features={[
            {
              id: "01",
              title: "Strategic Thinking",
              description:
                "We don't just build websites—we build business solutions that align with your revenue goals and market positioning.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/business-scene-top-view_23-2147626514.jpg?_wi=2",
              imageAlt: "Strategic thinking and planning",
            },
            {
              id: "02",
              title: "Design Excellence",
              description:
                "Our designs combine aesthetic beauty with functional usability, ensuring every pixel serves your business objectives.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/focus-concentrate-clarity-determine-inspiration-concept_53876-133862.jpg?_wi=2",
              imageAlt: "Design excellence",
            },
            {
              id: "03",
              title: "Results-Driven Approach",
              description:
                "We measure success by your metrics: leads generated, conversions achieved, and revenue driven by your new website.",
              imageSrc:
                "http://img.b2bpic.net/free-vector/marketing-conversion-flat-background_23-2148000676.jpg?_wi=1",
              imageAlt: "Results-driven metrics",
            },
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* Core Values Section */}
      <div id="core-values" data-section="core-values">
        <MetricCardThree
          title="Our Core Values"
          description="These principles guide every decision we make and every project we deliver."
          metrics={[
            {
              id: "1",
              icon: Lightbulb,
              title: "Innovation",
              value: "Cutting Edge",
            },
            {
              id: "2",
              icon: Users,
              title: "Collaboration",
              value: "True Partnership",
            },
            {
              id: "3",
              icon: Target,
              title: "Precision",
              value: "Detail Focused",
            },
            {
              id: "4",
              icon: Rocket,
              title: "Excellence",
              value: "Premium Quality",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* Why Choose Us Section */}
      <div id="why-choose-us" data-section="why-choose-us">
        <FeatureCardThree
          title="Why Choose MDX?"
          description="We deliver more than websites—we deliver competitive advantages that drive your business forward."
          features={[
            {
              id: "01",
              title: "Local Business Expertise",
              description:
                "We specialize in serving local businesses and understand the unique challenges and opportunities in your market.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/medium-shot-people-shaking-hands_23-2150433381.jpg",
              imageAlt: "Local business partnership",
            },
            {
              id: "02",
              title: "Transparent Process",
              description:
                "You'll know exactly what we're doing, why we're doing it, and how it impacts your bottom line every step of the way.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/unrecognizable-colleagues-standing-table-looking-design-projects_1098-20475.jpg?_wi=2",
              imageAlt: "Transparent collaboration",
            },
            {
              id: "03",
              title: "Ongoing Support",
              description:
                "Your success doesn't end at launch. We provide continued optimization, support, and training to keep your website performing.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/people-hangout-together-coffee-shop_53876-15994.jpg",
              imageAlt: "Ongoing client support",
            },
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* Call to Action */}
      <div id="about-cta" data-section="about-cta">
        <ContactCTA
          tag="Learn More"
          title="Ready to Partner with MDX?"
          description="Let's discuss how we can transform your digital presence and drive measurable business growth."
          buttons={[
            { text: "Book a Consultation", href: "/booking" },
            { text: "View Our Work", href: "/portfolio" },
          ]}
          background={{ variant: "circleGradient" }}
          useInvertedBackground={false}
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="MDX"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}