// Shared UI for Temple Activities sections
function taText(obj, lang) {
  return window.TempleActivitiesData ? window.TempleActivitiesData.text(obj, lang) : "";
}
function taDaysUntil(iso) {
  return window.TempleActivitiesData ? window.TempleActivitiesData.daysUntil(iso) : null;
}

function TempleSection({ id, eyebrow, title, intro, children, alt = false, compact = false, style = {} }) {
  return (
    <section
      id={id}
      aria-labelledby={id + "-title"}
      className={"wn-temple-section" + (compact ? " wn-temple-section--compact" : "")}
      style={{
        paddingTop: compact ? "clamp(36px, 5vw, 56px)" : "clamp(72px, 10vw, 110px)",
        paddingBottom: compact ? "clamp(36px, 5vw, 56px)" : "clamp(72px, 10vw, 110px)",
        background: alt ? "var(--bg-deep)" : "var(--bg)",
        borderTop: alt ? "1px solid var(--line)" : "none",
        ...style,
      }}
    >
      <div className="wn-container">
        {(eyebrow || title) && (
          <header className="wn-temple-section-head" style={{ marginBottom: compact ? "clamp(18px, 3vw, 28px)" : "clamp(32px, 5vw, 52px)", maxWidth: compact ? "600px" : "720px" }}>
            {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
            {title && (
              <h2 id={id + "-title"} style={{ fontFamily: "var(--font-display)", fontSize: compact ? "clamp(24px, 4vw, 32px)" : "clamp(32px, 5vw, 48px)", fontWeight: 400, lineHeight: 1.1, letterSpacing: "-0.02em", color: "var(--ink)", margin: compact ? "10px 0 0" : "14px 0 0" }}>
                {title}
              </h2>
            )}
            {intro && (
              <p style={{ fontFamily: "var(--font-body)", fontSize: compact ? "clamp(14px, 3vw, 16px)" : "clamp(16px, 3.5vw, 18px)", lineHeight: 1.65, color: "var(--muted)", marginTop: compact ? "12px" : "18px", marginBottom: 0 }}>
                {intro}
              </p>
            )}
          </header>
        )}
        {children}
      </div>
    </section>
  );
}

function TempleCard({ children, style = {}, className = "" }) {
  return (
    <div
      className={"wn-temple-card " + className}
      style={{
        background: "var(--bg)",
        border: "1px solid rgba(43,33,24,0.10)",
        borderRadius: "24px",
        padding: "clamp(20px, 4vw, 28px)",
        boxShadow: "0 14px 40px rgba(43,33,24,0.05)",
        ...style,
      }}
    >
      {children}
    </div>
  );
}

function TempleFilterChip({ label, active, onClick }) {
  return (
    <button
      type="button"
      onClick={onClick}
      aria-pressed={active}
      style={{
        background: active ? "var(--accent)" : "rgba(201,162,39,0.08)",
        border: "1px solid " + (active ? "var(--accent)" : "rgba(201,162,39,0.22)"),
        borderRadius: "999px",
        padding: "11px 16px",
        minHeight: "44px",
        cursor: "pointer",
        fontFamily: "var(--font-body)",
        fontSize: "13px",
        letterSpacing: "0.03em",
        color: active ? "#191107" : "var(--ink)",
        transition: "background-color 160ms ease, border-color 160ms ease",
      }}
    >
      {label}
    </button>
  );
}

function TempleGhostButton({ children, onClick, href, external }) {
  const style = {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    gap: "8px",
    minHeight: "44px",
    padding: "11px 18px",
    borderRadius: "999px",
    border: "1px solid rgba(43,33,24,0.14)",
    background: "transparent",
    color: "var(--ink)",
    fontFamily: "var(--font-body)",
    fontSize: "13px",
    letterSpacing: "0.03em",
    cursor: "pointer",
    textDecoration: "none",
  };
  if (href) {
    return (
      <a href={href} target={external ? "_blank" : undefined} rel={external ? "noopener noreferrer" : undefined} style={style}>
        {children}
      </a>
    );
  }
  return <button type="button" onClick={onClick} style={style}>{children}</button>;
}

function TemplePrimaryButton({ children, onClick, href, external }) {
  const style = {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    gap: "8px",
    minHeight: "44px",
    padding: "12px 20px",
    borderRadius: "999px",
    border: "1px solid var(--accent)",
    background: "var(--accent)",
    color: "#191107",
    fontFamily: "var(--font-body)",
    fontSize: "13px",
    letterSpacing: "0.03em",
    cursor: "pointer",
    textDecoration: "none",
    boxShadow: "0 10px 24px rgba(198,154,43,0.18)",
  };
  if (href) {
    return (
      <a href={href} target={external ? "_blank" : undefined} rel={external ? "noopener noreferrer" : undefined} style={style}>
        {children}
      </a>
    );
  }
  return <button type="button" onClick={onClick} style={style}>{children}</button>;
}

function EventRegisterForm({ event, ui, lang }) {
  const [open, setOpen] = useState(false);
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [count, setCount] = useState("1");

  function submit(e) {
    e.preventDefault();
    var subject = encodeURIComponent(ui.registerSubject);
    var body = encodeURIComponent(
      (lang === "th" ? "ชื่อ: " : lang === "no" ? "Navn: " : "Name: ") + name + "\n"
      + (lang === "th" ? "โทร: " : lang === "no" ? "Telefon: " : "Phone: ") + phone + "\n"
      + (lang === "th" ? "จำนวนผู้เข้าร่วม: " : lang === "no" ? "Antall: " : "Participants: ") + count + "\n\n"
      + (lang === "th" ? "กิจกรรม: " : lang === "no" ? "Arrangement: " : "Event: ") + taText(event.title, lang) + "\n"
      + event.date + " · " + event.time
    );
    window.location.href = "mailto:info@watthainorway.com?subject=" + subject + "&body=" + body;
  }

  if (!open) {
    return (
      <TempleGhostButton onClick={function () { setOpen(true); }}>
        {ui.register}
      </TempleGhostButton>
    );
  }

  return (
    <form onSubmit={submit} style={{ width: "100%", display: "grid", gap: "8px", padding: "12px", background: "var(--bg-deep)", borderRadius: "16px", border: "1px solid var(--line)" }}>
      <input required placeholder={ui.registerName} value={name} onChange={function (e) { setName(e.target.value); }} style={{ padding: "10px 12px", borderRadius: "12px", border: "1px solid var(--line)", fontFamily: "var(--font-body)", fontSize: "14px" }} />
      <input required type="tel" placeholder={ui.registerPhone} value={phone} onChange={function (e) { setPhone(e.target.value); }} style={{ padding: "10px 12px", borderRadius: "12px", border: "1px solid var(--line)", fontFamily: "var(--font-body)", fontSize: "14px" }} />
      <input required type="number" min="1" max="99" placeholder={ui.registerCount} value={count} onChange={function (e) { setCount(e.target.value); }} style={{ padding: "10px 12px", borderRadius: "12px", border: "1px solid var(--line)", fontFamily: "var(--font-body)", fontSize: "14px" }} />
      <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
        <button type="submit" style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", minHeight: "44px", padding: "12px 20px", borderRadius: "999px", border: "1px solid var(--accent)", background: "var(--accent)", color: "#191107", fontFamily: "var(--font-body)", fontSize: "13px", cursor: "pointer" }}>
          {ui.registerSend}
        </button>
        <TempleGhostButton onClick={function () { setOpen(false); }}>{ui.registerCancel}</TempleGhostButton>
      </div>
    </form>
  );
}

function TempleCategoryBadge({ label }) {
  return (
    <span style={{
      display: "inline-block",
      fontFamily: "var(--font-body)",
      fontSize: "10px",
      letterSpacing: "0.18em",
      textTransform: "uppercase",
      color: "var(--accent-deep)",
      background: "var(--gold-soft)",
      border: "1px solid rgba(198,154,43,0.24)",
      borderRadius: "999px",
      padding: "6px 10px",
    }}>
      {label}
    </span>
  );
}