// GiftFor.jsx — "what's the occasion" category strip → routes to enquiry / same-day
const GIFT_FOR = [
  {
    key: 'corp', title: 'Corporate Gifting', sub: 'Diwali, onboarding, client thank-yous — 25 to 5,000 boxes.',
    topic: 'Corporate gifting', target: null,
    icon: (<path d="M3 9h18v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9Zm0 0 2.2-5.2A1 1 0 0 1 6.1 3h11.8a1 1 0 0 1 .9.6L21 9M12 4v17M3 14h18" />)
  },
  {
    key: 'wedding', title: 'Weddings', sub: 'Hand-tied favours in your palette, delivered to the venue.',
    topic: 'Wedding favours', target: null,
    icon: (<><circle cx="8.5" cy="14" r="4.5" /><circle cx="15.5" cy="14" r="4.5" /><path d="m6 6 2.5 4M18 6l-2.5 4" /></>)
  },
  {
    key: 'events', title: 'Events & Parties', sub: 'Anniversaries, launches, milestones — bulk trays on time.',
    topic: 'Events & parties', target: null,
    icon: (<><path d="m12 3 1.8 3.7 4 .6-2.9 2.8.7 4-3.6-1.9L6.4 17l.7-4L4.2 10.3l4-.6L12 3Z" /></>)
  },
  {
    key: 'festive', title: 'Festive & Diwali', sub: 'Seasonal hampers with monogram and custom inserts.',
    topic: 'Diwali / festive bulk', target: null,
    icon: (<><path d="M12 2v3M12 22v-4M5 5l2 2M17 17l2 2M2 12h3M19 12h3M5 19l2-2M17 7l2-2" /><circle cx="12" cy="12" r="4" /></>)
  },
  {
    key: 'personal', title: 'Personal & Same-Day', sub: 'A ribbon-tied box on their desk before tea, with a note.',
    topic: null, target: 'same-day',
    icon: (<><path d="M20 12v9H4v-9M2 7h20v5H2zM12 22V7M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7Zm0 0h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7Z" /></>)
  }
];

function GiftForCard({ item }) {
  const [hover, setHover] = React.useState(false);
  const go = () => item.target ? window.bbScrollTo(item.target) : window.bbEnquire(item.topic);
  return (
    <button
      onClick={go}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        textAlign: 'left', cursor: 'pointer', background: 'var(--bb-pearl)',
        border: hover ? '1px solid var(--bb-gold)' : '1px solid var(--line)',
        borderRadius: 14, padding: '26px 22px 22px', display: 'flex', flexDirection: 'column', gap: 12,
        boxShadow: hover ? 'var(--shadow-2)' : 'var(--shadow-1)',
        transform: hover ? 'translateY(-3px)' : 'none', transition: 'all 260ms cubic-bezier(0.22,0.61,0.36,1)'
      }}>
      <span style={{
        width: 46, height: 46, borderRadius: 12, display: 'grid', placeItems: 'center',
        background: hover ? 'var(--bb-burgundy)' : 'var(--bb-cream)', transition: 'background 260ms'
      }}>
        <svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke={hover ? 'var(--bb-gold-light)' : 'var(--bb-burgundy)'} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">{item.icon}</svg>
      </span>
      <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 21, color: 'var(--bb-burgundy-deep)', lineHeight: 1.1 }}>{item.title}</span>
      <span style={{ fontFamily: 'var(--font-serif)', fontSize: 14.5, lineHeight: 1.45, color: 'var(--fg-2)', flex: 1 }}>{item.sub}</span>
      <span style={{ fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: '0.22em', color: 'var(--bb-gold-deep)', marginTop: 2 }}>
        {item.target ? 'START A GIFT →' : 'ENQUIRE →'}
      </span>
    </button>
  );
}

function GiftFor() {
  return (
    <section id="gift-for" style={{ background: 'var(--bb-ivory)', padding: 'var(--s-9) 32px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }} className="bb-reveal">
        <div style={{ textAlign: 'center', marginBottom: 'var(--s-7)' }}>
          <div className="bb-eyebrow">✦ &nbsp; WHAT ARE YOU CELEBRATING? &nbsp; ✦</div>
          <h2 style={{ marginTop: 14, fontSize: 'clamp(32px, 3.6vw, 48px)' }}>
            Gifting, made effortless.
          </h2>
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: 18, color: 'var(--fg-2)', maxWidth: 560, margin: '12px auto 0', fontStyle: 'italic' }}>
            Tell us the occasion — we'll handle the chocolate, the wrapping, and the delivery.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 18 }} className="bb-giftfor-grid">
          {GIFT_FOR.map((g) => <GiftForCard key={g.key} item={g} />)}
        </div>
      </div>
      <style>{`
        @media (max-width: 1080px) { .bb-giftfor-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 560px) { .bb-giftfor-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

window.GiftFor = GiftFor;