function ProductDetail({ product, addToCart, navigate }) {
  const [size, setSize] = React.useState(product.sizes[1] || product.sizes[0]);
  const [qty, setQty] = React.useState(1);
  const [added, setAdded] = React.useState(false);

  const handleAdd = () => {
    addToCart({ ...product, size, qty });
    setAdded(true);
    setTimeout(() => setAdded(false), 1500);
  };

  return (
    <section style={{ background: 'var(--wht)', padding: '32px 48px 96px' }}>
      <div style={{ fontSize: 12, color: 'var(--fg-3)', marginBottom: 18, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
        <span style={{ cursor: 'pointer' }} onClick={() => navigate('home')}>Home</span>
        {'  ›  '}
        <span style={{ cursor: 'pointer' }} onClick={() => navigate('shop')}>Shop</span>
        {'  ›  '}
        <span style={{ color: 'var(--fg-1)' }}>{product.name} — {product.color}</span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56 }}>
        <div>
          <ProductImage product={product} size="lg" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginTop: 12 }}>
            {[0,1,2,3].map(i => (
              <div key={i} style={{
                background: i === 0 ? product.swatch : 'var(--ink-100)',
                aspectRatio: '1', border: '1px solid var(--blk)',
                opacity: i === 0 ? 1 : 0.55, cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 10, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em',
              }}>{i === 0 ? '' : `view ${i+1}`}</div>
            ))}
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          {product.badge && <span style={{
            alignSelf: 'flex-start', padding: '4px 9px', background: 'var(--blk)', color: 'var(--wht)',
            fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', borderRadius: 2,
          }}>{product.badge}</span>}
          <h1 style={{
            fontFamily: 'var(--font-display)', fontSize: 56, margin: 0,
            textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 0.95,
          }}>{product.name}<br/>— {product.color}</h1>
          <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 22 }}>${product.price}</div>

          <p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--fg-2)', margin: 0 }}>{product.blurb}</p>
          <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--fg-3)', margin: 0 }}>{product.detail}</p>

          <div style={{ borderTop: '1px solid var(--ink-200)', paddingTop: 18, marginTop: 4 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-2)', marginBottom: 10 }}>Size · {size}</div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {product.sizes.map(s => (
                <button key={s} onClick={() => setSize(s)} style={{
                  padding: '8px 16px', minWidth: 48,
                  border: '1.5px solid var(--blk)', borderRadius: 999,
                  background: s === size ? 'var(--blk)' : 'var(--wht)',
                  color: s === size ? 'var(--wht)' : 'var(--blk)',
                  fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 12,
                  letterSpacing: '0.08em', textTransform: 'uppercase', cursor: 'pointer',
                }}>{s}</button>
              ))}
            </div>
          </div>

          <div style={{ display: 'flex', gap: 12, marginTop: 6 }}>
            <div style={{ display: 'flex', alignItems: 'center', border: '1.5px solid var(--blk)', borderRadius: 4 }}>
              <button onClick={() => setQty(Math.max(1, qty-1))} style={{ padding: '12px 14px', background: 'transparent', border: 'none', cursor: 'pointer', fontFamily: 'var(--font-mono)', fontWeight: 700 }}>−</button>
              <div style={{ padding: '0 8px', fontFamily: 'var(--font-mono)', fontWeight: 700, minWidth: 20, textAlign: 'center' }}>{qty}</div>
              <button onClick={() => setQty(qty+1)} style={{ padding: '12px 14px', background: 'transparent', border: 'none', cursor: 'pointer', fontFamily: 'var(--font-mono)', fontWeight: 700 }}>+</button>
            </div>
            <button onClick={handleAdd} style={{
              flex: 1, background: added ? 'var(--red)' : 'var(--blk)', color: 'var(--wht)',
              border: `1.5px solid ${added ? 'var(--red)' : 'var(--blk)'}`,
              padding: '14px 24px', borderRadius: 4, cursor: 'pointer',
              fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 13,
              letterSpacing: '0.08em', textTransform: 'uppercase',
              transition: 'background 120ms, color 120ms, border-color 120ms',
            }}>{added ? 'Added to cart ✓' : `Add to cart · $${product.price * qty}`}</button>
          </div>

          <div style={{
            marginTop: 18, padding: '14px 16px', background: 'var(--cream)',
            border: '1px solid var(--blk)', borderRadius: 4,
            fontSize: 12, color: 'var(--fg-2)', lineHeight: 1.55,
          }}>
            <b style={{ color: 'var(--blk)' }}>Ships from DC.</b> Free over $75 · 30-day returns · order before 2pm ET ships same day.
          </div>
        </div>
      </div>
    </section>
  );
}

window.ProductDetail = ProductDetail;