// WeddingOccasionStrip.jsx — Section B
const WEDDING_OCCASIONS = [
  { label:'Reception main service',          Icon: IconUsers },
  { label:'Cocktail hour',                   Icon: IconGlass },
  { label:'Late-night snacks',               Icon: IconMoon  },
  { label:'Dessert & coffee trucks',         Icon: IconCoffee },
  { label:'Rehearsal dinners & welcome parties', Icon: IconCal },
  { label:'Engagement parties & bridal showers', Icon: IconHeart },
];

const WeddingOccasionStrip = () => (
  <section style={{ padding:'clamp(40px, 5vw, 64px) 24px', background: T.bgAlt, borderTop:`1px solid ${T.border}` }}>
    <div style={{ maxWidth:1200, margin:'0 auto' }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:14 }} className="occasion-grid">
        {WEDDING_OCCASIONS.map((o, i) => {
          const Ico = o.Icon;
          return (
            <div key={i} style={{
              background: T.white, border:`1px solid ${T.border}`, borderRadius:12,
              padding:'18px 16px', display:'flex', flexDirection:'column', gap:10,
              alignItems:'flex-start', minHeight:96,
            }}>
              <span style={{
                width:36, height:36, borderRadius:8, background: T.skyTint, color: T.teal,
                display:'inline-flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto',
              }}><Ico size={18} /></span>
              <span style={{ fontSize:13.5, lineHeight:1.35, color: T.ink, fontWeight:500, textWrap:'balance' }}>{o.label}</span>
            </div>
          );
        })}
      </div>
    </div>
    <style>{`
      @media (max-width: 960px) { .occasion-grid { grid-template-columns: repeat(3, 1fr) !important; } }
      @media (max-width: 560px) { .occasion-grid { grid-template-columns: repeat(2, 1fr) !important; } }
    `}</style>
  </section>
);

Object.assign(window, { WeddingOccasionStrip });