// Capa do PDF — replica fielmente o "modelo-capa-preenchida.jpg"
// Proporção A4 retrato: 210x297mm. Base 720x1018 px (ratio 297/210 = 1.4143).
// Imagens reais:
//   assets/cover-top-right.png — composição com pílulas e foto, alinhado top-right margem 0
//   assets/logo-rr.png — logo "REVISÃO RÁPIDA"

function PDFCover({ revisao, scale = 1, showLogo = false, fullDate = true }) {
  const W = 720;
  const H = 1018;
  // proporção da imagem top-right (753x704). Reduzida levemente pra ter 32px da logo.
  // Logo: left 60, width 260 → termina em x=320. Imagem precisa começar em x=352.
  // Largura imagem = 720 - 352 = 368.
  const TOP_W = 368;
  const TOP_H = TOP_W * (704 / 753);

  return (
    <div
      className="pdf-cover"
      style={{
        position: "relative",
        width: W,
        height: H,
        background: "#fff",
        overflow: "hidden",
        transform: `scale(${scale})`,
        transformOrigin: "top left",
        fontFamily: '"Poppins", sans-serif',
        color: RR.text,
        flexShrink: 0,
      }}
    >
      {/* === Imagem composição top-right (margem 0) === */}
      <img
        src="assets/cover-top-right.png"
        alt=""
        style={{
          position: "absolute",
          top: 0,
          right: 0,
          width: TOP_W,
          height: TOP_H,
          display: "block",
          margin: 0,
        }}
      />

      {/* === Data === */}
      <div
        style={{
          position: "absolute",
          top: 64,
          left: 60,
          fontSize: 12,
          color: RR.primary,
          fontWeight: 500,
          letterSpacing: "0.01em",
          lineHeight: 1,
        }}
      >
        {fullDate ? revisao.data : revisao.ano}
      </div>

      {/* === Logo "REVISÃO RÁPIDA" === */}
      <img
        src="assets/logo-rr.png"
        alt="Revisão Rápida"
        style={{
          position: "absolute",
          top: 200,
          left: 60,
          width: 260,
          height: "auto",
          display: "block",
        }}
      />

      {/* === Título === */}
      <div
        style={{
          position: "absolute",
          top: 530,
          left: 60,
          right: 60,
          fontSize: 22,
          lineHeight: "32px",
          color: RR.primary,
          fontWeight: 700,
          textTransform: "uppercase",
          letterSpacing: "0.005em",
        }}
      >
        {revisao.titulo}
      </div>

      {/* === Ondinhas: 2px abaixo do título === */}
      <Waves color={RR.secondary} width={110} strokeWidth={1.5}
        style={{ position: "absolute", top: 530 + 4 * 32 + 2, left: 60 }} />

      {/* === Subtítulo (pergunta): 16px abaixo das ondinhas === */}
      <div
        style={{
          position: "absolute",
          top: 530 + 4 * 32 + 2 + 32 + 16,
          left: 60,
          right: 240,
          fontSize: 16,
          lineHeight: "24px",
          color: RR.text,
          fontWeight: 400,
        }}
      >
        {revisao.pergunta}
      </div>

      {/* === Decoração inferior direita (imagem) === */}
      <img
        src="assets/cover-bottom-right.png"
        alt=""
        style={{
          position: "absolute",
          bottom: 0,
          right: 0,
          width: 160,
          height: "auto",
          display: "block",
          margin: 0,
        }}
      />

      {/* === Decoração inferior esquerda (imagem) === */}
      <img
        src="assets/cover-bottom-left.png"
        alt=""
        style={{
          position: "absolute",
          bottom: 0,
          left: 0,
          width: 140,
          height: "auto",
          display: "block",
          margin: 0,
        }}
      />

      {/* === Logo Fiocruz (apenas última página - centralizada entre logo RR e ondinhas) === */}
      {showLogo && (
        <img
          src="assets/logo-fiocruz.png"
          alt="Fiocruz"
          style={{
            position: "absolute",
            top: 430,
            left: 60,
            width: 200,
            height: "auto",
            display: "block",
            zIndex: 5,
          }}
        />
      )}
    </div>
  );
}

Object.assign(window, { PDFCover });