// Reviews.jsx — three reviews in a row with prev/next arrows.

const Reviews = ({ items = defaultReviews }) => {
  const [page, setPage] = React.useState(0);
  const perPage = 3;
  const pages = Math.ceil(items.length / perPage);
  const start = page * perPage;
  const visible = items.slice(start, start + perPage);
  return (
    <div style={rvStyles.wrap}>
      <button onClick={() => setPage((p) => (p - 1 + pages) % pages)} style={rvStyles.nav} aria-label="Previous">
        <Icon name="chevron-left" size={18} color="#EE077D" />
      </button>
      <div style={rvStyles.row}>
        {visible.map((r, i) => (
          <article key={i} style={rvStyles.card}>
            <p style={rvStyles.body}>{r.body}</p>
            <div style={rvStyles.name}>{r.name}</div>
          </article>
        ))}
      </div>
      <button onClick={() => setPage((p) => (p + 1) % pages)} style={rvStyles.nav} aria-label="Next">
        <Icon name="chevron-right" size={18} color="#EE077D" />
      </button>
    </div>
  );
};

const defaultReviews = [
  { name: "Miriam Koen", body: "Ализа — большой музыкант. Её игра — это её жизнь, её душа, её любовь к скрипке. Слушаю её с удовольствием уже много лет." },
  { name: "Талья Леви", body: "Концерты Ализы — это всегда праздник для души. Она умеет создать атмосферу, в которой музыка становится живой." },
  { name: "Адина Перец", body: "Уроки по методике До‑Ре‑Ми изменили подход к обучению моего ребёнка. Спасибо, Ализа, за вашу преданность делу." },
  { name: "Анна Шапиро", body: "Прекрасная скрипачка. Её композиции звучат как откровение." },
];

const rvStyles = {
  wrap: { display: "grid", gridTemplateColumns: "40px 1fr 40px", alignItems: "center", gap: 14 },
  nav: { width: 40, height: 40, borderRadius: "50%", border: "1px solid #EE077D", background: "transparent", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" },
  row: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 },
  card: {
    background: "#F9FAFF", borderRadius: 12, padding: "22px 20px 18px",
    display: "flex", flexDirection: "column", gap: 14, minHeight: 180,
    alignItems: "center", textAlign: "center",
  },
  body: { margin: 0, fontFamily: "'Lato', serif", fontWeight: 500, fontSize: 13, color: "#171717", lineHeight: 1.55 },
  name: { fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 13, color: "#171717" },
};

window.Reviews = Reviews;