// Gifting.jsx — corporate / weddings / events feature panels → enquiry
const GIFTING_DEFAULTS = [
  {
    tone: 'dark', eyebrow: 'CORPORATE GIFTING', topic: 'Corporate gifting',
    title: 'One vendor. Every team.',
    body: 'Bulk gifting from 25 to 5,000 boxes — embossed monograms, custom inserts, GST invoicing, and PAN-India fulfilment. A dedicated account manager replies within 24 hours.',
    cta: 'Request a Quote', image: 'assets/box-assorted.jpg',
    points: ['Monogram & branded sleeves', 'Bulk pricing tiers', 'Scheduled multi-city dispatch']
  },
  {
    tone: 'light', eyebrow: 'WEDDING FAVOURS', topic: 'Wedding favours',
    title: 'The favour they’ll keep.',
    body: 'Hand-tied trays of 12, 24, or 48 pieces in your wedding palette. Plan with us six weeks ahead — we deliver to the venue, ribbon-tied and ready for the welcome table.',
    cta: 'Plan a Wedding', image: 'assets/truffles-board.jpg',
    points: ['Palette-matched ribbon', 'Name cards & tags', 'Venue delivery & setup']
  },
  {
    tone: 'light', eyebrow: 'EVENTS & PARTIES', topic: 'Events & parties',
    title: 'For milestones that matter.',
    body: 'Launches, anniversaries, baby showers, and milestone birthdays. Tell us the headcount and the date — we’ll build a hamper plan and have it there on time.',
    cta: 'Plan an Event', image: 'assets/duet-split.jpg',
    points: ['25 – 1,000 guests', 'Themed packaging', 'Same-week turnaround']
  }
];

function GiftingPanel({ p }) {
  const isDark = p.tone === 'dark';
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative', borderRadius: 18, overflow: 'hidden', minHeight: 480,
        background: isDark ? 'var(--bb-burgundy-deep)' : 'var(--bb-cream)',
        border: isDark ? '1px solid var(--bb-burgundy-deep)' : '1px solid var(--line-gold)',
        boxShadow: hover ? 'var(--shadow-2)' : 'var(--shadow-1)',
        transform: hover ? 'translateY(-3px)' : 'none', transition: 'all 280ms cubic-bezier(0.22,0.61,0.36,1)',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
      }}>
      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
        <img src={p.image} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: isDark ? 0.42 : 0.22, transform: hover ? 'scale(1.05)' : 'none', transition: 'transform 900ms cubic-bezier(0.22,0.61,0.36,1)' }} />
        <div style={{ position: 'absolute', inset: 0, background: isDark
          ? 'linear-gradient(180deg, rgba(63,19,32,0.7) 0%, rgba(63,19,32,0.95) 100%)'
          : 'linear-gradient(180deg, rgba(242,233,214,0.7) 0%, rgba(242,233,214,0.95) 100%)' }} />
      </div>
      <div style={{ position: 'relative', padding: '32px 30px 0' }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: '0.34em', color: isDark ? 'var(--bb-gold)' : 'var(--bb-gold-deep)', marginBottom: 16 }}>{p.eyebrow}</div>
        <h3 style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 34, lineHeight: 1.05, margin: '0 0 12px', color: isDark ? 'var(--bb-gold-light)' : 'var(--bb-burgundy-deep)' }}>{p.title}</h3>
        <p style={{ fontFamily: 'var(--font-serif)', fontSize: 16, lineHeight: 1.55, maxWidth: 380, margin: '0 0 18px', color: isDark ? 'rgba(225,200,146,0.85)' : 'var(--fg-2)' }}>{p.body}</p>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 7 }}>
          {(p.points || []).map((pt) => (
            <li key={pt} style={{ display: 'flex', gap: 9, alignItems: 'center', fontFamily: 'var(--font-serif)', fontSize: 14.5, color: isDark ? 'rgba(225,200,146,0.82)' : 'var(--fg-2)' }}>
              <span style={{ color: isDark ? 'var(--bb-gold)' : 'var(--bb-gold-deep)' }}>✦</span>{pt}
            </li>
          ))}
        </ul>
      </div>
      <div style={{ position: 'relative', padding: '24px 30px 32px' }}>
        <button className={isDark ? 'btn btn-foil' : 'btn btn-primary'} onClick={() => window.bbEnquire(p.topic)} style={{ padding: '14px 24px' }}>{p.cta} →</button>
      </div>
    </div>
  );
}

function Gifting() {
  const _cg = (window.BB_CONTENT || {}).gifting || {};
  const g = (key, def) => (_cg[key] !== undefined && _cg[key] !== '') ? _cg[key] : def;
  const cmsPanels = Array.isArray(_cg.panels) && _cg.panels.length === GIFTING_DEFAULTS.length ? _cg.panels : [];
  const panels = GIFTING_DEFAULTS.map((def, i) => ({ ...def, ...(cmsPanels[i] || {}) }));

  return (
    <section id="gifting" 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">{g('eyebrow', '✦   FOR THE OCCASIONS THAT MATTER MOST   ✦')}</div>
          <h2 style={{ marginTop: 14, fontSize: 'clamp(32px, 3.6vw, 48px)' }}>{g('heading', 'Bulk & bespoke gifting.')}</h2>
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: 18, color: 'var(--fg-2)', maxWidth: 560, margin: '12px auto 0', fontStyle: 'italic' }}>
            {g('description', 'From a boardroom of 25 to a wedding of two thousand — we plan, brand, and deliver.')}
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }} className="bb-gifting-grid">
          {panels.map((p) => <GiftingPanel key={p.eyebrow} p={p} />)}
        </div>
      </div>
      <style>{`
        @media (max-width: 960px) { .bb-gifting-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

window.Gifting = Gifting;