// Kotleto · marquee strip between sections

function Marquee({ accent = "#D9461E", dark = true }) {
  const { lang } = useLang();
  const items = COPY.ticker;
  // duplicate for seamless loop
  const list = [...items, ...items, ...items];

  return (
    <div style={{
      background: dark ? "var(--ink)" : accent,
      color: dark ? "var(--paper)" : "#fff",
      overflow: "hidden", borderTop: "1px solid rgba(0,0,0,0.2)", borderBottom: "1px solid rgba(0,0,0,0.2)",
      padding: "18px 0",
      position: "relative",
    }}>
      <div className="marquee-track" style={{
        display: "flex", gap: 60, whiteSpace: "nowrap",
        width: "max-content",
        animation: "marquee 40s linear infinite",
      }}>
        {list.map((it, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 30, fontFamily: "var(--display)", fontSize: 28, letterSpacing: 0 }}>
            {pick(it, lang)}
            <span style={{ color: accent, fontSize: 18, transform: "translateY(-2px)" }}>★</span>
          </span>
        ))}
      </div>
    </div>
  );
}

window.Marquee = Marquee;