/* logo-ticker.jsx — monochrome, icon-only ecosystem marquee.
   AVNU + Ekubo use the brands' real vector paths; Xverse/Vesu/Ready are clean
   white recreations of their symbol marks (no wordmarks). currentColor = ticker color. */

const MARK = {
  // Real AVNU "a" mark (favicon path), cropped + recolored white.
  avnu: (
    <svg viewBox="224 229 262 257" height="22" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path fillRule="evenodd" clipRule="evenodd" d="M234.932 357.867C234.932 336.339 240.174 316.59 250.656 298.619C261.139 280.649 275.553 266.422 293.898 255.939C312.431 245.269 333.022 239.934 355.673 239.934C369.712 239.934 380.195 239.934 387.121 239.934C394.048 239.934 404.343 239.934 418.009 239.934H476.413V475.799H418.009C403.969 475.799 393.486 475.799 386.56 475.799C379.634 475.799 369.338 475.799 355.673 475.799C333.022 475.799 312.431 470.558 293.898 460.075C275.553 449.405 261.139 435.084 250.656 417.114C240.174 399.143 234.932 379.394 234.932 357.867ZM297.268 357.867C297.268 369.66 299.889 380.33 305.13 389.877C310.559 399.424 318.234 406.912 328.155 412.34C338.076 417.769 349.495 420.483 362.412 420.483C371.959 420.483 379.072 420.483 383.752 420.483C388.432 420.483 393.112 420.483 397.792 420.483C402.471 420.483 409.585 420.483 419.132 420.483V295.25C409.585 295.25 402.471 295.25 397.792 295.25C393.112 295.25 388.432 295.25 383.752 295.25C379.072 295.25 371.959 295.25 362.412 295.25C349.495 295.25 338.076 297.964 328.155 303.393C318.234 308.822 310.559 316.309 305.13 325.856C299.889 335.403 297.268 346.073 297.268 357.867Z" />
    </svg>
  ),
  // Real Ekubo mark (rounded frame + two circles), bg circle removed, recolored white.
  ekubo: (
    <svg viewBox="30 43 74 48" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path fillRule="evenodd" clipRule="evenodd" d="M30 54.0769C30 47.9593 34.9696 43 41.1 43H92.9C99.0304 43 104 47.9593 104 54.0769V79.9231C104 86.0407 99.0304 91 92.9 91H41.1C34.9696 91 30 86.0407 30 79.9231V54.0769ZM67 67C67 75.1568 60.3738 81.7692 52.2 81.7692C44.0262 81.7692 37.4 75.1568 37.4 67C37.4 58.8432 44.0262 52.2308 52.2 52.2308C60.3738 52.2308 67 58.8432 67 67ZM67 67C67 58.8432 73.6262 52.2308 81.8 52.2308C89.9738 52.2308 96.6 58.8432 96.6 67C96.6 75.1568 89.9738 81.7692 81.8 81.7692C73.6262 81.7692 67 75.1568 67 67Z" />
    </svg>
  ),
  // Xverse — bold geometric X.
  xverse: (
    <svg viewBox="0 0 100 100" height="22" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M18 14H38L50 36L62 14H82L60 50L82 86H62L50 64L38 86H18L40 50L18 14Z" />
    </svg>
  ),
  // Vesu — chevron V.
  vesu: (
    <svg viewBox="0 0 100 100" height="22" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M14 16H35L50 62L65 16H86L61 86H39L14 16Z" />
    </svg>
  ),
  // Ready — rounded upward peak.
  ready: (
    <svg viewBox="0 0 100 100" height="22" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M50 16C54.4 16 58.4 18.4 60.6 22.5L85.8 75.2C88 79.8 84.6 85 79.5 85H65.4C62.2 85 59.3 83.1 58 80.2L50 62.5L42 80.2C40.7 83.1 37.8 85 34.6 85H20.5C15.4 85 12 79.8 14.2 75.2L39.4 22.5C41.6 18.4 45.6 16 50 16Z" />
    </svg>
  ),
};

const ECOSYSTEM = [
  { name: "Ready", mark: MARK.ready },
  { name: "Xverse", mark: MARK.xverse },
  { name: "AVNU", mark: MARK.avnu },
  { name: "Ekubo", mark: MARK.ekubo },
  { name: "Vesu", mark: MARK.vesu },
];

function LogoTicker({ label = "Works across the Starknet ecosystem", compact = false }) {
  const loop = [...ECOSYSTEM, ...ECOSYSTEM, ...ECOSYSTEM, ...ECOSYSTEM];
  const wrap = compact
    ? { position: "relative", padding: 0, background: "transparent", overflow: "hidden" }
    : { position: "relative", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)",
        padding: "clamp(22px,3.4vh,38px) 0", background: "var(--bg)", overflow: "hidden" };
  return (
    <section className={"lt-sec" + (compact ? " lt-compact" : "")} aria-label="Ecosystem partners" style={wrap}>
      <div style={{ textAlign: "center", fontFamily: "var(--mono)", fontSize: compact ? 9.5 : 11, letterSpacing: "0.2em",
        textTransform: "uppercase", color: "var(--faint)", marginBottom: compact ? 11 : "clamp(16px,2vh,24px)" }}>{label}</div>
      <div className="lt-mask">
        <div className="lt-track">
          {loop.map((e, i) => (
            <div className="lt-item" key={i} aria-hidden={i >= ECOSYSTEM.length ? "true" : undefined}>
              <span className="lt-name">{e.name}</span>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .lt-mask{position:relative;width:100%;overflow:hidden;
          -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
        .lt-track{display:flex;align-items:center;gap:clamp(48px,6vw,96px);width:max-content;
          animation:lt-scroll 34s linear infinite;will-change:transform;}
        .lt-sec:hover .lt-track{animation-play-state:paused;}
        @keyframes lt-scroll{to{transform:translateX(-50%);}}
        .lt-item{display:flex;align-items:center;gap:13px;color:rgba(250,250,250,0.5);
          transition:color .22s ease;flex:0 0 auto;}
        .lt-item:hover{color:#fafafa;}
        .lt-mark{display:inline-flex;align-items:center;}
        .lt-name{font-family:var(--display);font-weight:800;text-transform:uppercase;
          letter-spacing:0.01em;font-size:clamp(17px,1.5vw,23px);line-height:1;white-space:nowrap;}
        .lt-compact .lt-track{gap:clamp(34px,4.5vw,60px);animation-duration:30s;}
        .lt-compact .lt-item{color:rgba(250,250,250,0.42);gap:10px;}
        .lt-compact .lt-name{font-size:clamp(13px,1.1vw,16px);}
        .lt-compact .lt-mark svg{height:15px;}
        @media(prefers-reduced-motion:reduce){.lt-track{animation:none;}}
      `}</style>
    </section>
  );
}

window.LogoTicker = LogoTicker;