/* School-to-Parent Marketplace — approved programs, tutoring, sports, fundraisers */
function MarketplaceScreen({ onBack }) {
  const [cat, setCat] = React.useState('all');
  const CATS = [
    { id:'all',      label:'All',        icon:'layout-grid' },
    { id:'tutoring', label:'Tutoring',   icon:'graduation-cap' },
    { id:'sports',   label:'Sports',     icon:'volleyball' },
    { id:'programs', label:'Programs',   icon:'sparkles' },
  ];
  const listings = [
    { cat:'tutoring', title:'Mathnasium of Katy', tag:'Tutoring', price:'$35/session', rating:'4.9', icon:'calculator', tint:'var(--blue-100)', ic:'var(--blue-500)', note:'School-approved · 1-on-1 math help' },
    { cat:'sports',   title:'Katy Youth Soccer League', tag:'Sports', price:'$120/season', rating:'4.7', icon:'volleyball', tint:'var(--success-100)', ic:'var(--success-500)', note:'Grades 4–8 · Saturday games' },
    { cat:'programs', title:'Young Coders Club', tag:'After-School', price:'$80/month', rating:'4.8', icon:'code', tint:'var(--info-100)', ic:'var(--info-500)', note:'Build games & apps · Tue/Thu' },
    { cat:'tutoring', title:'Reading Buddies', tag:'Tutoring', price:'Free', rating:'5.0', icon:'book-open', tint:'var(--gold-100)', ic:'var(--gold-600)', note:'Volunteer-led literacy support' },
    { cat:'programs', title:'Saturday Art Studio', tag:'Enrichment', price:'$45/class', rating:'4.6', icon:'palette', tint:'var(--danger-100)', ic:'var(--danger-500)', note:'Painting & ceramics · ages 9–13' },
  ];
  const shown = cat==='all' ? listings : listings.filter(l => l.cat===cat);

  return (
    <div style={{ background:'var(--gray-50)', minHeight:'100%' }}>
      <PushBar title="Marketplace" onBack={onBack} />
      <div style={{ padding:'14px 18px 40px' }}>

        {/* fundraiser hero */}
        <div style={{ background:'var(--grad-hero)', borderRadius:18, padding:'18px', color:'#fff', boxShadow:'var(--shadow-navy)' }}>
          <div style={{ display:'flex', alignItems:'center', gap:8 }}>
            <Icon name="heart-handshake" size={18} color="var(--gold-400)" />
            <div style={{ fontSize:10, fontWeight:800, letterSpacing:'.1em', color:'rgba(255,255,255,.78)' }}>SCHOOL FUNDRAISER</div>
          </div>
          <div style={{ fontSize:19, fontWeight:800, margin:'8px 0 3px' }}>New Library Books Drive</div>
          <div style={{ fontSize:12.5, color:'rgba(255,255,255,.78)' }}>Katy Middle School · 8 days left</div>
          <div style={{ display:'flex', alignItems:'baseline', gap:6, marginTop:14 }}>
            <span style={{ fontSize:24, fontWeight:800, fontFamily:'var(--font-mono)' }}>$3,240</span>
            <span style={{ fontSize:13, color:'rgba(255,255,255,.7)' }}>of $5,000</span>
          </div>
          <div style={{ height:8, borderRadius:'999px', background:'rgba(255,255,255,.2)', marginTop:8, overflow:'hidden' }}>
            <div style={{ width:'65%', height:'100%', borderRadius:'999px', background:'var(--gold-400)' }} />
          </div>
          <button onClick={()=>jlToast('Opening donation form…', { icon:'heart-handshake' })} style={{ width:'100%', marginTop:14, display:'flex', alignItems:'center', justifyContent:'center', gap:8, background:'var(--gold-400)', color:'var(--on-gold)', border:0, borderRadius:12, padding:'12px', fontWeight:800, fontSize:14, cursor:'pointer', fontFamily:'var(--font-sans)' }}>
            <Icon name="gift" size={17} color="var(--on-gold)" />Donate
          </button>
        </div>

        {/* category filter */}
        <div style={{ display:'flex', gap:8, overflowX:'auto', margin:'16px -18px 4px', padding:'0 18px' }}>
          {CATS.map(c => {
            const on = cat===c.id;
            return (
              <button key={c.id} onClick={()=>setCat(c.id)} style={{
                display:'flex', alignItems:'center', gap:7, padding:'9px 14px', borderRadius:'999px', cursor:'pointer',
                fontFamily:'var(--font-sans)', fontWeight:700, fontSize:13, whiteSpace:'nowrap', flex:'0 0 auto',
                border: on?'0':'1px solid var(--gray-200)',
                background: on?'var(--navy-600)':'#fff', color: on?'#fff':'var(--gray-600)',
              }}>
                <Icon name={c.icon} size={15} color={on?'#fff':'var(--gray-500)'} />{c.label}
              </button>
            );
          })}
        </div>

        {/* listings */}
        <SectionLabel>{cat==='all' ? 'Approved Near You' : CATS.find(c=>c.id===cat).label}</SectionLabel>
        <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
          {shown.map((l,i) => (
            <div key={i} style={{ background:'#fff', border:'1px solid var(--gray-200)', borderRadius:16, padding:'15px', boxShadow:'var(--shadow-sm)' }}>
              <div style={{ display:'flex', alignItems:'center', gap:13 }}>
                <span style={{ width:46, height:46, borderRadius:12, background:l.tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}>
                  <Icon name={l.icon} size={22} color={l.ic} />
                </span>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:15.5, fontWeight:700, color:'var(--ink)' }}>{l.title}</div>
                  <div style={{ display:'flex', alignItems:'center', gap:8, marginTop:3 }}>
                    <Pill bg="var(--gray-100)" fg="var(--gray-600)">{l.tag}</Pill>
                    <span style={{ display:'inline-flex', alignItems:'center', gap:3, fontSize:12.5, fontWeight:700, color:'var(--gray-600)' }}>
                      <Icon name="star" size={13} color="var(--gold-500)" fill="var(--gold-500)" />{l.rating}
                    </span>
                  </div>
                </div>
              </div>
              <div style={{ fontSize:13, color:'var(--gray-500)', margin:'11px 0 13px', lineHeight:1.45 }}>{l.note}</div>
              <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                <div style={{ flex:1, fontSize:16, fontWeight:800, color:'var(--ink)' }}>{l.price}</div>
                <button onClick={()=>jlToast('Saved ' + l.title, { icon:'bookmark' })} style={{ width:42, height:42, borderRadius:11, border:'1px solid var(--gray-200)', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', flex:'0 0 auto' }}>
                  <Icon name="bookmark" size={18} color="var(--gray-500)" />
                </button>
                <button onClick={()=>jlToast('Request sent to ' + l.title, { icon:'send' })} style={{ display:'flex', alignItems:'center', gap:7, background:'var(--navy-600)', color:'#fff', border:0, borderRadius:11, padding:'11px 18px', fontWeight:700, fontSize:13.5, cursor:'pointer', fontFamily:'var(--font-sans)' }}>
                  <Icon name="send" size={15} color="#fff" />Enroll
                </button>
              </div>
            </div>
          ))}
        </div>

        {/* trust note */}
        <div style={{ display:'flex', alignItems:'flex-start', gap:11, marginTop:16, background:'var(--info-100)', borderRadius:14, padding:'14px 15px' }}>
          <Icon name="shield-check" size={18} color="var(--info-500)" style={{ marginTop:1 }} />
          <div style={{ fontSize:12.5, color:'var(--info-500)', lineHeight:1.5 }}>
            Every vendor here is reviewed and approved by Katy Middle School. Payments are processed securely through JewelLink.
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MarketplaceScreen });