// donate.jsx — Donation page: full-bleed bg, frosted glass form, desktop two-column

const PRESET_AMOUNTS = [10, 25, 50, 100];

function DonatePage({ onNavigate, onBack }) {
  const [frequency, setFrequency] = React.useState("monthly");
  const [amount, setAmount] = React.useState(25);
  const [custom, setCustom] = React.useState("");
  const [name, setName] = React.useState("");
  const [cardNumber, setCardNumber] = React.useState("");
  const [expiry, setExpiry] = React.useState("");
  const [cvc, setCvc] = React.useState("");

  const displayAmount = custom ? parseFloat(custom) || 0 : amount;

  function formatCard(val) {
    return val.replace(/\D/g, "").slice(0, 16).replace(/(.{4})/g, "$1 ").trim();
  }
  function formatExpiry(val) {
    const d = val.replace(/\D/g, "").slice(0, 4);
    return d.length > 2 ? d.slice(0, 2) + " / " + d.slice(2) : d;
  }

  const inputBase = {
    width: "100%", boxSizing: "border-box",
    padding: "12px 14px",
    fontFamily: "var(--font-sans)", fontSize: 15, color: "#FBF7F4",
    background: "rgba(255,255,255,0.18)",
    border: "1px solid rgba(255,255,255,0.28)",
    borderRadius: "var(--r-sm)",
    outline: "none",
  };

  const lbl = {
    fontSize: 11, fontWeight: 700, color: "rgba(251,247,244,0.42)",
    marginBottom: 7, letterSpacing: "0.07em", textTransform: "uppercase", display: "block",
  };

  return (
    <>
      <style>{`
        .donate-input::placeholder { color: rgba(251,247,244,0.28); }
        .donate-input:focus { border-color: rgba(255,255,255,0.50) !important; background: rgba(255,255,255,0.24) !important; }

        /* Desktop: form left, hero right, full-height no-scroll */
        .live-desktop .donate-page-wrap {
          min-height: auto !important;
          height: calc(100vh - 76px);
          padding: 0 !important;
        }
        .desktop-frame .donate-page-wrap {
          min-height: auto !important;
          height: 708px;
          padding: 0 !important;
        }
        .live-desktop .donate-layout {
          display: flex !important;
          flex-direction: row !important;
          height: 100% !important;
          max-width: none !important;
          margin: 0 !important;
          padding: 0 max(48px, calc((100vw - 1200px) / 2)) !important;
          gap: 64px !important;
          align-items: center !important;
        }
        .desktop-frame .donate-layout {
          display: flex !important;
          flex-direction: row !important;
          height: 100% !important;
          max-width: none !important;
          margin: 0 !important;
          padding: 0 80px !important;
          gap: 56px !important;
          align-items: center !important;
        }
        .live-desktop .donate-form-col,
        .desktop-frame .donate-form-col {
          order: 1;
          width: 420px !important;
          flex-shrink: 0 !important;
          max-height: 100% !important;
          overflow-y: auto !important;
          scrollbar-width: none !important;
        }
        .live-desktop .donate-form-col::-webkit-scrollbar,
        .desktop-frame .donate-form-col::-webkit-scrollbar { display: none; }
        .live-desktop .donate-hero-col,
        .desktop-frame .donate-hero-col {
          order: 2;
          flex: 1 !important;
          min-width: 0 !important;
        }
        .live-desktop .donate-hero-col h1,
        .desktop-frame .donate-hero-col h1 { font-size: 54px !important; }
        .live-desktop .donate-hero-col p,
        .desktop-frame .donate-hero-col p { font-size: 17px !important; }
        .live-desktop .donate-card,
        .desktop-frame .donate-card { padding: 20px !important; gap: 14px !important; }
        .live-desktop .donate-input,
        .desktop-frame .donate-input { padding: 9px 12px !important; font-size: 14px !important; }
        .live-desktop .donate-footer-wrap,
        .desktop-frame .donate-footer-wrap { display: none !important; }
      `}</style>

      {/* Page wrapper — background image sits here, no fixed-position elements */}
      <div
        className="donate-page-wrap"
        style={{
          position: "relative",
          minHeight: "100vh",
          padding: "48px 24px 80px",
          boxSizing: "border-box",
          backgroundImage: "url('uploads/DSC_0258.JPG')",
          backgroundSize: "cover",
          backgroundPosition: "center",
          width: "100%",
        }}
      >
        {/* Dark overlay */}
        <div style={{
          position: "absolute", inset: 0, zIndex: 0,
          background: "linear-gradient(160deg, rgba(28,14,20,0.58) 0%, rgba(18,10,14,0.75) 100%)",
          pointerEvents: "none",
        }} />

        {/* Content */}
        <div className="donate-layout" style={{ position: "relative", zIndex: 1, maxWidth: 520, margin: "0 auto", display: "flex", flexDirection: "column", gap: 28 }}>

          {/* Hero text: mobile=top, desktop=right column */}
          <div className="donate-hero-col">
            <div className="eyebrow" style={{ color: "rgba(251,247,244,0.55)", marginBottom: 10 }}>Support LittleCareFund</div>
            <h1 className="display" style={{ fontSize: 36, color: "#FBF7F4", margin: "0 0 14px" }}>
              Give monthly.<br />Change a life.
            </h1>
            <p style={{ margin: 0, fontSize: 15.5, lineHeight: 1.55, color: "rgba(251,247,244,0.65)" }}>
              Some kids are this close. They just need a few more people to say yes. A monthly gift means we can keep moving — and the most urgent cases don't have to wait.
            </p>
          </div>

          {/* Form: mobile=below hero, desktop=left column */}
          <div className="donate-form-col">
            <div className="donate-card" style={{
              background: "rgba(86,52,64,0.65)",
              backdropFilter: "blur(28px) saturate(120%)",
              WebkitBackdropFilter: "blur(28px) saturate(120%)",
              border: "1px solid rgba(255,255,255,0.10)",
              borderRadius: "var(--r-xl)",
              padding: "24px 22px",
              display: "flex", flexDirection: "column", gap: 18,
            }}>

              {/* Frequency */}
              <div>
                <span style={lbl}>Donation frequency</span>
                <div style={{ display: "flex", borderRadius: "var(--r-sm)", overflow: "hidden", border: "1px solid rgba(255,255,255,0.14)", width: "fit-content" }}>
                  {["monthly", "once"].map(f => (
                    <button key={f} onClick={() => setFrequency(f)} style={{
                      padding: "9px 22px", border: 0, cursor: "pointer",
                      fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 600,
                      background: frequency === f ? "rgba(255,255,255,0.20)" : "transparent",
                      color: frequency === f ? "#FBF7F4" : "rgba(251,247,244,0.45)",
                      transition: "background 0.15s, color 0.15s",
                    }}>
                      {f === "monthly" ? "Monthly" : "One-time"}
                    </button>
                  ))}
                </div>
              </div>

              {/* Amount */}
              <div>
                <span style={lbl}>Select amount (AUD)</span>
                <div style={{ display: "flex", gap: 7, flexWrap: "wrap", marginBottom: 8 }}>
                  {PRESET_AMOUNTS.map(a => (
                    <button key={a} onClick={() => { setAmount(a); setCustom(""); }} style={{
                      padding: "8px 16px", borderRadius: "var(--r-sm)", border: "1px solid",
                      borderColor: amount === a && !custom ? "rgba(255,255,255,0.55)" : "rgba(255,255,255,0.14)",
                      cursor: "pointer", fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 600,
                      background: amount === a && !custom ? "rgba(255,255,255,0.20)" : "rgba(255,255,255,0.07)",
                      color: amount === a && !custom ? "#FBF7F4" : "rgba(251,247,244,0.55)",
                      transition: "all 0.15s",
                    }}>
                      A${a}
                    </button>
                  ))}
                </div>
                <div style={{ position: "relative" }}>
                  <span style={{ position: "absolute", left: 14, top: "50%", transform: "translateY(-50%)", fontSize: 14, fontWeight: 600, color: "rgba(251,247,244,0.35)", pointerEvents: "none" }}>A$</span>
                  <input type="number" placeholder="Other amount" value={custom} onChange={e => setCustom(e.target.value)} className="donate-input" style={{ ...inputBase, paddingLeft: 34 }} />
                </div>
              </div>

              {/* Summary */}
              <div style={{
                background: "rgba(255,255,255,0.07)", border: "1px solid rgba(255,255,255,0.10)",
                borderRadius: "var(--r-md)", padding: "13px 16px",
                display: "flex", justifyContent: "space-between", alignItems: "center",
              }}>
                <div style={{ fontSize: 13.5, color: "rgba(251,247,244,0.50)" }}>
                  {frequency === "monthly" ? "Monthly gift" : "One-time gift"}
                </div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 500, color: "#FBF7F4", letterSpacing: "-0.02em" }}>
                  A${displayAmount > 0 ? displayAmount.toFixed(2) : "0.00"}
                </div>
              </div>

              {/* Payment details */}
              <div>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 13 }}>
                  <span style={lbl}>Payment details</span>
                  <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                      <path d="M6 0a6 6 0 100 12A6 6 0 006 0z" fill="#635BFF"/>
                      <path d="M7.2 4.5c0-.45-.36-.75-.9-.75-.63 0-1.17.27-1.53.54L4.5 3.3C5.01 2.94 5.73 2.7 6.54 2.7c1.26 0 2.16.66 2.16 1.8 0 1.53-1.98 1.98-1.98 3h-1.44c0-1.26 1.92-1.8 1.92-3zM5.4 8.85a.9.9 0 111.8 0 .9.9 0 01-1.8 0z" fill="#fff"/>
                    </svg>
                    <span style={{ fontSize: 11, fontWeight: 700, color: "#8B83FF", letterSpacing: "0.02em" }}>Powered by Stripe</span>
                  </div>
                </div>

                <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
                  <div>
                    <label style={{ ...lbl, marginBottom: 5 }}>Cardholder name</label>
                    <input type="text" placeholder="Jane Smith" value={name} onChange={e => setName(e.target.value)} className="donate-input" style={inputBase} />
                  </div>
                  <div>
                    <label style={{ ...lbl, marginBottom: 5 }}>Card number</label>
                    <div style={{ position: "relative" }}>
                      <input type="text" inputMode="numeric" placeholder="1234 5678 9012 3456" value={cardNumber} onChange={e => setCardNumber(formatCard(e.target.value))} className="donate-input" style={{ ...inputBase, paddingRight: 52 }} />
                      <div style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", display: "flex", gap: 4, opacity: 0.85 }}>
                        <svg width="28" height="18" viewBox="0 0 28 18" fill="none"><rect width="28" height="18" rx="3" fill="#1A1F71"/><rect x="0" y="6" width="28" height="6" fill="#F7B600"/></svg>
                        <svg width="28" height="18" viewBox="0 0 28 18" fill="none"><rect width="28" height="18" rx="3" fill="#EB001B" fillOpacity=".15"/><circle cx="10" cy="9" r="6" fill="#EB001B"/><circle cx="18" cy="9" r="6" fill="#F79E1B"/></svg>
                      </div>
                    </div>
                  </div>
                  <div style={{ display: "flex", gap: 10 }}>
                    <div style={{ flex: 1 }}>
                      <label style={{ ...lbl, marginBottom: 5 }}>Expiry</label>
                      <input type="text" inputMode="numeric" placeholder="MM / YY" value={expiry} onChange={e => setExpiry(formatExpiry(e.target.value))} className="donate-input" style={inputBase} />
                    </div>
                    <div style={{ flex: 1 }}>
                      <label style={{ ...lbl, marginBottom: 5 }}>CVC</label>
                      <input type="text" inputMode="numeric" placeholder="123" value={cvc} onChange={e => setCvc(e.target.value.replace(/\D/g, "").slice(0, 4))} className="donate-input" style={inputBase} />
                    </div>
                  </div>
                  <button className="btn btn--primary btn--lg" style={{ width: "100%", marginTop: 2 }} onClick={() => alert("Stripe payment integration goes here.")}>
                    {frequency === "monthly"
                      ? `Give A$${displayAmount > 0 ? displayAmount.toFixed(2) : "0.00"} / month`
                      : `Give A$${displayAmount > 0 ? displayAmount.toFixed(2) : "0.00"}`}
                  </button>
                  <div style={{ display: "flex", alignItems: "center", gap: 6, justifyContent: "center" }}>
                    <svg width="12" height="12" viewBox="0 0 14 14" fill="none">
                      <path d="M7 1L2 3v4c0 3 2.5 5.5 5 6 2.5-.5 5-3 5-6V3L7 1z" stroke="rgba(251,247,244,0.32)" strokeWidth="1.4" fill="none"/>
                      <path d="M4.5 7l1.5 1.5 3-3" stroke="rgba(251,247,244,0.32)" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                    <span style={{ fontSize: 11.5, color: "rgba(251,247,244,0.32)" }}>256-bit SSL encryption. Your card details are never stored.</span>
                  </div>
                </div>
              </div>

            </div>
          </div>

        </div>
      </div>

      <div className="donate-footer-wrap">
        <Footer onNavigate={onNavigate} />
      </div>
    </>
  );
}

Object.assign(window, { DonatePage });