function Products() {
  const [filter, setFilter] = useState("all");
  const [cart, setCart] = useState(0);
  const filters = [
    { id:"all", label:"All" },
    { id:"course", label:"Courses" },
    { id:"template", label:"Templates" },
    { id:"guide", label:"Guides" },
  ];
  const products = window.CASC_PRODUCTS || [];
  const shown = filter === "all" ? products : products.filter(p => p.type === filter);

  return (
    <section id="products" className="section" style={{background:'var(--ivory-2)'}}>
      <div className="wrap">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:40, alignItems:'end', marginBottom:40}} className="grid-2">
          <div>
            <Eyebrow>The Shop · Digital Products</Eyebrow>
            <h2 style={{marginTop:20, fontWeight:300}}>
              Practical tools, <span className="italic">built from real rooms</span>.
            </h2>
          </div>
          <p style={{color:'var(--muted)', fontSize:16, lineHeight:1.7, maxWidth:480, justifySelf:'end'}}>
            Courses, templates and guides drawn from two decades of consulting and mentoring. Instant access, lifetime updates.
          </p>
        </div>

        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', borderTop:'1px solid var(--rule)', borderBottom:'1px solid var(--rule)', padding:'16px 0', marginBottom:40, flexWrap:'wrap', gap:16}}>
          <div style={{display:'flex', gap:6, flexWrap:'wrap'}}>
            {filters.map(f => (
              <button key={f.id} onClick={() => setFilter(f.id)}
                style={{
                  fontFamily:'inherit',
                  padding:'8px 16px',
                  fontSize:12, letterSpacing:'.14em', textTransform:'uppercase',
                  background: filter === f.id ? 'var(--charcoal)' : 'transparent',
                  color: filter === f.id ? 'var(--paper)' : 'var(--ink)',
                  border:'1px solid ' + (filter === f.id ? 'var(--charcoal)' : 'var(--rule)'),
                  borderRadius:999, cursor:'pointer',
                }}>{f.label}</button>
            ))}
          </div>
          <div style={{display:'flex', alignItems:'center', gap:16, fontSize:13, color:'var(--muted)'}}>
            <span>{shown.length} items</span>
            <button style={{fontFamily:'inherit', background:'transparent', border:'1px solid var(--rule)', padding:'8px 16px', borderRadius:999, fontSize:12, letterSpacing:'.14em', textTransform:'uppercase', cursor:'pointer'}}>
              🛒 Bag · {cart}
            </button>
          </div>
        </div>

        <div className="grid-3">
          {shown.map(p => (
            <a key={p.slug} href={`products/${p.slug}.html`} style={{textDecoration:'none', color:'inherit'}}>
              <article style={{background:'var(--paper)', border:'1px solid var(--rule)', display:'flex', flexDirection:'column', height:'100%', transition:'transform .2s, box-shadow .2s'}}
                       onMouseEnter={e => { e.currentTarget.style.transform='translateY(-2px)'; e.currentTarget.style.boxShadow='var(--shadow)'; }}
                       onMouseLeave={e => { e.currentTarget.style.transform='none'; e.currentTarget.style.boxShadow='none'; }}>
                <div style={{position:'relative'}}>
                  <ImgPh label={p.type} aspect="4 / 3" />
                  {p.tag && <span style={{position:'absolute', top:14, left:14, background:'var(--charcoal)', color:'var(--paper)', fontSize:10, letterSpacing:'.16em', textTransform:'uppercase', padding:'5px 10px'}}>{p.tag}</span>}
                </div>
                <div style={{padding:'24px 24px 28px', display:'flex', flexDirection:'column', gap:10, flex:1}}>
                  <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                    <span className="chip" style={{textTransform:'uppercase'}}>{p.type}</span>
                    <span style={{fontSize:12, color:'var(--muted)'}}>{p.note}</span>
                  </div>
                  <h3 style={{fontStyle:'italic', fontWeight:400, marginTop:6, fontSize:22, lineHeight:1.25}}>{p.title}</h3>
                  <p style={{fontSize:14, lineHeight:1.6, color:'var(--muted)', flex:1}}>{p.tagline}</p>
                  <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginTop:12, paddingTop:16, borderTop:'1px solid var(--rule)'}}>
                    <div style={{fontFamily:'var(--heading-font)', fontSize:26, color:'var(--charcoal)'}}>${p.price}</div>
                    <span className="btn-link" style={{background:'transparent', border:0}}>
                      View <span className="arrow">→</span>
                    </span>
                  </div>
                </div>
              </article>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Products });