// WeddingFAQ.jsx — Section H (accordion). FAQPage schema lives in <head>.
const WEDDING_FAQS = [
  {
    q:'How much does a wedding food truck cost in NJ?',
    a:'Most couples book a truck for one part of the night — dessert, late-night, or cocktail hour — which keeps it affordable next to plated catering. We\u2019ll quote to your guest count and the moment you want covered.',
  },
  {
    q:'Can a food truck cater our whole reception?',
    a:'Yes — single truck or multiple trucks for full reception service. We\u2019ll match trucks and throughput to your guest count.',
  },
  {
    q:'Will you coordinate with our venue and planner?',
    a:'Yes. We work to your venue\u2019s timeline and provide whatever paperwork they require.',
  },
  {
    q:'Do you provide a COI for our venue?',
    a:'Yes — COIs naming your venue, plus municipal permits and health-department coordination.',
  },
  {
    q:'Do the trucks need power or hookups at the venue?',
    a:'No — fully self-powered with their own water. They work at barns, vineyards, rooftops, and backyards and leave the space clean.',
  },
  {
    q:'How far in advance should we book?',
    a:'Peak wedding season (May\u2013October) books out months ahead. Reserve your date as early as you can; we\u2019ll handle the details closer in.',
  },
  {
    q:'Can you do desserts, coffee, or a mobile bar?',
    a:'Yes — dessert trucks, coffee/espresso, and a mobile bar/taps option (TAPT) for a cocktail-hour or reception moment.',
  },
  {
    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.',
  },
];

const WeddingFAQItem = ({ 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 ? 260 : 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 WeddingFAQ = () => {
  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' }}>Wedding catering FAQs</h2>
        <div style={{ borderTop:`1px solid ${T.border}` }}>
          {WEDDING_FAQS.map((item, i) => (
            <WeddingFAQItem key={i} item={item} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { WeddingFAQ });
