// Volunteer Call-to-Action
function VolunteerCTA({ t, compact }) {
  const lang = t.locale;
  const ui = t.templeActivities.volunteer;
  const data = (window.TEMPLE_ACTIVITIES && window.TEMPLE_ACTIVITIES.volunteer) ? window.TEMPLE_ACTIVITIES.volunteer : { types: [], mailSubject: { th: "", en: "" } };

  function volunteerMail(typeLabel) {
    const subject = encodeURIComponent(taText(data.mailSubject, lang));
    const body = encodeURIComponent(
      (lang === "th" ? "สนใจช่วยงาน: " : lang === "no" ? "Jeg vil gjerne hjelpe med: " : "I would like to help with: ")
      + typeLabel
    );
    window.location.href = "mailto:info@watthainorway.com?subject=" + subject + "&body=" + body;
  }

  const types = compact ? data.types.slice(0, 4) : data.types;

  if (compact) {
    return (
      <TempleSection
        id="volunteer-cta"
        eyebrow={ui.eyebrow}
        title={ui.title}
        intro={ui.homeIntro || ui.intro}
        compact
        style={{ background: "linear-gradient(180deg, var(--forest-soft) 0%, var(--bg) 100%)" }}
      >
        <div className="wn-volunteer-grid wn-volunteer-grid--compact" style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: "16px", alignItems: "center" }}>
          <div className="wn-volunteer-types" style={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", gap: "8px" }}>
            {types.map(function (type) {
              const label = taText(type.label, lang);
              return (
                <button
                  key={type.id}
                  type="button"
                  onClick={function () { volunteerMail(label); }}
                  style={{
                    minHeight: "72px",
                    padding: "10px 12px",
                    borderRadius: "14px",
                    border: "1px solid rgba(82,98,70,0.18)",
                    background: "rgba(237,242,232,0.7)",
                    cursor: "pointer",
                    textAlign: "left",
                    display: "flex",
                    alignItems: "center",
                    gap: "10px",
                  }}
                >
                  <span aria-hidden="true" style={{ fontSize: "16px", color: "var(--forest)", flexShrink: 0 }}>{type.icon}</span>
                  <span style={{ fontFamily: "var(--font-body)", fontSize: "clamp(13px, 2.6vw, 14px)", lineHeight: 1.35, color: "var(--ink)" }}>{label}</span>
                </button>
              );
            })}
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: "10px", minWidth: "min(220px, 100%)" }}>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "clamp(14px, 2.8vw, 15px)", lineHeight: 1.55, color: "var(--muted)", margin: 0 }}>
              {ui.cardBody}
            </p>
            <TemplePrimaryButton onClick={function () { volunteerMail(ui.generalInterest); }}>
              {ui.cta}
            </TemplePrimaryButton>
          </div>
        </div>
      </TempleSection>
    );
  }

  return (
    <TempleSection
      id="volunteer-cta"
      eyebrow={ui.eyebrow}
      title={ui.title}
      intro={ui.intro}
      style={{ background: "linear-gradient(180deg, var(--forest-soft) 0%, var(--bg) 100%)" }}
    >
      <div className="wn-volunteer-grid" style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: "24px", alignItems: "stretch" }}>
        <TempleCard>
          <div className="wn-volunteer-types" style={{ display: "grid", gridTemplateColumns: "repeat(4, minmax(0, 1fr))", gap: "12px" }}>
            {types.map(function (type) {
              const label = taText(type.label, lang);
              return (
                <button
                  key={type.id}
                  type="button"
                  onClick={function () { volunteerMail(label); }}
                  style={{
                    minHeight: "108px",
                    padding: "14px",
                    borderRadius: "18px",
                    border: "1px solid rgba(82,98,70,0.18)",
                    background: "rgba(237,242,232,0.7)",
                    cursor: "pointer",
                    textAlign: "left",
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "space-between",
                    gap: "10px",
                  }}
                >
                  <span aria-hidden="true" style={{ fontSize: "18px", color: "var(--forest)" }}>{type.icon}</span>
                  <span style={{ fontFamily: "var(--font-body)", fontSize: "clamp(14px, 2.8vw, 15px)", lineHeight: 1.4, color: "var(--ink)" }}>{label}</span>
                </button>
              );
            })}
          </div>
        </TempleCard>

        <TempleCard style={{ background: "var(--ink)", color: "var(--bg)", borderColor: "var(--ink)", display: "flex", flexDirection: "column", justifyContent: "center", gap: "18px" }}>
          <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(26px, 4vw, 34px)", lineHeight: 1.2 }}>
            {ui.cardTitle}
          </div>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "clamp(16px, 3.2vw, 17px)", lineHeight: 1.7, opacity: 0.82, margin: 0 }}>
            {ui.cardBody}
          </p>
          <div>
            <TemplePrimaryButton onClick={function () { volunteerMail(ui.generalInterest); }}>
              {ui.cta}
            </TemplePrimaryButton>
          </div>
        </TempleCard>
      </div>
    </TempleSection>
  );
}