const prodStyles = {
  wrap:{padding:"120px 40px", background:"var(--cream)", borderTop:"1px solid var(--line)", borderBottom:"1px solid var(--line)"},
  inner:{maxWidth:1360, margin:"0 auto"},
  head:{display:"flex", alignItems:"end", justifyContent:"space-between", gap:40, marginBottom:40, flexWrap:"wrap"},
  kicker:{fontFamily:'"JetBrains Mono",monospace', fontSize:12, letterSpacing:"0.18em", textTransform:"uppercase", color:"var(--accent)", marginBottom:16},
  h2:{fontSize:"clamp(40px, 5vw, 72px)", lineHeight:1.0, letterSpacing:"-0.03em", fontWeight:700, margin:0, maxWidth:820},
  filters:{display:"flex", flexWrap:"wrap", gap:8, marginBottom:28},
  chip:active => ({
    padding:"9px 16px", borderRadius:999, fontSize:13, fontWeight:500,
    border: active?"1px solid var(--ink)":"1px solid var(--line-strong)",
    background: active?"var(--ink)":"transparent",
    color: active?"#fff":"var(--ink)",
    cursor:"pointer", transition:"all .15s"
  }),
  grid:{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:16},
  card:expanded => ({
    background:"#fff",
    borderRadius:20,
    padding:"28px 28px 24px",
    border:"1px solid var(--line)",
    cursor:"pointer",
    transition:"all .3s cubic-bezier(.2,.8,.2,1)",
    transform: expanded?"translateY(-4px)":"none",
    boxShadow: expanded?"0 20px 40px -20px rgba(29,16,60,0.18)":"0 0 0 rgba(0,0,0,0)",
    position:"relative", overflow:"hidden",
    gridColumn: expanded?"span 2":"span 1",
    gridRow: expanded?"span 2":"span 1",
  }),
  cat:{fontSize:11, fontFamily:'"JetBrains Mono",monospace', letterSpacing:"0.14em", textTransform:"uppercase", color:"var(--ink)", opacity:0.5, marginBottom:16},
  name:{fontSize:28, lineHeight:1.1, letterSpacing:"-0.02em", fontWeight:600, margin:"0 0 10px"},
  tagline:{fontSize:14, lineHeight:1.5, color:"var(--ink)", opacity:0.66, margin:"0 0 24px"},
  stats:{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:12, paddingTop:18, borderTop:"1px solid var(--line)"},
  stat:{},
  statV:{fontSize:22, fontWeight:600, letterSpacing:"-0.01em", color:"var(--ink)"},
  statL:{fontSize:11, color:"var(--ink)", opacity:0.5, marginTop:2, textTransform:"uppercase", letterSpacing:"0.08em"},
  pills:{marginTop:16, display:"flex", flexWrap:"wrap", gap:6},
  pill:{fontSize:12, padding:"4px 10px", borderRadius:999, background:"rgba(156,116,235,0.12)", color:"var(--ink-2)"},
  expandCol2:{gridColumn:"2 / 3", padding:"18px 0 0", display:"grid", gridTemplateColumns:"1fr 1fr", gap:24},
  listH:{fontSize:11, fontFamily:'"JetBrains Mono",monospace', letterSpacing:"0.14em", textTransform:"uppercase", opacity:0.5, marginBottom:8},
  list:{fontSize:13, lineHeight:1.55, listStyle:"none", padding:0, margin:0},
  corner:{position:"absolute", top:16, right:16, width:32, height:32, borderRadius:999, border:"1px solid var(--line)", display:"grid", placeItems:"center", transition:"all .2s"}
};

function ProductCard({p, expanded, onToggle, density}){
  return (
    <div
      style={{...prodStyles.card(expanded), padding: density==="dense"?"20px 20px 18px":"28px 28px 24px"}}
      onClick={onToggle}
      onMouseEnter={e => { if(!expanded) e.currentTarget.style.borderColor="var(--ink)" }}
      onMouseLeave={e => { if(!expanded) e.currentTarget.style.borderColor="var(--line)" }}
    >
      {p.href && (
        <a
          href={p.href}
          onClick={e => e.stopPropagation()}
          aria-label={`Open ${p.name} page`}
          style={{position:"absolute", top:14, right:56, width:32, height:32, borderRadius:999, border:"1px solid var(--line)", display:"grid", placeItems:"center", background:"#fff", zIndex:2, transition:"all .15s", color:"var(--ink)"}}
          onMouseEnter={e => { e.currentTarget.style.borderColor="var(--ink)"; e.currentTarget.style.background="var(--ink)"; e.currentTarget.style.color="#fff"; }}
          onMouseLeave={e => { e.currentTarget.style.borderColor="var(--line)"; e.currentTarget.style.background="#fff"; e.currentTarget.style.color="var(--ink)"; }}
          title="Open product page"
        >
          <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden>
            <path d="M6 3h7v7M13 3L4 12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </a>
      )}
      <div style={prodStyles.cat}>{p.cat}</div>
      <div style={{display:"flex", gap:20, alignItems:"start"}}>
        <div style={{flex:1, minWidth:0}}>
          <h3 style={prodStyles.name}>{p.name}</h3>
          <p style={prodStyles.tagline}>{p.tagline}</p>
          <div style={prodStyles.stats}>
            <div><div style={prodStyles.statV}>{p.tsi}</div><div style={prodStyles.statL}>{p.tsiLabel || "TSI"}</div></div>
            <div><div style={prodStyles.statV}>{p.trades}</div><div style={prodStyles.statL}>Trades</div></div>
            <div><div style={prodStyles.statV}>{p.response}m</div><div style={prodStyles.statL}>Response</div></div>
          </div>
          {expanded && (
            <div style={{marginTop:24, display:"grid", gridTemplateColumns:"1fr 1fr", gap:24}}>
              <div>
                <div style={prodStyles.listH}>What we like</div>
                <ul style={prodStyles.list}>
                  {p.likes.map(l => <li key={l} style={{padding:"6px 0", borderBottom:"1px dashed var(--line)"}}>{l}</li>)}
                </ul>
              </div>
              <div>
                <div style={prodStyles.listH}>What we decline</div>
                <ul style={prodStyles.list}>
                  {p.decline.map(l => <li key={l} style={{padding:"6px 0", borderBottom:"1px dashed var(--line)", opacity:0.55}}>{l}</li>)}
                </ul>
              </div>
            </div>
          )}
          {expanded && (
            <div style={{marginTop:22, display:"flex", gap:12, fontSize:13, alignItems:"center"}}>
              <span style={{fontFamily:'"JetBrains Mono",monospace', opacity:0.55}}>MIN PREMIUM</span>
              <span style={{fontWeight:600}}>{p.min} + IPT</span>
              <span style={{fontFamily:'"JetBrains Mono",monospace', opacity:0.55, marginLeft:24}}>COMMISSION</span>
              <span style={{fontWeight:600}}>Up to 20%</span>
              {p.href && (
                <a
                  href={p.href}
                  onClick={e => e.stopPropagation()}
                  style={{marginLeft:"auto", padding:"10px 18px", background:"var(--ink)", color:"#fff", borderRadius:999, fontWeight:600, fontSize:13, display:"inline-flex", alignItems:"center", gap:8, textDecoration:"none"}}
                >
                  View product
                  <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M2 8h11M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </a>
              )}
            </div>
          )}
        </div>
        <div style={prodStyles.corner}>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" style={{transform: expanded?"rotate(45deg)":"none", transition:"transform .2s"}}>
            <path d="M6 2v8M2 6h8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
        </div>
      </div>
    </div>
  );
}

function Products({density="default"}){
  const [filter, setFilter] = React.useState("All");
  const [expanded, setExpanded] = React.useState(null);
  const list = filter==="All" ? window.IUW.PRODUCTS : window.IUW.PRODUCTS.filter(p => p.cat===filter);
  return (
    <section id="products" style={prodStyles.wrap}>
      <div style={prodStyles.inner}>
        <div style={prodStyles.head}>
          <div>
            <div style={prodStyles.kicker}>Products</div>
            <h2 style={prodStyles.h2}>Built with tailored logic. So there's zero drag.</h2>
          </div>
          <div style={{fontSize:14, color:"var(--ink)", opacity:0.65, maxWidth:320, textAlign:"right"}}>
            Click any product to see what we like, accommodate and decline — pulled straight from the 2026 product guide.
          </div>
        </div>
        <div style={prodStyles.filters}>
          {window.IUW.CATEGORIES.map(c => (
            <button key={c} style={prodStyles.chip(c===filter)} onClick={()=>{setFilter(c); setExpanded(null);}}>{c}</button>
          ))}
        </div>
        <div style={prodStyles.grid}>
          {list.map(p => (
            <ProductCard
              key={p.id}
              p={p}
              density={density}
              expanded={expanded===p.id}
              onToggle={() => setExpanded(expanded===p.id ? null : p.id)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

window.Products = Products;