// Schedule.jsx — concert calendar; first row is highlighted magenta
// ("next concert"), the remaining rows use cream alternation.

const Schedule = ({ rows = defaultRows }) => (
  <table style={schStyles.table}>
    <thead>
      <tr>
        {["Дата", "Место", "Программа", "Исполнители", "Билеты", "Примечания"].map((h, i) => (
          <th key={i} style={schStyles.th}>{h}</th>
        ))}
      </tr>
    </thead>
    <tbody>
      {rows.map((r, i) => (
        <tr key={i} style={i === 0 ? schStyles.hot : schStyles.normal}>
          <td style={schStyles.td}><b>{r.date.day}</b><span style={schStyles.meta}>{r.date.time}</span></td>
          <td style={schStyles.td}><b>{r.place.city}</b><span style={schStyles.meta}>{r.place.venue}</span></td>
          <td style={schStyles.td}>{r.program}</td>
          <td style={schStyles.td}>{r.cast.map((c, k) => (<div key={k}><b>{c.name}</b><span style={schStyles.meta}> ({c.role})</span></div>))}</td>
          <td style={schStyles.td}>{r.tickets === "—" ? "—" : <a href="#" style={schStyles.buyLink}>{r.tickets}</a>}</td>
          <td style={schStyles.td}>{r.note}</td>
        </tr>
      ))}
    </tbody>
  </table>
);

const defaultRows = [
  { 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 schStyles = {
  table: { width: "100%", borderCollapse: "collapse", fontFamily: "'Nunito Sans', sans-serif", borderRadius: 12, overflow: "hidden" },
  th: { background: "#FCC655", padding: "14px 16px", textAlign: "left", fontWeight: 700, fontSize: 13, color: "#171717" },
  td: { padding: "16px", verticalAlign: "top", fontSize: 13, color: "inherit", lineHeight: 1.5 },
  hot: { background: "#EE077D", color: "#FFFFFF" },
  normal: { background: "#FEEECC", color: "#171717" },
  meta: { display: "block", fontSize: 12, opacity: 0.85, fontWeight: 400 },
  buyLink: { color: "inherit", textDecoration: "underline", fontWeight: 700 },
};

window.Schedule = Schedule;