"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Star, HandshakeIcon, Zap } from "lucide-react";

const navItems = [
  { name: "Home", id: "home" },
  { name: "About", id: "about" },
  { name: "Candidates", id: "candidates" },
  { name: "Clients", id: "clients" },
  { name: "Testimonials", id: "testimonials" },
];

const footerColumns = [
  {
    items: [
      { label: "Home", href: "/" },
      { label: "About", href: "/about" },
      { label: "Careers", href: "#careers" },
    ],
  },
  {
    items: [
      { label: "For Candidates", href: "/candidates" },
      { label: "For Clients", href: "/clients" },
      { label: "Contact", href: "/contact" },
    ],
  },
  {
    items: [
      { label: "Privacy Policy", href: "#privacy" },
      { label: "Terms", href: "#terms" },
      { label: "LinkedIn", href: "https://linkedin.com" },
    ],
  },
];

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="medium"
      background="circleGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={navItems}
          button={{ text: "Contact", href: "/contact" }}
          brandName="Adapro"
        />
      </div>

      <div id="about-content" data-section="about-content">
        <TestimonialAboutCard
          tag="Our Story"
          tagIcon={Star}
          tagAnimation="slide-up"
          title="Two decades of building trust in professional services recruitment"
          description="Since 2004, we've been committed to honest partnerships"
          subdescription="Every relationship matters. Every candidate deserves respect. Every client deserves excellence."
          icon={HandshakeIcon}
          imageSrc="http://img.b2bpic.net/free-photo/focused-business-colleagues-arguing_1262-20538.jpg"
          imageAlt="Adapro team collaborating with clients"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="our-values" data-section="our-values">
        <FeatureCardMedia
          title="Our Core Values"
          description="These principles guide everything we do, from how we work with candidates to how we serve our clients."
          features={[
            {
              id: "integrity",              title: "Integrity First",              description:
                "Honesty and transparency in every conversation. No hidden agendas, no pressure tactics – just real consultancy.",              tag: "Values",              imageSrc:
                "http://img.b2bpic.net/free-photo/businessman-holding-laptop-showing-financial-data_9975-22146.jpg"},
            {
              id: "expertise",              title: "Deep Expertise",              description:
                "20+ years in professional services means we genuinely understand your sector and its unique challenges.",              tag: "Values",              imageSrc:
                "http://img.b2bpic.net/free-photo/medium-shot-people-learning-together_23-2149300755.jpg"},
            {
              id: "partnership",              title: "Partnership Over Transactions",              description:
                "We're invested in long-term success. Your growth is our growth. Your challenges are our challenges.",              tag: "Values",              imageSrc:
                "http://img.b2bpic.net/free-photo/marketing-plan-achievement-strategy_53876-127844.jpg"},
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          carouselMode="buttons"
        />
      </div>

      <div id="cta-about" data-section="cta-about">
        <ContactCTA
          tag="Learn More"
          tagIcon={Zap}
          tagAnimation="slide-up"
          title="Ready to experience the Adapro difference?"
          description="Whether you're a candidate looking for your next opportunity or a company seeking exceptional talent, we'd love to hear from you. Let's build something great together."
          buttons={[
            { text: "Start a conversation", href: "/contact" },
            { text: "Explore opportunities", href: "/candidates" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "animated-grid" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis columns={footerColumns} logoText="Adapro" />
      </div>
    </ThemeProvider>
  );
}