// iustitia.jsx — tratamiento central de Iustitia (símbolo o estatua)

// Emblema minimalista de la balanza, compuesto solo de primitivas simples.
function ScaleEmblem({ stroke, accent, style, strokeWidth = 2.4 }) {
  const s = stroke;
  return (
    <svg viewBox="0 0 200 280" style={style} fill="none"
         stroke={s} strokeWidth={strokeWidth}
         strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {/* finial diamante */}
      <path d="M100 10 L110 22 L100 34 L90 22 Z" fill={accent} stroke={accent} />
      {/* asta vertical */}
      <line x1="100" y1="34" x2="100" y2="228" />
      {/* viga */}
      <line x1="38" y1="74" x2="162" y2="74" />
      {/* puntos de suspensión */}
      <circle cx="38" cy="74" r="3.4" fill={s} />
      <circle cx="162" cy="74" r="3.4" fill={s} />
      <circle cx="100" cy="74" r="4" fill={accent} stroke={accent} />
      {/* cadenas izquierda */}
      <line x1="38" y1="74" x2="22" y2="120" />
      <line x1="38" y1="74" x2="54" y2="120" />
      {/* cadenas derecha */}
      <line x1="162" y1="74" x2="146" y2="120" />
      <line x1="162" y1="74" x2="178" y2="120" />
      {/* platillos (elipses finas) */}
      <ellipse cx="38" cy="122" rx="22" ry="7" />
      <ellipse cx="162" cy="122" rx="22" ry="7" />
      {/* base */}
      <line x1="72" y1="228" x2="128" y2="228" />
      <path d="M78 228 L70 250 L130 250 L122 228" />
      <line x1="62" y1="250" x2="138" y2="250" />
    </svg>
  );
}

// Iustitia: estatua real.
function StatueFrame({ vars, dark }) {
  return (
    <div className="statue">
      <img
        src="/iustitia.png"
        alt="Iustitia — diosa de la justicia"
        style={{ width: "100%", height: "100%", objectFit: "contain", display: "block", mixBlendMode: "lighten" }}
      />
    </div>
  );
}

// Pieza central del hero según el tratamiento elegido.
function IustitiaHero({ treatment, vars, dark }) {
  if (treatment === "symbol") {
    return (
      <div className="hero__emblem">
        <div className="hero__emblemRing" />
        <ScaleEmblem
          stroke={dark ? "var(--accent-soft)" : "var(--brand)"}
          accent={"var(--accent)"}
          strokeWidth={2.2}
          style={{ width: "min(360px, 80%)", height: "auto" }}
        />
        <div className="hero__emblemMotto mono">FIAT IUSTITIA</div>
      </div>
    );
  }
  return <StatueFrame vars={vars} dark={dark} />;
}

Object.assign(window, { ScaleEmblem, StatueFrame, IustitiaHero });