// Corporate / bulk gifting callout — added per user request
const Corporate = ({ onInquire }) => {
  const tiers = [
    { qty: '10–25 boxes', label: 'Small team', perks: ['Custom gift note', 'Bulk discount 10%'] },
    { qty: '25–100 boxes', label: 'Client gifting', perks: ['Branded ribbon', 'Shipping manager', 'Discount 15%'] },
    { qty: '100+ boxes', label: 'Enterprise', perks: ['Co-branded packaging', 'Dedicated account lead', 'Custom pricing'] },
  ];
  return (
    <section style={{ padding: '80px 0', background: 'var(--cream-50)' }}>
      <div className="container">
        <div style={{
          background: 'linear-gradient(135deg, var(--brown-800), var(--brown-900))',
          borderRadius: 28, padding: 'clamp(36px, 5vw, 60px)',
          color: 'var(--cream-50)',
          position: 'relative', overflow: 'hidden',
        }}>
          {/* faint decorative cookie */}
          <div style={{ position: 'absolute', right: -40, top: -40, opacity: 0.08 }}>
            <CookieMark size={320}/>
          </div>

          <div className="corp-grid" style={{
            display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 48, alignItems: 'center',
            position: 'relative',
          }}>
            <div>
              <div className="eyebrow" style={{ color: 'var(--brown-300)', marginBottom: 14 }}>
                Bulk &amp; Corporate Gifting
              </div>
              <h2 className="serif" style={{
                fontSize: 'clamp(34px, 3.6vw, 48px)', fontWeight: 500, margin: 0,
                letterSpacing: '-0.015em', lineHeight: 1.05,
              }}>
                Cookies that land better<br/> than a calendar invite.
              </h2>
              <p style={{ fontSize: 16, lineHeight: 1.55, opacity: 0.85, margin: '18px 0 28px', maxWidth: 460 }}>
                Thank clients, welcome new hires, or say happy holidays in a way people actually remember. Volume discounts, custom notes, and co-branded packaging.
              </p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <button className="btn btn-lg" onClick={onInquire}
                  style={{ background: 'var(--cream-50)', color: 'var(--brown-900)' }}>
                  <Icon name="building" size={18}/> Request a Quote
                </button>
                <a className="btn btn-outline-white btn-lg" href={SITE.live.contact} {...EXTERNAL_LINK_PROPS}>
                  Get in touch
                </a>
              </div>
              <div style={{
                marginTop: 22, display: 'flex', gap: 20, flexWrap: 'wrap',
                fontSize: 13, opacity: 0.75,
              }}>
                <span>Trusted by teams at</span>
                <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic' }}>Edward Jones</span>
                <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic' }}>Centene</span>
                <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic' }}>Anheuser-Busch</span>
                <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic' }}>Bayer</span>
              </div>
            </div>

            <div style={{ display: 'grid', gap: 12 }}>
              {tiers.map((t, i) => (
                <div key={i} style={{
                  padding: '18px 22px',
                  borderRadius: 16,
                  background: 'rgba(255,255,255,.05)',
                  border: '1px solid rgba(255,255,255,.12)',
                  display: 'grid', gridTemplateColumns: '1fr 1.3fr auto', alignItems: 'center', gap: 20,
                }}>
                  <div>
                    <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.6, fontWeight: 600 }}>
                      {t.qty}
                    </div>
                    <div className="serif" style={{ fontSize: 22, fontWeight: 500, marginTop: 2 }}>
                      {t.label}
                    </div>
                  </div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                    {t.perks.map((p, j) => (
                      <span key={j} style={{
                        fontSize: 12, fontWeight: 500,
                        padding: '5px 10px', borderRadius: 999,
                        background: 'rgba(255,255,255,.08)',
                      }}>{p}</span>
                    ))}
                  </div>
                  <Icon name="chevron-right" size={18}/>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) { .corp-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }
      `}</style>
    </section>
  );
};

Object.assign(window, { Corporate });