// Portfolio page (dark) — real companies from paceventures.com
function PortfolioPage({ setPage, tiles = 'grade' }) {
  const [sector, setSector] = React.useState('All');
  const [stage, setStage] = React.useState('All');
  useFadeUp();
  const all = window.PV_DATA.portfolio;
  const stages = ['All', 'Pre-Seed', 'Seed', 'Series A', 'Series B', 'IPO', 'Exited', 'Inactive'];
  const bySector = sector === 'All' ? all : all.filter(x => x.sector === sector);
  const filtered = stage === 'All' ? bySector : bySector.filter(x => x.stage === stage);
  return (
    <div className="portfolio-page" data-tiles={tiles} style={{ minHeight: '100vh' }}>
      <Nav page="portfolio" setPage={setPage} />
      <section className="portfolio-hero shell">
        <div className="hero-meta">
          <span className="dot"></span>
          <span>{all.length} COMPANIES — 2021 / 2026</span>
          <span style={{ flex: 1 }}></span>
          <span>HEALTH & INDUSTRIAL</span>
        </div>
        <h1>Proud to back <em>founders</em> shaping future industries.</h1>
        <p>We back health-tech and industrial-tech companies at pre-seed and seed, predominantly in five cities: Munich, London, Boston, New York and San Francisco. Ask our founders. We make the commercial and financial introductions that change a company's trajectory, and we stay close for the long haul. An investment is a decade-long relationship, and we treat it that way.</p>
        <div className="focus-grid" style={{ marginTop: 52, marginBottom: 4 }}>
          {[window.PV_DATA.focus.health, window.PV_DATA.focus.industrial].map((f, i) => (
            <div className="focus-card" key={f.title}>
              <div className="fnum">0{i + 1} — {i === 0 ? 'Human health' : 'Industrial technology'}</div>
              <h3>{f.title}</h3>
              <p>{f.copy}</p>
            </div>
          ))}
        </div>
        <div className="pfx-filters m-hide">
          <span className="lbl">Sector</span>
          {['All', 'Health', 'Industrial'].map(c => (
            <button key={c} className={"chip" + (sector === c ? ' active' : '')} onClick={() => setSector(c)}>
              {c} <span style={{ opacity: .55, marginLeft: 4 }}>{c === 'All' ? all.length : all.filter(x => x.sector === c).length}</span>
            </button>
          ))}
        </div>
        <div className="pfx-filters m-hide" style={{ marginTop: 10 }}>
          <span className="lbl">CURRENT STAGE</span>
          {stages.map(s => (
            <button key={s} className={"chip" + (stage === s ? ' active' : '')} onClick={() => setStage(s)}>
              {s}{s !== 'All' && <span style={{ opacity: .55, marginLeft: 4 }}>{all.filter(x => x.stage === s).length}</span>}
            </button>
          ))}
        </div>
        <div className="m-selects">
          <label className="m-sel"><span className="lbl">Sector</span>
            <select value={sector} onChange={e => setSector(e.target.value)}>
              {['All', 'Health', 'Industrial'].map(c => <option key={c} value={c}>{c}{c !== 'All' ? ' (' + all.filter(x => x.sector === c).length + ')' : ''}</option>)}
            </select>
          </label>
          <label className="m-sel"><span className="lbl">Stage</span>
            <select value={stage} onChange={e => setStage(e.target.value)}>
              {stages.map(s => <option key={s} value={s}>{s}{s !== 'All' ? ' (' + all.filter(x => x.stage === s).length + ')' : ''}</option>)}
            </select>
          </label>
        </div>
      </section>
      <div className="shell">
        <div className="pfx-grid">
          {filtered.map(c => (
            <div className="pfx-card" key={c.name}>
              {(tiles === 'logos' || tiles === 'blur')
                ? (() => { const vid = window.PV_NO_VIDEO ? null : (c.video || (c.media && c.media.type === 'video' ? c.media.src : null)); const bg = tiles === 'blur' ? (c.media && (c.media.type === 'img' || c.media.type === 'image') ? c.media.src : c.poster || null) : null; return <div className={"pfx-media tile-logo" + (vid ? ' has-vid' : '') + (tiles === 'blur' && (bg || vid) ? ' tile-blur' : '')}
                    onMouseEnter={e => { const v = e.currentTarget.querySelector('video'); if (v) { v.muted = true; v.play().catch(() => {}); } }}
                    onMouseLeave={e => { const v = e.currentTarget.querySelector('video'); if (v) { v.pause(); e.currentTarget.classList.remove('playing'); } }}>
                    {bg && <img className="tl-bg" src={bg} alt="" />}
                    {vid && <video className="tl-vid" src={vid} poster={c.poster || null} muted loop playsInline preload="none" onPlaying={e => { const m = e.currentTarget.closest('.pfx-media'); if (m) m.classList.add('playing'); }} ref={el => { if (el) { el.muted = true; el.defaultMuted = true; el.volume = 0; } }}></video>}
                    {c.logo
                      ? <img className="tl-logo" src={c.logo} alt={c.name} />
                      : <span className="tl-name">{(c.stealth || c.name === 'Stealth') ? <Logo size={40} color="rgba(255,255,255,0.9)" /> : c.name}</span>}
                  </div>; })()
                : <div className={"pfx-media" + (c.media.type === 'none' ? ' tile-brand' : '')}>
                {c.media.type === 'video'
                  ? <video src={c.media.src} autoPlay muted loop playsInline preload="metadata" ref={el => { if (el) { el.muted = true; el.defaultMuted = true; el.volume = 0; el.play().catch(() => {}); } }}></video>
                  : c.media.type === 'none'
                    ? <Logo size={56} color="rgba(255,255,255,0.92)" />
                    : <img src={c.media.src} alt={c.name} loading="lazy" />}
              </div>}
              <div className="pfx-body">
                <div className="pfx-name">{c.name}</div>
                <div className="pfx-desc">{c.desc}</div>
                <div className="pfx-meta"><span className="tagx">{c.sector}</span><span className="tagx">{c.stage}</span></div>
                <div className="pfx-links">
                  {c.article && <a href="#" onClick={(e) => { e.preventDefault(); const slug = (c.article.split('/articles/')[1] || '').replace(/\/$/, ''); if (window.PV_ARTICLES && window.PV_ARTICLES.some(a => a.slug === slug)) { window.PV_OPEN_ARTICLE = slug; setPage('insights'); } else { window.open(c.article, '_blank'); } }}>Why we invested →</a>}
                  {c.site && <a href={c.site} target="_blank" rel="noreferrer">Visit site ↗</a>}
                  {c.funding && c.funding !== '#' && <a href={c.funding} target="_blank" rel="noreferrer">Funding news ↗</a>}
                </div>
              </div>
            </div>
          ))}
          {filtered.length === 0 && <div style={{ gridColumn: '1 / -1', padding: '48px 0', color: 'rgba(246,245,255,.5)', fontSize: 14 }}>No companies here yet.</div>}
        </div>
      </div>
      <Footer setPage={setPage} />
    </div>
  );
}
window.PortfolioPage = PortfolioPage;