/* FAQ — accordion. Plain-spoken answers, on-brand. One open at a time. */
function FAQ() {
  const { Reveal, Ic } = window;
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: 'What does ALEROQ actually do?', a: "ALEROQ connects to your car, reads its diagnostic data, and explains any issues in plain English. It shows an expected repair range and helps you compare complete offers from local independent mechanics — so you can decide with clarity instead of guessing." },
    { q: 'Does ALEROQ replace a mechanic?', a: "No. ALEROQ helps you understand and prepare — it doesn't perform repairs or give a final diagnosis. A qualified mechanic confirms the issue and does the work. Think of ALEROQ as the informed second opinion you carry with you." },
    { q: 'How does OBD-II work?', a: "OBD-II is a standard diagnostic port found in most vehicles built since 1996. A small dongle plugs into it and reads the same fault codes and sensor data your mechanic sees. On many newer cars, ALEROQ can connect through a built-in connected-car integration instead." },
    { q: 'Does the device have to stay connected?', a: "You can use the dongle just to run a diagnostic and then remove it. Leaving it connected lets ALEROQ keep an ongoing picture of your vehicle's health and surface early warnings — but that's entirely your choice." },
    { q: 'Is the repair pricing exact?', a: "No — it's a reasonable expected range, not a quote. Actual cost depends on your specific vehicle, parts, and the mechanic's inspection. The range is there to give you context, so a real quote either feels right or gives you a reason to ask questions." },
    { q: 'Does the cheapest mechanic always win?', a: "No. ALEROQ scores options on overall value — price, rating, availability, response time, completion history, and how relevant the shop is to your specific repair. Often the best value isn't the lowest number, and the final choice is always yours." },
    { q: 'Is ALEROQ available where I live?', a: "ALEROQ is launching first in Phoenix, Arizona. We're focused on getting the experience right in one city before expanding. If you're elsewhere, you can still request beta access and we'll keep you posted as we grow." },
    { q: 'How can mechanics join?', a: "Independent mechanics in the Phoenix area can apply to participate. We're looking for shops that value transparency and quality work, and who want clearer, better-defined repair requests. Apply through the launch section above." },
  ];

  return (
    <section id="faq" style={{
      position: 'relative', overflow: 'hidden',
      padding: 'var(--space-section) clamp(20px, 5vw, 48px)',
    }}>
      <div style={{ maxWidth: 820, margin: '0 auto' }}>
        <Reveal style={{ textAlign: 'center', marginBottom: 52 }}>
          <Badge_neutral />
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-display-2)',
            letterSpacing: 'var(--ls-snug)', color: 'var(--text-strong)', margin: '0 0 14px', lineHeight: 'var(--lh-snug)',
          }}>
            Questions, answered plainly.
          </h2>
          <p style={{ fontSize: 'var(--fs-lead)', color: 'var(--text-body)', maxWidth: 520, margin: '0 auto' }}>
            No fine print, no runaround &mdash; here&rsquo;s exactly how ALEROQ works.
          </p>
        </Reveal>

        <div style={{ display: 'grid', gap: 12 }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <Reveal key={it.q} delay={Math.min(i, 5) * 60}>
                <div style={{
                  background: isOpen ? 'var(--surface)' : 'rgba(20,20,24,0.5)',
                  border: `1px solid ${isOpen ? 'rgba(22,214,128,0.4)' : 'var(--border)'}`,
                  borderRadius: 'var(--radius-md)',
                  boxShadow: isOpen ? 'var(--glow-green-sm, 0 0 24px rgba(22,214,128,0.18))' : 'none',
                  transition: 'border-color 0.3s var(--ease-out), background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out)',
                  overflow: 'hidden',
                }}>
                  <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                    width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    gap: 16, padding: '20px 22px', background: 'transparent', border: 0, cursor: 'pointer',
                    textAlign: 'left', font: 'inherit',
                  }}>
                    <span style={{
                      fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(16px, 2vw, 19px)',
                      color: 'var(--text-strong)', letterSpacing: '-0.01em',
                    }}>{it.q}</span>
                    <span style={{
                      flexShrink: 0, width: 30, height: 30, borderRadius: '50%',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      border: `1px solid ${isOpen ? 'var(--positive)' : 'var(--border)'}`,
                      color: isOpen ? 'var(--positive-bright)' : 'var(--text-muted)',
                      transform: isOpen ? 'rotate(45deg)' : 'none',
                      transition: 'transform 0.32s var(--ease-out), color 0.3s, border-color 0.3s',
                    }}>
                      <Ic name="Plus" size={16} />
                    </span>
                  </button>
                  <div style={{
                    display: 'grid', gridTemplateRows: isOpen ? '1fr' : '0fr',
                    transition: 'grid-template-rows 0.4s var(--ease-out)',
                  }}>
                    <div style={{ overflow: 'hidden' }}>
                      <p style={{
                        margin: 0, padding: '0 22px 22px', maxWidth: 680,
                        fontSize: 'var(--fs-base, 16px)', lineHeight: 1.65, color: 'var(--text-body)', textWrap: 'pretty',
                      }}>{it.a}</p>
                    </div>
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// small helper so the eyebrow badge uses the design-system component
function Badge_neutral() {
  const { Badge } = window.RevvoDesignSystem_a89086;
  return <Badge variant="neutral" style={{ marginBottom: 20 }}>FAQ</Badge>;
}

window.FAQ = FAQ;
