import Link from "next/link";
import {
  primaryButton,
  secondaryButtonDark,
} from "@/app/components/button-styles";
import WhatsAppLink from "@/app/components/WhatsAppLink";
import type { CaseStudyContent } from "@/lib/site-content";
import { CaseRelatedServices } from "./CaseRelatedServices";

/** Textos do convite ao contato: o case de cliente fala de um projeto parecido; o de laboratório, de um problema parecido. */
const contactCopy = {
  client: {
    title: "Quer um projeto parecido com este?",
    action: "Conversar sobre um projeto parecido",
    subject: (title: string) => `um projeto parecido com o da ${title}`,
  },
  lab: {
    title: "Fale sobre o seu caso",
    action: "Tem um problema parecido? Vamos conversar.",
    subject: (title: string) =>
      `um problema parecido com o do projeto ${title}`,
  },
} 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 direto no WhatsApp, sem
          formulário.
        </p>
        <div className="mt-sp-6 flex flex-wrap items-center gap-sp-3">
          <WhatsAppLink
            service={copy.subject(caseStudy.title)}
            placement="case_detail"
            className={primaryButton}
          >
            {copy.action}
          </WhatsAppLink>
          <Link href="/cases" className={secondaryButtonDark}>
            Ver outros cases
          </Link>
        </div>
        <CaseRelatedServices caseId={caseStudy.id} />
      </div>
    </section>
  );
}