const SPONS_TIERS = {
  monthly: [
    {amt:'$30',  per:'/mo', label:"Sponsor a Child",        ic:'child'},
    {amt:'$180', per:'/mo', label:"Sponsor a Family",       ic:'family'},
    {amt:'$1,000', per:'/mo', label:"Sponsor a Classroom", ic:'classroom'},
    {amt:'$2,500', per:'/mo', label:"Sponsor a Community", ic:'community'},
    {amt:'$5,000', per:'/mo', label:"Sponsor a Bus",        ic:'bus'},
    {amt:'$10,000+', per:'/mo', label:"School Partnership", ic:'school'},
  ],
  oneTime: [
    {amt:'$18',     per:'one-time', label:"Chai",                          ic:'spark'},
    {amt:'$30',     per:'one-time', label:"Sponsor a Month",               ic:'child'},
    {amt:'$180',    per:'one-time', label:"Support a Torah Journey",       ic:'family'},
    {amt:'$1,000',  per:'one-time', label:"Sponsor a Classroom for a Month", ic:'classroom'},
    {amt:'$5,000',  per:'one-time', label:"Strengthen a Community",        ic:'community'},
    {amt:'$25,000', per:'one-time', label:"Nationwide Day of Learning",    ic:'school'},
  ],
};

function SponsorshipGrid({onPick}) {
  const [mode, setMode] = React.useState('monthly');
  const tiers = mode === 'monthly' ? SPONS_TIERS.monthly : SPONS_TIERS.oneTime;
  return (
    <section className="section section-cream">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Ignite the Spark</div>
          <h2>Bring a Jewish Child <em>to Yiddishkeit</em></h2>
          <p>Funding is the difference between whether an Israeli child continues toward Torah-observance or drifts toward a secular path. Every sponsorship is a direct zechus.</p>
        </div>
        <div style={{maxWidth:340, margin:'0 auto 2.5rem'}}>
          <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>
        <div className="spons-grid">
          {tiers.map((t,i) => {
            const I = Ico[t.ic] || Ico.child;
            return (
              <div className="spons-tile" key={i} onClick={() => onPick && onPick(t, mode)}>
                <div className="ic"><I/></div>
                <div className="freq">{mode === 'monthly' ? 'Monthly' : 'One-time'}</div>
                <div className="amt">{t.amt}<small> {t.per}</small></div>
                <div className="label">{t.label}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
window.SponsorshipGrid = SponsorshipGrid;
window.SPONS_TIERS = SPONS_TIERS;