function DonateModal({open, initialTier, onClose}) {
  const [mode, setMode] = React.useState(initialTier?.mode || 'monthly');
  const [tier, setTier] = React.useState(initialTier?.tier || window.SPONS_TIERS.monthly[0]);
  const [trib, setTrib] = React.useState('none');
  const [pay, setPay] = React.useState('card');
  const tiers = mode === 'monthly' ? window.SPONS_TIERS.monthly : window.SPONS_TIERS.oneTime;

  React.useEffect(() => { if (initialTier) { setMode(initialTier.mode); setTier(initialTier.tier); } }, [initialTier]);

  if (!open) return null;
  const amtNum = parseInt(String(tier.amt).replace(/[^0-9]/g, ''), 10) || 0;
  const showPrayer = mode === 'monthly' && amtNum >= 180;

  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <button className="close" onClick={onClose}><Ico.close/></button>
        <h2>Open the Door <em>to Blessing</em></h2>
        <p className="sub">Your sponsorship is a direct zechus — a child placed on the path to Torah, in your name or in memory of someone you honor.</p>

        <div className="seg">
          <div className={'opt'+(mode==='monthly'?' on':'')} onClick={() => setMode('monthly')}>Monthly</div>
          <div className={'opt'+(mode==='oneTime'?' on':'')} onClick={() => setMode('oneTime')}>One-time</div>
        </div>

        <div className="tier-grid">
          {tiers.map((t,i) => (
            <div key={i} className={'tier'+(t.label===tier.label?' on':'')} onClick={() => setTier(t)}>
              <div className="price">{t.amt}<span style={{fontSize:'.7rem', color:'var(--slate)', fontFamily:'var(--font-sans)', fontWeight:500}}> {t.per}</span></div>
              <div className="nm">{t.label}</div>
            </div>
          ))}
        </div>

        <div className="field">
          <label>Custom amount (USD)</label>
          <input type="text" placeholder="e.g. 250" />
        </div>

        <div className="field">
          <label>Tribute / Dedication</label>
          <div className="tribute-row">
            <button className={'trib'+(trib==='none'?' on':'')} onClick={() => setTrib('none')}>None</button>
            <button className={'trib'+(trib==='honor'?' on':'')} onClick={() => setTrib('honor')}>In Honor Of</button>
            <button className={'trib'+(trib==='memory'?' on':'')} onClick={() => setTrib('memory')}>In Memory Of</button>
            <button className={'trib'+(trib==='yahrzeit'?' on':'')} onClick={() => setTrib('yahrzeit')}>Yahrzeit</button>
          </div>
          {trib !== 'none' && (
            <input type="text" placeholder={trib==='yahrzeit' ? 'Hebrew name + Hebrew date (e.g. 14 Adar)' : 'Name'} />
          )}
        </div>

        {showPrayer && (
          <div className="gate">
            <Ico.spark/>
            <div>
              <p className="t">You qualify for a prayer request</p>
              <p className="d">As a $180+/mo sponsor, thousands of pure children will daven for you. Add a Hebrew name + mother's name on the next step.</p>
            </div>
          </div>
        )}

        <div className="field">
          <label>Payment method</label>
          <div className="pay-row">
            <div className={'pay'+(pay==='card'?' on':'')} onClick={() => setPay('card')}>Credit Card</div>
            <div className={'pay'+(pay==='paypal'?' on':'')} onClick={() => setPay('paypal')}>PayPal</div>
            <div className={'pay'+(pay==='applepay'?' on':'')} onClick={() => setPay('applepay')}>Apple Pay</div>
            <div className={'pay'+(pay==='googlepay'?' on':'')} onClick={() => setPay('googlepay')}>Google Pay</div>
            <div className={'pay'+(pay==='zelle'?' on':'')} onClick={() => setPay('zelle')}>Zelle</div>
          </div>
        </div>

        <button className="btn-full">Continue · {tier.amt} {mode === 'monthly' ? '/mo' : 'one-time'}</button>
        <p style={{fontFamily:'var(--font-sans)', fontSize:'.72rem', color:'var(--slate)', textAlign:'center', marginTop:'1rem', lineHeight:1.5}}>Chinuch Atzmai is a 501(c)(3). All gifts are tax-deductible.</p>
      </div>
    </div>
  );
}
window.DonateModal = DonateModal;