function Marquee() {
  const items = [
    "ΔΩΡΕΆΝ ΕΚΠΑΙΔΕΥΤΙΚΈΣ ΣΗΜΕΙΏΣΕΙΣ",
    "★",
    "ΓΥΜΝΆΣΙΟ · ΛΎΚΕΙΟ · ΠΑΝΕΛΛΉΝΙΕΣ",
    "★",
    "ΕΠΙΜΈΛΕΙΑ ΔΈΣΠΟΙΝΑ ΜΑΝΈΤΤΑ",
    "★",
    "MSc ΣΧΟΛΙΚΉ ΨΥΧΟΛΟΓΊΑ",
    "★",
    "ΈΚΔΟΣΗ MMXXVI",
  ];
  const row = [...items, ...items, ...items];
  return (
    <div className="sfy-marquee" style={{
      background: "var(--ember)", color: "#fff",
      overflow: "hidden", padding: "11px 0",
      borderBottom: "1px solid var(--ink)",
      fontFamily: "var(--mono)", fontSize: 11.5, letterSpacing: "0.18em",
    }}>
      <div style={{
        display: "inline-flex", whiteSpace: "nowrap",
        animation: "sfy-marquee 70s linear infinite",
      }}>
        {row.map((t, i) => (
          <span key={i} style={{padding: "0 18px", opacity: t==="★" ? 0.85 : 1}}>{t}</span>
        ))}
      </div>
      <style>{`
        @keyframes sfy-marquee { from { transform: translateX(0);} to { transform: translateX(-33.3333%);} }
        @media (max-width: 640px) {
          .sfy-marquee { font-size: 10.5px !important; padding: 9px 0 !important; letter-spacing: 0.15em !important; }
        }
      `}</style>
    </div>
  );
}
window.Marquee = Marquee;