/* W2R4 wordmark — bold W with superscript 2 and radical-over-4. */

const W2R4Logo = ({ size = 28, color = "currentColor", style = {}, title = "Who2Root4" }) => (
  <svg
    viewBox="0 0 74 36"
    role="img"
    aria-label={title}
    style={{ height: size, width: "auto", display: "block", overflow: "visible", flexShrink: 0, ...style }}
  >
    {/* W — drawn as a heavy stroked path so weight stays consistent across browsers/fonts */}
    <path
      d="M2 4 L9.5 32 L17.5 14 L23 14 L31 32 L38.5 4"
      fill="none"
      stroke={color}
      strokeWidth="5.6"
      strokeLinejoin="miter"
      strokeMiterlimit="3"
      strokeLinecap="butt"
    />
    {/* superscript 2 */}
    <text
      x="36"
      y="13"
      fontFamily='"Barlow Condensed", "Barlow", sans-serif'
      fontWeight="900"
      fontSize="15"
      fill={color}
      style={{ letterSpacing: 0 }}
    >2</text>
    {/* radical: short ascending hook then horizontal vinculum */}
    <path
      d="M44 17 L47.5 17 L50.5 7.5 L73 7.5"
      fill="none"
      stroke={color}
      strokeWidth="3.2"
      strokeLinejoin="miter"
      strokeMiterlimit="3"
      strokeLinecap="butt"
    />
    {/* 4 under the radical */}
    <text
      x="51"
      y="33"
      fontFamily='"Barlow Condensed", "Barlow", sans-serif'
      fontWeight="900"
      fontSize="30"
      fill={color}
      style={{ letterSpacing: 0 }}
    >4</text>
  </svg>
);

window.W2R4Logo = W2R4Logo;

/* ─── Sport icons + switcher ───────────────────────────────────────────────
 * Scaffolding for multi-sport support. This build ships baseball only (see
 * SPORTS below); the header switcher and onboarding sport row are driven off
 * the SPORTS list, so the football entry is simply absent here.
 */
// Baseball — exact artwork from Baseball.svg (Serif/Affinity export), on the
// source's 0 0 3508 4961 canvas cropped to a 660-unit viewBox window.
// Orange fill swapped to currentColor so the switcher can tint it gray/accent.
const BaseballIcon = ({ size = 24 }) => (
  <svg width={size} height={size} viewBox="1554.24 2621.64 660 660" fill="none"
       stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"
       strokeMiterlimit="1.5" aria-hidden="true">
    <g transform="matrix(1.036889,0,0,1.036889,208.902229,-320.637922)">
      <circle cx="1615.732" cy="3155.857" r="196.457" strokeWidth="40.18" />
    </g>
    <path d="M1918.013,2750.753C1918.013,2750.753 1994.854,2906.627 1680.534,2979.298" strokeWidth="27.08" />
    <path d="M2087.941,2928.544C2087.941,2928.544 1940.66,2863.955 1899.134,3155.34" strokeWidth="27.08" />
    <g transform="matrix(0.760851,0.203432,-0.547245,0.711485,1908.715653,524.031106)"><path d="M1884.237,2818.924L1948.684,2865.025" strokeWidth="21.95" /></g>
    <g transform="matrix(0.686183,-0.386563,0.10625,0.891291,299.826877,1274.486269)"><path d="M1884.237,2818.924L1948.684,2865.025" strokeWidth="21.95" /></g>
    <g transform="matrix(0.762077,-0.198788,-0.124564,0.888916,810.345417,693.341043)"><path d="M1884.237,2818.924L1948.684,2865.025" strokeWidth="21.95" /></g>
    <g transform="matrix(0.783219,-0.082738,-0.255931,0.860341,1119.154062,591.230172)"><path d="M1884.237,2818.924L1948.684,2865.025" strokeWidth="21.95" /></g>
    <g transform="matrix(0.785915,0.051144,-0.397983,0.804548,1478.960989,523.621931)"><path d="M1884.237,2818.924L1948.684,2865.025" strokeWidth="21.95" /></g>
    <g transform="matrix(0.703053,0.354958,-0.681371,0.584313,2355.620781,613.525321)"><path d="M1884.237,2818.924L1948.684,2865.025" strokeWidth="21.95" /></g>
    <g transform="matrix(0.774706,0.141806,-0.488469,0.753051,1910.765128,521.72272)"><path d="M1884.237,2818.924L1948.684,2865.025" strokeWidth="21.95" /></g>
    <g transform="matrix(0.770525,-0.163003,-0.165916,0.882134,948.543731,792.774067)"><path d="M1884.237,2818.924L1948.684,2865.025" strokeWidth="21.95" /></g>
    <g transform="matrix(0.786768,-0.035693,-0.306986,0.843474,1342.79975,626.84193)"><path d="M1884.237,2818.924L1948.684,2865.025" strokeWidth="21.95" /></g>
    <g transform="matrix(0.745017,-0.255399,-0.057526,0.895756,667.642725,968.556401)"><path d="M1884.237,2818.924L1948.684,2865.025" strokeWidth="21.95" /></g>
    <g transform="matrix(0.695752,-0.369063,0.083646,0.893695,355.197625,962.640112)"><path d="M1884.237,2818.924L1948.684,2865.025" strokeWidth="21.95" /></g>
    <g transform="matrix(0.68633,0.386302,-0.707028,0.552992,2416.832429,657.073298)"><path d="M1884.237,2818.924L1948.684,2865.025" strokeWidth="21.95" /></g>
    <g transform="matrix(0.589412,-0.522371,0.291526,0.848941,-51.204494,1693.548115)"><path d="M1884.237,2818.924L1948.684,2865.025" strokeWidth="21.95" /></g>
    <g transform="matrix(0.683294,0.391646,-0.711322,0.547457,2757.863959,616.017254)"><path d="M1884.237,2818.924L1948.684,2865.025" strokeWidth="21.95" /></g>
  </svg>
);

const SPORTS = [
  { id: "mlb", label: "MLB", name: "Baseball", sportPath: "baseball", Icon: BaseballIcon },
];

// Icon-only switcher; variant "header" (compact) | "onb" (larger tap target).
// With a single sport there's nothing to switch between, so render nothing —
// keeps the header free of a lone, no-op sport toggle.
const SportSwitcher = ({ active = "mlb", onChange, variant = "header" }) => (
  SPORTS.length <= 1 ? null :
  <div className={"sport-switch sport-switch-" + variant} role="tablist" aria-label="Sport">
    {SPORTS.map((s) => {
      const isActive = active === s.id;
      return (
        <button
          key={s.id}
          type="button"
          role="tab"
          aria-selected={isActive}
          className={"sport-btn" + (isActive ? " active" : "")}
          title={s.name}
          aria-label={s.name}
          onClick={() => onChange && onChange(s.id)}
        >
          <s.Icon size={variant === "onb" ? 34 : 24} />
        </button>
      );
    })}
  </div>
);

window.SPORTS = SPORTS;
window.SportSwitcher = SportSwitcher;