// Footer with final message + CTAs

function FinalCTA({ onGive, onPray }) {
  return (
    <section className="paper" style={{ padding: "140px 0 100px", position: "relative", textAlign: "center" }}>
      <div className="container" style={{ maxWidth: 820 }}>
        <div style={{ color: "var(--gold-500)", display: "inline-block", marginBottom: 28 }}>
          <Glyph name="tree" size={44} />
        </div>
        <h2 style={{ fontSize: "clamp(36px, 5vw, 60px)", lineHeight: 1.15 }}>
          <em style={{ fontWeight: 400 }}>We are not just<br/>building a school.</em><br/>
          We are planting something<br/>
          that will grow for <span style={{ color: "var(--moss-600)" }}>generations</span>.
        </h2>

        <div style={{ marginTop: 48, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
          <button className="btn btn-gold" onClick={onGive}>Give</button>
          <button className="btn btn-ghost-dark" onClick={onPray}>Pray</button>
          <button className="btn btn-ghost-dark" onClick={() => {
            if (navigator.share) navigator.share({ title: "New Eden Academy", text: "A faith-based school, built step by step.", url: location.href }).catch(()=>{});
            else alert("Link copied in spirit · share /neweden");
          }}>Share the Vision</button>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="night" style={{ paddingTop: 60, paddingBottom: 40, borderTop: "1px solid rgba(181,168,107,0.18)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 40 }} className="foot-grid">
          <div>
            <div className="brand" style={{ marginBottom: 16 }}>
              <div className="brand-mark"><Glyph name="tree" size={20} /></div>
              <div className="brand-text">
                <div className="brand-name">NEW EDEN</div>
                <div className="brand-tag">FAITH · LEARNING · PURPOSE</div>
              </div>
            </div>
            <p style={{ fontSize: 13, lineHeight: 1.7, color: "rgba(255,241,212,0.6)", maxWidth: 340 }}>
              A donation-supported, faith-based school being built with patience and prayer. 501(c)(3) nonprofit. No gift is small.
            </p>
          </div>

          {[
            { h: "Visit", items: ["The Academy", "Our Faith", "Newsroom"] },
            { h: "Support", items: ["Give", "Pray", "Encourage", "Other Ways"] },
            { h: "Contact", items: ["hello@neweden.academy", "Prayer line · 24/7", "Partnerships", "Press"] },
          ].map((col, i) => (
            <div key={i}>
              <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.25em", textTransform: "uppercase", color: "var(--gold-500)", marginBottom: 16 }}>{col.h}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {col.items.map(it => (
                  <li key={it}>
                    <a href="#" style={{ fontSize: 13, color: "rgba(255,241,212,0.7)", textDecoration: "none", transition: "color 180ms" }}>{it}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 60, paddingTop: 28, borderTop: "1px solid rgba(255,241,212,0.1)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
          <div style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,241,212,0.45)" }}>
            © {new Date().getFullYear()} New Eden Academy · All vision, in His name.
          </div>
          <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 14, color: "var(--gold-400)" }}>
            "Unless the Lord builds the house, the builders labor in vain." — Ps. 127:1
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 760px) {
          .foot-grid { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

Object.assign(window, { FinalCTA, Footer });