import Image from "next/image";
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";
/** No celular a moldura mostra o site da SEV, o mesmo projeto do navegador ao lado do título no computador. */
const SMALL_SCREEN_PROJECT = "sev-modaintima";
/** Altura da moldura de celular abaixo dos botões (px); a largura sai da proporção 390x844 do aparelho. */
const SMALL_PHONE_HEIGHT = 180;

/**
 * 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, uma moldura de celular
 * pequena (180 px de altura) com o pôster mobile da SEV, abaixo dos botões.
 * 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: o título segue como o maior elemento da dobra (LCP)
 * e a imagem que fica escondida pelo breakpoint (display: none) nem é baixada.
 */
export default function HeroWork({ url = null }: { url?: HeroWorkUrl }) {
  const desktop = getShowcaseAssets(DESKTOP_PROJECT, "desktop");
  const phone = getShowcaseAssets(MOBILE_PROJECT, "mobile");
  const smallPhone = getShowcaseAssets(SMALL_SCREEN_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%]">
          {/* 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>

      <div
        data-testid="hero-work-mobile"
        className="hero-in pointer-events-none mt-sp-5 flex items-center gap-sp-4 [--d:.8s] lg:hidden"
      >
        <PhoneFrame style={{ height: SMALL_PHONE_HEIGHT }}>
          <Image
            src={smallPhone.poster}
            alt="Site da SEV Moda Íntima aberto no celular"
            width={smallPhone.width}
            height={smallPhone.height}
            sizes="84px"
            loading="lazy"
            fetchPriority="low"
            className="absolute inset-0 block h-full w-full object-cover object-top"
          />
        </PhoneFrame>
        <p className="max-w-[16em] font-display text-[15px] leading-6 text-[rgba(244,242,237,.72)]">
          Site da SEV Moda Íntima, como aparece no celular.
        </p>
      </div>
    </>
  );
}