"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Briefcase, 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 ClientsPage() {
  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="hero-clients" data-section="hero-clients">
        <HeroBillboardTestimonial
          title="Exceptional talent, delivered strategically"
          description="Finding the right people isn't just about matching job descriptions. It's about understanding your culture, your challenges, and your growth trajectory. We've been doing this for 20+ years across Finance, HR, Procurement, Marketing, Legal, and IT."
          tag="For Clients"
          tagIcon={Briefcase}
          tagAnimation="slide-up"
          background={{ variant: "animated-grid" }}
          imageSrc="http://img.b2bpic.net/free-photo/group-business-workers-smiling-happy-confident-working-together-with-smile-face-using-laptop-speaking-office_839833-9703.jpg"
          imageAlt="Client and recruitment team partnership"
          mediaAnimation="slide-up"
          testimonials={[
            {
              name: "Marcus Thompson",              handle: "VP of Operations",              testimonial:
                "Adapro didn't just fill positions – they helped us build a stronger team. Their understanding of our business was evident from day one.",              rating: 5,
              imageSrc:
                "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"},
            {
              name: "Lisa Chen",              handle: "Head of Finance",              testimonial:
                "We've worked with many recruiters, but Adapro stands out. They're consultants first, salespeople second.",              rating: 5,
              imageSrc:
                "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg"},
          ]}
          testimonialRotationInterval={5000}
          buttons={[
            { text: "Schedule a consultation", href: "/contact" },
            { text: "Our approach", href: "#approach" },
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="our-approach" data-section="our-approach">
        <FeatureCardMedia
          title="Our consultative approach"
          description="We don't just fill vacancies – we solve talent challenges. Here's how we work with clients."
          features={[
            {
              id: "deep-discovery",              title: "Deep Discovery",              description:
                "We invest time understanding your culture, requirements, growth plans, and team dynamics before presenting candidates.",              tag: "Process",              imageSrc:
                "http://img.b2bpic.net/free-photo/focused-business-colleagues-arguing_1262-20538.jpg"},
            {
              id: "quality-matches",              title: "Quality Over Quantity",              description:
                "Rather than flooding your inbox with hundreds of CVs, we present carefully selected candidates who genuinely fit.",              tag: "Process",              imageSrc:
                "http://img.b2bpic.net/free-photo/businessman-holding-laptop-showing-financial-data_9975-22146.jpg"},
            {
              id: "strategic-support",              title: "Strategic Support",              description:
                "From shortlisting to onboarding support, we're your partner throughout the entire hiring process.",              tag: "Process",              imageSrc:
                "http://img.b2bpic.net/free-photo/medium-shot-people-learning-together_23-2149300755.jpg"},
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          carouselMode="buttons"
        />
      </div>

      <div id="cta-clients" data-section="cta-clients">
        <ContactCTA
          tag="Let's Talk"
          tagIcon={Zap}
          tagAnimation="slide-up"
          title="Ready to find your next team member?"
          description="Whether you're looking to fill an urgent vacancy or building a long-term talent strategy, we're here to help. Let's discuss how Adapro can support your growth."
          buttons={[
            { text: "Start a conversation", href: "/contact" },
            { text: "Request proposal", href: "/contact" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "animated-grid" }}
          useInvertedBackground={false}
        />
      </div>

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