// logos.jsx — Three proposals in the spirit of Ruta I (Sillar).
// All routes share the same DNA: a single rounded block of stone, a single
// carved opening, a single legible silhouette. They differ in what is carved.
//
//   Ruta I·a   Sillar      — window cut into the upper-right
//   Ruta I·b   Elemento    — periodic-table cell. Te (Tellurium, from Latin
//                             tellus = earth) carved into the face.
//   Ruta I·c   Umbral      — arched doorway carved into the bottom edge.

const LOGO_ROUTES = [
  {
    id: "sillar",
    label: "Sillar",
    short: "Ruta I·a",
    blurb: "Un bloque de piedra labrada con una ventana abierta hacia afuera. La marca se vuelve materia: una sola pieza, un solo recorte.",
    reading: "Piedra · ventana · cobijo",
  },
  {
    id: "elemento",
    label: "Elemento",
    short: "Ruta I·b",
    blurb: "La marca como celda de tabla periódica. Te — telurio, del latín tellus, «tierra» — inscribe la promotora en el lenguaje de los materiales fundamentales. La esfera con horizonte declara la pertenencia a la tierra.",
    reading: "Materia · horizonte · nombre",
  },
  {
    id: "umbral",
    label: "Umbral",
    short: "Ruta I·c",
    blurb: "El mismo sillar, abierto por abajo. Un arco de piedra que enmarca la entrada: la marca como puerta, como invitación a pasar.",
    reading: "Arco · puerta · acceso",
  },
];

function LogoMark({ route = "sillar", size = 60, color = "var(--verde)", title }) {
  const props = {
    width: size,
    height: size,
    viewBox: "0 0 60 60",
    role: "img",
    "aria-label": title || ("Grupo Térreo · " + route),
    style: { display: "block" },
  };

  if (route === "elemento") {
    // Periodic-table cell: outlined square, "esfera" symbol top-left
    // (a half-filled planet with horizon line — terra/gravedad), symbol big
    // and serif in the centre, brand name set in mono at the foot.
    // Te = Tellurium. Latin tellus, "earth".
    return (
      <svg {...props}>
        <rect
          x="4" y="4" width="52" height="52" rx="3.5"
          fill="none" stroke={color} strokeWidth="2"
        />
        {/* construction symbol — esfera (planet + horizon, lower half filled) */}
        <g>
          <line x1="8" y1="14" x2="16" y2="14" stroke={color} strokeWidth="0.7" />
          <circle cx="12" cy="14" r="3.2" fill="none" stroke={color} strokeWidth="0.9" />
          <path d="M 8.8 14 A 3.2 3.2 0 0 0 15.2 14 Z" fill={color} />
        </g>
        {/* symbol */}
        <text
          x="30" y="40"
          fontFamily="'Newsreader', Georgia, serif"
          fontSize="28" fontWeight="500" fill={color}
          textAnchor="middle"
          style={{ letterSpacing: "-1px" }}
        >Te</text>
        {/* element name */}
        <text
          x="30" y="51"
          fontFamily="'JetBrains Mono', ui-monospace, monospace"
          fontSize="5" fontWeight="400" fill={color}
          textAnchor="middle"
          style={{ letterSpacing: "0.8px" }}
        >TÉRREO</text>
      </svg>
    );
  }

  if (route === "umbral") {
    // Rounded block with an arched doorway carved out of the bottom edge.
    // Single continuous outline — no fill-rule trickery.
    return (
      <svg {...props}>
        <path
          d="
            M 14 6 L 46 6 Q 54 6 54 14
            L 54 46 Q 54 54 46 54
            L 38 54 L 38 32
            Q 30 22 22 32
            L 22 54 L 14 54
            Q 6 54 6 46
            L 6 14 Q 6 6 14 6 Z
          "
          fill={color}
        />
      </svg>
    );
  }

  // default: sillar — rounded block with a window cut out of the upper-right.
  // The first Ruta I proposal, kept as the anchor of the family.
  return (
    <svg {...props}>
      <path
        fillRule="evenodd"
        d="
          M 14 6 L 46 6 Q 54 6 54 14 L 54 46 Q 54 54 46 54 L 14 54 Q 6 54 6 46 L 6 14 Q 6 6 14 6 Z
          M 32 16 L 46 16 L 46 30 L 32 30 Z
        "
        fill={color}
      />
    </svg>
  );
}

// Full lockup: mark + GRUPO TÉRREO wordmark
function LogoLockup({ route = "sillar", color = "var(--verde)", textColor = "var(--carbon)", scale = 1, layout = "horizontal" }) {
  const size = 76 * scale;
  if (layout === "stack") {
    return (
      <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 14 * scale }}>
        <LogoMark route={route} size={size} color={color} />
        <div style={{ textAlign: "center" }}>
          <div style={{ fontFamily: "var(--f-mono)", fontSize: 9 * scale, fontWeight: 300, letterSpacing: 5 * scale, color }}>GRUPO</div>
          <div style={{ fontFamily: "var(--f-main)", fontWeight: 700, fontSize: 20 * scale, letterSpacing: 4 * scale, color: textColor, marginTop: 2 * scale }}>TÉRREO</div>
        </div>
      </div>
    );
  }
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 16 * scale }}>
      <LogoMark route={route} size={size} color={color} />
      <div>
        <div style={{ fontFamily: "var(--f-mono)", fontSize: 9 * scale, fontWeight: 300, letterSpacing: 5 * scale, color }}>GRUPO</div>
        <div style={{ fontFamily: "var(--f-main)", fontWeight: 700, fontSize: 22 * scale, letterSpacing: 3 * scale, color: textColor, marginTop: 2 * scale, lineHeight: 1 }}>TÉRREO</div>
      </div>
    </div>
  );
}

Object.assign(window, { LogoMark, LogoLockup, LOGO_ROUTES });