portifolio-evandrodevbr/app/components/HeroWork.tsx

import Image from "next/image";
import { getShowcaseAssets } from "@/lib/project-showcase";
import HoverPrefetchLink from "./HoverPrefetchLink";
import { BrowserFrame } from "./showcase/BrowserFrame";
import { PhoneFrame } from "./showcase/PhoneFrame";

/** Endereço mostrado na barra do navegador (mesmo formato de displayUrl em showcase/BrowserFrame). */
export type HeroWorkUrl = { text: string; secure: boolean } | null;

const DESKTOP_PROJECT = "sev-modaintima";
const MOBILE_PROJECT = "as-servicos";
/** No celular o cartão mostra o site da SEV, o mesmo projeto do navegador ao lado do título no computador, e leva ao case. */
const SMALL_SCREEN_PROJECT = "sev-modaintima";
const SMALL_SCREEN_TITLE = "SEV Moda Íntima";
const SMALL_SCREEN_HREF = `/cases/${SMALL_SCREEN_PROJECT}`;
/**
 * Altura da imagem do cartão de celular (px): a largura é a da coluna (cerca de 350 px num celular de 390 px). Com 72 px
 * a área da imagem (cerca de 25 mil px²) fica abaixo da do H1 (cerca de 29 mil px² a 390 px): com 96 px ela era maior, e
 * numa rede lenta a imagem, que chega depois, passava a ser o LCP no lugar do título (medido com rede e CPU limitadas).
 */
const SMALL_CARD_IMAGE_HEIGHT = 72;

/**
 * Trabalho real do hero, em dois formatos. Em telas de 1024 px ou mais, ao lado do título: o pôster do site da SEV
 * Moda Íntima no navegador (com o domínio próprio, sevmodaintima.com.br, na barra de endereço) e o do aplicativo
 * da AS Serviços no celular, numa coluna de cerca de 40% da largura. Abaixo de 1024 px, um cartão largo e clicável
 * (a largura da coluna, cerca de 350 px num celular) com o pôster do site da SEV, abaixo dos botões, que leva ao
 * case da SEV; antes era uma moldura de celular de 65 por 160 px, pequena demais para ver o que era.
 * Os pôsteres vão pelo next/image com `sizes` do tamanho em que aparecem (um arquivo de 1440 px para 491 px de tela
 * era banda desperdiçada), em `loading="lazy"` e prioridade baixa: no celular o título segue como o maior elemento da
 * dobra (LCP; ver SMALL_CARD_IMAGE_HEIGHT), e a imagem que fica escondida pelo breakpoint (display: none) nem é
 * baixada. Em tela larga o pôster do navegador é maior que o título e, numa rede lenta, vira o LCP quando chega.
 */
export default function HeroWork({ url = null }: { url?: HeroWorkUrl }) {
  const desktop = getShowcaseAssets(DESKTOP_PROJECT, "desktop");
  const phone = getShowcaseAssets(MOBILE_PROJECT, "mobile");
  const smallCard = getShowcaseAssets(SMALL_SCREEN_PROJECT, "desktop");

  return (
    <>
      <div
        data-testid="hero-work"
        className="hero-in pointer-events-none absolute top-1/2 right-sp-12 hidden w-[40%] -translate-y-[46%] [--d:.8s] lg:block"
      >
        <BrowserFrame url={url} className="w-[88%]">
          {/* a moldura mostra ~491 px em 1440 px de tela: 36vw até 1400 px, e fixo dali em diante */}
          <Image
            src={desktop.poster}
            alt="Site da SEV Moda Íntima aberto no computador"
            width={desktop.width}
            height={desktop.height}
            sizes="(min-width: 1400px) 500px, 36vw"
            loading="lazy"
            fetchPriority="low"
            className="block h-auto w-full"
          />
        </BrowserFrame>
        {/* position inline: .ds-phone (showcase.css, sem camada) define position: relative e vence a utilidade "absolute" */}
        <PhoneFrame
          className="right-0 bottom-[-12%] w-[26%]"
          style={{ position: "absolute" }}
        >
          <Image
            src={phone.poster}
            alt="Site da AS Serviços aberto no celular"
            width={phone.width}
            height={phone.height}
            sizes="(min-width: 1400px) 136px, 10vw"
            loading="lazy"
            fetchPriority="low"
            className="absolute inset-0 block h-full w-full object-cover object-top"
          />
        </PhoneFrame>
      </div>

      <HoverPrefetchLink
        data-testid="hero-work-mobile"
        href={SMALL_SCREEN_HREF}
        className="hero-in group mt-sp-5 flex w-full flex-col overflow-hidden border border-white/20 bg-white/[0.05] font-display no-underline transition-colors hover:border-white/45 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--slash)] motion-reduce:transition-none [--d:.8s] lg:hidden"
      >
        <span
          className="relative block w-full overflow-hidden bg-[var(--ink)]"
          style={{ height: SMALL_CARD_IMAGE_HEIGHT }}
        >
          <Image
            src={smallCard.poster}
            alt=""
            width={smallCard.width}
            height={smallCard.height}
            sizes="(min-width: 1024px) 1px, 100vw"
            loading="lazy"
            fetchPriority="low"
            className="absolute inset-0 block h-full w-full object-cover object-top"
          />
        </span>
        <span className="flex min-h-12 items-center justify-between gap-sp-4 px-sp-4 py-sp-2 text-[15px] leading-6 text-[#f4f2ed]">
          <span className="flex flex-col">
            <span className="font-semibold">Site da {SMALL_SCREEN_TITLE}</span>{" "}
            <span className="text-[rgba(244,242,237,.72)]">Ver case</span>
          </span>
          <svg
            aria-hidden="true"
            viewBox="0 0 16 16"
            className="h-4 w-4 shrink-0 transition-transform group-hover:translate-x-1 motion-reduce:transition-none"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
          >
            <path d="M2 8h11M9 3.5 13.5 8 9 12.5" />
          </svg>
        </span>
      </HoverPrefetchLink>
    </>
  );
}