// Hero.jsx — Section A
// PhotoPlaceholder — renders a real photo when `src` is given (cover-cropped to
// the slot's aspect ratio), otherwise the captioned gradient placeholder. If a
// given image fails to load it falls back to the gradient automatically, so
// slots can be filled in incrementally as photos arrive.
const PhotoPlaceholder = ({ caption, ratio='4/3', tone='teal', style, src }) => {
  const [imgOk, setImgOk] = React.useState(!!src);
  React.useEffect(() => { setImgOk(!!src); }, [src]);
  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,
    }}>
      {src && imgOk ? (
        <img src={src} alt={caption || ''} loading="lazy" decoding="async"
             onError={() => setImgOk(false)}
             style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', display:'block' }} />
      ) : (
        <>
          <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>
        {/* Compact social proof. The full logo wall lives further down the page
            (below the fleet carousel); this keeps a trust signal above the fold
            and links to it. Names are a subset of LW_LOGOS in LogoWall.jsx. */}
        <p style={{ fontSize:14, lineHeight:1.6, color: T.inkSoft, margin:'12px 0 0', maxWidth:560 }}>
          Trusted by <strong style={{ color: T.ink, fontWeight:600 }}>Merck</strong>,{' '}
          <strong style={{ color: T.ink, fontWeight:600 }}>Pfizer</strong>,{' '}
          <strong style={{ color: T.ink, fontWeight:600 }}>MetLife</strong>,{' '}
          <strong style={{ color: T.ink, fontWeight:600 }}>Rutgers</strong> and 30+ more —{' '}
          <a href="#clients" className="btn-link" style={{ fontSize:14 }}>
            see all clients <span className="arrow">→</span>
          </a>
        </p>
      </div>
      <div>
        <PhotoPlaceholder src={PHOTOS.heroHome} 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 });