// WeddingPricing.jsx — Section E (pricing transparency)
// Modeled 2026-08-24 from FTOTM's own booked per-serving economics — we have no
// booked weddings yet (7 wedding leads, all Lost / Lead / Quote Sent), so these are
// the same trucks and the same markup applied to wedding-shaped scenarios:
//   dessert trucks   $9.59–$12.08 all-in per serving (n=20 booked lines)
//   savory trucks   $17.06–$25.43 all-in per serving (n=71 booked lines)
//   2-truck events  $3,461–$12,722 total, median $5,953; two 150-guest 2-truck
//                   events booked at $5,535 and $8,828.
// Revisit once real weddings book.
const WEDDING_SCENARIOS = [
  {
    event:'Dessert or coffee truck',
    detail:'~100 guests',
    range:'$1,200 – $2,000',
  },
  {
    event:'Late-night snack or cocktail hour',
    detail:'~100 guests',
    range:'$1,800 – $2,800',
  },
  {
    event:'Full reception service',
    detail:'2 trucks · ~150 guests',
    range:'$5,500 – $9,000',
  },
];

const WeddingPricing = ({ 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 wedding food truck costs in NJ</h2>
      <p style={{ fontSize:16, color: T.inkSoft, margin:'0 0 28px', maxWidth:640 }}>
        Most couples book a truck for one moment of the night — which keeps it affordable next to plated catering.
        Here's roughly what each moment runs.
      </p>


      <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20 }} className="grid-3">
        {WEDDING_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 }}>
        Most couples book a truck for one moment of the night.{' '}
        <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, { WeddingPricing });