// FAQ.jsx — Section H (accordion). Visible H3 questions; FAQPage schema lives in <head>.
const FAQS = [
  {
    q:'How much does it cost to book a food truck for a corporate event in NJ?',
    a:'A single truck for a typical office lunch runs about $1,500\u2013$2,500. Two trucks for a bigger crowd usually lands between $3,500 and $7,500, and multi-truck company events run $8,000 and up. Final pricing depends on menu, location, and travel.',
  },
  {
    q:'How far in advance should we book?',
    a:'2–4 weeks is comfortable for most events; we\u2019ve turned around corporate events in under 14 days. Holiday season books out fastest.',
  },
  {
    q:'Can you provide a Certificate of Insurance naming our company?',
    a:'Yes. We issue COIs naming your company, building owner, or venue as needed.',
  },
  {
    q:'Do you handle permits?',
    a:'Yes — municipal permits and health-department paperwork are part of the managed service.',
  },
  {
    q:'Do the trucks need power or hookups at our office?',
    a:'No. Our trucks are fully self-powered and bring their own water. Nothing to rent or provide.',
  },
  {
    q:'Can you accommodate dietary restrictions?',
    a:'Yes — vegan, gluten-free, halal, and kosher options across the fleet. Tell us your mix and we\u2019ll match trucks.',
  },
  {
    q:'How do we pay? Can you invoice on NET-30 / take a PO?',
    a:'Card, ACH, or PO / NET-30. You e-sign the contract and pay the deposit online; the final invoice lands the morning after.',
  },
  {
    q:'Can we have more than one truck?',
    a:'Yes — single truck up to a dozen+ for large company events. We handle the multi-truck logistics.',
  },
];

const FAQItem = ({ item, open, onToggle, idx }) => (
  <div style={{ borderBottom:`1px solid ${T.border}` }}>
    <button onClick={onToggle} aria-expanded={open} style={{
      width:'100%', background:'none', border:'none', cursor:'pointer',
      display:'flex', alignItems:'center', justifyContent:'space-between', gap:16,
      padding:'22px 4px', textAlign:'left', font:'inherit',
    }}>
      <h3 style={{ fontSize:18, fontWeight:600, color: T.navy, margin:0, lineHeight:1.35 }}>{item.q}</h3>
      <span style={{
        flex:'0 0 auto', width:30, height:30, borderRadius:999,
        border:`1px solid ${T.border}`, color: T.teal,
        display:'inline-flex', alignItems:'center', justifyContent:'center',
        transform: open ? 'rotate(45deg)' : 'none', transition:'transform .18s',
      }}><IconPlus size={16} /></span>
    </button>
    <div style={{
      maxHeight: open ? 240 : 0, overflow:'hidden',
      transition:'max-height .24s cubic-bezier(0.22,1,0.36,1)',
    }}>
      <p style={{ fontSize:16, lineHeight:1.6, color: T.inkSoft, margin:'0 4px 24px', maxWidth:760 }}>{item.a}</p>
    </div>
  </div>
);

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ padding:'clamp(64px, 8vw, 96px) 24px', background: T.bgAlt }}>
      <div style={{ maxWidth:860, margin:'0 auto' }}>
        <h2 style={{ margin:'0 0 32px' }}>Corporate catering FAQs</h2>
        <div style={{ borderTop:`1px solid ${T.border}` }}>
          {FAQS.map((item, i) => (
            <FAQItem key={i} item={item} idx={i} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { FAQ });
