// Collection — three wands shown as gallery objects with real photography.
function Collection({ products, activeId, onHover, onSelect }) {
  return (
    <section id="collection" data-screen-label="03 Collection" style={colStyles.section}>
      <div style={colStyles.head}>
        <div className="micro" style={{color:'var(--gold)', marginBottom: 24}}>03 — The Collection</div>
        <h2 className="serif" style={colStyles.h2}>
          Three experiences.<br/>
          <em style={{fontStyle:'italic', color:'var(--gold)'}}>One standard. Yours.</em>
        </h2>
      </div>

      <div style={colStyles.grid}>
        {products.filter(p => p.id !== 'serum').map((p, i) => (
          <article key={p.id}
                   onMouseEnter={() => onHover(p.theme)}
                   onMouseLeave={() => onHover(null)}
                   onClick={() => onSelect(p)}
                   style={{
                     ...colStyles.card,
                     borderColor: activeId === p.id ? 'var(--hairline-strong)' : 'var(--hairline)',
                   }}>
            <div className="micro" style={colStyles.cardNum}>0{i+1}</div>
            <div style={colStyles.cardArt}>
              <img src={p.image} alt={p.name} style={colStyles.cardImg}/>
              <div style={colStyles.cardArtGlow} aria-hidden/>
            </div>
            <div style={colStyles.cardMeta}>
              <h3 className="serif" style={colStyles.cardName}>{p.name}</h3>
              <div className="micro" style={{color:'var(--ink-mute)', marginBottom: 14, letterSpacing:'0.2em'}}>
                {p.tagline} · {p.color}
              </div>
              <div style={colStyles.cardFoot}>
                <span className="mini" style={{color:'var(--gold)'}}>Discover</span>
                <span style={{color:'var(--gold)', fontSize: 14}}>${p.price}</span>
              </div>
            </div>
          </article>
        ))}
      </div>

      {/* Lubricant — companion product */}
      <div style={colStyles.serumStrip}>
        <div style={colStyles.serumLeft}>
          <div className="micro" style={{color:'var(--gold)', marginBottom: 16}}>The companion</div>
          <h3 className="serif" style={{fontSize: 'clamp(36px, 4vw, 56px)', lineHeight: 1, marginBottom: 16}}>
            Intimate <em style={{fontStyle:'italic'}}>Serum</em>
          </h3>
          <p style={{fontSize: 14, color:'var(--ink-soft)', lineHeight: 1.7, maxWidth: 360, marginBottom: 24}}>
            A finishing touch. pH balanced, paraben-free, fragrance-free.
            Made to elevate every moment.
          </p>
          <button onClick={() => onSelect(products.find(x => x.id === 'serum'))}
                  className="mini" style={colStyles.serumCta}>
            <span>Explore the serum</span>
            <Icon.arrow/>
          </button>
        </div>
        <div style={colStyles.serumArt}>
          <img src="assets/serum-pair.jpg" alt="Discrete Pleasures Intimate Serum"
               style={{width:'100%', height:'100%', objectFit:'cover'}}/>
        </div>
      </div>

      {/* Promise strip */}
      <div style={colStyles.promise}>
        {[
          {i:'truck',  l:'Discreet shipping',  s:'Always private'},
          {i:'shield', l:'Secure payments',    s:'100% encrypted'},
          {i:'leaf',   l:'Body-safe materials',s:'Premium & safe'},
          {i:'heart',  l:'1 year warranty',    s:'Quality you can feel'},
        ].map(it => (
          <div key={it.l} style={colStyles.promiseItem}>
            <div style={{color:'var(--gold)'}}>{Icon[it.i]()}</div>
            <div>
              <div className="mini" style={{color:'var(--ink)', marginBottom: 4}}>{it.l}</div>
              <div style={{fontSize: 12, color:'var(--ink-mute)'}}>{it.s}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

const colStyles = {
  section: { padding: '160px 56px 120px', maxWidth: 1480, margin: '0 auto' },
  head: { textAlign: 'center', maxWidth: 720, margin: '0 auto 100px' },
  h2: {
    fontSize: 'clamp(56px, 7vw, 96px)', lineHeight: 0.95,
    letterSpacing: '-0.01em', marginBottom: 28,
  },
  lede: { fontSize: 16, color:'var(--ink-soft)', lineHeight: 1.7 },
  grid: {
    display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
    marginBottom: 120,
  },
  card: {
    position: 'relative',
    background: 'color-mix(in oklab, var(--bg-soft) 80%, transparent)',
    border: '1px solid',
    cursor: 'pointer',
    transition: 'all 600ms cubic-bezier(.65,.05,.36,1)',
    display: 'flex', flexDirection: 'column',
    overflow: 'hidden',
  },
  cardNum: {
    position: 'absolute', top: 20, right: 24, zIndex: 2,
    color:'var(--gold)',
  },
  cardArt: {
    position: 'relative',
    aspectRatio: '4/5',
    overflow: 'hidden',
  },
  cardImg: {
    width: '100%', height: '100%', objectFit: 'cover',
    transition: 'transform 1200ms cubic-bezier(.65,.05,.36,1)',
  },
  cardArtGlow: {
    position: 'absolute', inset: 0,
    background: 'linear-gradient(180deg, transparent 60%, color-mix(in oklab, var(--bg) 70%, transparent))',
    pointerEvents: 'none',
  },
  cardMeta: {
    padding: '28px 32px 32px',
    borderTop: '1px solid var(--hairline)',
  },
  cardName: {
    fontSize: 36, lineHeight: 1, marginBottom: 8, letterSpacing: '0.005em',
  },
  cardFoot: {
    display: 'flex', alignItems:'center', justifyContent:'space-between',
    color:'var(--gold)',
    paddingTop: 16, borderTop: '1px solid var(--hairline)',
  },
  serumStrip: {
    display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
    background: 'color-mix(in oklab, var(--bg-soft) 80%, transparent)',
    border: '1px solid var(--hairline)',
    marginBottom: 80,
    overflow: 'hidden',
  },
  serumLeft: {
    padding: '60px 60px',
    display: 'flex', flexDirection: 'column', justifyContent: 'center',
  },
  serumArt: {
    position: 'relative',
    minHeight: 380,
    overflow: 'hidden',
  },
  serumCta: {
    display: 'inline-flex', alignItems:'center', gap: 12,
    color:'var(--gold)', padding: '14px 24px',
    border: '1px solid var(--hairline-strong)',
    alignSelf: 'flex-start',
  },
  promise: {
    display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
    borderTop: '1px solid var(--hairline)',
    borderBottom: '1px solid var(--hairline)',
  },
  promiseItem: {
    display: 'flex', alignItems:'center', gap: 16,
    padding: '28px 24px',
    borderRight: '1px solid var(--hairline)',
  },
};

window.Collection = Collection;