// FAQ — accordion-style Q&A list. Items are tagged by audience so the V5
// audience toggle filters them (customer / venue / both).
window.FAQ = function FAQ() {
  const { audience } = React.useContext(window.AudienceContext);
  const [open, setOpen] = React.useState({});
  const toggle = (i) => setOpen(prev => ({ ...prev, [i]: !prev[i] }));

  const allItems = [
    // ── Customer-facing ──
    {
      tag: 'customer',
      q: 'How does LÜP work?',
      a: 'Sign up once at any LÜP venue in about 10 seconds — no app, no download. Scan the venue\'s QR code with your phone, tell the staff how many bowls you\'re taking, and confirm. It\'s free as long as you return your bowls within 7 days, and you can return them to any LÜP venue across the network — not just where you borrowed.'
    },
    {
      tag: 'customer',
      q: 'Am I charged anything to sign up or borrow?',
      a: 'No. Signing up doesn\'t charge you, and neither does borrowing. Your card is only charged ($5 per bowl) if a bowl isn\'t returned to any LÜP venue within 7 days. If you borrow multiple bowls, each has its own 7-day window — you\'re only charged for ones that don\'t come back.'
    },
    {
      tag: 'customer',
      q: 'Why do you need my payment details if I\'m not being charged?',
      a: 'It\'s how we keep the system free, fast, and cashless. Your card stays securely on file (same system used by Uber, Airbnb, and Shopify) and is only charged in the specific case described above. Email contact@lupit.com.au any time to remove your details — we\'ll action it within 7 days.'
    },
    {
      tag: 'customer',
      q: 'What if I think I\'ve been charged by mistake?',
      a: 'Email contact@lupit.com.au and we\'ll look into it. If a bowl was returned but not properly recorded, we\'ll refund you.'
    },
    {
      tag: 'customer',
      q: 'Do I have to return the bowl where I borrowed it?',
      a: 'No — that\'s the whole point. Drop your bowl at any venue in the LÜP network, not just where you got it. As long as it\'s back at a LÜP venue within 7 days, you\'re sorted.'
    },

    // ── Venue-facing ──
    {
      tag: 'venue',
      q: 'How does LÜP work for my venue?',
      a: 'Your customers scan a printed QR sign at your counter, choose how many bowls they\'re taking, and your staff confirm the count — that\'s it. Customers can return them at any venue in the network. Returned bowls wash alongside your normal dishes and go straight back into circulation. You pay a small per-issue fee only when a bowl is actually handed out. No app, no terminal, no collection service.'
    },
    {
      tag: 'venue',
      q: 'How can my venue join the network, and what\'s involved?',
      a: 'Fill in the Join the network form above and we\'ll be in touch within 24 hours. All you need is a bit of counter space for your printed LÜP QR sign — no terminal, no scanner, no special equipment. Bowls wash alongside your normal dishes, so there\'s no outside collection service. Pricing is a small per-issue fee benchmarked cheaper than disposable packaging — most venues see a 20–60% saving on packaging.'
    },
    {
      tag: 'venue',
      q: 'How long does onboarding take for a new venue?',
      a: 'Most venues are up and running in under an hour. There\'s no hardware to install — customers scan your counter-mounted LÜP QR with their own phone, and your staff simply confirm the bowl count. We supply a starter kit ahead of go-live: free starter bowls and lids, your QR sign, "LÜP Partner" signage, and a short staff one-pager.'
    },
    {
      tag: 'venue',
      q: 'What does it cost a venue to participate?',
      a: 'Pricing is a small per-issue fee, charged only when a bowl is actually issued to a customer, and benchmarked to be cheaper than your current disposable spend. Most partner venues see a net saving of 20–60% on packaging, plus the bonus of a more sustainable, customer-facing brand. Venues buy their bowls from us upfront and own them outright.'
    },
    {
      tag: 'venue',
      q: 'Do venues need to wash the bowls themselves?',
      a: 'Yes — and that\'s the point. LÜP bowls go through your existing dishwasher alongside the rest of your dishes. No outside collection service, no extra equipment, no specialised workflow.'
    },
    {
      tag: 'venue',
      q: 'What if we run low on bowls — or end up with too many?',
      a: 'We manage stock levels for you. If your venue is running low we top you up, and if returns pile up we collect the surplus — so you\'re never stranded without bowls or buried in them. Some return-heavy venues even earn a small credit when we pick up excess stock.'
    },

    // ── Shared (both audiences) ──
    {
      tag: 'both',
      q: 'Are LÜP bowls safe and built to last?',
      a: 'Yes. They\'re food-safe, BPA-free, dishwasher-safe, microwave-safe, and built to hold hot food and liquids without leaking — rated for 500+ uses. They behave like a regular bowl, whether they\'re running through a venue\'s dishwasher or reheating leftovers at home. If a bowl ends up staying with a customer past 7 days, it\'s theirs to keep using.'
    },
    {
      tag: 'both',
      q: 'Where is LÜP available?',
      a: 'We\'re in the launch process in Sydney CBD and Eastern Suburbs, with plans to quickly expand to other Australian cities throughout 2026. Find a LÜP venue near you with the Venue map above.'
    },
  ];

  // Filter items by audience: show 'both' + the audience-specific ones.
  const items = allItems.filter(it => it.tag === 'both' || it.tag === audience);

  return React.createElement('section', { id: 'faq', style: { background: 'var(--parchment)', borderTop: '1px solid var(--border-cream)' } },
    React.createElement('div', { className: 'container' },
      // Header
      React.createElement(Reveal, { as: 'div', style: { maxWidth: 720, marginBottom: 48 } },
        React.createElement('div', { className: 'eyebrow', style: { marginBottom: 16 } },
          React.createElement('span', { className: 'dot' }), 'Frequently asked'
        ),
        React.createElement('h2', {
          style: { fontSize: 'clamp(36px, 4vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.02em' }
        },
          'Got ',
          React.createElement('span', { className: 'serif-accent' }, 'questions?'),
        ),
        React.createElement('p', {
          style: { marginTop: 14, fontSize: 17, color: 'var(--stone)', lineHeight: 1.55 }
        }, 'Tap any question to see the answer.'),
      ),

      // Items
      React.createElement('div', { style: { maxWidth: 760, display: 'flex', flexDirection: 'column', gap: 12 } },
        items.map((item, i) => {
          const isOpen = !!open[i];
          return React.createElement(Reveal, { as: 'div', key: i, delay: (i % 4) + 1 },
            React.createElement('div', {
              style: {
                background: 'var(--ivory)',
                border: '1px solid var(--border-cream)',
                borderRadius: 16,
                overflow: 'hidden',
                transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
                borderColor: isOpen ? 'rgba(196,121,93,0.3)' : 'var(--border-cream)',
              }
            },
              React.createElement('button', {
                onClick: () => toggle(i),
                'aria-expanded': isOpen,
                style: {
                  width: '100%',
                  background: 'transparent',
                  border: 'none',
                  padding: '20px 22px',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  gap: 16,
                  textAlign: 'left',
                  cursor: 'pointer',
                  fontFamily: 'inherit',
                }
              },
                React.createElement('span', {
                  style: {
                    fontFamily: 'var(--font-serif)',
                    fontSize: 20,
                    fontWeight: 500,
                    color: 'var(--charcoal)',
                    lineHeight: 1.35,
                    flex: 1,
                  }
                }, item.q),
                React.createElement('span', {
                  'aria-hidden': true,
                  style: {
                    flexShrink: 0,
                    width: 30, height: 30,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    borderRadius: '50%',
                    background: isOpen ? 'rgba(196,121,93,0.18)' : 'rgba(196,121,93,0.10)',
                    color: 'var(--terracotta)',
                    fontFamily: 'var(--font-sans)',
                    fontSize: 22,
                    fontWeight: 400,
                    lineHeight: 1,
                    transition: 'transform 0.25s ease, background 0.2s ease',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                  }
                }, '+'),
              ),
              // Answer wrapper — animates open/closed via grid-template-rows trick
              React.createElement('div', {
                style: {
                  display: 'grid',
                  gridTemplateRows: isOpen ? '1fr' : '0fr',
                  transition: 'grid-template-rows 0.3s ease',
                }
              },
                React.createElement('div', { style: { overflow: 'hidden' } },
                  React.createElement('div', {
                    style: {
                      padding: '0 22px 22px',
                      fontSize: 16,
                      color: 'var(--stone)',
                      lineHeight: 1.65,
                    }
                  }, item.a),
                ),
              ),
            ),
          );
        }),
      ),
    ),
  );
};