// ===== PROGRAMS & CAMPAIGNS · DONATE =====

// ---------- Programs & Campaigns ----------
function ProgramsScreen({ t, go }) {
  return (
    <div style={{ padding: '0 16px 8px', display: 'flex', flexDirection: 'column', gap: 16 }}>
      {/* Intro / pillars */}
      <Card t={t} style={{ background: `linear-gradient(135deg, ${t.navy}, ${t.mid})`, border: 'none', color: '#fff' }}>
        <div style={{ fontSize: 16, fontWeight: 800 }}>Driving Safer Roads, Together</div>
        <div style={{ fontSize: 12.5, opacity: 0.88, marginTop: 5, lineHeight: 1.45 }}>NRSA programs follow the PRSAP 2023–2028 Safe System pillars to cut road deaths nationwide.</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 8, marginTop: 14 }}>
          {program_pillars.map(p => (
            <div key={p.label} style={{ background: 'rgba(255,255,255,0.12)', borderRadius: 12, padding: '10px 4px', textAlign: 'center' }}>
              <div style={{ fontSize: 20 }}>{p.icon}</div>
              <div style={{ fontSize: 9, opacity: 0.85, fontWeight: 600, marginTop: 3, lineHeight: 1.1 }}>{p.label}</div>
            </div>
          ))}
        </div>
      </Card>

      <SectionTitle t={t}>Active Programs & Campaigns</SectionTitle>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {programs.map(pr => (
          <Card key={pr.id} t={t} pad={14}>
            <div style={{ display: 'flex', gap: 13 }}>
              <IconTile icon={pr.icon} color={pr.color} t={t} size={50} radius={15} fontSize={24} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                  <Badge t={t} color={pr.color}>{pr.cat}</Badge>
                  <span style={{ fontSize: 10.5, fontWeight: 700, color: pr.status === 'Ongoing' ? t.success : t.warn, display: 'flex', alignItems: 'center', gap: 4 }}>
                    <span style={{ width: 6, height: 6, borderRadius: 999, background: pr.status === 'Ongoing' ? t.success : t.warn }} />{pr.status}
                  </span>
                </div>
                <h3 style={{ margin: '7px 0 0', fontSize: 15, fontWeight: 700, color: t.text, lineHeight: 1.2 }}>{pr.title}</h3>
                <p style={{ margin: '5px 0 0', fontSize: 12.5, color: t.subtext, lineHeight: 1.45 }}>{pr.desc}</p>
                <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginTop: 8, fontSize: 11.5, color: t.text, fontWeight: 700 }}>
                  <span style={{ fontSize: 13 }}>📈</span>{pr.reach}
                </div>
              </div>
            </div>
          </Card>
        ))}
      </div>

      <Card t={t} pad={16} style={{ background: t.accent + (t.dark ? '1a' : '0d'), border: `1px solid ${t.accent}44`, textAlign: 'center' }}>
        <div style={{ fontSize: 28 }}>❤️</div>
        <div style={{ fontSize: 14.5, fontWeight: 800, color: t.text, marginTop: 4 }}>Help fund these programs</div>
        <div style={{ fontSize: 12.5, color: t.subtext, marginTop: 4, lineHeight: 1.45 }}>Your support brings helmets, education, and faster response to communities that need them.</div>
        <Btn t={t} full color={t.accent} onClick={() => go('Donate')} style={{ marginTop: 13 }} icon="heart">Donate to NRSA</Btn>
      </Card>
    </div>
  );
}

// ---------- Donate ----------
function DonateScreen({ t, go }) {
  const [amt, setAmt] = useState(500);
  const [custom, setCustom] = useState('');
  const [method, setMethod] = useState('gcash');
  const [recurring, setRecurring] = useState(false);
  const [done, setDone] = useState(false);
  const value = custom ? parseInt(custom, 10) || 0 : amt;

  if (done) {
    return (
      <div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flex: 1, gap: 16, textAlign: 'center' }}>
        <div style={{ width: 96, height: 96, borderRadius: 999, background: t.success + (t.dark ? '2e' : '1c'), display: 'grid', placeItems: 'center', position: 'relative' }}>
          <div style={{ position: 'absolute', inset: 0, borderRadius: 999, border: `2px solid ${t.success}66`, animation: 'pulse-ring 2s infinite' }} />
          <span style={{ fontSize: 46 }}>❤️</span>
        </div>
        <div>
          <h2 style={{ margin: 0, fontSize: 22, fontWeight: 800, color: t.text }}>Salamat po!</h2>
          <p style={{ margin: '8px 0 0', fontSize: 13.5, color: t.subtext, lineHeight: 1.5, maxWidth: 300 }}>
            Your {recurring ? 'monthly ' : ''}gift of <b style={{ color: t.text }}>₱{value.toLocaleString()}</b> helps make Philippine roads safer. A receipt has been sent to your email.
          </p>
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 4, width: '100%', maxWidth: 320 }}>
          <Btn t={t} full variant="outline" onClick={() => setDone(false)}>Donate again</Btn>
          <Btn t={t} full color={t.mid} onClick={() => go('Home')}>Done</Btn>
        </div>
      </div>
    );
  }

  return (
    <div style={{ padding: '0 16px 8px', display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ borderRadius: 24, padding: 22, color: '#fff', position: 'relative', overflow: 'hidden', background: `linear-gradient(135deg, ${t.accent}, #d8531a)`, boxShadow: '0 12px 30px rgba(255,107,43,0.32)' }}>
        <div style={{ position: 'absolute', right: -30, top: -30, width: 130, height: 130, borderRadius: '50%', background: 'rgba(255,255,255,0.1)' }} />
        <div style={{ position: 'relative' }}>
          <div style={{ fontSize: 34 }}>❤️</div>
          <div style={{ fontSize: 19, fontWeight: 800, marginTop: 6 }}>Support Road Safety</div>
          <div style={{ fontSize: 12.5, opacity: 0.92, marginTop: 4, lineHeight: 1.45 }}>Every peso funds helmets, education, and emergency response for Filipino road users.</div>
        </div>
      </div>

      {/* What your gift funds */}
      <Card t={t} pad={14}>
        <div style={{ fontSize: 13.5, fontWeight: 800, color: t.text, marginBottom: 10 }}>Where your donation goes</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
          {donate_uses.map(u => (
            <div key={u.text} style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
              <span style={{ fontSize: 17 }}>{u.icon}</span>
              <span style={{ fontSize: 12.5, color: t.text, fontWeight: 500 }}>{u.text}</span>
            </div>
          ))}
        </div>
      </Card>

      {/* Amount */}
      <div>
        <SectionTitle t={t}>Choose an amount</SectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 }}>
          {donate_amounts.map(a => {
            const sel = !custom && amt === a;
            return (
              <button key={a} onClick={() => { setAmt(a); setCustom(''); }} className="no-select" style={{
                border: `1.5px solid ${sel ? t.accent : t.border}`, background: sel ? t.accent : t.card, color: sel ? '#fff' : t.text,
                borderRadius: 14, padding: '14px 4px', fontSize: 16, fontWeight: 800, minHeight: 52, transition: 'all 0.18s',
              }}>₱{a.toLocaleString()}</button>
            );
          })}
          <div style={{ gridColumn: 'span 1', position: 'relative' }}>
            <span style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', fontSize: 15, fontWeight: 800, color: custom ? t.accent : t.subtext }}>₱</span>
            <input value={custom} onChange={e => setCustom(e.target.value.replace(/[^\d]/g, ''))} inputMode="numeric" placeholder="Other" style={{
              width: '100%', height: '100%', minHeight: 52, border: `1.5px solid ${custom ? t.accent : t.border}`, background: t.card, color: t.text,
              borderRadius: 14, padding: '0 8px 0 26px', outline: 'none', fontSize: 15, fontWeight: 800,
            }} />
          </div>
        </div>
        <button onClick={() => setRecurring(r => !r)} className="no-select" style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'transparent', border: 'none', padding: '12px 2px 0', width: '100%' }}>
          <span style={{ width: 44, height: 26, borderRadius: 999, background: recurring ? t.accent : t.border, position: 'relative', transition: 'background 0.25s', flexShrink: 0 }}>
            <span style={{ position: 'absolute', top: 3, left: recurring ? 21 : 3, width: 20, height: 20, borderRadius: 999, background: '#fff', transition: 'left 0.25s', boxShadow: '0 1px 3px rgba(0,0,0,0.3)' }} />
          </span>
          <span style={{ fontSize: 13, color: t.text, fontWeight: 600 }}>Make this a monthly donation</span>
        </button>
      </div>

      {/* Method */}
      <div>
        <SectionTitle t={t}>Payment method</SectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {donate_methods.map(m => {
            const sel = method === m.id;
            return (
              <button key={m.id} onClick={() => setMethod(m.id)} className="no-select" style={{
                display: 'flex', alignItems: 'center', gap: 10, border: `1.5px solid ${sel ? t.accent : t.border}`,
                background: sel ? t.accent + (t.dark ? '24' : '12') : t.card, borderRadius: 14, padding: '13px 12px', minHeight: 52,
              }}>
                <span style={{ fontSize: 20 }}>{m.icon}</span>
                <span style={{ fontSize: 13, fontWeight: 700, color: t.text, flex: 1, textAlign: 'left' }}>{m.label}</span>
                <span style={{ width: 18, height: 18, borderRadius: 999, border: `2px solid ${sel ? t.accent : t.border}`, background: sel ? t.accent : 'transparent', display: 'grid', placeItems: 'center' }}>{sel && <Icon name="check" size={11} color="#fff" strokeWidth={3} />}</span>
              </button>
            );
          })}
        </div>
      </div>

      <Btn t={t} full color={value > 0 ? t.accent : t.muted} onClick={() => value > 0 && setDone(true)} style={{ opacity: value > 0 ? 1 : 0.5, minHeight: 54, fontSize: 16 }} icon="heart">
        Donate ₱{value.toLocaleString()}{recurring ? '/mo' : ''}
      </Btn>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 11, color: t.subtext, paddingTop: 2 }}>
        <Icon name="shield" size={13} color={t.success} /> Secure donation · NRSA is a registered non-profit
      </div>
    </div>
  );
}

Object.assign(window, { ProgramsScreen, DonateScreen });