// donate.jsx — Unified donation flow
// Designations:
//   fund = 'general' | 'education' | 'church'
//   id   = student id (when fund=education) | 'next' | undefined
// Routes parsed by app.jsx:
//   /donate                          → general
//   /donate/education                → education general fund
//   /donate/education/{studentId}    → specific student
//   /donate/church                   → church planting fund
//   ?amount=NN appended → preselect amount

function getDesignation({ fund, id }) {
  fund = fund || 'general';

  if (fund === 'education' && id) {
    const s = (window.STUDENTS || []).find(x => x.id === id);
    if (s) return {
      kind:'student', fund, id,
      title: `Sponsor ${s.name}`,
      heading: <>Sponsor {s.name} for <em style={{fontStyle:'italic', color:'var(--primary)'}}>$200 a year.</em></>,
      sub: `Each student is sponsored by one person for $200/year. That covers tuition, books, and hostel for the full school year.`,
      breadcrumb: ['education', `profile:${s.id}`],
      crumbLabels: ['Sponsor a student', s.name],
      // Locked amount — single-sponsor model
      lockedAmount: 200,
      defaultRecurring: false,
      defaultAmount: 200,
      sidebar: { kind:'student', s },
      receiptName: s.name,
    };
  }

  if (fund === 'education') return {
    kind:'fund', fund, id:null,
    title:'Give to education',
    heading: <>Sponsor the next <em style={{fontStyle:'italic', color:'var(--primary)'}}>generation of students.</em></>,
    sub: 'Your gift goes to the general education fund, supporting students who don\'t yet have a sponsor of their own.',
    breadcrumb: ['education'],
    crumbLabels: ['Sponsor a student'],
    presets: [50, 100, 250, 500, 1000],
    defaultRecurring: false,
    defaultAmount: 100,
    sidebar: { kind:'fund-education' },
    receiptName: 'students',
  };

  if (fund === 'church' && id) {
    const c = (window.CHURCHES || []).find(x => x.id === id);
    if (c) return {
      kind: 'church', fund, id,
      title: `Help plant a church in ${c.name}`,
      heading: <>Help plant a church in <em style={{fontStyle:'italic', color:'var(--primary)'}}>{c.name}.</em></>,
      sub: `Your gift goes directly to the building of a permanent church in ${c.name}.`,
      breadcrumb: ['church-list'],
      crumbLabels: ['Help Plant a Church', c.name],
      presets: [50, 100, 250, 500, 1000],
      defaultRecurring: false,
      defaultAmount: 100,
      sidebar: { kind: 'church', c },
      receiptName: `the ${c.name} church`,
    };
  }

  if (fund === 'church') return {
    kind:'fund', fund, id: null,
    title: 'Help plant the next church',
    heading: <>Help us plant <em style={{fontStyle:'italic', color:'var(--primary)'}}>the next church.</em></>,
    sub: "Your gift supports the church-planting fund, helping new and growing congregations take root across the district.",
    breadcrumb: ['church-list'],
    crumbLabels: ['Help Plant a Church'],
    presets: [50, 100, 250, 500, 1000],
    defaultRecurring: false,
    defaultAmount: 100,
    sidebar: { kind:'fund-church' },
    receiptName: 'the next church',
  };

  // general
  return {
    kind:'general', fund:'general', id:null,
    title:'Make a donation',
    heading: <>Walk with us. <em style={{fontStyle:'italic', color:'var(--primary)'}}>Carry the work forward.</em></>,
    sub: 'Your gift supports the entire mission: Gospel work, education, churches, and family aid.',
    breadcrumb: [],
    crumbLabels: [],
    presets: [50, 100, 250, 500, 1000],
    defaultRecurring: false,
    defaultAmount: 100,
    sidebar: { kind:'allocation' },
    receiptName: 'the team',
  };
}

function FundTabs({ fund, navigate }) {
  const tabs = [
    { id:'general',   label:'General' },
    { id:'education', label:'Education' },
    { id:'church',    label:'Church planting' },
  ];
  return (
    <div style={{display:'flex', gap: 6, flexWrap:'wrap', marginTop: 24, marginBottom: 8}}>
      {tabs.map(t => {
        const on = fund === t.id;
        return (
          <button key={t.id}
                  onClick={() => navigate('donate', { fund: t.id })}
                  style={{
                    appearance:'none', cursor:'pointer',
                    border: on ? '1px solid var(--ink)' : '1px solid var(--line)',
                    background: on ? 'var(--ink)' : 'transparent',
                    color: on ? 'var(--bg)' : 'var(--ink-2)',
                    padding:'8px 16px', borderRadius: 999,
                    fontSize: 13.5, fontFamily:'var(--sans)', fontWeight:500,
                  }}>
            {t.label}
          </button>
        );
      })}
    </div>
  );
}

function Donate({ params, navigate }) {
  const fund = params?.fund || 'general';
  const id   = params?.id;
  const initialAmount = params?.amount ? Number(params.amount) : null;

  const d = getDesignation({ fund, id });

  const [step, setStep] = useState(1);
  const [amount, setAmount] = useState(initialAmount || d.defaultAmount);
  const [custom, setCustom] = useState('');
  const [info, setInfo] = useState({ name:'', email:'', country:'United States', anon:false, note:'' });
  const [errors, setErrors] = useState({});
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState(null);
  const infoRefs = { name: useRef(), email: useRef(), country: useRef() };

  const updateInfo = (k, v) => {
    setInfo(prev => ({...prev, [k]: v}));
    if (errors[k]) setErrors(prev => { const n = {...prev}; delete n[k]; return n; });
  };

  // Reset step + amount when designation changes
  useEffect(() => {
    setStep(1);
    setAmount(initialAmount || d.defaultAmount);
    setCustom('');
    setErrors({});
  // eslint-disable-next-line
  }, [fund, id]);

  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [step]);

  const finalAmount = d.lockedAmount || (custom ? Number(custom) : amount);
  const stepLabels = ['Amount', 'Your info'];

  const submitGift = async () => {
    if (submitting) return;
    const next = {};
    if (!info.name.trim())    next.name = 'Please enter your name';
    if (!info.email.trim())   next.email = 'Please enter your email';
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(info.email.trim())) next.email = 'Please enter a valid email address';
    if (!info.country.trim()) next.country = 'Please enter your country';
    if (Object.keys(next).length) {
      setErrors(next);
      const first = ['name', 'email', 'country'].find(f => next[f]);
      infoRefs[first]?.current?.focus();
      return;
    }
    setErrors({});
    setSubmitError(null);
    setSubmitting(true);
    try {
      const res = await fetch('https://formspree.io/f/mbdwwwed', {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify({
          _subject: `Donation: $${Number(finalAmount).toLocaleString()} toward ${d.title}`,
          name: info.name || '(not provided)',
          email: info.email || '(not provided)',
          address: info.address || '(not provided)',
          amount: `$${Number(finalAmount).toLocaleString()}`,
          designation: d.title,
          fund: d.fund,
          anonymous: info.anon ? 'Yes' : 'No',
          note: info.note || '(none)',
          ...(d.kind === 'student' && d.id ? { profile: window.location.origin + '/student/' + d.id } : {}),
          ...(d.kind === 'church' && d.sidebar?.c ? { church: d.sidebar.c.name } : {}),
        }),
      });
      if (!res.ok) throw new Error(`Request failed (${res.status})`);
      setStep(3);
    } catch (e) {
      console.error('Donation submit failed:', e);
      setSubmitError("We couldn't submit your gift. Please try again, or email us at hello@csmforchrist.com.");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <>
      <Breadcrumb crumbs={(() => {
        if (!d.crumbLabels.length) return [{ label: 'Donate' }];
        if (d.kind === 'student' || d.kind === 'church') return [
          { label: 'Donate', page: 'donate' },
          { label: d.crumbLabels[0], page: 'donate', params: { fund } },
          { label: d.crumbLabels[1] },
        ];
        return [
          { label: 'Donate', page: 'donate' },
          { label: d.crumbLabels[0] },
        ];
      })()} navigate={navigate} />

      <section style={{padding:'40px 0 80px'}}>
        <div className="container" style={{display:'grid', gridTemplateColumns:'1fr 380px', gap: 64, alignItems:'flex-start'}}>
          {/* Main */}
          <div>
            <Eyebrow primary>{d.title}</Eyebrow>
            <h1 className="serif" style={{fontSize:'clamp(36px, 4.6vw, 60px)', lineHeight:1.05, marginTop: 22, fontWeight:400, letterSpacing:'-0.015em'}}>
              {d.heading}
            </h1>

            {/* Show fund tabs only when not pinned to a specific student/church */}
            {step === 1 && d.kind !== 'student' && d.kind !== 'church' && (
              <FundTabs fund={fund} navigate={navigate} />
            )}


            {/* Steps */}
            <div style={{display:'flex', gap: 0, marginTop: 36, borderBottom:'1px solid var(--line)'}}>
              {stepLabels.map((l, i) => {
                const n = i + 1;
                const active = step === n;
                const done = step > n;
                return (
                  <div key={l} style={{
                    flex:1, padding:'14px 0', display:'flex', alignItems:'center', gap:10,
                    borderBottom: active ? '2px solid var(--primary)' : '2px solid transparent',
                    marginBottom: -1,
                  }}>
                    <div style={{
                      width:26, height:26, borderRadius:'50%',
                      background: done ? 'var(--primary)' : (active ? 'var(--ink)' : 'transparent'),
                      color: done || active ? '#FFF8EA' : 'var(--ink-3)',
                      border: done || active ? 'none' : '1px solid var(--line)',
                      fontSize:13, display:'grid', placeItems:'center', fontFamily:'var(--serif)'
                    }}>
                      {done ? '✓' : n}
                    </div>
                    <span style={{fontSize:14, fontWeight: active ? 500 : 400, color: active || done ? 'var(--ink)' : 'var(--ink-3)'}}>{l}</span>
                  </div>
                );
              })}
            </div>

            <div style={{marginTop: 36}}>
              {step === 1 && d.lockedAmount && (
                <>
                  <h2 className="serif" style={{fontSize: 26, fontWeight:400, marginBottom: 8}}>Sponsor for $200/year</h2>
                  <p style={{color:'var(--ink-2)', fontSize:15, marginBottom: 28}}>{d.sub}</p>

                  <div style={{padding:'28px 22px', borderRadius:14, textAlign:'left',
                              background:'var(--ink)', color:'var(--bg)', border:'1px solid var(--ink)'}}>
                    <div style={{fontSize:11.5, letterSpacing:'0.18em', textTransform:'uppercase', opacity: .7, marginBottom: 8}}>One-time</div>
                    <div style={{fontFamily:'var(--serif)', fontSize: 38, lineHeight: 1}}>$200</div>
                    <div style={{fontSize:13.5, marginTop: 8, opacity: .8}}>Tuition, books, and hostel for the full school year</div>
                  </div>

                  <div style={{marginTop: 28, padding:'18px 22px', background:'var(--bg-2)', borderRadius: 10, border:'1px solid var(--line-soft)', fontSize:14, color:'var(--ink-2)', display:'flex', gap:14, alignItems:'flex-start'}}>
                    <span style={{width:6, height:6, borderRadius:'50%', background:'var(--primary)', flexShrink:0, marginTop: 8}}></span>
                    <div>
                      Want to give a different amount? Smaller gifts go to the{' '}
                      <a onClick={() => navigate('donate', { fund:'education' })}
                         style={{color:'var(--primary)', cursor:'pointer', borderBottom:'1px solid var(--primary)'}}>
                        general student fund
                      </a>
                      {' '}and covers students who don't yet have a personal sponsor.
                    </div>
                  </div>

                  <button className="btn btn-primary btn-arrow"
                          style={{marginTop: 36, fontSize: 16, padding:'16px 28px'}}
                          onClick={() => setStep(2)}>
                    Continue · $200
                  </button>
                </>
              )}

              {step === 1 && !d.lockedAmount && (
                <>
                  <h2 className="serif" style={{fontSize: 26, fontWeight:400, marginBottom: 8}}>Choose an amount</h2>
                  <p style={{color:'var(--ink-2)', fontSize:15, marginBottom: 28}}>{d.sub}</p>

                  <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:12}}>
                    {d.presets.filter(v => v > 0).map((v, i) => (
                      <button key={`${v}-${i}`} onClick={() => { setAmount(v); setCustom(''); }}
                              style={{padding:'22px 16px', borderRadius:12, cursor:'pointer',
                                      background: amount === v && !custom ? 'var(--ink)' : 'var(--card)',
                                      color: amount === v && !custom ? 'var(--bg)' : 'var(--ink)',
                                      border: amount === v && !custom ? '1px solid var(--ink)' : '1px solid var(--line)',
                                      fontFamily:'var(--serif)', fontSize: 26}}>
                        ${v.toLocaleString()}                      </button>
                    ))}
                    <div style={{padding:'22px 16px', borderRadius:12,
                                 background: custom ? 'var(--ink)' : 'var(--card)',
                                 color: custom ? 'var(--bg)' : 'var(--ink)',
                                 border: custom ? '1px solid var(--ink)' : '1px solid var(--line)',
                                 display:'flex', alignItems:'center', gap:6}}>
                      <span style={{fontFamily:'var(--serif)', fontSize: 26, opacity:.6}}>$</span>
                      <input type="number" placeholder="Custom" value={custom}
                             className="no-spin"
                             onChange={e => setCustom(e.target.value)}
                             style={{flex:1, minWidth:0, border:0, outline:0, background:'transparent', color:'inherit',
                                     fontFamily:'var(--serif)', fontSize: 26}} />
                    </div>
                  </div>

                  <button className="btn btn-primary btn-arrow"
                          style={{marginTop: 40, fontSize: 16, padding:'16px 28px'}}
                          onClick={() => setStep(2)}
                          disabled={!finalAmount}>
                    Continue · ${Number(finalAmount).toLocaleString()}                  </button>
                </>
              )}

              {step === 2 && (
                <>
                  <h2 className="serif" style={{fontSize: 26, fontWeight:400, marginBottom: 8}}>A little about you</h2>
                  <p style={{color:'var(--ink-2)', fontSize:15, marginBottom: 32}}>
                    So we can send your tax receipt and updates from {d.receiptName}.
                  </p>
                  <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 20}}>
                    <FormField label="Full name" value={info.name} onChange={v => updateInfo('name', v)} inputRef={infoRefs.name} error={errors.name} />
                    <FormField label="Email" value={info.email} onChange={v => updateInfo('email', v)} type="email" inputRef={infoRefs.email} error={errors.email} />
                    <FormField label="Country" value={info.country} onChange={v => updateInfo('country', v)} inputRef={infoRefs.country} error={errors.country} />
                    <FormField label="Address (optional)" value={info.address || ''} onChange={v => setInfo({...info, address: v})} />
                  </div>
                  <div style={{marginTop: 28}}>
                    <label style={{fontSize:13, color:'var(--ink-2)', fontWeight:500, display:'block', marginBottom:8}}>
                      A note (optional)
                    </label>
                    <textarea value={info.note} onChange={e => setInfo({...info, note: e.target.value})}
                              placeholder={d.kind === 'student' ? `"Praying for you…"` : 'A word of encouragement…'}
                              rows={3}
                              style={{width:'100%', padding:'14px 16px', borderRadius:10, border:'1px solid var(--line)',
                                      background:'var(--card)', color:'var(--ink)', fontFamily:'var(--sans)', fontSize:15,
                                      resize:'vertical', outline:'none'}} />
                  </div>
                  <label style={{marginTop: 22, display:'flex', alignItems:'center', gap:10, fontSize:14, cursor:'pointer'}}>
                    <input type="checkbox" checked={info.anon} onChange={e => setInfo({...info, anon: e.target.checked})}
                           style={{width:18, height:18, accentColor:'var(--primary)'}} />
                    <span style={{color:'var(--ink-2)'}}>Give anonymously</span>
                  </label>
                  <div style={{marginTop: 28, padding:'18px 22px', background:'var(--bg-2)', borderRadius:10, border:'1px solid var(--line-soft)', fontSize:14, color:'var(--ink-2)', display:'flex', gap:14}}>
                    <div style={{flexShrink:0, width:24, height:24, borderRadius:'50%', background:'var(--primary)', color:'#FFF8EA', display:'grid', placeItems:'center', fontSize:13, fontFamily:'var(--serif)'}}>✓</div>
                    <div>Christhia Seva Mission is a registered 501(c)(3). Your gift is tax-deductible, and you'll receive a receipt by email.</div>
                  </div>
                  {submitError && (
                    <div style={{marginTop: 28, padding:'14px 18px', background:'#FDECEA', border:'1px solid #E53935', borderRadius:10, color:'#8B1C1C', fontSize:14}}>
                      {submitError}
                    </div>
                  )}
                  <div style={{display:'flex', gap:14, marginTop: 36}}>
                    <button className="btn btn-ghost" onClick={() => setStep(1)} disabled={submitting}>← Back</button>
                    <button className={`btn btn-primary${submitting ? '' : ' btn-arrow'}`} onClick={submitGift} disabled={submitting}>
                      {submitting ? 'Sending…' : `Complete gift · $${Number(finalAmount).toLocaleString()}`}
                      {submitting && <span className="btn-spinner" aria-hidden="true"></span>}
                    </button>
                  </div>
                </>
              )}

              {step === 3 && (
                <div style={{padding:'40px 0', textAlign:'center', maxWidth: 560, margin:'0 auto'}}>
                  {d.sidebar.kind === 'student' && d.sidebar.s?.photo ? (
                    <img src={d.sidebar.s.photo} alt={d.sidebar.s.name}
                         style={{width: 120, height: 120, borderRadius:'50%', objectFit:'cover', margin:'0 auto', display:'block'}} />
                  ) : (
                    <div style={{width: 72, height: 72, borderRadius:'50%', background:'var(--primary)', color:'#FFF8EA', margin:'0 auto', display:'grid', placeItems:'center', fontSize: 32, fontFamily:'var(--serif)'}}>✓</div>
                  )}
                  <h2 className="serif" style={{fontSize:'clamp(28px, 3.6vw, 42px)', marginTop: 32, fontWeight:400, lineHeight:1.15}}>
                    Thank you.
                  </h2>
                  <p style={{fontSize:18, color:'var(--ink-2)', marginTop: 18, lineHeight:1.55}}>
                    Your ${Number(finalAmount).toLocaleString()} gift toward <strong>{d.receiptName}</strong> has been received. You'll receive an email with next steps.
                  </p>
                  <p className="serif" style={{fontStyle:'italic', fontSize: 19, color:'var(--ink-2)', marginTop: 36, padding:'24px 0', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}}>
                    "And whoever gives one of these little ones even a cup of cold water… truly, I say to you, he will by no means lose his reward."
                    <span className="verse-cite" style={{fontStyle:'normal'}}>Matthew 10:42</span>
                  </p>
                  <div style={{display:'flex', gap:14, justifyContent:'center', marginTop: 36, flexWrap:'wrap'}}>
                    <button className="btn btn-ghost" onClick={() => navigate('education')}>Sponsor another student</button>
                    <button className="btn btn-primary btn-arrow" onClick={() => navigate('home')}>Back to home</button>
                  </div>
                </div>
              )}
            </div>
          </div>

          {/* Sidebar */}
          <aside style={{position:'sticky', top: 92, alignSelf:'flex-start'}}>
            <DonateSidebar d={d} navigate={navigate} />
          </aside>
        </div>
      </section>
    </>
  );
}

function DonateSidebar({ d, navigate }) {
  if (d.sidebar.kind === 'student') {
    const s = d.sidebar.s;
    return (
      <div className="card" style={{padding: 22}}>
        <div style={{borderRadius:8, overflow:'hidden', marginBottom: 18, aspectRatio:'4/3'}}>
          {s.photo
            ? <img src={s.photo} alt={s.name} style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}} />
            : <ImgSlot id={`don-stu-${s.id}`} h="100%" placeholder={s.name} radius={8} />
          }
        </div>
        <div style={{fontFamily:'var(--serif)', fontSize: 22, fontWeight:400}}>{s.name}</div>
        <div style={{fontSize:13, color:'var(--ink-3)', marginTop: 4}}>{s.course}</div>
        <div style={{fontSize:13, color:'var(--ink-3)'}}>{s.school}</div>
        <div style={{fontSize:13, color:'var(--ink-2)', marginTop: 12}}>${s.goal.toLocaleString()}/year</div>
      </div>
    );
  }

  if (d.sidebar.kind === 'fund-education') {
    return (
      <div className="card" style={{padding: 28}}>
        <h3 className="serif" style={{fontSize: 22, fontWeight:400, marginBottom: 14}}>Education fund</h3>
        <p style={{fontSize:14.5, color:'var(--ink-2)', lineHeight:1.6, marginBottom: 18}}>
          Pooled gifts support students who don't yet have a sponsor, and cover books, hostels, and emergency tuition gaps.
        </p>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16}}>
          {[{n: String((window.STUDENTS || []).length), l:'students applied'}, {n:'$200', l:'annual cost'}, {n:'100%', l:'to tuition'}].map(s => (
            <div key={s.l} style={{padding:'10px 0'}}>
              <div style={{fontFamily:'var(--serif)', fontSize: 22, color:'var(--primary)'}}>{s.n}</div>
              <div style={{fontSize:12, color:'var(--ink-3)', marginTop:2}}>{s.l}</div>
            </div>
          ))}
        </div>
        <button className="btn btn-ghost" style={{marginTop: 18, width:'100%', justifyContent:'center'}}
                onClick={() => navigate('education')}>Browse students →</button>
      </div>
    );
  }

  if (d.sidebar.kind === 'church') {
    const c = d.sidebar.c;
    return (
      <div className="card" style={{padding: 0}}>
        <div style={{aspectRatio:'4/3'}}>
          {c.photo
            ? <img src={c.photo} alt={c.name} style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}} />
            : <ImgSlot id={`don-church-${c.id}`} h="100%" placeholder={c.name} radius={0} />
          }
        </div>
        <div style={{padding: 22}}>
          <div style={{fontFamily:'var(--serif)', fontSize: 22, fontWeight:400}}>{c.name}</div>
          {c.description && (
            <p style={{fontSize:14, color:'var(--ink-2)', marginTop: 12, lineHeight:1.55, whiteSpace:'pre-line'}}>
              {c.description}
            </p>
          )}
        </div>
      </div>
    );
  }

  if (d.sidebar.kind === 'fund-church') {
    const churchCount = (window.CHURCHES || []).length;
    return (
      <div className="card" style={{padding: 28}}>
        <h3 className="serif" style={{fontSize: 22, fontWeight:400, marginBottom: 14}}>Church planting fund</h3>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16, marginBottom: 18}}>
          {[
            {n: String(churchCount), l:'churches planted'},
            {n: '10,000+',            l:'Christians'},
          ].map(s => (
            <div key={s.l} style={{padding:'10px 0'}}>
              <div style={{fontFamily:'var(--serif)', fontSize: 22, color:'var(--primary)'}}>{s.n}</div>
              <div style={{fontSize:12, color:'var(--ink-3)', marginTop:2}}>{s.l}</div>
            </div>
          ))}
        </div>
        <p style={{fontSize:14.5, color:'var(--ink-2)', lineHeight:1.6}}>
          By donating to the church planting fund, you'll receive updates as we identify where the next church will be and have the opportunity to join us on the journey from the very beginning.
        </p>
      </div>
    );
  }

  // general
  return null;
}

function FormField({ label, value, onChange, type = 'text', inputRef, error }) {
  return (
    <label style={{display:'flex', flexDirection:'column', gap:8}}>
      <span style={{fontSize:13, color:'var(--ink-2)', fontWeight:500}}>{label}</span>
      <input type={type} ref={inputRef} value={value} onChange={e => onChange(e.target.value)}
             style={{padding:'14px 16px', borderRadius:10,
                     border: error ? '2px solid #E53935' : '1px solid var(--line)',
                     background:'var(--card)', color:'var(--ink)', fontFamily:'var(--sans)',
                     fontSize:15, outline:'none'}} />
      {error && typeof error === 'string' && (
        <span style={{fontSize:12.5, color:'#C62828', marginTop:-2}}>{error}</span>
      )}
    </label>
  );
}

window.Donate = Donate;