// MobileSchedule.jsx — concert rows; mobile collapses each row.
// First row is highlighted magenta. Tap "Подробнее" to expand.

const MobileSchedule = ({ rows = defaultMobRows }) => {
  const [open, setOpen] = React.useState({ 0: true });
  return (
    <div style={msStyles.list}>
      {rows.map((r, i) => {
        const hot = i === 0;
        const isOpen = !!open[i];
        return (
          <div key={i} style={{ ...msStyles.row, ...(hot ? msStyles.hot : msStyles.normal) }}>
            <div style={msStyles.rowHead}>
              <div>
                <div style={msStyles.day}>{r.date.day} {r.date.time}</div>
                <div style={msStyles.place}>{r.place.city} {r.place.venue}</div>
              </div>
            </div>
            <div style={msStyles.program}>{r.program}</div>
            <button onClick={() => setOpen(o => ({ ...o, [i]: !o[i] }))} style={{ ...msStyles.more, color: hot ? "#FFFFFF" : "#EE077D" }}>
              Подробнее <Icon name={isOpen ? "chevron" : "chevron"} size={12} color={hot ? "#FFFFFF" : "#EE077D"} style={{ transform: isOpen ? "rotate(180deg)" : "none" }} />
            </button>
            {isOpen && (
              <div style={msStyles.expanded}>
                <div><strong>Исполнители:</strong> {r.cast.map(c => `${c.name} (${c.role})`).join(", ")}</div>
                <div><strong>Билеты:</strong> {r.tickets}</div>
                <div><strong>Примечания:</strong> {r.note}</div>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
};

const defaultMobRows = [
  { date: { day: "Каждый четверг", time: "18.30 — 20.30" }, place: { city: "Иерусалим", venue: "Площадь Музыки" }, program: "Оригинальная музыка Ализы Керен, золотые хиты мировой лёгкой музыки, еврейская музыка", cast: [{ name: "Ализа Керен", role: "скрипка" }, { name: "Вадим Юшин", role: "фортепиано" }], tickets: "—", note: "Можно заказать столик в одном из ресторанов." },
  { date: { day: "Каждый четверг", time: "18.30 — 20.30" }, place: { city: "Иерусалим", venue: "Площадь Музыки" }, program: "Оригинальная музыка Ализы Керен, золотые хиты мировой лёгкой музыки, еврейская музыка", cast: [{ name: "Ализа Керен", role: "скрипка" }, { name: "Вадим Юшин", role: "фортепиано" }], tickets: "Купить билеты", note: "Можно заказать столик в одном из ресторанов." },
];

const msStyles = {
  list: { padding: "0 16px", display: "flex", flexDirection: "column", gap: 10 },
  row: { padding: "14px 16px", borderRadius: 10, fontFamily: "'Nunito Sans', sans-serif", display: "flex", flexDirection: "column", gap: 8 },
  hot: { background: "#EE077D", color: "#FFFFFF" },
  normal: { background: "#FEEECC", color: "#171717" },
  rowHead: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" },
  day: { fontSize: 13, fontWeight: 700 },
  place: { fontSize: 12, opacity: 0.85 },
  program: { fontSize: 12, lineHeight: 1.5 },
  more: { background: "transparent", border: 0, padding: 0, fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 12, cursor: "pointer", alignSelf: "flex-start", display: "inline-flex", alignItems: "center", gap: 6 },
  expanded: { borderTop: "1px solid rgba(255,255,255,0.4)", paddingTop: 8, display: "flex", flexDirection: "column", gap: 4, fontSize: 12, lineHeight: 1.5 },
};

window.MobileSchedule = MobileSchedule;