// Encouragement wall + other ways to help

const { useState: useStateS } = React;

const SEED_MESSAGES = [
  { name: "Rachel M.", text: "Praying this vision takes root deeply. Our family is with you from the first brick.", when: "2 hours ago" },
  { name: "Anonymous", text: "I have walked this road before. Build slow. Build holy. The Lord honors patience.", when: "yesterday" },
  { name: "Pastor David", text: "Our congregation is behind this. Please send us updates — we want to pray specifically for each phase.", when: "3 days ago" },
  { name: "The Ortega Family", text: "Our three children are already asking when they can enroll. Thank you for dreaming this for our generation.", when: "1 week ago" },
  { name: "Anonymous", text: "I can't give much, but I give what I can every month. A mustard seed.", when: "1 week ago" },
  { name: "Marcus T.", text: "Architect here. If you need pro-bono schematic work for the master plan, reach out.", when: "2 weeks ago" },
];

function EncouragementWall({ messages, onSubmit }) {
  const [name, setName] = useStateS("");
  const [msg, setMsg] = useStateS("");
  const [sent, setSent] = useStateS(false);

  const submit = (e) => {
    e.preventDefault();
    if (!msg.trim()) return;
    onSubmit({ name: name.trim() || "Anonymous", text: msg.trim(), when: "just now", pending: true });
    setName(""); setMsg(""); setSent(true);
    setTimeout(() => setSent(false), 3500);
  };

  return (
    <section id="wall" className="paper" style={{ padding: "140px 0 120px", position: "relative" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 72, alignItems: "start" }} className="wall-grid">
          <div style={{ position: "sticky", top: 100 }}>
            <div className="rule left" style={{ marginBottom: 24 }}>Encouragement Wall</div>
            <h2 style={{ fontSize: "clamp(38px, 4.5vw, 58px)" }}>
              Words that<br/><em style={{ fontWeight: 400, color: "var(--moss-600)" }}>hold us up.</em>
            </h2>
            <p style={{ marginTop: 20, fontSize: 16, lineHeight: 1.7, color: "rgba(47,51,29,0.7)", maxWidth: 460 }}>
              Leave a prayer, a verse, a memory, a dream for these children. Every message is read by our team. Moderated before posting.
            </p>

            <form onSubmit={submit} style={{ marginTop: 32, background: "var(--cream-50)", padding: 28, border: "1px solid rgba(47,51,29,0.1)" }}>
              <label className="field">Your name (optional)</label>
              <input type="text" placeholder="Anonymous" value={name} onChange={e => setName(e.target.value)} />

              <label className="field" style={{ marginTop: 18 }}>Your encouragement</label>
              <textarea rows={5} placeholder="A word, a prayer, a verse, a hope..."
                value={msg} onChange={e => setMsg(e.target.value)}
                style={{ resize: "vertical" }} />

              <button type="submit" className="btn btn-gold" style={{ marginTop: 18, width: "100%" }}>
                {sent ? "Sent · Thank you" : "Send Encouragement"}
              </button>
              <div style={{ marginTop: 12, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(47,51,29,0.5)", textAlign: "center" }}>
                Reviewed before posting · 1–2 days
              </div>
            </form>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22 }} className="wall-cards">
            {messages.map((m, i) => (
              <div key={i} className="postcard" style={{ "--r": (i % 2 === 0 ? "-0.6" : "0.6") + "deg", opacity: m.pending ? 0.75 : 1 }}>
                <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 16, lineHeight: 1.55, color: "var(--navy-900)" }}>
                  &ldquo;{m.text}&rdquo;
                </div>
                <div style={{ marginTop: 18, paddingTop: 14, borderTop: "1px dashed rgba(47,51,29,0.15)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--gold-600, rgb(138,125,77))" }}>
                    — {m.name}
                  </div>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.14em", color: "rgba(47,51,29,0.45)" }}>
                    {m.pending ? "pending review" : m.when}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .wall-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .wall-grid > div:first-child { position: static !important; }
        }
        @media (max-width: 560px) {
          .wall-cards { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function OtherWaysToHelp() {
  const kinds = ["Advice", "Resources", "Partnership", "Land", "Volunteer", "General"];
  const [kind, setKind] = useStateS("Advice");
  const [name, setName] = useStateS("");
  const [email, setEmail] = useStateS("");
  const [message, setMessage] = useStateS("");
  const [sent, setSent] = useStateS(false);

  const submit = async (e) => {
    e.preventDefault();
    if (!email || !message) return;
    setSent(true);
    const KIND_MAP = { Advice: "ADVICE", Resources: "RESOURCES", Partnership: "PARTNERSHIPS", Land: "LAND", Volunteer: "GENERAL", General: "GENERAL" };
    try {
      await NE_API.submitHelp(KIND_MAP[kind] || "GENERAL", name.trim() || kind, email.trim(), message.trim());
    } catch (err) { console.warn("help submit failed", err); }
    setTimeout(() => { setSent(false); setName(""); setEmail(""); setMessage(""); setKind("Advice"); }, 3000);
  };

  return (
    <section id="help" className="night" style={{ padding: "120px 0", position: "relative" }}>
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 60 }}>
          <div className="rule" style={{ justifyContent: "center", maxWidth: 360, margin: "0 auto 22px", color: "var(--gold-400)" }}>Other Ways to Help</div>
          <h2 style={{ fontSize: "clamp(38px, 4.5vw, 58px)", color: "var(--cream-50)" }}>
            Some gifts<br/><em style={{ fontWeight: 400, color: "var(--gold-400)" }}>aren't money.</em>
          </h2>
          <p style={{ marginTop: 20, fontSize: 16, maxWidth: 560, margin: "20px auto 0", color: "rgba(255,241,212,0.72)", lineHeight: 1.7 }}>
            Land. Counsel. A warehouse. A connection. A prayer group. If you have something the vision needs — tell us.
          </p>
        </div>

        <form onSubmit={submit} style={{ maxWidth: 820, margin: "0 auto", background: "rgba(255,241,212,0.04)", padding: 40, border: "1px solid rgba(181,168,107,0.2)" }}>
          <div style={{ marginBottom: 28 }}>
            <label className="field" style={{ color: "rgba(255,241,212,0.6)" }}>I'd like to offer</label>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {kinds.map(k => (
                <button type="button" key={k} onClick={() => setKind(k)}
                  style={{
                    padding: "10px 18px",
                    border: "1px solid " + (kind === k ? "var(--gold-500)" : "rgba(255,241,212,0.2)"),
                    background: kind === k ? "rgba(181,168,107,0.12)" : "transparent",
                    color: kind === k ? "var(--gold-300)" : "rgba(255,241,212,0.7)",
                    fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
                    borderRadius: 2, transition: "all 180ms",
                  }}>
                  {k}
                </button>
              ))}
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
            <div>
              <label className="field" style={{ color: "rgba(255,241,212,0.6)" }}>Your name</label>
              <input type="text" value={name} onChange={e => setName(e.target.value)}
                style={{ color: "var(--cream-50)", borderColor: "rgba(255,241,212,0.2)" }} />
            </div>
            <div>
              <label className="field" style={{ color: "rgba(255,241,212,0.6)" }}>Email</label>
              <input type="email" value={email} onChange={e => setEmail(e.target.value)} required
                style={{ color: "var(--cream-50)", borderColor: "rgba(255,241,212,0.2)" }} />
            </div>
          </div>

          <div style={{ marginTop: 20 }}>
            <label className="field" style={{ color: "rgba(255,241,212,0.6)" }}>Tell us more</label>
            <textarea rows={5} value={message} onChange={e => setMessage(e.target.value)} required
              style={{ color: "var(--cream-50)", borderColor: "rgba(255,241,212,0.2)", resize: "vertical" }} />
          </div>

          <div style={{ marginTop: 28, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,241,212,0.5)" }}>
              We respond personally · usually within a week
            </div>
            <button type="submit" className="btn btn-gold">{sent ? "Message Sent" : "Send to the Team"}</button>
          </div>
        </form>
      </div>
    </section>
  );
}

Object.assign(window, { EncouragementWall, OtherWaysToHelp, SEED_MESSAGES });