// Resources.jsx — Section J
const POSTS = [
  {
    eyebrow:'Pricing',
    title:'How much does food truck catering cost in NJ?',
    body:'A no-fluff pricing guide with real NJ ranges, what changes the number, and where caterers like to hide fees.',
  },
  {
    eyebrow:'Process',
    title:'How to book a food truck for your office or building',
    body:'The 7-step process most planners get wrong — and what we do differently to keep day-of from going sideways.',
  },
  {
    eyebrow:'Operations',
    title:"Permits, insurance, and the things vendors don't tell you",
    body:'What we handle so you don\'t have to. Municipal permits, COIs, generator rules, and the four NJ towns with weird ordinances.',
  },
];

const Resources = () => (
  <section style={{ padding:'clamp(64px, 8vw, 96px) 24px', background: T.bgAlt }}>
    <div style={{ maxWidth:1200, margin:'0 auto' }}>
      <h2 style={{ margin:'0 0 36px' }}>Planning your event?</h2>
      <div className="grid-3" style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24 }}>
        {POSTS.map((p, i) => (
          <a key={i} href="#" className="card card-hoverable" style={{
            background:T.white, border:`1px solid ${T.border}`,
            textDecoration:'none', color:'inherit', display:'flex', flexDirection:'column', gap:12,
          }}>
            <div className="eyebrow">{p.eyebrow}</div>
            <h3 style={{ fontSize:19, lineHeight:1.3, margin:0, fontWeight:600, color: T.ink }}>{p.title}</h3>
            <p style={{ fontSize:14, lineHeight:1.6, color: T.inkSoft, margin:0 }}>{p.body}</p>
            <span className="btn-link" style={{ fontSize:13, fontWeight:600, marginTop:'auto' }}>Read article <span className="arrow">→</span></span>
          </a>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { Resources });