// Daily Dhamma teaser for homepage
function DhammaTeaserImage({ item }) {
  if (!item) return null;
  const src = item.image || (item.weekday ? "/assets/dhamma/" + item.weekday + ".svg" : null);
  if (!src) return null;
  return (
    <img
      src={src}
      alt=""
      loading="lazy"
      aria-hidden="true"
      style={{
        width: "100%",
        display: "block",
        borderRadius: "16px",
        aspectRatio: "16 / 9",
        objectFit: "cover",
        border: "1px solid rgba(255,255,255,0.16)",
      }}
    />
  );
}

function DailyDhammaTeaser({ t, setPage }) {
  const lang = t.locale;
  const ui = t.dailyDhammaTeaser;
  const [item, setItem] = useState(null);

  useEffect(function () {
    var active = true;
    window.DailyDhammaApi.fetchDailyDhamma(lang).then(function (res) {
      if (active && res.item) setItem(res.item);
    });
    return function () { active = false; };
  }, [lang]);

  if (!item) return null;

  return (
    <section style={{ paddingTop: "0", paddingBottom: "0", marginTop: "-24px", position: "relative", zIndex: 2 }}>
      <div className="wn-container">
        <article
          style={{
            background: "linear-gradient(135deg, rgba(49,90,115,0.95), rgba(43,33,24,0.92))",
            color: "var(--bg)",
            borderRadius: "28px",
            padding: "clamp(24px, 5vw, 36px)",
            boxShadow: "0 24px 56px rgba(43,33,24,0.18)",
            display: "grid",
            gridTemplateColumns: "minmax(120px, 180px) minmax(0, 1fr) auto",
            gap: "24px",
            alignItems: "center",
          }}
          className="wn-dhamma-teaser"
        >
          <DhammaTeaserImage item={item} />
          <div>
            <div style={{ fontFamily: "var(--font-body)", fontSize: "10px", letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--accent)", marginBottom: "10px" }}>
              {ui.eyebrow}
            </div>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(24px, 4vw, 32px)", lineHeight: 1.2, margin: "0 0 12px" }}>
              {item.title}
            </h2>
            <p style={{ fontFamily: lang === "th" ? "var(--font-display)" : "var(--font-body)", fontSize: "clamp(17px, 3.5vw, 20px)", lineHeight: 1.75, margin: 0, opacity: 0.92, maxWidth: "52ch" }}>
              {item.daily_message.length > 160 ? item.daily_message.slice(0, 160) + "…" : item.daily_message}
            </p>
          </div>
          <button
            type="button"
            onClick={function () { setPage("dailyDhamma"); }}
            style={{
              background: "var(--accent)",
              color: "#191107",
              border: "none",
              borderRadius: "999px",
              padding: "14px 22px",
              minHeight: "48px",
              fontFamily: "var(--font-body)",
              fontSize: "14px",
              letterSpacing: "0.04em",
              cursor: "pointer",
              whiteSpace: "nowrap",
            }}
          >
            {ui.cta} →
          </button>
        </article>
      </div>
    </section>
  );
}