// Sistema de marca reutilizable — Riveros | Torres & Cía.
// ---------------------------------------------------------------------------
// Tipografía: Bricolage Grotesque (var(--font-ui)), ya cargada en el sitio.
// NO se añade ninguna fuente nueva: el logo vive dentro del sistema de tipos
// bloqueado por CLAUDE.md §3 (Inter/Roboto/system fonts prohibidas; un sans
// adicional sería un cambio de design-system §8). El contraste sans-logo /
// serif-hero lo da Bricolage frente a Fraunces, sin sumar dependencias.
//
// El nombre se escribe en mayúscula/minúscula real y se sube a mayúsculas
// con text-transform: los lectores de pantalla lo leen natural y el <a>
// contenedor ya aporta su aria-label.
//
// El descriptor "Estudio jurídico boutique" fue retirado del logo tras el
// feedback del cliente del 19-may-2026: el concepto sigue vivo en el copy
// del hero, evitando la redundancia logo + hero. El componente Descriptor
// se conserva por si vuelve a pedirse.
//
// Variantes:
//   icon    → "R | T"                                  (monograma mínimo)
//   compact → R|T   RIVEROS | TORRES & CÍA.             (header, horizontal)
//   full    → R|T                                       (footer, apilado)
//             RIVEROS | TORRES & CÍA.
function BrandLogo({ variant = "compact" }) {
  const FONT = "var(--font-ui)";

  // Línea vertical fina en burdeo — el único "separador". Es un elemento de
  // 1px, no un glifo "|", para que se mantenga nítido y proporcional a
  // cualquier tamaño. Decorativo → aria-hidden.
  const Pipe = ({ h, mx }) => (
    <span
      aria-hidden="true"
      style={{
        display: "inline-block",
        width: 1,
        height: h,
        background: "var(--accent)",
        margin: `0 ${mx}`,
        flex: "0 0 auto",
      }}
    />
  );

  const Monogram = ({ size, weight }) => (
    <span
      className="rt-brand-mono"
      style={{
        fontFamily: FONT,
        fontWeight: weight,
        fontSize: size,
        letterSpacing: "0.04em",
        color: "var(--ink)",
        lineHeight: 1,
        display: "inline-flex",
        alignItems: "center",
        textTransform: "uppercase",
        whiteSpace: "nowrap",
      }}
    >
      R<Pipe h="0.86em" mx="0.32em" />T
    </span>
  );

  const Wordmark = ({ size }) => (
    <span
      className="rt-brand-name"
      style={{
        fontFamily: FONT,
        fontWeight: 500,
        fontSize: size,
        letterSpacing: "0.16em",
        color: "var(--ink)",
        lineHeight: 1,
        display: "inline-flex",
        alignItems: "center",
        textTransform: "uppercase",
        whiteSpace: "nowrap",
      }}
    >
      Riveros<Pipe h="0.74em" mx="0.32em" />Torres&nbsp;&amp;&nbsp;Cía.
    </span>
  );

  const Descriptor = ({ size }) => (
    <span
      className="rt-brand-desc"
      style={{
        fontFamily: FONT,
        fontWeight: 400,
        fontSize: size,
        letterSpacing: "0.28em",
        color: "var(--ink-subtle)",
        textTransform: "uppercase",
        lineHeight: 1,
        whiteSpace: "nowrap",
      }}
    >
      Estudio jurídico boutique
    </span>
  );

  if (variant === "icon") {
    return <Monogram size="clamp(1.05rem, 1.6vw, 1.3rem)" weight={600} />;
  }

  if (variant === "full") {
    return (
      <span
        style={{
          display: "inline-flex",
          flexDirection: "column",
          alignItems: "flex-start",
          gap: "0.6em",
        }}
      >
        <Monogram size="clamp(1.4rem, 2vw, 1.7rem)" weight={600} />
        <Wordmark size="clamp(0.8rem, 1vw, 0.95rem)" />
      </span>
    );
  }

  // compact (default) — header horizontal
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: "clamp(0.6rem, 1vw, 0.95rem)",
      }}
    >
      <Monogram size="clamp(1rem, 1.5vw, 1.25rem)" weight={600} />
      <Wordmark size="clamp(0.72rem, 1.05vw, 0.875rem)" />
    </span>
  );
}

Object.assign(window, { BrandLogo });