"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import SplitAbout from "@/components/sections/about/SplitAbout";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Award, CheckCircle, Heart, Zap, Users } from "lucide-react";

const navItems = [
  { name: "Services", id: "services" },
  { name: "Why Us", id: "why-us" },
  { name: "Testimonials", id: "testimonials" },
  { name: "FAQ", id: "faq" },
  { name: "Contact", id: "contact" },
];

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="mediumLarge"
      background="noiseDiagonalGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={navItems}
          button={{ text: "Call Now", href: "tel:+441392000000" }}
          brandName="Aptus"
        />
      </div>

      <div id="about-intro" data-section="about-intro">
        <SplitAbout
          title="About Aptus Recruitment"
          description="Founded on the belief that great hiring starts with understanding people and markets. We've built Aptus as a partner for businesses and candidates across Exeter and Devon who demand excellence, transparency, and results."
          tag="Our Story"
          tagAnimation="opacity"
          bulletPoints={[
            {
              title: "Local Expertise",
              description: "Deep-rooted knowledge of Exeter and Devon's business ecosystem",
              icon: CheckCircle,
            },
            {
              title: "Trusted Partners",
              description: "Over 500 successful placements with 94% client retention",
              icon: Heart,
            },
            {
              title: "Dedicated Team",
              description: "Experienced recruiters passionate about finding the right fit",
              icon: Users,
            },
          ]}
          imagePosition="right"
          textboxLayout="default"
          useInvertedBackground={false}
          mediaAnimation="slide-up"
          buttons={[{ text: "Contact Us", href: "/contact" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about-values" data-section="about-values">
        <SplitAbout
          title="Our Core Values"
          description="Every decision we make and every placement we handle is guided by these principles that define who we are as an organization."
          tag="What We Believe"
          tagAnimation="opacity"
          bulletPoints={[
            {
              title: "Integrity in Everything",
              description: "We maintain the highest standards of honesty and transparency",
              icon: CheckCircle,
            },
            {
              title: "Excellence Driven",
              description: "We never settle for good enough - exceptional results are the standard",
              icon: Award,
            },
            {
              title: "People First",
              description: "We prioritize understanding people's needs, aspirations, and potential",
              icon: Users,
            },
          ]}
          imagePosition="left"
          textboxLayout="default"
          useInvertedBackground={false}
          mediaAnimation="slide-up"
        />
      </div>

      <div id="about-metrics" data-section="about-metrics">
        <MetricCardOne
          title="By The Numbers"
          description="Our impact measured in successful partnerships and satisfied clients"
          tag="Our Achievement"
          tagIcon={Award}
          metrics={[
            {
              id: "1",
              value: "500",
              title: "Placements",
              description: "Successful matches created",
              icon: CheckCircle,
            },
            {
              id: "2",
              value: "94",
              title: "% Retention",
              description: "Clients that return to us",
              icon: Heart,
            },
            {
              id: "3",
              value: "7",
              title: "Days Average",
              description: "Time to successful placement",
              icon: Zap,
            },
            {
              id: "4",
              value: "350",
              title: "Active Candidates",
              description: "Pre-vetted talent pool",
              icon: Users,
            },
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          tagAnimation="opacity"
          buttonAnimation="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="APTUS"
          columns={[
            {
              items: [
                { label: "About", href: "/about" },
                { label: "Services", href: "/services" },
                { label: "For Employers", href: "/employers" },
                { label: "For Candidates", href: "/candidates" },
              ],
            },
            {
              items: [
                { label: "Contact", href: "/contact" },
                { label: "FAQ", href: "#faq" },
                { label: "Privacy Policy", href: "#" },
                { label: "Terms & Conditions", href: "#" },
              ],
            },
            {
              items: [
                { label: "Email", href: "mailto:hello@aptusrecruitment.co.uk" },
                { label: "Phone", href: "tel:+441392000000" },
                { label: "Address", href: "#" },
                { label: "Exeter, Devon", href: "#" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}