// Weekly Schedule — simple day-by-day overview
function WeeklySchedule({ t }) {
  const lang = t.locale;
  const ui = t.templeActivities.schedule;
  const days = ui.days;
  const rows = (window.TEMPLE_ACTIVITIES && window.TEMPLE_ACTIVITIES.weeklySchedule) ? window.TEMPLE_ACTIVITIES.weeklySchedule : [];

  return (
    <TempleSection id="weekly-schedule" eyebrow={ui.eyebrow} title={ui.title} intro={ui.intro} alt>
      <div className="wn-schedule-wrap" style={{ border: "1px solid var(--line)", borderRadius: "24px", overflow: "hidden", background: "var(--bg)" }}>
        {rows.map(function (row, i) {
          const isToday = new Date().getDay() === ({ sunday: 0, monday: 1, tuesday: 2, wednesday: 3, thursday: 4, friday: 5, saturday: 6 }[row.dayKey]);
          return (
            <div
              key={row.dayKey}
              className="wn-schedule-row"
              style={{
                display: "grid",
                gridTemplateColumns: "minmax(120px, 0.35fr) 1fr auto",
                gap: "16px",
                alignItems: "center",
                padding: "clamp(16px, 3vw, 22px) clamp(18px, 4vw, 28px)",
                borderTop: i > 0 ? "1px solid var(--line)" : "none",
                background: isToday ? "rgba(201,162,39,0.08)" : "transparent",
              }}
            >
              <div style={{ fontFamily: "var(--font-body)", fontSize: "12px", letterSpacing: "0.14em", textTransform: "uppercase", color: isToday ? "var(--accent-deep)" : "var(--muted)" }}>
                {days[row.dayKey]}
                {isToday && <span style={{ marginLeft: "8px", color: "var(--accent)" }}>• {ui.today}</span>}
              </div>
              <div style={{ fontFamily: lang === "th" ? "var(--font-display)" : "var(--font-body)", fontSize: "clamp(17px, 3.5vw, 20px)", lineHeight: 1.45, color: "var(--ink)" }}>
                {taText(row.activity, lang)}
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(18px, 3vw, 22px)", color: "var(--accent-deep)", fontVariantNumeric: "tabular-nums", textAlign: "right" }}>
                {row.time}
              </div>
            </div>
          );
        })}
      </div>
      <p style={{ fontFamily: "var(--font-body)", fontSize: "14px", lineHeight: 1.6, color: "var(--muted)", marginTop: "18px", marginBottom: 0 }}>
        {ui.note}
      </p>
    </TempleSection>
  );
}