// PartyFAQ.jsx — Section H (accordion). FAQPage schema lives in <head>.
const PARTY_FAQS = [
  {
    q:'How much does a private party food truck cost in NJ?',
    a:'It depends on guest count and how many trucks — most hosts book one truck and add a dessert option for bigger crowds. We\u2019ll quote to your headcount and budget.',
  },
  {
    q:'Do you come to a residential backyard?',
    a:'Yes — private homes are absolutely fine. This is one-off event catering: we cater a graduation party or birthday at your house and run it for the day. (It is not the recurring apartment-building program we used to offer — that\u2019s retired.)',
  },
  {
    q:'Do we need a permit for a party at our home?',
    a:'If your town requires one, we pull it. Municipal permits and health-department paperwork for the event are part of the managed service.',
  },
  {
    q:'Do the trucks need power or hookups?',
    a:'No — fully self-powered with their own water. They set up on a driveway, lawn, or lot with no hookups and leave it clean.',
  },
  {
    q:'Can you accommodate dietary restrictions?',
    a:'Vegan, gluten-free, halal, and kosher options across the fleet. Tell us your guests\u2019 needs and we\u2019ll match trucks.',
  },
  {
    q:'How far in advance should we book?',
    a:'2\u20134 weeks is comfortable for most parties; graduation season (May\u2013June) and the summer book out fastest, so reserve early.',
  },
  {
    q:'Is there a minimum guest count?',
    a:'We cater parties of all sizes. For smaller backyard gatherings we\u2019ll recommend the right single truck and a guest minimum so it pencils out — just tell us your headcount.',
  },
];

const PartyFAQItem = ({ item, open, onToggle }) => (
  <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 ? 300 : 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 PartyFAQ = () => {
  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' }}>Private party catering FAQs</h2>
        <div style={{ borderTop:`1px solid ${T.border}` }}>
          {PARTY_FAQS.map((item, i) => (
            <PartyFAQItem key={i} item={item} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { PartyFAQ });
