// ProductCard.jsx — opens a detail panel, includes feature list, version, price
const { useState: useStatePC } = React;

function StatusChip({ status, size }) {
  const sm = size === 'sm';
  const padY = sm ? 2 : 3;
  const padX = sm ? 6 : 8;
  const fs = sm ? 9 : 10;
  if (status === 'Available') {
    return (
      <span style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        fontFamily: 'var(--font-mono)', fontSize: fs,
        letterSpacing: '0.14em', padding: `${padY}px ${padX}px`,
        background: 'var(--fg)', color: 'var(--bg)',
      }}>
        <span style={{ width: 5, height: 5, background: 'var(--bg)', borderRadius: 999 }} />
        AVAILABLE
      </span>
    );
  }
  if (status === 'Open Source') {
    return (
      <span style={{ ...chipOutline, padding: `${padY}px ${padX}px`, fontSize: fs }}>
        <span style={{ width: 5, height: 5, border: '1px solid var(--fg-2)', borderRadius: 999 }} />
        OPEN SOURCE
      </span>
    );
  }
  if (status === 'Free') {
    return (
      <span style={{ ...chipOutline, padding: `${padY}px ${padX}px`, fontSize: fs }}>
        <span style={{ width: 5, height: 5, background: 'var(--fg)', borderRadius: 999 }} />
        FREE
      </span>
    );
  }
  return null;
}

const chipOutline = {
  display: 'inline-flex', alignItems: 'center', gap: 6,
  fontFamily: 'var(--font-mono)', fontSize: 10,
  letterSpacing: '0.14em', padding: '3px 8px',
  border: '1px solid var(--border-strong)', color: 'var(--fg-1)',
};

function ProductCard({ product, onOpen }) {
  const [hover, setHover] = useStatePC(false);
  return (
    <div
      className="nn-product-card"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={() => onOpen && onOpen(product)}
      style={{
        cursor: 'pointer',
        display: 'flex', flexDirection: 'column',
        background: hover ? 'var(--bg-panel)' : 'var(--bg)',
        padding: 24,
        transition: 'background 140ms var(--ease-out)',
        minHeight: 200, position: 'relative',
      }}>
      {/* index */}
      <div style={{
        position: 'absolute', top: 14, right: 16,
        fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.14em',
      }}>{product.idx}</div>

      <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>

      <h3 style={{
        fontFamily: 'var(--font-mono)', fontSize: 24,
        color: 'var(--fg)', margin: '24px 0 6px',
        letterSpacing: '-0.02em', fontWeight: 400,
      }}>
        {product.name}
      </h3>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 14,
        color: 'var(--fg-2)', lineHeight: 1.5,
      }}>
        {product.tagline}
      </div>

      <div style={{ flex: 1 }} />

      {/* footer row */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        marginTop: 24, paddingTop: 14, borderTop: '1px dashed var(--border-soft)',
        fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)',
        letterSpacing: '0.04em',
      }}>
        <span className="num">{product.version} · {product.size}</span>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          fontSize: 12, color: hover ? 'var(--fg)' : 'var(--fg-2)',
          transition: 'color 120ms var(--ease-out)',
        }}>
          Read more
          <span style={{
            color: hover ? 'var(--fg)' : 'var(--fg-3)',
            transform: hover ? 'translateX(4px)' : 'translateX(0)',
            transition: 'transform 160ms var(--ease-out), color 120ms var(--ease-out)',
          }}>→</span>
        </span>
      </div>
    </div>
  );
}

window.StatusChip = StatusChip;
window.ProductCard = ProductCard;