// CampusPricing.jsx — Section E (pricing transparency)
// Ranges derived 2026-08-24 from FTOTM's own booked events (Airtable).
// Campus/school sample is thin — 2 booked events, $1,814 (75 guests / 1 truck) and
// $7,040 (200 guests / 1 truck), both landing at $24–$26 all-in per serving, which is
// right on the all-event median of $23.57. Larger scenarios extrapolate from the
// multi-truck bands: 2-truck median $5,953, 4+ truck median $14,399.
const CAMPUS_SCENARIOS = [
  {
    event:'Staff / faculty appreciation',
    detail:'1 truck · ~80 guests',
    range:'$1,500 – $2,500',
  },
  {
    event:'Campus event',
    detail:'2 trucks · ~300 students',
    range:'$6,000 – $10,000',
  },
  {
    event:'Welcome week',
    detail:'4+ trucks · 1,000+ across days',
    range:'$15,000+',
  },
];

const CampusPricing = ({ onQuote }) => (
  <section id="pricing" style={{ padding:'clamp(64px, 8vw, 96px) 24px', background: T.white }}>
    <div style={{ maxWidth:1000, margin:'0 auto' }}>
      <div className="eyebrow" style={{ marginBottom:8 }}>Pricing</div>
      <h2 style={{ margin:'0 0 12px' }}>What campus & school food truck catering costs in NJ</h2>
      <p style={{ fontSize:16, color: T.inkSoft, margin:'0 0 28px', maxWidth:640 }}>
        Honest, NJ-specific ranges by event size. Campus jobs are usually priced per truck with a guest
        minimum — we quote the way you actually buy.
      </p>


      <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20 }} className="grid-3">
        {CAMPUS_SCENARIOS.map((s, i) => (
          <div key={i} style={{
            background: T.bgAlt, border:`1px solid ${T.border}`, borderRadius:12,
            padding:'24px 24px 26px', display:'flex', flexDirection:'column', gap:8,
          }}>
            <div style={{ fontSize:13, fontWeight:600, color: T.teal, letterSpacing:'.01em' }}>{s.event}</div>
            <div style={{ fontSize:13, color: T.inkSoft }}>{s.detail}</div>
            <div className="numeral" style={{
              fontSize:'clamp(22px, 2.4vw, 28px)', fontWeight:700, color: T.navy,
              letterSpacing:'-0.02em', marginTop:8, lineHeight:1.1,
            }}>{s.range}</div>
          </div>
        ))}
      </div>

      <p style={{ marginTop:28, fontSize:15, color: T.inkSoft, lineHeight:1.6 }}>
        Final quotes depend on menu, location, and travel.{' '}
        <a href="index.html#calculator" style={{ color: T.teal, fontWeight:600 }}>Use the calculator →</a>{' '}or{' '}
        <a onClick={onQuote} role="button" tabIndex={0} style={{ color: T.teal, fontWeight:600, cursor:'pointer', borderBottom:`1px solid ${T.teal}` }}>get a real quote →</a>
      </p>
    </div>
  </section>
);

Object.assign(window, { CampusPricing });