"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
import SplitAbout from "@/components/sections/about/SplitAbout";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { CheckCircle, 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 ServicesPage() {
  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="services-overview" data-section="services-overview">
        <FeatureCardTwentyThree
          title="Comprehensive Recruitment Services"
          description="We offer tailored recruitment solutions for every stage of your hiring journey, from quick temporary placements to executive search expertise."
          tag="Our Solutions"
          features={[
            {
              id: "1",
              title: "Permanent Staffing Solutions",
              tags: ["Full-time Roles", "Permanent Positions"],
              imageSrc: "/placeholders/placeholder1.webp",
              imageAlt: "Permanent staffing solutions",
            },
            {
              id: "2",
              title: "Executive & Senior Search",
              tags: ["Leadership Roles", "C-Suite Placements"],
              imageSrc: "/placeholders/placeholder1.webp",
              imageAlt: "Executive search services",
            },
            {
              id: "3",
              title: "Temporary & Contract Staff",
              tags: ["Short-term Coverage", "Flexible Solutions"],
              imageSrc: "/placeholders/placeholder1.webp",
              imageAlt: "Temporary staffing options",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttonAnimation="slide-up"
          tagAnimation="opacity"
        />
      </div>

      <div id="service-process" data-section="service-process">
        <SplitAbout
          title="Our Service Approach"
          description="Every placement is handled with precision and care. We follow a rigorous process to ensure the perfect match between employer and candidate."
          tag="How We Work"
          tagAnimation="opacity"
          bulletPoints={[
            {
              title: "Thorough Requirements Analysis",
              description: "We take time to understand your specific needs, culture, and growth plans",
              icon: CheckCircle,
            },
            {
              title: "Active Talent Sourcing",
              description: "Leveraging our extensive network and database to find qualified candidates",
              icon: Users,
            },
            {
              title: "Rigorous Screening & Vetting",
              description: "Every candidate undergoes background checks, skills testing, and interviews",
              icon: CheckCircle,
            },
          ]}
          imagePosition="right"
          textboxLayout="default"
          useInvertedBackground={false}
          mediaAnimation="slide-up"
          buttons={[{ text: "Start Hiring", href: "/employers" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="service-cta" data-section="service-cta">
        <SplitAbout
          title="Sector-Specific Expertise"
          description="Our recruitment specialists have deep experience across multiple industries, understanding unique requirements and market conditions for each sector."
          tag="Industries We Serve"
          tagAnimation="opacity"
          bulletPoints={[
            {
              title: "Technology & IT",
              description: "From software engineers to IT managers and system architects",
              icon: Zap,
            },
            {
              title: "Healthcare & Medical",
              description: "Nurses, doctors, healthcare administrators, and support staff",
              icon: CheckCircle,
            },
            {
              title: "Finance & Professional Services",
              description: "Accountants, financial advisors, consultants, and business analysts",
              icon: Users,
            },
          ]}
          imagePosition="left"
          textboxLayout="default"
          useInvertedBackground={false}
          mediaAnimation="slide-up"
          buttons={[{ text: "Explore More", href: "/contact" }]}
          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>
  );
}