// sections/Portfolio.jsx — project archive · v2 print index
function PortfolioSection({ onOpen }) {
  const [filter, setFilter] = React.useState('all');

  const filters = [
    { id: 'all',        label: 'All' },
    { id: 'fbp',        label: 'FBP' },
    { id: 'course',     label: 'Courses' },
    { id: 'internship', label: 'Internship' },
  ];

  const matches = (p) => {
    if (filter === 'all') return true;
    return p.kind === filter;
  };

  const filtered = PROJECTS.filter(matches);

  return (
    <div className="fade-key" data-screen-label="Side D · Portfolio">
      <SectionMast section={SECTIONS[3]} subtitle="The archive — the FBP, formative courses, and the internship. Click any item for the case study." />

      {/* Filter tray */}
      <div style={{ padding: '8px 0 0', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16, borderBottom: '2px solid var(--c-smoke)' }}>
        <div style={{ display: 'flex', gap: 4 }}>
          {filters.map(f => (
            <FilterTab key={f.id} active={filter === f.id} onClick={() => setFilter(f.id)}>
              {f.label}
            </FilterTab>
          ))}
        </div>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, letterSpacing: '0.12em', color: 'var(--c-muted)', textTransform: 'uppercase', paddingBottom: 10 }}>
          {filtered.length} {filtered.length === 1 ? 'track' : 'tracks'}
        </div>
      </div>

      {/* Index table */}
      <div style={{ padding: '8px 0 24px' }}>
        <div className="pf-grid" style={{
          display: 'grid',
          gridTemplateColumns: '52px 1fr 220px 120px 32px',
          gap: 16,
          padding: '12px 8px',
          fontFamily: 'var(--font-body)',
          fontSize: 11.5,
          fontWeight: 700,
          letterSpacing: '0.14em',
          color: 'var(--c-muted)',
          textTransform: 'uppercase',
          borderBottom: '1px solid var(--c-border)',
        }}>
          <div>Trk</div>
          <div>Title</div>
          <div className="desktop-only">Venue</div>
          <div className="desktop-only">Year</div>
          <div></div>
        </div>
        {filtered.map(p => (
          <ProjectRow key={p.id} project={p} onClick={() => onOpen(p)} />
        ))}
      </div>

      {/* Card grid below */}
      <div style={{ padding: '40px 0 96px' }}>
        <LinerLabel chip={SECTIONS[3].accent}>D · Featured</LinerLabel>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.02em', color: 'var(--c-smoke)', marginBottom: 24, marginTop: 8 }}>
          Featured
        </h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20 }}>
          {filtered.slice(0, 3).map(p => (
            <ProjectCardLocal key={p.id} project={p} onClick={() => onOpen(p)} />
          ))}
        </div>
      </div>
    </div>
  );
}

function FilterTab({ active, onClick, children }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        padding: '8px 16px 10px',
        border: 'none',
        background: active ? 'var(--c-smoke)' : 'transparent',
        color: active ? '#FFFFFF' : hover ? 'var(--c-smoke)' : 'var(--c-whisper)',
        fontFamily: 'var(--font-body)',
        fontSize: 12.5,
        letterSpacing: '0.1em',
        textTransform: 'uppercase',
        fontWeight: 600,
        cursor: 'pointer',
        transition: 'all 160ms',
      }}>
      {children}
    </button>
  );
}

function ProjectRow({ project, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      className="pf-grid"
      style={{
        display: 'grid',
        gridTemplateColumns: '52px 1fr 220px 120px 32px',
        gap: 16,
        padding: '16px 8px',
        alignItems: 'center',
        borderBottom: '1px solid var(--c-border)',
        background: hover ? '#FAFBFC' : 'transparent',
        cursor: 'pointer',
        transition: 'background 160ms',
      }}>
      <div style={{
        fontFamily: 'var(--font-display)',
        fontSize: 20,
        fontWeight: 700,
        color: hover ? 'var(--ink-lilac)' : 'var(--c-muted)',
        letterSpacing: '-0.02em',
        transition: 'color 160ms',
      }}>
        {project.number}
      </div>
      <div>
        <div style={{
          fontFamily: 'var(--font-display)',
          fontSize: 17.5,
          fontWeight: 700,
          color: 'var(--c-smoke)',
          letterSpacing: '-0.015em',
          marginBottom: 4,
        }}>
          {project.title} <span style={{ color: 'var(--c-muted)', fontWeight: 400, fontSize: 14, fontFamily: 'var(--font-body)' }}>— {project.subtitle}</span>
        </div>
        <div style={{
          fontFamily: 'var(--font-body)',
          fontSize: 13,
          color: 'var(--c-whisper)',
          lineHeight: 1.55,
          maxWidth: 540,
        }}>
          {project.desc}
        </div>
      </div>
      <div className="desktop-only" style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--c-whisper)', letterSpacing: '0.04em' }}>
        {project.venue}
      </div>
      <div className="desktop-only" style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--c-whisper)', fontVariantNumeric: 'tabular-nums' }}>
        {project.year}
      </div>
      <div style={{
        fontFamily: 'var(--font-body)',
        fontSize: 15,
        color: hover ? 'var(--ink-lilac)' : 'var(--c-muted)',
        transition: 'color 160ms, transform 200ms var(--ease-spring)',
        transform: hover ? 'translateX(4px)' : 'translateX(0)',
        textAlign: 'right',
      }}>
        →
      </div>
    </div>
  );
}

function ProjectCardLocal({ project, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: '#FFFFFF',
        border: `1px solid ${hover ? 'var(--c-smoke)' : 'var(--c-border)'}`,
        overflow: 'hidden',
        transition: 'transform 240ms var(--ease-spring), border-color 180ms',
        transform: hover ? 'translateY(-3px)' : 'translateY(0)',
        cursor: 'pointer',
        display: 'flex',
        flexDirection: 'column',
      }}>
      <div style={{
        height: 150,
        background: 'rgba(185,163,227,0.22)',
        position: 'relative',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        overflow: 'hidden',
        borderBottom: '1px solid var(--c-border)',
      }}>
        <div style={{
          position: 'absolute',
          top: 12, left: 14,
          fontFamily: 'var(--font-body)', fontSize: 10.5, fontWeight: 600, letterSpacing: '0.16em', color: 'var(--ink-lilac)', textTransform: 'uppercase', opacity: 0.7,
        }}>
          Track {project.number}
        </div>
        <div style={{
          position: 'relative',
          fontFamily: 'var(--font-display)',
          fontSize: 76,
          fontWeight: 700,
          color: 'var(--ink-lilac)',
          opacity: 0.4,
          letterSpacing: '-0.04em',
          lineHeight: 1,
        }}>
          {project.number}
        </div>
      </div>
      <div style={{ padding: '20px 22px', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 11.5, fontWeight: 600, color: 'var(--c-muted)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 10 }}>
          {project.year} · {project.venue}
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 700, color: 'var(--c-smoke)', letterSpacing: '-0.015em', lineHeight: 1.15, marginBottom: 6 }}>
          {project.title}
        </div>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--c-whisper)', lineHeight: 1.6, marginBottom: 16, flex: 1 }}>
          {project.desc}
        </div>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {project.tags.map((t, i) => <Tag key={i} variant={t.variant}>{t.label}</Tag>)}
        </div>
      </div>
    </div>
  );
}

window.PortfolioSection = PortfolioSection;