// CalcContent.jsx — page intro (H1) + supporting SEO copy + FAQ accordion

const CalcPageHero = () => (
  <section style={{ background: T.white, padding: '40px 24px 8px' }}>
    <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
      <div className="eyebrow" style={{ marginBottom: 12 }}>Cost calculator · NJ</div>
      <h1 style={{ margin: '0 0 16px' }}>Food truck catering cost calculator (NJ).</h1>
      <p className="lead" style={{ color: T.inkSoft, margin: '0 auto', maxWidth: 620 }}>
        Set your guest count, trucks, and drinks for an instant ballpark — then turn it into a real quote in under 4 business hours. No call required to get a number.
      </p>
    </div>
  </section>
);

// ---- What's included / what changes ------------------------------------
const INCLUDED = [
  { icon: <IconCheck size={18} />, t: 'Vendor & food cost', d: 'The trucks themselves and everything they serve for your guest count.' },
  { icon: <IconUser size={18} />, t: 'FTOTM coordination', d: 'One coordinator runs scheduling, the run-of-show, and day-of logistics.' },
  { icon: <IconShield size={18} />, t: 'Permits & COIs', d: 'Municipal permits and certificates of insurance naming your venue.' },
  { icon: <IconUsers size={18} />, t: 'Service staff', d: 'The crews to run each truck through your service window.' },
];

const EXTRAS = [
  'Travel beyond our core NJ service area',
  'Premium or fully custom menus',
  'Extended service hours past ~3 hours',
];

const FACTORS = [
  { icon: <IconUsers size={20} />,   t: 'Guest count',        d: 'More guests means more food and usually more trucks to keep lines short.' },
  { icon: <IconTruck size={20} />,   t: 'Number of trucks',   d: 'Each truck carries a per-truck minimum that shapes the floor of your range.' },
  { icon: <IconMenuBook size={20} />,t: 'Menu tier',          d: 'Standard street menus sit lower; premium and chef-driven menus run higher.' },
  { icon: <IconClock size={20} />,   t: 'Service duration',   d: 'Our ballpark assumes ~3 hours. Longer windows add cost.' },
  { icon: <IconCal size={20} />,     t: 'Day & season',       d: 'Peak weekends and holiday season book out first and price firmer.' },
  { icon: <IconRoute size={20} />,   t: 'Location & travel',  d: 'Inside our NJ service area, no travel fee. Longer hauls may add some.' },
  { icon: <IconLeaf size={20} />,    t: 'Dietary & custom',   d: 'Vegan, gluten-free, halal, and kosher mixes can shift the menu and price.' },
];

const SupportingContent = () => (
  <section style={{ background: T.white, padding: '64px 24px' }}>
    <div style={{ maxWidth: 1080, margin: '0 auto' }}>

      {/* What's included */}
      <div style={{ marginBottom: 64 }}>
        <h2 style={{ marginBottom: 8 }}>What's included in a food truck catering estimate</h2>
        <p style={{ color: T.inkSoft, maxWidth: 680, marginBottom: 28 }}>
          Your ballpark bundles the things every managed event needs. Here's what sits inside the number — and what typically lands as a line item on top.
        </p>
        <div className="grid-4 calc-grid" style={{ display: 'grid', gap: 16, marginBottom: 24 }}>
          {INCLUDED.map(c => (
            <div key={c.t} className="card" style={{ padding: '20px 20px 22px' }}>
              <span style={{ color: T.teal, display: 'inline-flex', marginBottom: 12 }}>{c.icon}</span>
              <div style={{ fontSize: 16, fontWeight: 600, color: T.ink, marginBottom: 6 }}>{c.t}</div>
              <div style={{ fontSize: 14, color: T.inkSoft, lineHeight: 1.5 }}>{c.d}</div>
            </div>
          ))}
        </div>
        <div className="calc-extras">
          <strong style={{ color: T.ink, fontWeight: 600 }}>Typically extra:</strong>
          <span style={{ color: T.inkSoft }}> {EXTRAS.join(' · ')}.</span>
          <span style={{ color: T.inkSoft }}> Generators aren't needed — our trucks are fully self-powered.</span>
        </div>
      </div>

      {/* What changes your price */}
      <div>
        <h2 style={{ marginBottom: 8 }}>What changes your price</h2>
        <p style={{ color: T.inkSoft, maxWidth: 680, marginBottom: 28 }}>
          The calculator moves on guest count and trucks. The real quote weighs a few more things — none of them hidden.
        </p>
        <div className="grid-3 calc-grid" style={{ display: 'grid', gap: 16 }}>
          {FACTORS.map(f => (
            <div key={f.t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <span style={{ color: T.teal, flex: '0 0 auto', marginTop: 2 }}>{f.icon}</span>
              <div>
                <div style={{ fontSize: 16, fontWeight: 600, color: T.ink, marginBottom: 4 }}>{f.t}</div>
                <div style={{ fontSize: 14, color: T.inkSoft, lineHeight: 1.55 }}>{f.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// ---- FAQ accordion ------------------------------------------------------
const FAQS = [
  { q: 'Is this an exact quote?',
    a: "No — it's a ballpark. Your real quote depends on menu, location, and travel, and can land higher or lower than the range here." },
  { q: 'How many trucks do I need?',
    a: "Roughly one truck per ~90 guests keeps lines moving. We pre-fill that suggestion for you, and we'll confirm the right mix for your specific event." },
  { q: "What's the minimum to book?",
    a: "Booking minimum to be confirmed. Smaller events still work — the per-truck minimum sets the floor, which is why tiny guest counts don't drop below a certain range." },
  { q: 'Does the price include drinks?',
    a: "Only if you toggle the drinks station on. Otherwise the estimate covers food and service only." },
  { q: 'Do you charge for travel?',
    a: "Within our NJ service area, no. Longer hauls may add a travel line — we'll spell it out clearly in the quote, never as a surprise." },
  { q: 'How do I turn this into a real quote?',
    a: 'Hit "Get a real quote" — your event type, guest count, and truck mix carry straight into the form, and we come back in under 4 business hours.' },
];

const FAQItem = ({ q, a, open, onToggle }) => (
  <div className="faq-item">
    <button type="button" className="faq-q" aria-expanded={open} onClick={onToggle}>
      <span>{q}</span>
      <span className="faq-icon" data-open={open}><IconChevDown size={20} /></span>
    </button>
    <div className="faq-a" style={{ maxHeight: open ? 240 : 0 }}>
      <p style={{ margin: 0, padding: '0 0 18px', color: T.inkSoft, fontSize: 15, lineHeight: 1.6, maxWidth: 720 }}>{a}</p>
    </div>
  </div>
);

const CalcFAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ background: T.bgAlt, padding: '64px 24px' }}>
      <div style={{ maxWidth: 800, margin: '0 auto' }}>
        <div className="eyebrow" style={{ marginBottom: 8 }}>FAQs</div>
        <h2 style={{ marginBottom: 24 }}>Calculator questions</h2>
        <div style={{ background: T.white, borderRadius: 12, border: `1px solid ${T.border}`, overflow: 'hidden' }}>
          {FAQS.map((f, i) => (
            <FAQItem key={f.q} {...f} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>

        {/* Cross-links */}
        <div className="calc-crosslinks">
          <span style={{ color: T.inkSoft, fontSize: 14 }}>Keep reading:</span>
          <a href="/blog/food-truck-catering-cost-nj/" className="btn-link" style={{ fontSize: 14 }}>NJ food truck catering cost guide <span className="arrow">→</span></a>
          <a href="corporate.html" className="btn-link" style={{ fontSize: 14 }}>Corporate catering <span className="arrow">→</span></a>
          <a href="weddings.html" className="btn-link" style={{ fontSize: 14 }}>Weddings <span className="arrow">→</span></a>
          <a href="campus.html" className="btn-link" style={{ fontSize: 14 }}>Campus & schools <span className="arrow">→</span></a>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { CalcPageHero, SupportingContent, CalcFAQ });