// CampusFAQ.jsx — Section H (accordion). FAQPage schema lives in <head>.
const CAMPUS_FAQS = [
  {
    q:'Are you an approved campus vendor? Can you complete our onboarding?',
    a:'Yes — we routinely complete W-9s, COIs naming the institution, and vendor-portal onboarding. Tell us your requirements and we\u2019ll turn the paperwork around fast.',
  },
  {
    q:'Do you work with Aramark or Sodexo?',
    a:'Yes. We coordinate directly with campus dining operators — we already do this for FDU.',
  },
  {
    q:'Can you serve 1,000+ students in a few hours?',
    a:'Yes. We bring multiple trucks and stagger service so lines move. Welcome week and commencement are exactly what we plan for.',
  },
  {
    q:'Do the trucks need power or hookups on the quad?',
    a:'No — fully self-powered, own water, no hookups, no mess left on the green.',
  },
  {
    q:'Can you handle student dietary needs?',
    a:'Vegan, gluten-free, halal, and kosher options across the fleet. Tell us the mix and we\u2019ll match trucks.',
  },
  {
    q:'How much does a campus event cost?',
    a:'[Confirm range.] Campus jobs are usually priced per truck with a guest minimum; we\u2019ll quote to your headcount and budget.',
  },
  {
    q:'How far ahead should we book welcome week or commencement?',
    a:'Peak dates (move-in, welcome week, commencement, homecoming) book out early — 4\u20136 weeks is ideal. We\u2019ve turned events faster when needed.',
  },
  {
    q:'Do you do K-12 staff appreciation and PTA fundraisers?',
    a:'Yes — staff appreciation days, fall festivals, and fundraiser nights are a regular part of what we cater.',
  },
];

const CampusFAQItem = ({ 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 ? 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 CampusFAQ = () => {
  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' }}>Campus & school catering FAQs</h2>
        <div style={{ borderTop:`1px solid ${T.border}` }}>
          {CAMPUS_FAQS.map((item, i) => (
            <CampusFAQItem key={i} item={item} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { CampusFAQ });
