// Product detail — full bleed, theme-immersive. Real photography hero + thumbs.
function Product({ product, onAdd, onBack }) {
  const [activeImg, setActiveImg] = React.useState(0);
  if (!product) return null;
  const images = [product.image, product.boxImage].filter(Boolean);

  return (
    <section data-screen-label={`04 Product ${product.name}`} style={prodStyles.section}>
      <button className="mini" onClick={onBack} style={prodStyles.back}>
        ← Back to collection
      </button>

      <div style={prodStyles.grid}>
        <div>
          <div style={prodStyles.art}>
            <img src={images[activeImg]} alt={product.name} style={prodStyles.heroImg}/>
            <div className="micro" style={prodStyles.artCaption}>
              {product.color} · Studio shot
            </div>
          </div>
          {images.length > 1 && (
            <div style={prodStyles.thumbs}>
              {images.map((src, i) => (
                <button key={i} onClick={() => setActiveImg(i)} style={{
                  ...prodStyles.thumb,
                  borderColor: i === activeImg ? 'var(--gold)' : 'var(--hairline)',
                }}>
                  <img src={src} alt="" style={{width:'100%', height:'100%', objectFit:'cover'}}/>
                </button>
              ))}
            </div>
          )}
        </div>

        <div style={prodStyles.copy}>
          <div className="micro" style={{color:'var(--gold)', marginBottom: 20}}>
            {product.tagline}
          </div>
          <h1 className="serif" style={prodStyles.name}>
            {product.name}
          </h1>
          <p className="serif" style={prodStyles.subtitle}>
            <em style={{fontStyle:'italic'}}>{product.subtitle}</em>
          </p>
          <p style={prodStyles.desc}>{product.description}</p>

          <div style={prodStyles.specs}>
            {product.specs.map(s => (
              <div key={s.label} style={prodStyles.specRow}>
                <span className="mini" style={{color:'var(--ink-mute)'}}>{s.label}</span>
                <span style={{color:'var(--ink)', fontSize: 14}}>{s.value}</span>
              </div>
            ))}
          </div>

          <div style={prodStyles.features}>
            {product.features.map(f => (
              <span key={f} style={prodStyles.chip}>{f}</span>
            ))}
          </div>

          <div style={prodStyles.cta}>
            <button onClick={() => onAdd(product)} className="mini" style={prodStyles.addBtn}>
              <span>Add to cart</span>
              <span style={{color:'var(--bg)', opacity: 0.5}}>—</span>
              <span>${product.price}</span>
            </button>
            <div className="micro" style={{color:'var(--ink-mute)'}}>
              Ships in unmarked packaging · 30-day quiet returns
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const prodStyles = {
  section: { padding: '140px 56px 120px', maxWidth: 1480, margin: '0 auto' },
  back: { color:'var(--ink-mute)', marginBottom: 40, padding: '8px 0' },
  grid: { display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'flex-start' },
  art: {
    position: 'relative',
    background: 'color-mix(in oklab, var(--bg-soft) 70%, transparent)',
    border: '1px solid var(--hairline)',
    aspectRatio: '4/5',
    overflow: 'hidden',
  },
  heroImg: {
    width:'100%', height:'100%', objectFit: 'cover',
  },
  artCaption: {
    position: 'absolute', bottom: 20, left: 24,
    color:'var(--ink)', mixBlendMode: 'screen',
    background: 'rgba(0,0,0,0.4)', padding: '6px 12px',
    backdropFilter: 'blur(8px)',
  },
  thumbs: {
    display:'flex', gap: 12, marginTop: 16,
  },
  thumb: {
    width: 80, height: 80,
    border: '1px solid',
    overflow: 'hidden', cursor: 'pointer',
    transition: 'all 200ms',
    padding: 0,
  },
  copy: { paddingLeft: 20, paddingTop: 20 },
  name: {
    fontSize: 'clamp(64px, 7vw, 104px)', lineHeight: 0.92,
    letterSpacing: '-0.01em', marginBottom: 8,
  },
  subtitle: {
    fontSize: 24, color:'var(--ink-soft)', marginBottom: 28,
  },
  desc: {
    fontSize: 16, lineHeight: 1.75, color:'var(--ink-soft)', marginBottom: 40,
    maxWidth: 480,
  },
  specs: {
    borderTop:'1px solid var(--hairline)', borderBottom:'1px solid var(--hairline)',
    padding:'20px 0', marginBottom: 28,
  },
  specRow: {
    display:'grid', gridTemplateColumns:'140px 1fr', gap: 24,
    padding: '10px 0',
    alignItems: 'center',
  },
  features: {
    display: 'flex', gap: 8, flexWrap:'wrap', marginBottom: 36,
  },
  chip: {
    padding: '8px 14px', fontSize: 12, letterSpacing:'0.04em',
    border: '1px solid var(--hairline)', color:'var(--ink-soft)',
    borderRadius: 999,
  },
  cta: { display:'flex', flexDirection:'column', gap: 18, alignItems:'flex-start' },
  addBtn: {
    display:'inline-flex', alignItems:'center', gap: 14,
    padding:'18px 40px',
    background: 'var(--accent)',
    color: '#0a0807',
    fontWeight: 500,
    transition: 'all 300ms',
  },
};

window.Product = Product;