// ProductDetail.jsx — modal sheet with deep info
const { useEffect: useEffectPD } = React;

function ProductDetail({ product, onClose }) {
  useEffectPD(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [onClose]);
  if (!product) return null;
  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 50,
      background: 'rgba(0,0,0,0.7)',
      display: 'flex', justifyContent: 'flex-end',
    }}>
      <div className="nn-detail-panel" onClick={(e) => e.stopPropagation()} style={{
        overflowY: 'auto',
        background: 'var(--bg)', borderLeft: '1px solid var(--border-strong)',
        boxShadow: 'var(--shadow-3)',
        animation: 'nn-slide-in 220ms var(--ease-out)',
      }}>
        {/* sticky header */}
        <div style={{
          position: 'sticky', top: 0, background: 'var(--bg)',
          borderBottom: '1px solid var(--border)', zIndex: 2,
          padding: '14px var(--gutter)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em',
          color: 'var(--fg-3)', textTransform: 'uppercase',
        }}>
          <span>PRODUCT — {product.idx}</span>
          <button onClick={onClose} style={{
            all: 'unset', cursor: 'pointer',
            border: '1px solid var(--border-strong)',
            padding: '4px 10px', fontSize: 11, color: 'var(--fg)',
            display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>
            CLOSE <span style={{
              fontFamily: 'var(--font-mono)', fontSize: 10,
              padding: '1px 5px', border: '1px solid var(--border-strong)',
              color: 'var(--fg-2)',
            }}>ESC</span>
          </button>
        </div>

        <div style={{ padding: '40px var(--gutter) 64px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <StatusChip status={product.status} />
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: 10,
              letterSpacing: '0.14em', color: 'var(--fg-3)',
              textTransform: 'uppercase',
            }}>{product.platform}</span>
          </div>
          <h2 style={{
            fontSize: 'clamp(36px, 8vw, 56px)', lineHeight: 1, letterSpacing: '-0.03em',
            color: 'var(--fg)', fontWeight: 400, margin: '24px 0 8px',
          }}>{product.name}</h2>
          <p style={{ fontSize: 18, color: 'var(--fg-1)', lineHeight: 1.5, maxWidth: 560 }}>
            {product.tagline}.
          </p>

          {/* mock app preview */}
          <div style={{
            marginTop: 32, border: '1px solid var(--border)',
            background: 'var(--bg-panel)',
            aspectRatio: '16 / 9',
            display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-start',
            padding: 24, position: 'relative',
            backgroundImage: 'radial-gradient(var(--gray-4) 1px, transparent 1px)',
            backgroundSize: '20px 20px',
          }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-3)',
              letterSpacing: '0.08em', textTransform: 'uppercase',
            }}>
              [ {product.name.toLowerCase().replace(/\s+/g,'-')}.app — placeholder ]
            </div>
            {/* fake traffic lights */}
            <div style={{
              position: 'absolute', top: 14, left: 14, display: 'flex', gap: 6,
            }}>
              {[0,1,2].map(i => (
                <span key={i} style={{
                  width: 10, height: 10, borderRadius: 999,
                  border: '1px solid var(--border-strong)',
                }}/>
              ))}
            </div>
          </div>

          {/* meta grid */}
          <div className="nn-detail-meta" style={{
            marginTop: 40,
            gap: 0, border: '1px solid var(--border)',
          }}>
            {[
              ['Version', product.version],
              ['Size', product.size],
              ['Price', product.price],
              ['Updated', product.updated],
            ].map(([k, v], i) => (
              <div key={k} style={{
                padding: '16px 16px',
                borderRight: i < 3 ? '1px solid var(--border)' : 'none',
              }}>
                <div className="overline" style={{ fontSize: 9, marginBottom: 8 }}>{k}</div>
                <div className="num" style={{ fontSize: 16, color: 'var(--fg)' }}>{v}</div>
              </div>
            ))}
          </div>

          {/* features */}
          <div style={{ marginTop: 40 }}>
            <div className="overline">§ What it does</div>
            <ul style={{ listStyle: 'none', margin: '16px 0 0', padding: 0 }}>
              {product.features.map((f, i) => (
                <li key={f} style={{
                  display: 'grid', gridTemplateColumns: '40px 1fr', gap: 12,
                  alignItems: 'baseline',
                  padding: '12px 0', borderTop: '1px solid var(--border)',
                }}>
                  <span className="num" style={{ fontSize: 11, color: 'var(--fg-3)' }}>
                    {String(i+1).padStart(2, '0')}
                  </span>
                  <span style={{ fontSize: 14, color: 'var(--fg-1)', lineHeight: 1.5 }}>{f}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* CTAs */}
          <div style={{ marginTop: 40, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <a href={product.url} style={{
              all: 'unset', cursor: 'pointer',
              fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.02em',
              padding: '14px 22px', background: 'var(--fg)', color: 'var(--bg)',
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>
              {product.cta} <span>→</span>
            </a>
            <a href={product.url} style={{
              all: 'unset', cursor: 'pointer',
              fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.02em',
              padding: '14px 22px',
              border: '1px solid var(--border-strong)', color: 'var(--fg-1)',
            }}>
              {product.domain} ↗
            </a>
          </div>

        </div>
      </div>
      <style>{`@keyframes nn-slide-in { from { transform: translateX(40px); opacity: 0 } to { transform: translateX(0); opacity: 1 } }`}</style>
    </div>
  );
}
window.ProductDetail = ProductDetail;