// Grid view — slides up from the bottom of the viewport, presents every project
// in a traditional 3-column grid. Clicking a card hands off to the same expand
// flow as the carousel (onSelect is the same handler).

function GridView({ open, projects, onClose, onSelect }) {
  // mount the panel always; just toggle its transform so the slide-up
  // animation is symmetrical on close.
  return (
    <div
      aria-hidden={!open}
      style={{
        position: 'fixed',
        left: 0, right: 0, bottom: 0, top: 0,
        zIndex: 70,
        pointerEvents: open ? 'auto' : 'none',
        display: 'flex', flexDirection: 'column',
        background: 'var(--paper)',
        transform: open ? 'translateY(0)' : 'translateY(100%)',
        transition: 'transform 540ms cubic-bezier(.6,.05,.2,1)',
        boxShadow: open ? '0 -32px 80px -30px rgba(0,0,0,0.35)' : 'none'
      }}>
      {/* header */}
      <header style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        padding: '28px 56px',
        borderBottom: '1px solid var(--rule)',
        flex: '0 0 auto'
      }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 18 }}>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: 2, color: 'var(--mute)' }}>
            JD — INDEX
          </div>
          <h2 style={{
            margin: 0,
            fontFamily: 'var(--display)', fontStyle: 'italic', fontWeight: 500,
            fontSize: 44, lineHeight: 1
          }}>All projects</h2>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: 2, color: 'var(--mute)' }}>
            {String(projects.length).padStart(2, '0')} ITEMS
          </div>
        </div>
        <button
          className="hover-fade"
          onClick={onClose}
          aria-label="Close grid"
          style={{
            background: 'transparent', border: 'none', cursor: 'pointer',
            fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: 2,
            color: 'var(--ink)', padding: '8px 0'
          }}>
          ↓ CLOSE
        </button>
      </header>

      {/* the grid itself */}
      <div style={{
        flex: 1, minHeight: 0,
        overflowY: 'auto',
        padding: '40px 56px 72px'
      }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
          gap: '40px 28px'
        }}>
          {projects.map((p) => (
            <button
              key={p.id}
              type="button"
              onClick={(e) => onSelect(p, e.currentTarget)}
              style={{
                appearance: 'none',
                background: 'transparent',
                border: 'none',
                padding: 0,
                textAlign: 'left',
                cursor: 'pointer',
                color: 'var(--ink)',
                fontFamily: 'inherit'
              }}>
              <div className="grid-card" style={{
                position: 'relative',
                aspectRatio: '4 / 3',
                background: 'var(--grey-1)',
                overflow: 'hidden'
              }}>
                {p.thumbEmbed
                  ? <iframe src={p.thumbEmbed} title={p.title} scrolling="no"
                      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 'none', display: 'block', pointerEvents: 'none' }} />
                  : p.image
                  ? <img src={p.image} alt={p.title} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                  : p.video
                    ? <video src={p.video} autoPlay muted loop playsInline style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                    : <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
                        <ThumbPlaceholder no={p.no} title={p.title} />
                      </div>
                }
              </div>
              <div style={{
                display: 'flex', alignItems: 'baseline', gap: 12,
                marginTop: 16
              }}>
                <span style={{
                  fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: 2,
                  color: 'var(--mute)'
                }}>{p.no}</span>
                <span style={{
                  fontFamily: 'var(--display)', fontStyle: 'italic',
                  fontSize: 22, fontWeight: 500, lineHeight: 1.1,
                  flex: 1
                }}>{p.title}</span>
              </div>
              <div style={{
                marginTop: 6,
                fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: 2,
                color: 'var(--mute)', textTransform: 'uppercase'
              }}>{p.kind} — {p.year}</div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

window.GridView = GridView;