/* global React */
// Reyes de la Calle wordmark — recreated from the brand mockup
const RDCLogo = ({ size = 1, light = true, className = "" }) => {
  const orange = "#FF6D0D";
  const white = light ? "#F8F9FA" : "#0D0D0D";
  return (
    <div
      className={"inline-flex flex-col items-center leading-none select-none " + className}
      style={{ fontFamily: "'Anton', sans-serif", transform: `scale(${size})`, transformOrigin: "center" }}
    >
      {/* Crown */}
      <svg viewBox="0 0 120 56" className="block" style={{ width: 72, height: 34, marginBottom: -2 }}>
        <path
          d="M6 50 L14 18 L28 36 L42 10 L60 40 L78 10 L92 36 L106 18 L114 50 Z"
          fill={orange}
          stroke={orange}
          strokeWidth="2"
          strokeLinejoin="round"
        />
        <circle cx="14" cy="14" r="5" fill={orange} />
        <circle cx="60" cy="6" r="5" fill={orange} />
        <circle cx="106" cy="14" r="5" fill={orange} />
        <rect x="6" y="46" width="108" height="6" fill={orange} />
      </svg>
      {/* Wordmark */}
      <div className="relative">
        <div
          className="italic"
          style={{
            fontSize: 44,
            color: orange,
            letterSpacing: "-0.02em",
            textShadow: `2px 2px 0 ${white}`,
            fontStyle: "italic",
            transform: "skewX(-6deg)",
          }}
        >
          REYES
        </div>
        <div className="flex items-baseline gap-1.5 -mt-1">
          <span style={{ fontSize: 13, color: white, letterSpacing: "0.05em" }}>DE LA</span>
          <span
            style={{
              fontSize: 38,
              color: white,
              letterSpacing: "0.02em",
              transform: "skewX(-6deg)",
            }}
            className="italic"
          >
            CALLE
          </span>
        </div>
        {/* Basketball lines behind */}
        <svg
          viewBox="0 0 120 60"
          className="absolute -right-6 top-1 opacity-90"
          style={{ width: 60, height: 60, pointerEvents: "none" }}
        >
          <circle cx="30" cy="30" r="26" fill="none" stroke={white} strokeWidth="2" />
          <path d="M4 30 L56 30 M30 4 L30 56 M10 12 Q30 30 50 12 M10 48 Q30 30 50 48" fill="none" stroke={white} strokeWidth="2" />
        </svg>
      </div>
    </div>
  );
};

// White monochrome version of the official Reyes de la Calle logo
// Used in nav header + footer for contrast on dark backgrounds
const RDCLogoMono = ({ height = 56, className = "" }) => {
  const W = "#FFFFFF";
  return (
    <svg
      viewBox="0 0 360 200"
      style={{ height, width: "auto", display: "block" }}
      className={"select-none " + className}
      aria-label="Reyes de la Calle"
    >
      {/* Hand-drawn crown */}
      <g stroke={W} strokeWidth="3" strokeLinejoin="round" strokeLinecap="round" fill="none">
        <path d="M120 60 L130 22 L155 48 L180 12 L205 48 L230 22 L240 60 Z" fill={W} />
        <circle cx="130" cy="18" r="5" fill={W} />
        <circle cx="180" cy="8" r="5" fill={W} />
        <circle cx="230" cy="18" r="5" fill={W} />
        <line x1="118" y1="60" x2="242" y2="60" strokeWidth="5" />
      </g>

      {/* REYES — italic bold display */}
      <text
        x="180"
        y="125"
        textAnchor="middle"
        fill={W}
        style={{
          fontFamily: "'Anton', sans-serif",
          fontSize: 58,
          fontStyle: "italic",
          letterSpacing: "1px",
        }}
      >
        REYES
      </text>

      {/* DE LA CALLE — stacked compact */}
      <text
        x="180"
        y="158"
        textAnchor="middle"
        fill={W}
        style={{
          fontFamily: "'Anton', sans-serif",
          fontSize: 18,
          letterSpacing: "3px",
        }}
      >
        DE LA
      </text>
      <text
        x="180"
        y="188"
        textAnchor="middle"
        fill={W}
        style={{
          fontFamily: "'Anton', sans-serif",
          fontSize: 32,
          fontStyle: "italic",
          letterSpacing: "2px",
        }}
      >
        CALLE
      </text>

      {/* Basketball outline on the right, sketchy */}
      <g stroke={W} strokeWidth="3" fill="none" strokeLinecap="round">
        <circle cx="300" cy="145" r="42" />
        <path d="M258 145 Q300 130 342 145" />
        <path d="M258 145 Q300 160 342 145" />
        <path d="M300 103 Q285 145 300 187" />
        <path d="M300 103 Q315 145 300 187" />
      </g>
    </svg>
  );
};

// Just the crown icon, used in small spots
const CrownMark = ({ size = 28, color = "#FF6D0D" }) => (
  <svg viewBox="0 0 120 56" style={{ width: size, height: size * (56 / 120) }}>
    <path
      d="M6 50 L14 18 L28 36 L42 10 L60 40 L78 10 L92 36 L106 18 L114 50 Z"
      fill={color}
    />
    <circle cx="14" cy="14" r="5" fill={color} />
    <circle cx="60" cy="6" r="5" fill={color} />
    <circle cx="106" cy="14" r="5" fill={color} />
    <rect x="6" y="46" width="108" height="6" fill={color} />
  </svg>
);

Object.assign(window, { RDCLogo, RDCLogoMono, CrownMark });