// MobileNewsCarousel.jsx — cream sticky news card after hero.
// Shows one news entry at a time with pagination dots.

const MobileNewsCarousel = ({ items = defaultNews }) => {
  const [i, setI] = React.useState(0);
  return (
    <section style={mnStyles.card}>
      <h3 style={mnStyles.h3}>Новости</h3>
      <div style={mnStyles.body}>{items[i].body}</div>
      <div style={mnStyles.dots}>
        {items.map((_, k) => (
          <button key={k} onClick={() => setI(k)} aria-label={`Page ${k + 1}`} style={{ ...mnStyles.dot, ...(k === i ? mnStyles.dotOn : {}) }} />
        ))}
      </div>
    </section>
  );
};

const defaultNews = [
  { body: "5 мая 2022. Онлайн‑семинар «Здоровье рук музыкантов» — педагогам, студентам, оркестрантам." },
  { body: "10 мая 2022. Онлайн‑концерт «Скрипка, играющая оперетту». Слушать" },
  { body: "22 мая 2022. Онлайн‑семинар для родителей «Как научить ребёнка петь»." },
];

const mnStyles = {
  card: { margin: "0 16px", background: "#FEEECC", borderRadius: 12, padding: "20px 18px 14px", display: "flex", flexDirection: "column", gap: 12, fontFamily: "'Nunito Sans', sans-serif" },
  h3: { margin: 0, fontWeight: 700, fontSize: 16, color: "#171717", letterSpacing: "-0.04em" },
  body: { fontFamily: "'Lato', serif", fontSize: 13, color: "#171717", lineHeight: 1.55, minHeight: 60 },
  dots: { display: "flex", justifyContent: "center", gap: 6 },
  dot: { width: 6, height: 6, borderRadius: "50%", background: "rgba(23,23,23,0.25)", border: 0, padding: 0, cursor: "pointer" },
  dotOn: { background: "#EE077D" },
};

window.MobileNewsCarousel = MobileNewsCarousel;