"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { Zap, TrendingUp, Users, Target, Rocket } from "lucide-react";

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSizeMediumTitles"
      background="blurBottom"
      cardStyle="gradient-mesh"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Portfolio", id: "/portfolio" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" },
          ]}
          brandName="Proof Digital"
          bottomLeftText="Global Reach"
          bottomRightText="hello@proofdigital.com"
        />
      </div>

      <div id="about-values" data-section="about-values">
        <FeatureCardTwentySeven
          title="Our Core Values"
          description="These principles guide everything we do and shape how we work with our clients"
          tag="Who We Are"
          tagIcon={Zap}
          tagAnimation="slide-up"
          features={[
            {
              id: "1",
              title: "Innovation First",
              description: "We stay at the forefront of digital technology and design trends, constantly exploring new ways to solve complex problems.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/user-interface-and-experience-design-moc-1772538617539-7eab0203.png?_wi=2",
              imageAlt: "Innovation",
            },
            {
              id: "2",
              title: "Client-Centric Approach",
              description: "Your success is our success. We take time to understand your business, goals, and challenges before developing solutions.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/digital-strategy-consultation-scene-with-1772538618258-45f82cfc.png?_wi=3",
              imageAlt: "Client Focus",
            },
            {
              id: "3",
              title: "Quality Excellence",
              description: "We maintain the highest standards in code quality, design aesthetics, and user experience. Details matter.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/professional-web-development-concept-ima-1772538619187-01dd9557.png?_wi=3",
              imageAlt: "Quality",
            },
            {
              id: "4",
              title: "Transparency & Trust",
              description: "Open communication and honest partnerships are fundamental to how we operate. We keep you informed every step of the way.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/brand-identity-design-workspace-showing--1772538617285-0010346f.png?_wi=3",
              imageAlt: "Trust",
            },
          ]}
          gridVariant="uniform-4-items"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="about-metrics" data-section="about-metrics">
        <MetricCardThree
          title="Our Journey"
          description="A decade of delivering exceptional digital solutions to businesses of all sizes"
          metrics={[
            {
              id: "1",
              icon: TrendingUp,
              title: "Years in Business",
              value: "10+",
            },
            {
              id: "2",
              icon: Users,
              title: "Dedicated Team",
              value: "50+",
            },
            {
              id: "3",
              icon: Target,
              title: "Projects Delivered",
              value: "150+",
            },
            {
              id: "4",
              icon: Zap,
              title: "Satisfied Clients",
              value: "120+",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="about-cta" data-section="about-cta">
        <ContactCTA
          tag="Join Our Community"
          tagIcon={Rocket}
          tagAnimation="slide-up"
          title="Let's Build Something Amazing Together"
          description="Partner with a team that cares about your vision and is committed to your digital success."
          buttons={[
            { text: "Get Started Today", href: "/contact" },
            { text: "Explore Our Services", href: "/services" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "gradient-bars" }}
          useInvertedBackground={false}
        />
      </div>

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