"use client";

import {
  FaClipboard,
  FaClipboardList,
  FaGlobe,
  FaLightbulb,
  FaUsers,
} from "react-icons/fa6";
import {
  FaBuilding,
  FaCalendarAlt,
  FaChartLine,
  FaCheckCircle,
  FaClock,
  FaFileAlt,
  FaHandsHelping,
  FaNetworkWired,
  FaShieldAlt,
  FaUserCheck,
} from "react-icons/fa";

import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import { DEFAULT_CONSUMER_RECRUITMENT_CONTENT } from "@/constants/consumer-recruitment-content";
import {
  Service,
  ServiceUnitProps,
} from "@/components/pages/client/services/services";
import ServiceOne from "@/public/client/services/1.webp";
import Hero from "@/components/pages/client/services/sections/hero";
import AboutTheService from "@/components/pages/client/services/sections/about-the-service";
import WhatElseWeCanDo from "@/components/pages/client/services/sections/what-else-we-can-do";
import Testimonials from "@/components/pages/client/services/sections/testimonials";
import FinalCTA from "@/components/pages/client/services/sections/final-cta";
import CaseStudy from "@/components/pages/client/services/sections/case-studies";
import BritishHeartLogo from "@/public/client/services/testimonials-logos/consumer-recruitment/british-heart-foundation.webp";
import BTLogo from "@/public/client/services/testimonials-logos/consumer-recruitment/bt.webp";
import PenguinLogo from "@/public/client/services/testimonials-logos/consumer-recruitment/penguin.webp";
import ResourceCTA from "@/components/pages/client/services/sections/resource-cta";

const WHAT_ELSE_ICONS = [
  FaBuilding,
  FaClipboard,
  FaHandsHelping,
  FaNetworkWired,
  FaUserCheck,
  FaChartLine,
  FaCalendarAlt,
  FaFileAlt,
];

const WHY_PFR_ICONS = [
  FaCheckCircle,
  FaGlobe,
  FaClipboardList,
  FaLightbulb,
  FaUsers,
  FaClock,
  FaChartLine,
  FaShieldAlt,
];

const TESTIMONIAL_PRESENTATION = [
  {
    headline: "Swift recruitment of suitably backgrounded users",
    logo: BritishHeartLogo,
  },
  {
    headline: "Prompt and concise communication for swift recruitment",
    logo: BTLogo,
  },
  {
    headline: "Smart and efficient service with great quality participants",
    logo: PenguinLogo,
  },
];

export const CONSUMER_RECRUITMENT: Service = {
  slug: "consumer-recruitment",
  title: DEFAULT_CONSUMER_RECRUITMENT_CONTENT.hero.title,
  description: DEFAULT_CONSUMER_RECRUITMENT_CONTENT.hero.description,
  imgSrc: ServiceOne,
  alt: "A diverse group of smiling people standing closely together outdoors.",
  icon: FaUsers,
  href: INTERNAL_PAGES.client.services.consumerRecruitment,
  serviceCharacteristics: {
    about: DEFAULT_CONSUMER_RECRUITMENT_CONTENT.about.description,
    catchySentence: DEFAULT_CONSUMER_RECRUITMENT_CONTENT.about.title,
    whyPFR: {
      title: DEFAULT_CONSUMER_RECRUITMENT_CONTENT.whyPfr.title,
      content: DEFAULT_CONSUMER_RECRUITMENT_CONTENT.whyPfr.items.map(
        (title, index) => ({ title, icon: WHY_PFR_ICONS[index] }),
      ),
    },
    whatElseWeCanDo: {
      title: DEFAULT_CONSUMER_RECRUITMENT_CONTENT.whatElse.title,
      content: DEFAULT_CONSUMER_RECRUITMENT_CONTENT.whatElse.items.map(
        (item, index) => ({ ...item, icon: WHAT_ELSE_ICONS[index] }),
      ),
    },
    testimonials: DEFAULT_CONSUMER_RECRUITMENT_CONTENT.testimonials.items.map(
      (item, index) => ({
        ...item,
        ...TESTIMONIAL_PRESENTATION[index],
        companyName: item.company,
        testimonial: item.quote,
      }),
    ),
  },
};

function ConsumerRecruitment({
  featuredPost,
  resourcePost,
  consumerContent,
}: ServiceUnitProps) {
  const { title, description, imgSrc, alt } = CONSUMER_RECRUITMENT;
  const { catchySentence, about, whyPFR, whatElseWeCanDo, testimonials } =
    CONSUMER_RECRUITMENT.serviceCharacteristics;
  const content = consumerContent;
  const ghostWhyPfr = content && {
    ...whyPFR,
    title: content.whyPfr.title,
    content: whyPFR.content.map((item, index) => ({
      ...item,
      title: content.whyPfr.items[index],
    })),
  };
  const ghostWhatElse = content && {
    ...whatElseWeCanDo!,
    title: content.whatElse.title,
    content: whatElseWeCanDo!.content.map((item, index) => ({
      ...item,
      title: content.whatElse.items[index].title,
      description: content.whatElse.items[index].description,
    })),
  };
  const ghostTestimonials =
    content &&
    testimonials!.map((item, index) => ({
      ...item,
      companyName: content.testimonials.items[index].company,
      testimonial: content.testimonials.items[index].quote,
    }));

  return (
    <>
      <Hero
        description={content?.hero.description || description}
        image={imgSrc}
        imageAlt={alt}
        title={content?.hero.title || title}
      />
      <AboutTheService
        callout={content?.whyPfr.callout}
        catchySentence={content?.about.title || catchySentence}
        description={content?.about.description || about}
        whyPFRSection={ghostWhyPfr || whyPFR}
      />
      {resourcePost && <ResourceCTA post={resourcePost} />}
      {whatElseWeCanDo && (
        <WhatElseWeCanDo whatElseWeCanDo={ghostWhatElse || whatElseWeCanDo} />
      )}
      {featuredPost?.feature_image && <CaseStudy post={featuredPost} />}
      {testimonials && (
        <Testimonials
          subtitle={content?.testimonials.intro}
          testimonials={ghostTestimonials || testimonials}
          title={content?.testimonials.title}
        />
      )}
      <FinalCTA
        description={content?.finalCta.description}
        title={content?.finalCta.title}
      />
    </>
  );
}

export default ConsumerRecruitment;