import {
  compactHero,
  heroWithMediaGrid,
} from "@/app/cases/_components/hero-styles";
import { Breadcrumb } from "@/app/components/Breadcrumb";
import {
  pageTop,
  primaryButton,
  secondaryButtonDark,
} from "@/app/components/button-styles";
import WhatsAppLink from "@/app/components/WhatsAppLink";
import { buttonLabels, type ServicePageContent } from "@/lib/site-content";
import { ServiceDiagram } from "./ServiceDiagram";
import { ServiceHeroCover } from "./ServiceHeroCover";
import type { ServiceHeroData } from "./service-page";

/**
 * Topo da página do serviço: trilha, título, resposta, botão de contato e, na coluna ao lado, a capa do case escolhido
 * ou o esquema de fluxo. Sem nenhum dos dois, o topo é uma coluna só e mais baixo.
 */
export function ServiceHero({
  service,
  hero,
}: {
  service: ServicePageContent;
  hero: ServiceHeroData;
}) {
  const { heroCase, heroDevice, diagram, hasHeroSide, hasCaseCards } = hero;

  return (
    <section
      className={`ds-section ds-section-dark ${pageTop} ${
        hasHeroSide ? "" : compactHero
      }`}
    >
      <div
        className={`ds-section-shell ${hasHeroSide ? heroWithMediaGrid : ""}`}
      >
        <div className="max-w-[860px]">
          <Breadcrumb
            items={[
              { label: "Início", href: "/" },
              { label: "Serviços", href: "/servicos" },
              { label: service.navLabel, href: `/servicos/${service.slug}` },
            ]}
          />
          <p className="ds-eyebrow">{service.eyebrow}</p>
          <h1 className="ds-section-title max-w-[22ch] text-balance text-white">
            {service.headline}
          </h1>
          <p className="ds-copy max-w-[64ch] !text-[rgba(255,255,255,0.78)]">
            {service.answer}
          </p>
          <div className="mt-sp-8 flex flex-wrap gap-sp-3">
            <WhatsAppLink
              service={service.whatsappSubject}
              placement="service_detail_hero"
              className={primaryButton}
            >
              {buttonLabels.contact}
            </WhatsAppLink>
            {hasCaseCards ? (
              <a href="#casos-relacionados" className={secondaryButtonDark}>
                Ver projetos parecidos
              </a>
            ) : null}
          </div>
          <p className="mt-sp-4 text-[15px] leading-6 text-white/70">
            O botão abre uma conversa no WhatsApp, sem formulário. Garuva e
            Joinville (SC) · atendimento remoto em todo o Brasil.
          </p>
        </div>
        {diagram ? (
          <ServiceDiagram kind={diagram} />
        ) : (
          <ServiceHeroCover
            caseStudy={heroCase}
            device={heroDevice}
            relevance={
              heroCase ? service.caseRelevance[heroCase.id] : undefined
            }
          />
        )}
      </div>
    </section>
  );
}