// FAQSections.jsx — site-wide FAQ page body.
// Grouped accordion. Visible H3 questions; FAQPage schema lives in faq.html <head>.
// Numbers here are derived from FTOTM's own booked events (Airtable, Aug 2026):
//   50 booked Standard-mode events · all-in client price per serving med $23.57 (p25 $18 / p75 $29)
//   1-truck jobs med $2,245 · 2-truck med $5,953 · 4+ truck med $14,399
//   median booking lead time 30 days (p25 13) · most common deposit $500
const FAQ_GROUPS = [
  {
    head: 'Pricing',
    items: [
      {
        q: 'How much does food truck catering cost in New Jersey?',
        a: 'Across our booked events, all-in cost lands around $15–$35 per guest, with most events near $24. A single truck for a typical office lunch or party runs about $1,500–$2,500. Two trucks for a larger crowd usually runs $3,500–$7,500, and multi-truck company events and festivals run $8,000 and up. Dessert-only trucks are cheaper per head than savory — closer to $10–$14 a serving.',
      },
      {
        q: 'What is actually included in the price?',
        a: 'The food, the truck, the staff, and the coordination — one contract and one invoice instead of chasing each vendor. Municipal permits and health-department paperwork are handled and billed through at cost. Sales tax and a card-processing convenience fee are added at checkout where they apply; you will see both itemized on the quote before you sign.',
      },
      {
        q: 'Is there a minimum?',
        a: 'Yes. Every truck has a floor, because a truck costs the same to staff and drive whether it serves 40 people or 90. In practice that means a single-truck booking rarely lands under about $1,400. If your headcount is small, one truck with a longer service window is usually better value than two.',
      },
      {
        q: 'Why is the quote higher than the calculator said?',
        a: 'The calculator is a ballpark from guest count and truck count only. A real quote reflects the actual menu you pick, how far the truck travels, how long it serves, permits your town requires, and whether guests are eating from every truck or picking one. It is right about three times in four — treat it as a range to plan against, not a price.',
      },
      {
        q: 'Do you offer a guaranteed-minimum option where guests pay at the truck?',
        a: 'Yes. For some events — campus days, employee perks, public-facing events — you cover a guaranteed minimum and guests buy their own food at the window. You pay only the shortfall if sales come in under the guarantee. Ask about it when you request a quote and we will price both ways.',
      },
    ],
  },
  {
    head: 'Booking',
    items: [
      {
        q: 'How far in advance should we book?',
        a: 'The typical event books about a month out, and half of everything we book lands between two weeks and two months ahead. We have turned events around in under a week, and once in a single day. Peak dates — welcome week, commencement, holiday parties, summer Fridays — go first, so earlier is genuinely better for those.',
      },
      {
        q: 'How does the booking process work?',
        a: 'Send us the date, location, and headcount. We source bids from trucks that are actually free that day, then send you a quote with a recommended lineup plus alternates you can swap. You pick your trucks, e-sign the contract, and pay a deposit. We handle vendor confirmations, permits, and insurance from there, and collect final headcount about a week out.',
      },
      {
        q: 'What deposit do you take?',
        a: 'Most bookings take a $500 deposit to hold the date and the trucks, with the balance due around the event. Larger multi-truck events carry a proportionally larger deposit. The exact amount is on your quote before you sign anything.',
      },
      {
        q: 'How do we pay? Can you invoice on NET-30 or take a PO?',
        a: 'Card, ACH, check, or PO with NET terms for companies and institutions that need it. You e-sign and pay online; the final invoice follows the event.',
      },
      {
        q: 'What if we need to cancel or the weather turns?',
        a: 'Tell us as early as you can. Cancellation terms are spelled out in the contract you sign, and they get stricter the closer you are to the date, because the trucks have turned down other work to hold yours. Rain rarely cancels anything — the trucks serve in it — but if your venue becomes unusable we will work with you on a new date.',
      },
      {
        q: 'Can we change the headcount after we book?',
        a: 'Yes, up to a point. We collect final details about a week before the event, and that is when the headcount locks for ordering. If more people show up than you told us, trucks keep serving and any overage is billed after.',
      },
    ],
  },
  {
    head: 'Logistics',
    items: [
      {
        q: 'Do the trucks need power, water, or hookups?',
        a: 'No. The trucks are fully self-contained — their own power and their own water. You provide a level place to park and reasonable access.',
      },
      {
        q: 'How much space does a truck need?',
        a: 'Plan on roughly the footprint of two parking spaces per truck, plus clearance to open the service window and room for a line that will not block a fire lane or a door. We walk the site plan with you before the date.',
      },
      {
        q: 'How long does service take?',
        a: 'A standard window is about two to three hours. As a rule of thumb one truck comfortably serves around 90 guests in that time; past that, a second truck keeps the line moving rather than making people wait.',
      },
      {
        q: 'Can we have more than one truck?',
        a: 'Yes — from one truck up to a dozen or more. On multi-truck events guests typically get a serving from each truck, which is why the price scales with trucks rather than just headcount. We stagger arrival and service so everything does not hit at once.',
      },
      {
        q: 'Can you handle dietary restrictions?',
        a: 'Vegan, vegetarian, gluten-free, halal, and kosher options exist across the fleet. Tell us your mix when you request the quote and we will match trucks to it rather than promising every truck can do everything.',
      },
    ],
  },
  {
    head: 'Permits & insurance',
    items: [
      {
        q: 'Do you handle permits?',
        a: 'Yes. Municipal permits and health-department paperwork are part of the managed service — we pull them, track them, and bill them through. New Jersey rules change town by town, which is most of the reason this service exists.',
      },
      {
        q: 'Can you provide a Certificate of Insurance naming us?',
        a: 'Yes. We issue COIs naming your company, your building owner, your venue, or your institution — whoever your requirements list. Send us the exact wording and we will turn it around.',
      },
      {
        q: 'Are the trucks licensed and inspected?',
        a: 'Every truck on a booking carries current health-department certification and its own liability coverage, and we verify both before the truck is confirmed on your event.',
      },
      {
        q: 'We are a campus or a hospital with a vendor-onboarding process. Can you get through it?',
        a: 'Yes — W-9s, COIs naming the institution, supplier-portal registration, and coordination with campus dining operators are routine for us. Send us the requirements early and the paperwork will not be what holds up your date.',
      },
    ],
  },
];

const SiteFAQItem = ({ item, open, onToggle }) => (
  <div style={{ borderBottom:`1px solid ${T.border}` }}>
    <button onClick={onToggle} aria-expanded={open} type="button" style={{
      width:'100%', background:'none', border:'none', cursor:'pointer',
      display:'flex', alignItems:'center', justifyContent:'space-between', gap:16,
      padding:'20px 4px', textAlign:'left', font:'inherit',
    }}>
      <h3 style={{ fontSize:17, 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 ? 420 : 0, overflow:'hidden',
                  transition:'max-height .24s cubic-bezier(0.22,1,0.36,1)' }}>
      <p style={{ fontSize:16, lineHeight:1.65, color: T.inkSoft, margin:'0 4px 24px', maxWidth:760 }}>{item.a}</p>
    </div>
  </div>
);

const FAQHero = ({ onQuote }) => (
  <section style={{ padding:'clamp(48px, 6vw, 76px) 24px clamp(28px, 3vw, 40px)', background: T.white }}>
    <div style={{ maxWidth:860, margin:'0 auto' }}>
      <div className="eyebrow" style={{ marginBottom:8 }}>FAQ</div>
      <h1 style={{ margin:'0 0 14px' }}>Food truck catering in NJ — straight answers</h1>
      <p style={{ fontSize:17, color: T.inkSoft, lineHeight:1.6, margin:'0 0 24px', maxWidth:640 }}>
        What it costs, how booking works, what we handle, and what we need from you.
        The pricing answers come from our own booked events, not a national average.
      </p>
      <a onClick={onQuote} role="button" tabIndex={0} className="btn btn-primary"
         style={{ cursor:'pointer' }}>Get a quote →</a>
    </div>
  </section>
);

const SiteFAQ = ({ onQuote }) => {
  const [open, setOpen] = React.useState('0-0');
  return (
    <>
      <FAQHero onQuote={onQuote} />
      <section id="faq" style={{ padding:'0 24px clamp(56px, 7vw, 88px)', background: T.white }}>
        <div style={{ maxWidth:860, margin:'0 auto' }}>
          {FAQ_GROUPS.map((g, gi) => (
            <div key={gi} style={{ marginTop: gi === 0 ? 8 : 48 }}>
              <h2 style={{ fontSize:'clamp(20px, 2.2vw, 26px)', margin:'0 0 8px' }}>{g.head}</h2>
              <div style={{ borderTop:`1px solid ${T.border}` }}>
                {g.items.map((item, i) => {
                  const key = `${gi}-${i}`;
                  return (
                    <SiteFAQItem key={key} item={item} open={open === key}
                      onToggle={() => setOpen(open === key ? '' : key)} />
                  );
                })}
              </div>
            </div>
          ))}
          <div style={{
            marginTop:48, background: T.bgAlt, border:`1px solid ${T.border}`,
            borderRadius:12, padding:'26px 28px',
          }}>
            <h2 style={{ fontSize:20, margin:'0 0 8px' }}>Still have a question?</h2>
            <p style={{ fontSize:15, color: T.inkSoft, lineHeight:1.6, margin:'0 0 16px', maxWidth:600 }}>
              Tell us the date, the place, and roughly how many people. We will come back with a real
              number and the trucks that are actually free that day.
            </p>
            <a onClick={onQuote} role="button" tabIndex={0} className="btn btn-primary"
               style={{ cursor:'pointer' }}>Get a quote →</a>
          </div>
        </div>
      </section>
    </>
  );
};

Object.assign(window, { SiteFAQ, FAQ_GROUPS });