// Donate page — amount selection, purpose, method, building fund progress
function DonatePage({ t }) {
  const lang = t.locale;
  const [amount, setAmount] = useState(500);
  const [custom, setCustom] = useState("");
  const [purpose, setPurpose] = useState("general");
  const [method, setMethod] = useState("bank");

  const amounts = [100, 250, 500, 1000, 2500];

  const finalAmount = custom ? Number(custom) : amount;
  const selectedPurpose = t.donate.purposes.find((p) => p.id === purpose) || t.donate.purposes[0];
  const methodLabels = {
    email: t.donate.emailTitle,
    bank: t.donate.bankTitle,
  };
  const donationSubject = encodeURIComponent(t.donate.mailSubject);
  const donationBody = encodeURIComponent([
    t.donate.title,
    "",
    `${lang === "th" ? "จำนวนเงิน" : lang === "no" ? "Beløp" : "Amount"}: ${Number.isFinite(finalAmount) ? finalAmount.toLocaleString() : ""} NOK`,
    `${lang === "th" ? "วิธีแจ้งทำบุญ" : lang === "no" ? "Betalingsmåte" : "Payment method"}: ${methodLabels[method]}`,
    `${lang === "th" ? "วัตถุประสงค์" : lang === "no" ? "Formål" : "Purpose"}: ${selectedPurpose.label}`,
    "",
    lang === "th" ? "ชื่อ:" : lang === "no" ? "Navn:" : "Name:",
    lang === "th" ? "เบอร์โทร:" : lang === "no" ? "Telefon:" : "Phone:",
    lang === "th" ? "ที่อยู่สำหรับใบเสร็จ:" : lang === "no" ? "Adresse for kvittering:" : "Address for receipt:",
    "",
    t.donate.receiptNote,
  ].join("\n"));
  const donationMailto = `mailto:donation@watthainorway.com?subject=${donationSubject}&body=${donationBody}`;

  return (
    <div>
      <div className="wn-container">
        <PageHeading eyebrow={t.donate.eyebrow} title={t.donate.title} intro={t.donate.intro} />
      </div>
      <DonationSteps t={t} />

      <section style={{ paddingTop: "40px", paddingBottom: "120px" }}>
        <div className="wn-container wn-r2" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: "64px", alignItems: "start" }}>
          {/* Donate form */}
          <div className="wn-pad-card" style={{ border: "1px solid var(--line)", padding: "48px", background: "var(--bg)" }}>
            {/* Method selector */}
            <div style={{ marginBottom: "40px" }}>
              <div style={{ fontFamily: "var(--font-body)", fontSize: "11px", letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--accent)", marginBottom: "16px" }}>
                01 — {lang === "th" ? "วิธีทำบุญ" : lang === "no" ? "Betalingsmåte" : "Payment method"}
              </div>
              <div className="wn-r3 wn-method-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px" }}>
                {[
                  { id: "bank", title: t.donate.bankTitle, body: t.donate.bankBody, mark: "≡" },
                  { id: "email", title: t.donate.emailTitle, body: t.donate.emailBody, mark: "✉" },
                ].map((m) => (
                  <button
                    key={m.id}
                    type="button"
                    aria-pressed={method === m.id}
                    onClick={() => setMethod(m.id)}
                    style={{
                      textAlign: "left",
                      padding: "20px",
                      background: method === m.id ? "var(--ink)" : "transparent",
                      color: method === m.id ? "var(--bg)" : "var(--ink)",
                      border: "1px solid " + (method === m.id ? "var(--ink)" : "var(--line)"),
                      cursor: "pointer",
                      transition: "all 160ms ease",
                    }}
                  >
                    <div style={{ fontFamily: "var(--font-display)", fontSize: "22px", color: method === m.id ? "var(--accent)" : "var(--accent)", marginBottom: "8px" }}>
                      {m.mark}
                    </div>
                    <div style={{ fontFamily: "var(--font-body)", fontSize: "15px", fontWeight: 500, marginBottom: "4px" }}>{m.title}</div>
                    <div style={{ fontFamily: "var(--font-body)", fontSize: "12px", opacity: 0.7, lineHeight: 1.4 }}>{m.body}</div>
                  </button>
                ))}
              </div>
            </div>

            {/* Amount */}
            <div style={{ marginBottom: "40px" }}>
              <div style={{ fontFamily: "var(--font-body)", fontSize: "11px", letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--accent)", marginBottom: "16px" }}>
                02 — {t.donate.amountsTitle}
              </div>
              <div style={{ display: "flex", gap: "10px", flexWrap: "wrap", marginBottom: "16px" }}>
                {amounts.map((a) => (
                  <button
                    key={a}
                    onClick={() => { setAmount(a); setCustom(""); }}
                    style={{
                      padding: "16px 22px",
                      background: amount === a && !custom ? "var(--ink)" : "transparent",
                      color: amount === a && !custom ? "var(--bg)" : "var(--ink)",
                      border: "1px solid " + (amount === a && !custom ? "var(--ink)" : "var(--line)"),
                      cursor: "pointer",
                      fontFamily: "var(--font-display)",
                      fontSize: "20px",
                      minWidth: "90px",
                    }}
                  >
                    {a.toLocaleString()}
                  </button>
                ))}
              </div>
              <input
                type="number"
                value={custom}
                onChange={(e) => setCustom(e.target.value)}
                placeholder={t.donate.customAmount + " (NOK)"}
                style={{ width: "100%", background: "transparent", border: "1px solid var(--line)", padding: "16px 20px", fontFamily: "var(--font-body)", fontSize: "16px", color: "var(--ink)", outline: "none" }}
              />
            </div>

            {/* Purpose */}
            <div style={{ marginBottom: "40px" }}>
              <div style={{ fontFamily: "var(--font-body)", fontSize: "11px", letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--accent)", marginBottom: "16px" }}>
                03 — {t.donate.purposeTitle}
              </div>
              <div style={{ display: "flex", flexDirection: "column" }}>
                {t.donate.purposes.map((p, i) => (
                  <label
                    key={p.id}
                    style={{
                      display: "grid",
                      gridTemplateColumns: "auto 1fr auto",
                      gap: "16px",
                      alignItems: "center",
                      padding: "18px 0",
                      borderTop: i === 0 ? "1px solid var(--line)" : "none",
                      borderBottom: "1px solid var(--line)",
                      cursor: "pointer",
                    }}
                  >
                    <span style={{ width: "16px", height: "16px", borderRadius: "50%", border: "1px solid " + (purpose === p.id ? "var(--accent)" : "var(--line)"), display: "flex", alignItems: "center", justifyContent: "center" }}>
                      {purpose === p.id && <span style={{ width: "8px", height: "8px", borderRadius: "50%", background: "var(--accent)" }} />}
                    </span>
                    <input type="radio" name="purpose" value={p.id} checked={purpose === p.id} onChange={() => setPurpose(p.id)} style={{ position: "absolute", opacity: 0 }} />
                    <div>
                      <div style={{ fontFamily: "var(--font-body)", fontSize: "15px", color: "var(--ink)" }}>{p.label}</div>
                      <div style={{ fontFamily: "var(--font-body)", fontSize: "12px", color: "var(--muted)", marginTop: "2px" }}>{p.note}</div>
                    </div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: "14px", color: "var(--muted)" }}>
                      {String(i + 1).padStart(2, "0")}
                    </div>
                  </label>
                ))}
              </div>
            </div>

            {/* Summary + CTA */}
            <p style={{ fontFamily: "var(--font-body)", fontSize: "13px", lineHeight: 1.6, color: "var(--muted)", marginTop: "8px", marginBottom: 0 }}>
              {t.donate.paymentNote}
            </p>
            <div className="wn-wrap" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: "20px", marginTop: "24px", paddingTop: "32px", borderTop: "1px solid var(--ink)" }}>
              <div>
                <div style={{ fontFamily: "var(--font-body)", fontSize: "11px", letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--muted)" }}>
                  {lang === "th" ? "จำนวนเงิน" : lang === "no" ? "Beløp" : "Amount"}
                </div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: "44px", color: "var(--ink)", lineHeight: 1, marginTop: "6px" }}>
                  {finalAmount.toLocaleString()} <span style={{ fontSize: "20px", color: "var(--muted)" }}>NOK</span>
                </div>
              </div>
              <a href={donationMailto} style={{ background: "var(--accent)", color: "var(--ink)", border: "none", padding: "20px 36px", borderRadius: "999px", fontFamily: "var(--font-body)", fontSize: "15px", letterSpacing: "0.04em", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: "12px", textDecoration: "none", minHeight: "56px" }} aria-label={t.donate.donateBtn}>
                {t.donate.donateBtn}
                <span>→</span>
              </a>
            </div>
          </div>

          {/* Side — building fund progress + bank info */}
          <div className="wn-unstick" style={{ display: "flex", flexDirection: "column", gap: "32px", position: "sticky", top: "120px" }}>
            <GardenProject t={t} />
            <BuildingProgress t={t} />
            <BankInfo t={t} />
            <Reassurance t={t} />
          </div>
        </div>
      </section>

      {/* Volunteer callout */}
      <section style={{ paddingTop: "80px", paddingBottom: "100px", backgroundColor: "var(--bg-deep)" }}>
        <div className="wn-container" style={{ textAlign: "center", maxWidth: "760px" }}>
          <Eyebrow>
            <span style={{ flex: 1, textAlign: "center" }}>
              {lang === "th" ? "ไม่ใช่เพียงเงิน" : lang === "no" ? "Mer enn penger" : "Beyond money"}
            </span>
          </Eyebrow>
          <SectionTitle align="center" size="md">
            {lang === "th"
              ? "ร่วมเป็นอาสาสมัครและเป็นส่วนหนึ่งของวัด"
              : lang === "no"
              ? "Bli frivillig og bli en del av tempelet"
              : "Volunteer and be part of the temple"}
          </SectionTitle>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "16px", lineHeight: 1.7, color: "var(--muted)", marginTop: "24px" }}>
            {lang === "th"
              ? "นอกจากการถวายทรัพย์ ทางวัดยังเปิดรับอาสาสมัครช่วยงานในวันสำคัญ ทุกการให้คือบุญ ไม่ว่าจะเป็นแรงกาย แรงใจ หรือการถวายทรัพย์"
              : lang === "no"
              ? "Tempelet trenger også frivillige til seremonier, kjøkken og barneprogram. Hver gave — av tid, omtanke eller penger — er en verdifull støtte."
              : "The temple also welcomes volunteers for ceremonies, kitchen duties and children's activities. Every offering — of time, care or support — is a meaningful gift."}
          </p>
          <a
            href={`mailto:info@watthainorway.com?subject=${encodeURIComponent(lang === "th" ? "สมัครเป็นอาสาสมัครวัดไทยนอร์เวย์" : lang === "no" ? "Frivillig ved Wat Thai Norge" : "Volunteer at Wat Thai Norway")}`}
            style={{ marginTop: "32px", background: "var(--ink)", color: "var(--bg)", border: "none", padding: "16px 28px", borderRadius: "999px", fontFamily: "var(--font-body)", fontSize: "14px", letterSpacing: "0.04em", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: "8px", textDecoration: "none" }}
          >
            {lang === "th" ? "สมัครเป็นอาสา" : lang === "no" ? "Bli frivillig" : "Volunteer with us"} →
          </a>
        </div>
      </section>
    </div>
  );
}

function DonationSteps({ t }) {
  return (
    <section style={{ paddingTop: "12px", paddingBottom: "18px" }}>
      <div className="wn-container">
        <div style={{ padding: "26px 28px", border: "1px solid rgba(49,90,115,0.16)", background: "linear-gradient(135deg, var(--nordic-soft) 0%, var(--gold-soft) 100%)", boxShadow: "0 14px 40px rgba(43,33,24,0.05)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", gap: "28px", alignItems: "start", flexWrap: "wrap", marginBottom: "18px" }}>
            <div>
              <div style={{ fontFamily: "var(--font-body)", fontSize: "10px", letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--accent)", marginBottom: "8px" }}>
                {t.donate.eyebrow}
              </div>
              <h2 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(24px, 2.4vw, 34px)", fontWeight: 400, lineHeight: 1.15, color: "var(--ink)", margin: 0 }}>
                {t.donate.stepsTitle}
              </h2>
            </div>
            <a href="mailto:donation@watthainorway.com" style={{ color: "var(--nordic)", border: "1px solid rgba(49,90,115,0.36)", background: "rgba(255,255,255,0.48)", padding: "12px 20px", borderRadius: "999px", textDecoration: "none", fontFamily: "var(--font-body)", fontSize: "13px", letterSpacing: "0.04em", minHeight: "46px", display: "inline-flex", alignItems: "center" }}>
              donation@watthainorway.com
            </a>
          </div>
          <div className="wn-r3" style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: "16px" }}>
            {t.donate.steps.map((step, i) => (
              <div key={step.title} style={{ padding: "20px", background: "rgba(255,255,255,0.58)", border: "1px solid rgba(49,90,115,0.13)" }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: "24px", color: i === 1 ? "var(--nordic)" : "var(--accent-deep)", marginBottom: "10px" }}>
                  {String(i + 1).padStart(2, "0")}
                </div>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: "22px", fontWeight: 400, lineHeight: 1.2, margin: 0, color: "var(--ink)" }}>
                  {step.title}
                </h3>
                <p style={{ fontFamily: "var(--font-body)", fontSize: "13px", lineHeight: 1.6, color: "var(--muted)", marginTop: "9px", marginBottom: 0 }}>
                  {step.body}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function GardenProject({ t }) {
  const lang = t.locale;
  return (
    <div style={{ border: "1px solid var(--line)", background: "var(--bg)" }}>
      <div style={{ position: "relative" }}>
        <img
          src="/assets/life/garden-project.jpg"
          alt={t.donate.gardenTitle}
          style={{ display: "block", width: "100%", aspectRatio: "16 / 10", objectFit: "cover" }}
        />
        <div style={{ position: "absolute", top: "-8px", left: "-8px", width: "32px", height: "32px", borderTop: "1px solid var(--accent)", borderLeft: "1px solid var(--accent)" }} />
        <div style={{ position: "absolute", top: "14px", left: "14px", padding: "6px 12px", background: "rgba(20,14,6,0.78)", color: "var(--accent)", fontFamily: "var(--font-body)", fontSize: "10px", letterSpacing: "0.22em", textTransform: "uppercase", backdropFilter: "blur(4px)" }}>
          {lang === "th" ? "โครงการ" : lang === "no" ? "Prosjekt" : "Project"}
        </div>
      </div>
      <div style={{ padding: "28px" }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: "22px", color: "var(--ink)", lineHeight: 1.25, letterSpacing: "-0.005em", textWrap: "pretty" }}>
          {t.donate.gardenTitle}
        </div>
        <p style={{ fontFamily: "var(--font-body)", fontSize: "13px", lineHeight: 1.65, color: "var(--muted)", marginTop: "12px", marginBottom: 0, textWrap: "pretty" }}>
          {t.donate.gardenBody}
        </p>
        <p style={{ fontFamily: "var(--font-body)", fontSize: "12px", lineHeight: 1.55, color: "var(--muted)", marginTop: "16px", marginBottom: 0 }}>
          {t.donate.gardenNote}
        </p>
      </div>
    </div>
  );
}

function BuildingProgress({ t }) {
  return (
    <div style={{ border: "1px solid var(--line)", padding: "32px", background: "var(--bg)" }}>
      <div style={{ fontFamily: "var(--font-body)", fontSize: "11px", letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--accent)", marginBottom: "12px" }}>
        {t.donate.progressTitle}
      </div>
      <p style={{ fontFamily: "var(--font-body)", fontSize: "14px", lineHeight: 1.6, color: "var(--muted)", marginBottom: 0 }}>
        {t.donate.progressBody}
      </p>
      <p style={{ fontFamily: "var(--font-body)", fontSize: "12px", lineHeight: 1.55, color: "var(--muted)", marginTop: "16px", marginBottom: 0 }}>
        {t.donate.buildingNote}
      </p>
    </div>
  );
}

function BankInfo({ t }) {
  const lang = t.locale;
  return (
    <div style={{ border: "1px solid var(--line)", padding: "28px", background: "var(--bg-deep)" }}>
      <div style={{ fontFamily: "var(--font-body)", fontSize: "11px", letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--accent)", marginBottom: "14px" }}>
        {lang === "th" ? "ข้อมูลโอน" : lang === "no" ? "Bankinformasjon" : "Bank details"}
      </div>
      <dl style={{ margin: 0, fontFamily: "var(--font-body)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", gap: "20px", padding: "10px 0", borderBottom: "1px solid var(--line)" }}>
          <dt style={{ fontSize: "12px", color: "var(--muted)", flexShrink: 0 }}>{lang === "th" ? "ชื่อบัญชี" : lang === "no" ? "Kontoinnehaver" : "Account holder"}</dt>
          <dd style={{ margin: 0, fontSize: "14px", color: "var(--ink)", textAlign: "right" }}>Den Thailandske Buddhistforening</dd>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", gap: "20px", padding: "10px 0" }}>
          <dt style={{ fontSize: "12px", color: "var(--muted)", flexShrink: 0 }}>{lang === "th" ? "บัญชีออมทรัพย์" : lang === "no" ? "Kontonr" : "Savings account"}</dt>
          <dd style={{ margin: 0, fontSize: "14px", color: "var(--ink)", fontVariantNumeric: "tabular-nums" }}>1286.44.70120</dd>
        </div>
      </dl>
    </div>
  );
}

function Reassurance({ t }) {
  const lang = t.locale;
  const items = lang === "th"
    ? [
        { title: "บัญชีในนามสมาคม", body: "โอนเข้าบัญชี Den Thailandske Buddhistforening โดยตรง" },
        { title: "ขอใบเสร็จได้", body: "กรุณาส่งหลักฐานการโอนมาที่ donation@watthainorway.com" },
        { title: "ระบุวัตถุประสงค์", body: "เลือกทำบุญทั่วไป โครงการสวน กองทุนก่อสร้าง หรือถวายภัตตาหาร" },
      ]
    : lang === "no"
    ? [
        { title: "Konto i foreningens navn", body: "Overfør direkte til Den Thailandske Buddhistforening." },
        { title: "Kvittering kan bes om", body: "Send betalingsbekreftelse til donation@watthainorway.com." },
        { title: "Tydelig formål", body: "Velg generell støtte, hageprosjekt, byggefond eller mat til munkene." },
      ]
    : [
        { title: "Association bank account", body: "Transfer directly to Den Thailandske Buddhistforening." },
        { title: "Receipt on request", body: "Send payment confirmation to donation@watthainorway.com." },
        { title: "Clear donation purpose", body: "Choose general support, garden project, building fund or daily meals." },
      ];
  return (
    <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: "16px" }}>
      {items.map((i, idx) => (
        <li key={idx} style={{ display: "flex", gap: "14px", alignItems: "flex-start" }}>
          <span style={{ width: "20px", height: "20px", borderRadius: "50%", border: "1px solid var(--accent)", color: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "11px", flexShrink: 0, marginTop: "2px" }}>
            ✓
          </span>
          <div>
            <div style={{ fontFamily: "var(--font-body)", fontSize: "14px", color: "var(--ink)" }}>{i.title}</div>
            <div style={{ fontFamily: "var(--font-body)", fontSize: "12px", color: "var(--muted)", lineHeight: 1.5, marginTop: "2px" }}>{i.body}</div>
          </div>
        </li>
      ))}
    </ul>
  );
}

window.DonatePage = DonatePage;