// Today at the Temple — live status cards
function TodayAtTemple({ t }) {
  const lang = t.locale;
  const ui = t.templeActivities.today;
  const data = (window.TEMPLE_ACTIVITIES && window.TEMPLE_ACTIVITIES.today) || {
    templeOpen: { time: "Mon–Fri 08:00–17:00 · Sat–Sun 07:00–18:00" },
    morningChanting: { time: "10:00", icon: "☽", label: { th: "ทำวัตรเช้า", en: "Morning chanting" } },
    thaiLunch: { time: "11:30", icon: "◉", label: { th: "ถวายภัตตาหาร", en: "Food offering" } },
    meditation: { time: "18:30", icon: "◎", label: { th: "นั่งสมาธิ", en: "Meditation" } },
    notice: { th: "", en: "" },
    nextFestival: { date: "", title: { th: "", en: "" } },
  };
  const days = data.nextFestival && data.nextFestival.date ? taDaysUntil(data.nextFestival.date) : null;
  const festivalTitle = data.nextFestival ? taText(data.nextFestival.title, lang) : "";

  const items = [
    { icon: "☉", label: ui.templeOpen, value: data.templeOpen.time },
    { icon: data.morningChanting.icon, label: taText(data.morningChanting.label, lang), value: data.morningChanting.time },
    { icon: data.thaiLunch.icon, label: taText(data.thaiLunch.label, lang), value: data.thaiLunch.time },
    { icon: data.meditation.icon, label: taText(data.meditation.label, lang), value: data.meditation.time },
  ];

  const countdownText = days === null
    ? ""
    : days <= 0
      ? ui.festivalToday.replace("{name}", festivalTitle)
      : ui.festivalCountdown.replace("{name}", festivalTitle).replace("{days}", String(days));

  return (
    <TempleSection id="today-at-temple" eyebrow={ui.eyebrow} title={ui.title} intro={ui.intro}>
      <div className="wn-today-grid" style={{ display: "grid", gridTemplateColumns: "1.2fr 0.8fr", gap: "20px", alignItems: "stretch" }}>
        <TempleCard style={{ background: "linear-gradient(180deg, #fffdf8 0%, var(--bg) 100%)" }}>
          <div className="wn-today-status-grid" style={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", gap: "14px" }}>
            {items.map(function (item) {
              return (
                <div key={item.label} style={{ padding: "16px", borderRadius: "18px", background: "rgba(201,162,39,0.06)", border: "1px solid rgba(201,162,39,0.14)" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: "10px" }}>
                    <span aria-hidden="true" style={{ width: "34px", height: "34px", borderRadius: "50%", background: "var(--gold-soft)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--accent-deep)", fontSize: "16px" }}>
                      {item.icon}
                    </span>
                    <span style={{ fontFamily: "var(--font-body)", fontSize: "12px", letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--muted)" }}>
                      {item.label}
                    </span>
                  </div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(24px, 4vw, 32px)", color: "var(--ink)", lineHeight: 1.1 }}>
                    {item.value}
                  </div>
                </div>
              );
            })}
          </div>
        </TempleCard>

        <div style={{ display: "grid", gap: "14px" }}>
          <TempleCard style={{ background: "var(--nordic-soft)", borderColor: "rgba(49,90,115,0.14)" }}>
            <div style={{ fontFamily: "var(--font-body)", fontSize: "11px", letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--nordic)", marginBottom: "10px" }}>
              {ui.noticeLabel}
            </div>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "clamp(16px, 3.5vw, 18px)", lineHeight: 1.7, color: "var(--ink)", margin: 0 }}>
              {taText(data.notice, lang)}
            </p>
          </TempleCard>

          <TempleCard style={{ background: "linear-gradient(135deg, rgba(198,154,43,0.12), rgba(251,248,241,0.96))" }}>
            <div style={{ fontFamily: "var(--font-body)", fontSize: "11px", letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--accent-deep)", marginBottom: "10px" }}>
              {ui.nextFestival}
            </div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(22px, 4vw, 28px)", lineHeight: 1.2, color: "var(--ink)", marginBottom: "8px" }}>
              {festivalTitle}
            </div>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "clamp(15px, 3.2vw, 17px)", lineHeight: 1.6, color: "var(--muted)", margin: 0 }}>
              {countdownText}
            </p>
          </TempleCard>
        </div>
      </div>
    </TempleSection>
  );
}