"use client";
import Image from "next/image";
import { Card, CardBody, CardFooter } from "@nextui-org/react";

import DaviesLogo from "@/public/user-viewing/davies.webp";
import HargreavesLogo from "@/public/user-viewing/hargreaves-lansdown-logo.webp";
import MoneyAdviceLogo from "@/public/user-viewing/money-advice.webp";
import type { UserViewingContent } from "@/lib/user-viewing-ghost-content";

const TESTIMONIAL_LOGOS = [MoneyAdviceLogo, HargreavesLogo, DaviesLogo];

function Testimonials({
  testimonials,
}: Pick<UserViewingContent["about"], "testimonials">) {
  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mx-4 mt-12 py-4">
      {testimonials.map((item, index) => (
        <Card
          key={item.client}
          className="p-8 bg-gray-400/10 dark:bg-white/5 rounded-xl flex flex-col items-center justify-center space-y-4 shadow-none"
        >
          <CardBody className="flex-1 p-0 pb-6">
            <blockquote className="text-lg font-medium font-noto text-gray-700 dark:text-gray-300 before:content-['“'] after:content-['”']">
              {item.testimonial}
            </blockquote>
          </CardBody>
          <CardFooter className="flex items-center justify-between p-0 pt-6 rounded-none">
            <span className="text-sm font-noto font-semibold text-gray-900 dark:text-white">
              {item.client}
            </span>
            <div className="size-20 flex items-center justify-end">
              <Image
                alt=""
                className="h-full object-contain filter grayscale dark:invert"
                height={120}
                src={TESTIMONIAL_LOGOS[index]}
                width={120}
              />
            </div>
          </CardFooter>
        </Card>
      ))}
    </div>
  );
}

function AboutUserViewing({
  content,
}: {
  content: UserViewingContent["about"];
}) {
  return (
    <section
      className="text-black dark:text-white my-12 max-w-7xl mx-auto p-8 xl:p-0"
      id="about"
    >
      <div className="text-center space-y-4">
        <span className="relative font-noto text-xl font-bold">
          Our service
          <span className="absolute -bottom-1 left-0 w-full h-1 bg-pfrBasicBlue opacity-40 dark:opacity-100"></span>
        </span>
        <h1 className="text-3xl xl:text-6xl font-inter font-black">
          {content.title}
        </h1>
        <p className="font-noto leading-7 text-lg">{content.lead}</p>
        <h2 className="text-xl xl:text-4xl font-inter font-black pt-8">
          {content.testimonialHeading}
        </h2>
        <h3 className="text-lg font-noto">{content.testimonialLead}</h3>
      </div>
      <Testimonials testimonials={content.testimonials} />
    </section>
  );
}

export default AboutUserViewing;