/* Marquee — continuous ticker of dev statuses, links, dates. */

function Marquee({ speed = 38 }) {
  // Marquee items. Dropped from the design-tool defaults:
  //   - "demo on itch · weekly"     (itch presence unverified)
  //   - "★ new build · 0.6.2"       (fabricated build version)
  //   - "made by one human + a cat" (cat fabricated)
  //   - "no ai art. no ai code."    (contradicts brand-identity-brief §4
  //                                  AI-tooling stance: surface honestly,
  //                                  don't headline either way)
  //   - "playtest fri 7pm nzst"     (fabricated time)
  //   - "small. weird. made by hand."  (dropped by Alex 2026-05-14)
  const items = [
    { t: "now shipping: remember to die", c: "mint" },
    { t: "kapiti coast, new zealand",     c: null },
    { t: "six small games on the shelf",  c: null },
    { t: "prolific over precious",        c: "pink" },
    { t: "wishlist on steam ↗",           c: "mint" },
    { t: "compiling something weird",     c: "pink" },
  ];

  const line = (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 48 }}>
      {items.map((it, i) => (
        <span key={i} style={{
          display: "inline-flex",
          alignItems: "center",
          gap: 12,
          fontFamily: "basis33, monospace",
          fontSize: 16,
          letterSpacing: "0.08em",
          textTransform: "uppercase",
          color: it.c === "mint" ? "var(--ss-mint)"
              : it.c === "pink" ? "var(--ss-pink)"
              : "var(--ss-bone)",
        }} className="pixel-text">
          <span style={{
            width: 6, height: 6,
            background: it.c === "mint" ? "var(--ss-mint)"
                       : it.c === "pink" ? "var(--ss-pink)"
                       : "var(--ss-bone)",
            display: "inline-block",
          }}/>
          {it.t}
        </span>
      ))}
    </span>
  );

  return (
    <div style={{
      borderTop: "1.5px solid var(--ss-mulberry)",
      borderBottom: "1.5px solid var(--ss-mulberry)",
      background: "var(--ss-mulberry)",
      overflow: "hidden",
      margin: "36px 0 36px",
      padding: "10px 0 8px",
      width: "100vw",
      marginLeft: "calc(50% - 50vw)",
      position: "relative",
      boxShadow: "0 2px 0 var(--ss-navy), 0 -2px 0 var(--ss-navy)",
    }}>
      <div className="marquee-track" style={{ animationDuration: `${speed}s` }}>
        {line}
        <span style={{ width: 48, display: "inline-block" }}/>
        {line}
      </div>
    </div>
  );
}

window.Marquee = Marquee;