// Give (Endowment) page

const { useState: useStateG } = React;

const GiveForm = () => {
  const [amount, setAmount] = useStateG(500);
  const [custom, setCustom] = useStateG('');
  const [recurring, setRecurring] = useStateG('once');
  const [designation, setDesignation] = useStateG('general');
  const [submitted, setSubmitted] = useStateG(false);

  const setPreset = (v) => { setAmount(v); setCustom(''); };
  const setCustomVal = (v) => {
    setCustom(v);
    const n = Number(v);
    if (!isNaN(n) && n > 0) setAmount(n);
  };

  const presets = [100, 500, 1000, 5000];

  if (submitted) {
    return (
      <div className="give-form" style={{ textAlign: 'center', padding: '64px 48px' }}>
        <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--warm)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#1a0f00', marginBottom: 24, boxShadow: '0 0 32px var(--warm-glow)' }}>
          <Icon name="check" size={32}/>
        </div>
        <h3 style={{ fontSize: 28, color: 'var(--ink-0)', marginBottom: 12, fontWeight: 600 }}>Thank you.</h3>
        <p className="ink-2" style={{ fontSize: 16 }}>A receipt is on its way. The development team will follow up within two business days with a personal note.</p>
        <div className="mono ink-3" style={{ fontSize: 11, letterSpacing: '0.06em', marginTop: 24 }}>GIFT ID · GFT-2026-{Math.floor(Math.random()*9000+1000)}</div>
      </div>
    );
  }

  return (
    <div className="give-form">
      <h3 style={{ fontSize: 22, color: 'var(--ink-0)', margin: '0 0 8px' }}>Make a gift</h3>
      <p className="ink-2" style={{ fontSize: 14, marginBottom: 24 }}>The VR School is a 501(c)(3) educational nonprofit. Gifts are tax-deductible to the fullest extent allowed.</p>

      <div className="field-label" style={{ marginBottom: 8 }}>Frequency</div>
      <div className="give-recurring">
        {[
          { id: 'once', label: 'Give once' },
          { id: 'monthly', label: 'Monthly' },
          { id: 'annual', label: 'Annually' },
        ].map(r => (
          <button key={r.id} className={recurring === r.id ? 'active' : ''} onClick={() => setRecurring(r.id)}>{r.label}</button>
        ))}
      </div>

      <div className="field-label" style={{ marginBottom: 8 }}>Amount (USD)</div>
      <div className="give-amount-row">
        {presets.map(p => (
          <button key={p} className={`give-amt-btn ${!custom && amount === p ? 'active' : ''}`} onClick={() => setPreset(p)}>
            ${p.toLocaleString()}
          </button>
        ))}
      </div>
      <input
        className="field-input"
        type="number"
        placeholder="Other amount"
        value={custom}
        onChange={(e) => setCustomVal(e.target.value)}
      />

      <div className="field-label" style={{ marginTop: 24, marginBottom: 8 }}>Designate to</div>
      <select className="field-input" value={designation} onChange={(e) => setDesignation(e.target.value)} style={{ appearance: 'none', backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><polyline points='1 1 6 6 11 1' fill='none' stroke='%23a1a1aa' stroke-width='1.5'/></svg>")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 16px center', paddingRight: 40 }}>
        <option value="general">General fund · area of greatest need</option>
        <option value="scholarship">Financial aid scholarship fund</option>
        <option value="worlds">World generation fund · new Marble worlds</option>
        <option value="faculty">Faculty endowment</option>
        <option value="research">Research &amp; spatial intelligence lab</option>
        <option value="global">Global cohort fund · 20+ countries</option>
      </select>

      <div className="field" style={{ marginTop: 24 }}>
        <label className="field-label">Email</label>
        <input className="field-input" type="email" placeholder="you@thevr.school"/>
      </div>

      <button className="btn btn-primary btn-lg" style={{ marginTop: 32, width: '100%', justifyContent: 'center', background: 'var(--warm)', color: '#1a0f00' }} onClick={() => setSubmitted(true)}>
        Give ${amount.toLocaleString()} {recurring !== 'once' && `· ${recurring === 'monthly' ? 'monthly' : 'annually'}`} <Icon name="arrowRight" size={16}/>
      </button>
      <div className="mono ink-3" style={{ fontSize: 10, letterSpacing: '0.04em', marginTop: 16, textAlign: 'center' }}>
        SECURE · STRIPE · 501(C)(3) · EIN [REAL EIN HERE]
      </div>
    </div>
  );
};

const GivePage = () => (
  <>
    <Nav/>
    <section className="aud-hero opener" data-screen-label="01 Hero">
      <ParticleField density={40} color="245, 158, 11" baseAlpha={0.25} speed={0.03}/>
      <div className="container">
        <div className="page-eyebrow" style={{ color: 'var(--warm)' }}><span className="bar" style={{ background: 'var(--warm)' }}></span>GIVE · ENDOWMENT · 2026 CAMPAIGN</div>
        <h1>Fund a school<br/>that scales.</h1>
        <p className="lede">
          Every gift goes toward one of three places: more students in more countries, more worlds in more disciplines, or the faculty who make either possible. 402 students today. Several hundred million children, eventually.
        </p>
        <div className="actions">
          <a className="btn btn-primary btn-lg" href="#form" style={{ background: 'var(--warm)', color: '#1a0f00' }}>Give now <Icon name="arrowRight" size={16}/></a>
          <a className="btn btn-secondary btn-lg" href="partners.html">For corporate &amp; foundation partners</a>
        </div>
      </div>
    </section>

    <section className="aud-block" data-screen-label="02 Impact">
      <div className="container">
        <div className="page-eyebrow"><span className="bar"></span>WHAT YOUR GIFT DOES · THREE BUCKETS</div>
        <h2>Where the money goes.</h2>
        <p className="sub">We publish a full annual report. Below is the working breakdown for the 2026 campaign.</p>
        <div className="give-impact">
          <div className="cell">
            <div className="amt">$2,400</div>
            <div className="funds">FUNDS</div>
            <div className="desc">One month of tuition for a student on full need-based aid. We have a waitlist of 180 families and capacity for 80 more this year.</div>
          </div>
          <div className="cell">
            <div className="amt">$250K</div>
            <div className="funds">FUNDS</div>
            <div className="desc">One new Marble world, end-to-end: generation, instructional design, teacher onboarding, curriculum integration, and a year of cohort use.</div>
          </div>
          <div className="cell">
            <div className="amt">$2M</div>
            <div className="funds">ENDOWS</div>
            <div className="desc">One endowed faculty chair, in perpetuity. The named gift supports a teacher across the full UC A–G subject area, plus the worlds tied to it.</div>
          </div>
        </div>
      </div>
    </section>

    <section className="aud-block alt" id="form" data-screen-label="03 Give form">
      <div className="container">
        <div style={{ textAlign: 'center' }}>
          <div className="page-eyebrow" style={{ justifyContent: 'center' }}><span className="bar"></span>MAKE A GIFT</div>
          <h2 style={{ margin: '12px auto', textAlign: 'center' }}>Give today.</h2>
          <p className="sub" style={{ textAlign: 'center', margin: '0 auto 0' }}>
            $100 funds a student's worlds for a month. $5,000 funds a cohort visit. Recurring gifts compound; we plan around them.
          </p>
        </div>
        <GiveForm/>
      </div>
    </section>

    <section className="aud-block" data-screen-label="04 Tiers">
      <div className="container">
        <div className="page-eyebrow"><span className="bar"></span>RECOGNITION TIERS</div>
        <h2>How we say thank you.</h2>
        <p className="sub">We are an independent school, not a stadium. Gifts are recognized; they are not branded onto students.</p>
        <div className="aud-pillars">
          <div className="aud-pillar">
            <div className="num">$100 – $999 · FRIENDS</div>
            <h4>Friends of the school</h4>
            <p>Listed in the annual report. Quarterly cohort recap newsletter. The most common gift size. The one we depend on.</p>
          </div>
          <div className="aud-pillar">
            <div className="num">$1,000 – $9,999 · BENEFACTORS</div>
            <h4>Benefactors' circle</h4>
            <p>Listed by name on the campus page. Annual virtual world visit with the head of school. Invitation to the May summit.</p>
          </div>
          <div className="aud-pillar">
            <div className="num">$10,000+ · LEADERSHIP</div>
            <h4>Leadership circle</h4>
            <p>Named scholarship cohort. Annual in-person dinner in Stanford. Advisory seat on the curriculum committee, if you want it.</p>
          </div>
        </div>
      </div>
    </section>

    <section className="aud-block alt" data-screen-label="05 Faith">
      <div className="container" style={{ maxWidth: 760, textAlign: 'center' }}>
        <div className="page-eyebrow" style={{ justifyContent: 'center' }}><span className="bar"></span>WHY GIVE</div>
        <h2 style={{ margin: '12px 0' }}>Three reasons people give.</h2>
        <p className="ink-1" style={{ fontSize: 18, lineHeight: 1.6, marginTop: 32 }}>
          One: <b style={{ color: 'var(--ink-0)' }}>Because they believe in the diploma.</b> A WASC-accredited diploma is the floor the school stands on, and the floor costs money to maintain.
        </p>
        <p className="ink-1" style={{ fontSize: 18, lineHeight: 1.6 }}>
          Two: <b style={{ color: 'var(--ink-0)' }}>Because they believe in the worlds.</b> Each new Marble world is a discipline opened to 402 students at once. Most of our donors give to fund a specific one.
        </p>
        <p className="ink-1" style={{ fontSize: 18, lineHeight: 1.6 }}>
          Three: <b style={{ color: 'var(--ink-0)' }}>Because they remember a teacher.</b> The school is built on the assumption that the most valuable thing in the world is a teacher in a room. We endow chairs because we believe that.
        </p>
        <p className="mono ink-3" style={{ fontSize: 13, letterSpacing: '0.04em', marginTop: 48 }}>
          THE VR SCHOOL · 501(C)(3) · EIN [REAL EIN HERE] · ALL GIFTS TAX-DEDUCTIBLE
        </p>
      </div>
    </section>

    <Footer/>
  </>
);

ReactDOM.createRoot(document.getElementById('root')).render(<GivePage/>);