// Hero.jsx — Section A
const PhotoPlaceholder = ({ caption, ratio='4/3', tone='teal', style }) => {
  const tones = {
    teal:   'linear-gradient(135deg, #023A56 0%, #024D70 60%, #09214F 100%)',
    navy:   'linear-gradient(135deg, #051433 0%, #09214F 70%, #1F2937 100%)',
    sky:    'linear-gradient(135deg, #024D70 0%, #4A7BB0 60%, #9FBDE6 100%)',
    dark:   'linear-gradient(135deg, #09214F 0%, #1F2937 70%, #374151 100%)',
    // legacy keys aliased to new tones so existing components keep working
    red:    'linear-gradient(135deg, #023A56 0%, #024D70 60%, #09214F 100%)',
    mix:    'linear-gradient(135deg, #051433 0%, #024D70 100%)',
    warm:   'linear-gradient(135deg, #024D70 0%, #9FBDE6 100%)',
  };
  return (
    <div style={{
      position:'relative',
      width:'100%', aspectRatio: ratio,
      background: tones[tone] || tones.teal,
      borderRadius:12, overflow:'hidden',
      ...style,
    }}>
      <div style={{
        position:'absolute', inset:0,
        background:'radial-gradient(ellipse at 20% 20%, rgba(255,255,255,.10), transparent 60%)',
      }}/>
      <div style={{
        position:'absolute', left:14, bottom:12,
        color:'rgba(255,255,255,.88)', fontSize:12, letterSpacing:'.02em',
        textShadow:'0 1px 2px rgba(0,0,0,.4)',
      }}>📷 {caption}</div>
    </div>
  );
};

const Hero = ({ onQuote }) => (
  <section id="top" style={{
    background: T.white,
    padding: 'clamp(48px, 6vw, 96px) 24px clamp(64px, 8vw, 128px)',
  }}>
    <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 }}>Managed food truck catering · NJ</div>
        <h1 style={{ fontSize:'clamp(40px, 5.4vw, 64px)', lineHeight:1.05, letterSpacing:'-0.025em',
                     fontWeight:700, margin:'0 0 20px', color: T.ink, textWrap:'balance' }}>
          New Jersey's managed food truck catering team.
        </h1>
        <p style={{ fontSize:'clamp(17px, 1.4vw, 21px)', lineHeight:1.55, color: T.ink, margin:'0 0 28px', maxWidth: 560 }}>
          35+ vetted trucks, one coordinator, full permits and insurance handled. Office lunches, weddings, campus events, and large-scale activations across NJ.
        </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="#calculator" className="btn-link" style={{ fontSize:16 }}>
            Use the cost calculator <span className="arrow">→</span>
          </a>
        </div>
        <p style={{ marginTop:24, fontSize:14, color: T.inkSoft, margin:'24px 0 0' }}>
          Average response time: under 4 business hours. Based in Fairfield, NJ.
        </p>
      </div>
      <div>
        <PhotoPlaceholder caption="Hero · branded truck at a corporate campus event — recognizable venue, golden hour." ratio="5/4" tone="teal" />
      </div>
    </div>
  </section>
);

Object.assign(window, { Hero, PhotoPlaceholder });