// PartyPricing.jsx — Section E (pricing transparency)
// Ranges derived 2026-08-24 from FTOTM's own booked private-party events (n=8):
//   totals $1,456–$8,828, all-in $18.45–$31.09 per serving (median $24.69)
//   1 truck: $1,456 (65 guests) · $2,214 (80) · $2,793 (100) · $4,197 (135)
//   2 trucks: $3,461 (120) · $3,624 (75) · $5,535 (150) · $8,828 (150)
const PARTY_SCENARIOS = [
  {
    event:'Backyard party',
    detail:'1 truck · ~40–60 guests',
    range:'$1,400 – $2,200',
  },
  {
    event:'Graduation party',
    detail:'1–2 trucks · ~75 guests',
    range:'$2,000 – $3,600',
  },
  {
    event:'Large private event',
    detail:'2+ trucks · 150+ guests',
    range:'$5,500+',
  },
];

const PartyPricing = ({ 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 a private party food truck costs in NJ</h2>
      <p style={{ fontSize:16, color: T.inkSoft, margin:'0 0 28px', maxWidth:640 }}>
        Honest, NJ-specific ranges by party size — most hosts book one truck and add a dessert option for bigger crowds.
      </p>


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