// Packaging.jsx — three-sleeve packaging system
function Sleeve({ kind }) {
  if (kind === 'queen') {
    return (
      <div style={{
        aspectRatio: '3/4', borderRadius: 14, padding: '32px 24px',
        background: 'linear-gradient(160deg, #5B1F2E 0%, #3F1320 100%)',
        color: 'var(--bb-gold-light)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        boxShadow: 'var(--shadow-3)', position: 'relative', overflow: 'hidden'
      }}>
        <div style={{ position: 'absolute', inset: 0, opacity: 0.04, backgroundImage: 'radial-gradient(rgba(225,200,146,0.8) 1px, transparent 1px)', backgroundSize: '5px 5px' }} />
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: '0.32em' }}>THE QUEEN BOX</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: '0.32em' }}>NO. 01</div>
        </div>
        <div style={{ position: 'relative', textAlign: 'center' }}>
          <img src="assets/logo-queen.jpg" style={{ width: 72, height: 72, borderRadius: '50%', objectFit: 'cover', mixBlendMode: 'screen', opacity: 0.9, marginBottom: 12 }} />
          <div style={{ fontFamily: 'var(--font-script)', fontSize: 64, lineHeight: 0.85 }}>Blissful</div>
          <div style={{ fontFamily: 'var(--font-script)', fontSize: 64, lineHeight: 0.85 }}>Bites</div>
          <div style={{ height: 1, width: 60, margin: '14px auto', background: 'var(--bb-gold)' }}></div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: '0.4em' }}>24 PIECES · ASSORTED</div>
        </div>
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 9, letterSpacing: '0.4em' }}>EST. 2023</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 9, letterSpacing: '0.4em' }}>NET WT. 480 G</div>
        </div>
      </div>
    );
  }
  if (kind === 'foil') {
    return (
      <div style={{
        aspectRatio: '3/4', borderRadius: 14, padding: '32px 24px',
        background: 'linear-gradient(180deg, #E8CC8E 0%, #C9A45C 50%, #A6843F 100%)',
        color: 'var(--bb-burgundy-deep)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        boxShadow: 'var(--shadow-foil)', position: 'relative'
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: '0.32em' }}>DUET BAR</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: '0.32em' }}>62% / WHITE</div>
        </div>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 30, letterSpacing: '0.18em', lineHeight: 1.05 }}>BLISSFUL</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 30, letterSpacing: '0.18em', lineHeight: 1.05 }}>BITES</div>
          <div style={{ height: 1, width: 50, margin: '14px auto', background: 'var(--bb-burgundy-deep)', opacity: 0.4 }}></div>
          <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 14 }}>Almond · Cashew · Cranberry</div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 9, letterSpacing: '0.4em' }}>EST. 2023</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 9, letterSpacing: '0.4em' }}>NET WT. 100 G</div>
        </div>
      </div>
    );
  }
  // corporate
  return (
    <div style={{
      aspectRatio: '3/4', borderRadius: 14, padding: '32px 24px',
      background: 'var(--bb-cream)', color: 'var(--bb-burgundy-deep)',
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      border: '1px solid var(--bb-gold)', boxShadow: 'var(--shadow-2)'
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: '0.32em', color: 'var(--bb-gold-deep)' }}>CORPORATE · GIFTING</div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: '0.32em', color: 'var(--bb-gold-deep)' }}>NO. 03</div>
      </div>
      <div style={{ textAlign: 'center' }}>
        <div style={{ fontFamily: 'var(--font-script)', fontSize: 56, lineHeight: 0.85, color: 'var(--bb-burgundy)' }}>With</div>
        <div style={{ fontFamily: 'var(--font-script)', fontSize: 56, lineHeight: 0.85, color: 'var(--bb-burgundy)' }}>Gratitude.</div>
        <div style={{ height: 1, width: 40, margin: '16px auto', background: 'var(--bb-gold)' }}></div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: '0.32em' }}>A KEEPSAKE FROM</div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 14, letterSpacing: '0.22em', paddingTop: 4 }}>BLISSFUL BITES</div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 9, letterSpacing: '0.4em', color: 'var(--bb-gold-deep)' }}>MONOGRAM AVAILABLE</div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 9, letterSpacing: '0.4em', color: 'var(--bb-gold-deep)' }}>12–48 PCS</div>
      </div>
    </div>
  );
}

function Packaging() {
  return (
    <section id="packaging" style={{ background: 'var(--bb-parchment)', padding: '96px 32px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 11, letterSpacing: '0.4em', color: 'var(--bb-gold-deep)', marginBottom: 18 }}>✦ &nbsp; THE WRAP &nbsp; ✦</div>
            <h2 style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 56, color: 'var(--bb-burgundy-deep)', lineHeight: 1.0, margin: '0 0 22px' }}>
              A keepsake before it's <em>ever opened.</em>
            </h2>
            <p style={{ fontFamily: 'var(--font-serif)', fontSize: 18, lineHeight: 1.6, color: 'var(--fg-2)', margin: '0 0 22px' }}>
              Three sleeves, each made for a different occasion. Burgundy and gold-foil for personal gifting; cream-and-gold for corporate orders, with optional embossed monograms.
            </p>
            <ul style={{ fontFamily: 'var(--font-serif)', fontSize: 16, lineHeight: 1.8, color: 'var(--fg-2)', listStyle: 'none', padding: 0, margin: 0 }}>
              <li>✦ &nbsp; Hand-tied gold ribbon, every box</li>
              <li>✦ &nbsp; Velvet-lined tray, no plastic inserts</li>
              <li>✦ &nbsp; FSC-certified outer carton</li>
              <li>✦ &nbsp; Insert card hand-written on request</li>
            </ul>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
            <Sleeve kind="queen" />
            <Sleeve kind="foil" />
            <Sleeve kind="corporate" />
          </div>
        </div>
      </div>
    </section>
  );
}

window.Packaging = Packaging;