import {
  primaryButton,
  secondaryButtonDark,
} from "@/app/components/button-styles";
import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
import WhatsAppLink from "@/app/components/WhatsAppLink";
import { buttonLabels, type CaseStudyContent } from "@/lib/site-content";
import { similarProjectSubject } from "@/lib/whatsapp";
import { CaseRelatedServices } from "./CaseRelatedServices";

/**
 * Títulos do convite ao contato: o case de cliente fala de um projeto parecido; o de laboratório, do caso de quem lê.
 * O botão abre o WhatsApp e tem o mesmo rótulo nos dois (`buttonLabels.whatsapp`), e o assunto da conversa também:
 * `similarProjectSubject`.
 */
const contactCopy = {
  client: { title: "Quer um projeto parecido com este?" },
  lab: { title: "Fale sobre o seu caso" },
} as const;

/** Fecho do case: convite ao WhatsApp, volta para a lista de cases e os serviços ligados ao projeto. */
export function CaseContactSection({
  caseStudy,
  isClient,
}: {
  caseStudy: Pick<CaseStudyContent, "id" | "title">;
  isClient: boolean;
}) {
  const copy = contactCopy[isClient ? "client" : "lab"];

  return (
    <section
      className="ds-section ds-section-dark"
      aria-labelledby="case-contact"
    >
      <div className="ds-section-shell">
        <h2 id="case-contact" className="ds-card-title !mt-0 text-white">
          {copy.title}
        </h2>
        <p className="ds-copy max-w-[60ch]">
          Conte o que você precisa. A conversa começa pelo WhatsApp, sem
          formulário.
        </p>
        <div className="mt-sp-6 flex flex-wrap items-center gap-sp-3">
          <WhatsAppLink
            service={similarProjectSubject(caseStudy.title)}
            placement="case_detail"
            className={primaryButton}
          >
            {buttonLabels.whatsapp}
          </WhatsAppLink>
          <HoverPrefetchLink href="/cases" className={secondaryButtonDark}>
            Ver outros cases
          </HoverPrefetchLink>
        </div>
        <CaseRelatedServices caseId={caseStudy.id} />
      </div>
    </section>
  );
}