// CorpHero.jsx — Section A (audience-hub hero variant)
const CorpHero = ({ onQuote }) => (
  <section id="top" style={{
    background: T.white,
    padding: 'clamp(40px, 5vw, 88px) 24px clamp(56px, 7vw, 112px)',
  }}>
    <div style={{ maxWidth:1200, margin:'0 auto', display:'grid',
                  gridTemplateColumns:'minmax(0, 1.05fr) minmax(0, 1fr)',
                  gap:'clamp(24px, 4vw, 64px)', alignItems:'center' }}
         className="hero-grid">
      <div>
        <div className="eyebrow" style={{ marginBottom:16 }}>Corporate events · New Jersey</div>
        <h1 style={{ fontSize:'clamp(38px, 5vw, 60px)', lineHeight:1.06, letterSpacing:'-0.025em',
                     fontWeight:700, margin:'0 0 20px', color: T.ink, textWrap:'balance' }}>
          Corporate food truck catering in New Jersey.
        </h1>
        <p style={{ fontSize:'clamp(17px, 1.4vw, 21px)', lineHeight:1.55, color: T.ink, margin:'0 0 28px', maxWidth:580 }}>
          From a 40-person office lunch to a 1,000-guest company celebration — we bring the right trucks,
          handle permits and insurance, and run the day so your team just shows up hungry.
        </p>
        <div style={{ display:'flex', gap:16, alignItems:'center', flexWrap:'wrap' }}>
          <button onClick={onQuote} className="btn btn-primary" style={{ padding:'16px 24px', fontSize:17 }}>
            Get a Quote
          </button>
          <a href="#pricing" className="btn-link" style={{ fontSize:16 }}>
            See how pricing works <span className="arrow">→</span>
          </a>
        </div>
        <p style={{ marginTop:24, fontSize:14, color: T.inkSoft, margin:'24px 0 0' }}>
          Trusted by NJ employers. COI and permits handled. Response in under 4 business hours.
        </p>
      </div>
      <div>
        <PhotoPlaceholder src={PHOTOS.heroCorporate} caption="Hero · branded truck at a corporate office park — conference plaza, midday." ratio="5/4" tone="navy" />
      </div>
    </div>
  </section>
);

Object.assign(window, { CorpHero });