import { Breadcrumb } from "@/app/components/Breadcrumb";
import { pageTop } from "@/app/components/button-styles";
import type { CaseStudyContent } from "@/lib/site-content";
import { CaseCover, coverSizes } from "./CaseCover";
import { getCaseMedia } from "./case-media";
import { compactHero } from "./hero-styles";

/** Fatos verificáveis do projeto. Sem nenhum, a lista não aparece. */
function CaseFacts({ facts }: { facts?: string[] }) {
  if (!facts?.length) return null;

  return (
    <ul
      className="mt-sp-5 flex flex-wrap gap-x-sp-6 gap-y-sp-2 text-[15px] leading-6 text-white/80"
      aria-label="Fatos do projeto"
    >
      {facts.map((fact) => (
        <li key={fact}>{fact}</li>
      ))}
    </ul>
  );
}

/** Pôster do site na coluna da direita (no celular, logo abaixo do título). */
function CaseHeroCover({ caseStudy }: { caseStudy: CaseStudyContent }) {
  return (
    <div className="min-w-0 lg:col-start-2 lg:row-span-2 lg:row-start-1">
      <CaseCover
        id={caseStudy.id}
        title={caseStudy.title}
        demoUrl={caseStudy.demoUrl}
        sizes={coverSizes.hero}
        priority
      />
    </div>
  );
}

/**
 * Topo do case: trilha, título, resumo e fatos. Com captura gravada, o texto fica à esquerda e o pôster à direita;
 * no celular a mídia vem logo abaixo do título. Sem captura, o topo é uma coluna só e mais baixo.
 */
export function CaseHero({
  caseStudy,
  isClient,
}: {
  caseStudy: CaseStudyContent;
  isClient: boolean;
}) {
  const hasMedia = Boolean(getCaseMedia(caseStudy.id, "desktop"));

  return (
    <section
      className={`ds-section ds-section-dark ${pageTop} ${
        hasMedia ? "" : compactHero
      }`}
    >
      <div
        className={`ds-section-shell ${
          hasMedia
            ? "grid items-center gap-y-sp-6 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,1fr)] lg:gap-x-sp-16 lg:gap-y-0"
            : ""
        }`}
      >
        <div className="max-w-[860px] lg:col-start-1 lg:row-start-1 lg:self-end">
          <Breadcrumb
            items={[
              { label: "Início", href: "/" },
              { label: "Cases", href: "/cases" },
              { label: caseStudy.title, href: `/cases/${caseStudy.id}` },
            ]}
          />
          {/* o tipo do projeto, sem o nome: a trilha logo acima já o diz */}
          <p className="ds-eyebrow">
            {isClient ? "Case de cliente" : "Projeto de laboratório"}
          </p>
          <h1 className="ds-section-title text-balance text-white">
            {caseStudy.headline}
          </h1>
        </div>
        {hasMedia ? <CaseHeroCover caseStudy={caseStudy} /> : null}
        <div className="max-w-[68ch] lg:col-start-1 lg:row-start-2 lg:self-start">
          <p className="ds-copy !text-[rgba(255,255,255,.78)]">
            {caseStudy.summary}
          </p>
          <CaseFacts facts={caseStudy.facts} />
        </div>
      </div>
    </section>
  );
}