// MobileReviews.jsx — single review at a time with pagination dots.
// MobileArticles.jsx — stacked article excerpts.

const MobileReviews = ({ items = defaultMobReviews }) => {
  const [i, setI] = React.useState(0);
  const r = items[i];
  return (
    <div style={mrStyles.wrap}>
      <article style={mrStyles.card}>
        <p style={mrStyles.body}>{r.body}</p>
        <div style={mrStyles.name}>{r.name}</div>
      </article>
      <div style={mrStyles.dots}>
        {items.map((_, k) => (
          <button key={k} onClick={() => setI(k)} aria-label={`Review ${k + 1}`} style={{ ...mrStyles.dot, ...(k === i ? mrStyles.dotOn : {}) }} />
        ))}
      </div>
    </div>
  );
};

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

const mrStyles = {
  wrap: { padding: "0 16px" },
  card: { background: "#F9FAFF", borderRadius: 12, padding: "20px 18px", display: "flex", flexDirection: "column", gap: 12, 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" },
  dots: { display: "flex", justifyContent: "center", gap: 6, marginTop: 12 },
  dot: { width: 6, height: 6, borderRadius: "50%", background: "rgba(23,23,23,0.25)", border: 0, padding: 0, cursor: "pointer" },
  dotOn: { background: "#EE077D" },
};

const MobileArticles = ({ items = defaultMobArticles, onRead = () => {} }) => (
  <div style={maStyles.list}>
    {items.map((it, i) => (
      <article key={i} style={maStyles.card}>
        <h3 style={maStyles.title}>{it.title}</h3>
        <p style={maStyles.body}>{it.body}</p>
        <a href="#" onClick={(e) => { e.preventDefault(); onRead(i); }} style={maStyles.cta}>
          Читать <Icon name="arrow" size={16} color="#EE077D" />
        </a>
      </article>
    ))}
    <div style={maStyles.dots}>
      <span style={{ ...maStyles.dot, ...maStyles.dotOn }} />
      <span style={maStyles.dot} />
      <span style={maStyles.dot} />
    </div>
  </div>
);

const defaultMobArticles = [
  { title: "Импровизация в музыке — импровизация жизни", body: "Lorem Ipsum — это текст‑«рыба», часто используемый в печати и вёб‑дизайне. Lorem Ipsum является стандартной «рыбой»…" },
];

const maStyles = {
  list: { padding: "0 16px", display: "flex", flexDirection: "column", gap: 18 },
  card: { display: "flex", flexDirection: "column", gap: 8 },
  title: { margin: 0, fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 14, color: "#171717", lineHeight: 1.3, letterSpacing: "-0.02em" },
  body: { margin: 0, fontFamily: "'Lato', serif", fontWeight: 400, fontSize: 12, color: "#171717", lineHeight: 1.55 },
  cta: { fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 13, color: "#EE077D", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 8 },
  dots: { display: "flex", justifyContent: "center", gap: 6, marginTop: 4 },
  dot: { width: 6, height: 6, borderRadius: "50%", background: "rgba(23,23,23,0.25)" },
  dotOn: { background: "#EE077D" },
};

window.MobileReviews = MobileReviews;
window.MobileArticles = MobileArticles;