// MobileHero.jsx — black hero card with H1, italic quote, bullets,
// magenta CTA, and prev/next pagination.

const MobileHero = ({ slides = defaultMobSlides }) => {
  const [i, setI] = React.useState(0);
  const slide = slides[i];
  const go = (d) => setI((p) => (p + d + slides.length) % slides.length);
  return (
    <section style={mhrStyles.wrap}>
      <div style={mhrStyles.card}>
        <h1 style={mhrStyles.h1}>{slide.title}</h1>
        <p style={mhrStyles.quote}>«{slide.quote}»</p>
        <ul style={mhrStyles.list}>
          {slide.bullets.map((b, k) => (
            <li key={k} style={mhrStyles.li}><span style={mhrStyles.dot} />{b}</li>
          ))}
        </ul>
        <a href="#" style={mhrStyles.cta}>
          <Icon name="play" size={20} /> СЛУШАТЬ
        </a>
        <div style={mhrStyles.nav}>
          <button onClick={() => go(-1)} style={mhrStyles.navBtn} aria-label="Previous"><Icon name="chevron-left" size={14} color="#FFFFFF" /></button>
          <button onClick={() => go(1)} style={mhrStyles.navBtn} aria-label="Next"><Icon name="chevron-right" size={14} color="#FFFFFF" /></button>
        </div>
      </div>
    </section>
  );
};

const defaultMobSlides = [
  { title: "Ализа Керен", quote: "Игра на скрипке для меня неразрывно связана с творчеством", bullets: ["Оригинальная музыка", "Ноты для скрипки", "    и не только"] },
  { title: "Концерты онлайн", quote: "Скрипка, играющая оперетту — каждую неделю в Иерусалиме", bullets: ["Живые выступления", "Записи концертов", "Дуэты и ансамбли"] },
];

const mhrStyles = {
  wrap: { padding: "16px" },
  card: { position: "relative", background: "#171717", borderRadius: 14, padding: "22px 22px 56px", color: "#FFFFFF", fontFamily: "'Nunito Sans', sans-serif", display: "flex", flexDirection: "column", gap: 12 },
  h1: { margin: 0, fontSize: 22, fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.04em", color: "#FFFFFF" },
  quote: { margin: 0, fontStyle: "italic", fontWeight: 700, fontSize: 12, lineHeight: 1.3, color: "rgba(255,255,255,0.9)" },
  list: { listStyle: "none", padding: 0, margin: "4px 0 0", display: "flex", flexDirection: "column", gap: 6, fontSize: 12, color: "#FFFFFF" },
  li: { display: "flex", alignItems: "center", gap: 10 },
  dot: { width: 6, height: 6, borderRadius: "50%", background: "#EE077D", flexShrink: 0 },
  cta: { color: "#EE077D", fontWeight: 700, fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 10, marginTop: 4 },
  nav: { position: "absolute", left: 22, bottom: 16, display: "flex", gap: 6 },
  navBtn: { width: 26, height: 26, borderRadius: "50%", border: "1px solid rgba(255,255,255,0.35)", background: "transparent", color: "#fff", cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center" },
};

window.MobileHero = MobileHero;