/* global React */

/* ============================================================
   Commodity ticker — scrolling LME-style tape
============================================================ */
const TICKER_DATA = [
  { sym: "AU",  name: "Gold",      px: "2,418.30",  pct: "+0.42%", dir: "up"   },
  { sym: "CU",  name: "Copper",    px: "9,861/t",   pct: "+1.10%", dir: "up"   },
  { sym: "LI",  name: "Lithium",   px: "13,800/t",  pct: "-0.85%", dir: "down" },
  { sym: "CO",  name: "Cobalt",    px: "32,400/t",  pct: "+0.18%", dir: "up"   },
  { sym: "PT",  name: "Platinum",  px: "1,019.40",  pct: "+0.74%", dir: "up"   },
  { sym: "PD",  name: "Palladium", px: "1,142.80",  pct: "-1.20%", dir: "down" },
  { sym: "NI",  name: "Nickel",    px: "18,210/t",  pct: "+0.31%", dir: "up"   },
  { sym: "ZN",  name: "Zinc",      px: "2,884/t",   pct: "-0.22%", dir: "down" },
  { sym: "FE",  name: "Iron Ore",  px: "112.40",    pct: "+0.65%", dir: "up"   },
  { sym: "SN",  name: "Tin",       px: "33,950/t",  pct: "+0.94%", dir: "up"   },
  { sym: "U₃O₈", name: "Uranium",  px: "78.20",     pct: "+1.84%", dir: "up"   },
  { sym: "RE",  name: "Rare Earths", px: "Index 78", pct: "+0.42%", dir: "up"  },
];

function Ticker() {
  const items = [...TICKER_DATA, ...TICKER_DATA];
  return (
    <div className="ticker" aria-label="Commodity prices">
      <div className="ticker-label">
        <span className="live-dot" />
        LME · LIVE
      </div>
      <div className="ticker-track">
        {items.map((it, i) => (
          <span className="ticker-item" key={i}>
            <span className="ticker-item-sym">{it.sym}</span>
            <span>{it.name}</span>
            <span>{it.px}</span>
            <span className={"ticker-item-pct " + it.dir}>{it.pct}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

window.Ticker = Ticker;