// Pricing.jsx — Section E (pricing transparency)
// Card 1 confirmed by Tony (May 29) and corroborated by the data: 34 booked 1-truck
// events run $959–$13,574, median $2,245; under-90-guest events median $2,230.
// Cards 2–3 corrected 2026-08-24 against booked events — the old $2,000–$5,000
// 2-truck range sat below every real 2-truck booking (10 events, $3,461–$12,722,
// median $5,953). 3-truck median $6,845; 4+ truck median $14,399.
const SCENARIOS = [
  {
    event:'Office lunch',
    detail:'1 truck · ~75 guests',
    range:'$1,500 – $2,500',
  },
  {
    event:'Employee appreciation',
    detail:'2 trucks · ~100 guests',
    range:'$3,500 – $7,500',
  },
  {
    event:'Company celebration',
    detail:'3+ trucks · 300+ guests',
    range:'$8,000+',
  },
];

const Pricing = ({ 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 corporate food truck catering costs in NJ</h2>
      <p style={{ fontSize:16, color: T.inkSoft, margin:'0 0 28px', maxWidth:620 }}>
        Honest, NJ-specific ranges — not a national average. Here's roughly what companies spend by event size.
      </p>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20 }} className="grid-3">
        {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, { Pricing });