// Hero.jsx — black hero card with artist name, italic quote,
// bullet list, primary play CTA, and prev/next pagination.

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

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

const heroStyles = {
  wrap: { padding: "32px 60px 0", maxWidth: 1440, margin: "0 auto", boxSizing: "border-box" },
  card: {
    position: "relative",
    background: "#171717",
    borderRadius: 16,
    padding: "48px 56px 64px",
    color: "#FFFFFF",
    minHeight: 320,
    width: 720,
    boxSizing: "border-box",
    fontFamily: "'Nunito Sans', sans-serif",
  },
  body: { display: "flex", flexDirection: "column", gap: 18, maxWidth: 380 },
  h1: { margin: 0, fontSize: 40, fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.04em", color: "#FFFFFF" },
  quote: { margin: 0, fontStyle: "italic", fontWeight: 700, fontSize: 16, lineHeight: 1.3, color: "rgba(255,255,255,0.9)" },
  list: { listStyle: "none", padding: 0, margin: "6px 0 0", display: "flex", flexDirection: "column", gap: 8, fontSize: 16 },
  li: { display: "flex", alignItems: "center", gap: 12 },
  dot: { width: 8, height: 8, borderRadius: "50%", background: "#EE077D", flexShrink: 0 },
  cta: {
    color: "#EE077D", fontWeight: 700, fontSize: 14, letterSpacing: "0.06em",
    textTransform: "uppercase", textDecoration: "none",
    display: "inline-flex", alignItems: "center", gap: 14, marginTop: 14,
  },
  nav: { position: "absolute", left: 56, bottom: 20, display: "flex", gap: 8 },
  navBtn: {
    width: 34, height: 34, 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.Hero = Hero;