// WeddingHero.jsx — Section A
const WeddingHero = ({ 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 }}>Weddings · 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' }}>
          Wedding 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 }}>
          Cocktail-hour tacos, a late-night slice, a dessert truck your guests photograph all night — we bring the
          trucks your wedding will be remembered for, and handle the permits, insurance, and venue coordination so you don't have to.
        </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' }}>
          Fully insured, COIs for your venue, one coordinator from booking to last call. Response in under 4 business hours.
        </p>
      </div>
      <div>
        <PhotoPlaceholder src={PHOTOS.heroWeddings} caption="Hero · late-night taco truck glowing at a NJ wedding venue, dusk." ratio="5/4" tone="sky" />
      </div>
    </div>
  </section>
);

Object.assign(window, { WeddingHero });