function GiveScreen({ onNavigate }) {
  const { Badge, Card, Eyebrow, SectionHeading, Button, ScriptureQuote } = window.GT;
  const [amount, setAmount] = React.useState(100);
  const [freq, setFreq] = React.useState("once");
  const [fund, setFund] = React.useState("General Fund");

  const amounts = [25, 50, 100, 250, 500];
  const funds = ["General Fund", "Missions & Outreach", "Building Fund", "Benevolence"];

  const ways = [
    { icon: "globe", title: "Give online", body: "Use the secure form here for a one-time or recurring gift by card or bank transfer." },
    { icon: "hand-coins", title: "In person", body: "Place your gift in the offering during any Sunday service. Envelopes are available at the welcome table." },
    { icon: "mail", title: "By mail", body: "Send a check to P.O. Box 1085, Branson West, MO 65737, payable to Grace & Truth Church." },
  ];

  return (
    <div>
      {/* Hero */}
      <div style={{ position: "relative", background: "linear-gradient(150deg, #4F9A6B 0%, #3C7A57 55%, #2C3843 100%)", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(50% 70% at 82% 16%, rgba(168,202,85,0.22), transparent 60%)" }}></div>
        <div style={{ position: "relative", maxWidth: "var(--container-xl)", margin: "0 auto", padding: "var(--space-10) var(--gutter)" }}>
          <Eyebrow tone="light">Give</Eyebrow>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-display-2)", fontWeight: 600, color: "var(--white)", margin: "var(--space-2) 0 0", maxWidth: "18ch", lineHeight: 1.08 }}>
            A cheerful, grace-filled gift.
          </h1>
          <p style={{ color: "rgba(255,255,255,0.88)", fontSize: "var(--text-lead)", maxWidth: "40rem", margin: "var(--space-4) 0 0" }}>
            Giving is an act of worship and trust. Your generosity supports the teaching of God's
            Word, the care of our church family, and our outreach to Branson West and beyond.
          </p>
        </div>
      </div>

      {/* Giving widget + ways */}
      <Section bg="page">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-9)", alignItems: "start" }} className="two-col">
          {/* Widget */}
          <Card padding="lg" topRule>
            <h2 style={{ fontSize: "var(--text-h3)", margin: "0 0 var(--space-5)" }}>Make a gift</h2>

            {/* Frequency */}
            <div style={{ display: "flex", gap: 0, background: "var(--mist-100)", borderRadius: "var(--radius-pill)", padding: 4, marginBottom: "var(--space-5)" }}>
              {[["once", "One-time"], ["monthly", "Monthly"]].map(([key, label]) => (
                <button key={key} onClick={() => setFreq(key)} style={{
                  flex: 1, padding: "0.6rem 1rem", borderRadius: "var(--radius-pill)", border: "none", cursor: "pointer",
                  fontFamily: "var(--font-label)", fontWeight: 700, fontSize: "var(--text-sm)",
                  background: freq === key ? "var(--white)" : "transparent",
                  color: freq === key ? "var(--text-brand)" : "var(--text-muted)",
                  boxShadow: freq === key ? "var(--shadow-sm)" : "none",
                }}>{label}</button>
              ))}
            </div>

            {/* Amount */}
            <label style={{ fontFamily: "var(--font-label)", fontWeight: 600, fontSize: "var(--text-sm)", color: "var(--text-strong)" }}>Amount</label>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: "var(--space-2)", margin: "var(--space-3) 0" }}>
              {amounts.map((a) => (
                <button key={a} onClick={() => setAmount(a)} style={{
                  padding: "0.7rem 0", borderRadius: "var(--radius-sm)", cursor: "pointer",
                  fontFamily: "var(--font-label)", fontWeight: 700, fontSize: "var(--text-base)",
                  border: amount === a ? "1px solid var(--accent)" : "1px solid var(--border-default)",
                  background: amount === a ? "var(--blue-100)" : "var(--white)",
                  color: amount === a ? "var(--text-accent)" : "var(--text-body)",
                }}>${a}</button>
              ))}
            </div>
            <div style={{ position: "relative", marginBottom: "var(--space-5)" }}>
              <span style={{ position: "absolute", left: 14, top: "50%", transform: "translateY(-50%)", color: "var(--text-muted)", fontWeight: 600 }}>$</span>
              <input type="number" value={amount} onChange={(e) => setAmount(Number(e.target.value))} aria-label="Custom amount" style={{
                width: "100%", padding: "0.7rem 0.85rem 0.7rem 1.6rem", fontFamily: "var(--font-body)", fontSize: "var(--text-base)",
                border: "1px solid var(--border-default)", borderRadius: "var(--radius-sm)", color: "var(--text-strong)",
              }} />
            </div>

            {/* Fund */}
            <label style={{ fontFamily: "var(--font-label)", fontWeight: 600, fontSize: "var(--text-sm)", color: "var(--text-strong)" }}>Designate to</label>
            <div style={{ display: "flex", gap: "var(--space-2)", flexWrap: "wrap", margin: "var(--space-3) 0 var(--space-6)" }}>
              {funds.map((f) => (
                <button key={f} onClick={() => setFund(f)} style={{
                  padding: "0.45rem 0.9rem", borderRadius: "var(--radius-pill)", cursor: "pointer",
                  fontFamily: "var(--font-label)", fontWeight: 600, fontSize: "var(--text-sm)",
                  border: fund === f ? "1px solid var(--accent)" : "1px solid var(--border-default)",
                  background: fund === f ? "var(--accent)" : "var(--white)",
                  color: fund === f ? "var(--white)" : "var(--text-body)",
                }}>{f}</button>
              ))}
            </div>

            <Button variant="accent" fullWidth size="lg">
              Give ${amount || 0}{freq === "monthly" ? " / month" : ""}
            </Button>
            <p style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 6, margin: "var(--space-3) 0 0", fontSize: "var(--text-xs)", color: "var(--text-muted)" }}>
              <i data-lucide="lock" style={{ width: 13, height: 13 }}></i> Secure giving · you'll receive a receipt by email
            </p>
          </Card>

          {/* Ways to give */}
          <div>
            <SectionHeading eyebrow="Ways to Give" title="However is easiest for you" rule />
            <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)", marginTop: "var(--space-5)" }}>
              {ways.map((w) => (
                <div key={w.title} style={{ display: "flex", gap: "var(--space-4)", alignItems: "flex-start" }}>
                  <span style={{ flex: "none", width: 44, height: 44, borderRadius: "var(--radius-md)", background: "var(--surface-leaf-soft)", color: "var(--leaf-700)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                    <i data-lucide={w.icon} style={{ width: 22, height: 22 }}></i>
                  </span>
                  <div>
                    <h4 style={{ margin: "0 0 2px", fontSize: "var(--text-h4)" }}>{w.title}</h4>
                    <p style={{ margin: 0, fontSize: "var(--text-sm)", color: "var(--text-body)", lineHeight: 1.6 }}>{w.body}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Section>

      {/* Scripture band */}
      <Section bg="inverse">
        <div style={{ display: "flex", justifyContent: "center" }}>
          <ScriptureQuote reference="2 Corinthians 9:7" translation="CSB" tone="light" size="lg" align="center">
            Each person should do as he has decided in his heart — not reluctantly or out of
            compulsion, since God loves a cheerful giver.
          </ScriptureQuote>
        </div>
      </Section>

      {/* Reassurance */}
      <Section bg="page" style={{ paddingTop: "var(--space-8)", paddingBottom: "var(--space-9)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--space-5)" }} className="beliefs-grid">
          {[
            { icon: "shield-check", t: "Stewarded with care", b: "Our elders oversee the church's finances with transparency and accountability to the congregation." },
            { icon: "sprout", t: "Invested in the mission", b: "Gifts fund teaching, discipleship, benevolence, and outreach like Operation Christmas Child." },
            { icon: "receipt", t: "Tax-deductible", b: "Grace & Truth Church is a registered nonprofit; year-end giving statements are provided." },
          ].map((x) => (
            <Card key={x.t} padding="lg">
              <span style={{ display: "inline-flex", width: 44, height: 44, borderRadius: "var(--radius-md)", background: "var(--blue-100)", color: "var(--accent)", alignItems: "center", justifyContent: "center", marginBottom: "var(--space-3)" }}>
                <i data-lucide={x.icon} style={{ width: 22, height: 22 }}></i>
              </span>
              <h4 style={{ margin: "0 0 var(--space-2)", fontSize: "var(--text-h4)" }}>{x.t}</h4>
              <p style={{ margin: 0, fontSize: "var(--text-sm)", color: "var(--text-body)", lineHeight: 1.6 }}>{x.b}</p>
            </Card>
          ))}
        </div>
      </Section>
    </div>
  );
}

window.GiveScreen = GiveScreen;