function Faq({ go }) {
  const { Icon } = window.DesignSystem_f6a2e7;
  const [topic, setTopic] = React.useState('orders');
  const [q, setQ] = React.useState('');
  const GROUPS = {
    orders: { label: 'Ordering & delivery', items: [
      { q: 'How fast is delivery?', a: 'Within 12 hours of ordering. Order before 6 pm and your can arrives the next morning in your chosen slot.' },
      { q: 'Which areas do you deliver to?', a: 'Thane, Mira Bhayandar, Dahisar, Borivali and Kandivali today. Use the area checker below and we will tell you when we reach you.' },
      { q: 'Can I choose my own delivery dates?', a: 'Yes. On the Plans page, choose Custom schedule and tap any dates across any month. Each date can have its own number of cans.' },
      { q: 'Can I order for two different months at once?', a: 'Yes. Move the calendar forward and keep picking; everything lands in one order with one total.' },
      { q: 'What if I need to skip a delivery?', a: 'Remove the date before ordering, or tell us later. Skipping a single delivery costs nothing.' },
      { q: 'Do you deliver on Sundays?', a: 'Yes, in the 7–9 am and 4–6 pm slots. Some buildings restrict Sunday deliveries; we will tell you if yours does.' },
    ] },
    plans: { label: 'Plans & payment', items: [
      { q: 'What does a can cost?', a: '₹60 per 20L can, taxes included. Monthly refills are ₹1,500 for 30 cans over 30 days.' },
      { q: 'Why is there a ₹200 deposit?', a: 'It covers the can while it is with you. You get it back when you return the can or stop the plan.' },
      { q: 'How do I pay?', a: 'UPI when you order, or cash to the delivery partner. Business accounts are invoiced monthly with GST.' },
      { q: 'Can I pause monthly refills?', a: 'Yes, from a single message. Unused refills carry over for up to 30 days.' },
      { q: 'Do you rent dispensers?', a: 'We sell a standard dispenser for ₹1,200 one-time. Add it to your first order.' },
    ] },
    water: { label: 'Water & safety', items: [
      { q: 'How is the water purified?', a: 'Ten stages: chlorination, pressurised sand filtration, activated carbon filtration, reverse osmosis, lead & lag activated filter, 5 micron filtration, UV treatment, 1 & 0.22 micron polishing, mineral dosing and ozone filtration.' },
      { q: 'Is every batch tested?', a: 'Yes. Every batch is lab-tested before it leaves the plant, and the latest report is linked in the footer.' },
      { q: 'What certifications do you hold?', a: 'IS 14543:2016 and an FSSAI licence. Both are printed on the label.' },
      { q: 'Is the can safe to reuse?', a: 'The can is certified food-grade, BPA free polycarbonate, washed through eight cleanroom stages between fills and retired once it shows wear.' },
      { q: 'How do I know a can has not been opened?', a: 'Every can is heat-sealed with a tamper-evident sleeve at the cap. If the sleeve is broken, refuse the can and we will replace it free.' },
    ] },
    cans: { label: 'Cans & returns', items: [
      { q: 'What do I do with the empty?', a: 'Leave it out on your next delivery day. The partner collects it and leaves a fresh one.' },
      { q: 'What if a can is damaged?', a: 'Tell us and we swap it on the next delivery at no charge. Deliberate damage is deducted from the deposit.' },
      { q: 'Can I hold more than one can?', a: 'Yes. The deposit is ₹200 per can held.' },
      { q: 'How do I get my deposit back?', a: 'Return the cans and tell us you are stopping. The refund goes back to your UPI ID within three working days.' },
    ] },
    business: { label: 'For business', items: [
      { q: 'Do you serve cafés and offices?', a: 'Yes, 90+ cafés and restaurants order from us. Business plans start at 30 cans a month with a fixed slot before opening hours.' },
      { q: 'Can I get a GST invoice?', a: 'Yes, monthly, with your GSTIN on it.' },
      { q: 'We need more than 30 cans a month.', a: 'Tell us your volume on the Contact page. Orders above 40 cans a week get a custom rate and a second slot.' },
    ] },
  };
  const keys = Object.keys(GROUPS);
  const needle = q.trim().toLowerCase();
  const results = needle ? keys.flatMap(k => GROUPS[k].items.filter(it => (it.q + ' ' + it.a).toLowerCase().includes(needle))) : GROUPS[topic].items;
  return <main>
    <PageHero center tag="Help" title="Questions, answered." lead="Everything about ordering, plans, the water and the cans. If your question is not here, write to us and we will reply the same working day.">
      <label className="s-search hx-rise" style={{ '--dl': '.75s' }}>
        <Icon name="search" size={20} />
        <input type="text" placeholder="Search the questions" value={q} onChange={e => setQ(e.target.value)} aria-label="Search the questions" />
        {q && <button className="s-btn s-btn--soft s-btn--sm s-btn--noi" onClick={() => setQ('')}>Clear</button>}
      </label>
    </PageHero>

    <section className="s-wrap s-sec-t">
      {!needle && <Reveal style={{ display: 'flex', justifyContent: 'center', marginBottom: 32 }}><Segmented label="Topic" items={keys.map(k => ({ value: k, label: GROUPS[k].label }))} value={topic} onChange={setTopic} /></Reveal>}
      {needle && <p className="s-body" style={{ textAlign: 'center', marginBottom: 32 }} role="status">{results.length === 0 ? 'Nothing matches “' + q + '”. Try a shorter word, or ask us directly.' : results.length + (results.length === 1 ? ' answer' : ' answers') + ' for “' + q + '”'}</p>}
      {results.length > 0 && <FaqGrid key={needle || topic} items={results} defaultOpen={0} />}
    </section>

    <section className="s-wrap s-sec-t">
      <div className="area">
        <Reveal className="s-card" style={{ padding: 'clamp(24px,3.5vw,44px)', display: 'flex', flexDirection: 'column', gap: 18 }}>
          <span className="s-icon-dot"><Icon name="map-pin" size={20} /></span>
          <h2 className="s-h3">Do we deliver to you?</h2>
          <AreaCheck />
        </Reveal>
        <Reveal delay={100} className="s-card s-card--brand" style={{ padding: 'clamp(24px,3.5vw,44px)', display: 'flex', flexDirection: 'column', gap: 18 }}>
          <span className="s-icon-dot s-icon-dot--cyan"><Icon name="message-circle" size={20} /></span>
          <h2 className="s-h3">Still stuck?</h2>
          <p className="s-body">Write to hello@aqualoopwater.com or send us a message. We reply the same working day, Monday to Saturday.</p>
          <div className="s-actions" style={{ marginTop: 'auto' }}><Cta variant="light" {...routeLink(go, 'contact')}>Contact us</Cta><Cta variant="outline" noIcon {...routeLink(go, 'plans')}>Order now</Cta></div>
        </Reveal>
      </div>
    </section>
  </main>;
}
Object.assign(window, { Faq });