import { getShowcaseAssets } from "@/lib/project-showcase";
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";

/**
 * Trabalho real ao lado do título, só em telas de 1024 px ou mais: 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.
 * A coluna ocupa cerca de 40% da largura. Ela fica escondida (display: none) abaixo de 1024 px,
 * então as imagens (lazy) nem são baixadas no celular.
 */
export default function HeroWork({ url = null }: { url?: HeroWorkUrl }) {
  const desktop = getShowcaseAssets(DESKTOP_PROJECT, "desktop");
  const phone = getShowcaseAssets(MOBILE_PROJECT, "mobile");

  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%]">
        {/* biome-ignore lint/performance/noImgElement: pôster de 1440 px já otimizado em /public/videos; next/image pediria o otimizador para um arquivo menor que o necessário */}
        <img
          src={desktop.poster}
          alt="Site da SEV Moda Íntima aberto no computador"
          width={desktop.width}
          height={desktop.height}
          loading="lazy"
          decoding="async"
          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" }}
      >
        {/* biome-ignore lint/performance/noImgElement: mesmo motivo do pôster desktop */}
        <img
          src={phone.poster}
          alt="Site da AS Serviços aberto no celular"
          width={phone.width}
          height={phone.height}
          loading="lazy"
          decoding="async"
          fetchPriority="low"
          className="absolute inset-0 block h-full w-full object-cover object-top"
        />
      </PhoneFrame>
    </div>
  );
}