import { secondaryButtonLight, textLink } from "@/app/components/button-styles";
import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
import {
  buttonLabels,
  caseStudies,
  type ServiceOffer,
} from "@/lib/site-content";

function OfferCard({
  offer,
  className,
}: {
  offer: ServiceOffer;
  className: string;
}) {
  const proofCases = offer.proof.caseIds.flatMap((id) => {
    const caseStudy = caseStudies.find((item) => item.id === id);
    return caseStudy ? [caseStudy] : [];
  });

  return (
    <article className={`ds-card ${className}`}>
      <h3 className="ds-card-title !mt-0 text-balance">{offer.name}</h3>
      <p className="ds-copy !flex-grow-0">{offer.summary}</p>
      <ul className="ds-list space-y-sp-2">
        {offer.deliverables.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <p className="ds-kicker mt-sp-6">{offer.proof.label}</p>
      {proofCases.length > 0 ? (
        <ul className="mt-sp-2 flex flex-wrap gap-x-sp-4">
          {proofCases.map((caseStudy) => (
            <li key={caseStudy.id}>
              <HoverPrefetchLink
                href={`/cases/${caseStudy.id}`}
                className={`${textLink} focus-visible:outline-2 focus-visible:outline-offset-4`}
              >
                <span className="sr-only">{buttonLabels.case} </span>
                {caseStudy.title}
              </HoverPrefetchLink>
            </li>
          ))}
        </ul>
      ) : null}
      {offer.proof.note ? (
        <p className="ds-copy !mt-sp-2 !flex-grow-0 text-[15px]">
          {offer.proof.note}
        </p>
      ) : null}
      <div className="mt-sp-6">
        <HoverPrefetchLink
          href={offer.href}
          className={`${secondaryButtonLight} focus-visible:outline-2 focus-visible:outline-offset-4`}
        >
          {buttonLabels.service}
          <span className="sr-only"> {offer.name}</span>
        </HoverPrefetchLink>
      </div>
    </article>
  );
}

/**
 * Largura de cada cartão na grade de 6 colunas: três por linha (2 colunas cada), e a última linha incompleta se divide
 * por inteiro, sem célula vazia (dois cartões: 3 colunas cada; um: a linha toda).
 */
function offerSpan(index: number, total: number) {
  const rest = total % 3;
  if (index < total - rest) return "lg:col-span-2";
  return rest === 2 ? "lg:col-span-3" : "lg:col-span-6";
}

/** As ofertas lado a lado no computador, três por linha: nome, o que a pessoa recebe, onde ver funcionando e o link da página certa. */
export function ServiceOfferCards({
  offers,
}: {
  offers: readonly ServiceOffer[];
}) {
  return (
    <div className="mt-sp-8 grid items-stretch gap-sp-6 lg:grid-cols-6">
      {offers.map((offer, index) => (
        <OfferCard
          key={offer.id}
          offer={offer}
          className={offerSpan(index, offers.length)}
        />
      ))}
    </div>
  );
}