// Collection.jsx — showcase of chocolates (no single-piece sale; boxes & bulk only)
const COLLECTION_DEFAULTS = [
  { id: 'duet',    name: 'Cocoa Duet — Loaded',  notes: 'Almond · cashew · cranberry folded through a 62% dark and white duet.', img: 'assets/duet-split.jpg',          tag: 'NEW',      featured: true },
  { id: 'praline', name: 'Royal Almond Praline',  notes: 'Whole roasted almond at the heart of every hand-rolled bite.',          img: 'assets/truffles-board.jpg',      tag: 'SIGNATURE' },
  { id: 'bars',    name: 'Sculpted Bar Duo',       notes: '70% single-origin dark and slow-set milk, in our textured mould.',     img: 'assets/bars-duo.jpg',            tag: 'NEW' },
  { id: 'queen',   name: 'The Queen Assortment',   notes: 'Twelve shapes — hearts, domes, pralines — in a velvet-lined tray.',    img: 'assets/box-assorted.jpg',        tag: 'CLASSIC' },
  { id: 'cran',    name: 'Cranberry Cashew Bark',  notes: 'Tart cranberry and toasted cashew pressed into dark chocolate bark.',  img: 'assets/bar-loaded-dryfruits.jpg',tag: 'NEW' },
  { id: 'hero',    name: 'Pistachio Truffle',       notes: 'Soft-set ganache rolled in slivered Iranian pistachio.',               img: 'assets/hero-truffles.jpg',       tag: 'SEASONAL' }
];

function CollectionCard({ p }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: 'var(--bb-pearl)',
        border: p.featured ? '1.5px solid var(--bb-gold)' : '1px solid var(--line)',
        borderRadius: 14, overflow: 'hidden', position: 'relative',
        boxShadow: hover ? 'var(--shadow-2)' : (p.featured ? 'var(--shadow-foil)' : 'var(--shadow-1)'),
        transform: hover ? 'translateY(-3px)' : 'none', transition: 'all 260ms cubic-bezier(0.22,0.61,0.36,1)',
        display: 'flex', flexDirection: 'column'
      }}>
      <div style={{ position: 'absolute', top: 12, left: 12, zIndex: 2, background: p.tag === 'NEW' ? 'var(--bb-burgundy)' : 'var(--bb-pearl)', color: p.tag === 'NEW' ? 'var(--bb-gold-light)' : 'var(--bb-gold-deep)', border: p.tag === 'NEW' ? 'none' : '1px solid var(--line-gold)', fontFamily: 'var(--font-display)', fontSize: 9, letterSpacing: '0.22em', padding: '5px 11px', borderRadius: 999 }}>{p.tag}</div>
      <div style={{ aspectRatio: '4/3', background: 'var(--bb-cocoa)', overflow: 'hidden' }}>
        <img src={p.img} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'cover', transform: hover ? 'scale(1.04)' : 'none', transition: 'transform 900ms cubic-bezier(0.22,0.61,0.36,1)' }} />
      </div>
      <div style={{ padding: '18px 20px 20px', display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
        <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 23, color: 'var(--bb-burgundy-deep)', lineHeight: 1.1 }}>{p.name}</div>
        <div style={{ fontFamily: 'var(--font-serif)', fontSize: 15, lineHeight: 1.45, color: 'var(--fg-2)', flex: 1 }}>{p.notes}</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 12, marginTop: 'auto', borderTop: '1px solid var(--line)' }}>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 9, letterSpacing: '0.2em', color: 'var(--fg-3)' }}>AVAILABLE IN GIFT BOXES</span>
          <button onClick={() => window.bbEnquire('Personal celebration')} style={{ background: 'transparent', border: 'none', color: 'var(--bb-burgundy)', fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: '0.2em', cursor: 'pointer' }}>ENQUIRE →</button>
        </div>
      </div>
    </article>
  );
}

function Collection() {
  const _cc = (window.BB_CONTENT || {}).collection || {};
  const c = (key, def) => (_cc[key] !== undefined && _cc[key] !== '') ? _cc[key] : def;
  // Merge CMS item overrides on top of defaults (preserves id/featured flags)
  const cmsItems = Array.isArray(_cc.items) && _cc.items.length === COLLECTION_DEFAULTS.length ? _cc.items : [];
  const items = COLLECTION_DEFAULTS.map((def, i) => ({ ...def, ...(cmsItems[i] || {}) }));

  return (
    <section id="collection" style={{ background: 'var(--bb-ivory)', padding: 'var(--s-9) 32px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div className="bb-reveal" style={{ textAlign: 'center', marginBottom: 'var(--s-7)' }}>
          <div className="bb-eyebrow">{c('eyebrow', '✦   NEW THIS SEASON   ✦')}</div>
          <h2 style={{ marginTop: 14, fontSize: 'clamp(32px, 3.6vw, 48px)' }}>
            {c('heading', 'Loaded with dryfruit, nothing else.')}
          </h2>
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: 18, color: 'var(--fg-2)', maxWidth: 580, margin: '12px auto 0', fontStyle: 'italic' }}>
            {c('description', "A look at what we're rolling right now. Every recipe is sold by the box — choose a hamper for same-day gifting, or enquire for bulk.")}
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }} className="bb-collection-grid">
          {items.map((p) => <CollectionCard key={p.id} p={p} />)}
        </div>

        <div className="bb-reveal" style={{ marginTop: 'var(--s-7)', textAlign: 'center', display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button className="btn btn-primary" onClick={() => window.bbScrollTo('same-day')} style={{ padding: '16px 26px' }}>Build a Gift Box →</button>
          <button className="btn btn-ghost" onClick={() => window.bbEnquire('')} style={{ padding: '16px 26px' }}>Enquire for Bulk Orders</button>
        </div>
      </div>
      <style>{`
        @media (max-width: 960px) { .bb-collection-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 560px) { .bb-collection-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

window.Collection = Collection;