// FAQ — accordion
function FAQ() {
  const { Icon, SectionHead } = window.RMS;

  const Q = [
    { q: 'Is this just for kids?',
      a: 'It is aimed at kids, tweens, and teens (9–17), but adults are welcome to be roasted respectfully too. The tone adapts to the age you set in Settings, with lighter roasts for younger users and sharper ones for teens.' },
    { q: 'Does Dr. Hawley shame the kid?',
      a: 'Never. The character roasts the snack and the smile consequences, never the body or identity. Explicit language, slurs, violence, and body-shaming are blocked by the safety layer.' },
    { q: 'How does the score actually work?',
      a: 'Deterministic backend math, not AI vibes. Each snack profile carries dental traits like added sugar exposure, acidity, stickiness, starch/residue cling, and crunch hardness. The score is a weighted sum, capped from 0 to 100. Drag the dials in the For Parents section to feel it.' },
    { q: 'What about allergies?',
      a: 'Settings lets you filter Glow-Up Swaps by allergen: dairy, nuts, peanuts, eggs, gluten, soy, and sesame. The filter changes which swaps can be recommended, but it does not change the snack’s dental score. Always check real ingredient labels for allergy safety.' },
    { q: 'Where do my photos go?',
      a: 'The app downsizes your snack photo, sends it over HTTPS to the Roast My Snack backend, and the backend calls OpenAI only to run the roast flow: food detection, dental-trait classification, script writing, and comic image generation. We do not create accounts or keep a snack history. When you start a new snack, the app asks the backend to delete the prior session’s photo, thumbnail, comic, and script records; backup cleanup catches anything missed within 24 hours. No tracking SDKs, no ads, no third-party analytics. Full details are on the Privacy page.' },
    { q: 'How do I get in early?',
      a: 'Drop your email in the Notify Me form and we will reach out when the App Store build is live. TestFlight access is currently invite-only, but ping us via the support page on roastmysnack.com.' },
    { q: 'Will there be Android?',
      a: 'Maybe! The backend is platform-agnostic. We are launching iPhone first and will revisit Android after we see App Store data.' },
    { q: 'Can the comic be wrong about my food?',
      a: 'Sometimes. When vision is unsure, the app shows a Confirm Snack screen so you can correct it before scoring. When OpenAI cannot profile a food, the backend falls back to conservative defaults instead of pretending it knows.' },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" className="section">
      <div className="wrap">
        <SectionHead
          eyebrow="FAQ · ASKED ABOVE THE COUNTER"
          title="THE PRE-LAUNCH PRESSER."
          kicker="Common questions from parents, teachers, and one extremely curious 11-year-old."
        />

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 320px',
          gap: 28,
          alignItems: 'start',
        }} className="faq-grid">

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {Q.map((row, i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{
                  background: '#fff',
                  border: '2px solid var(--ink)',
                  borderRadius: 18,
                  boxShadow: isOpen ? '6px 6px 0 var(--flame)' : '4px 4px 0 var(--ink)',
                  overflow: 'hidden',
                  transition: 'box-shadow 180ms ease',
                }}>
                  <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                    width: '100%', padding: '16px 18px',
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
                    background: 'transparent', border: 'none', cursor: 'pointer',
                    textAlign: 'left',
                  }}>
                    <span style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                      <span className="mono" style={{
                        fontSize: 11, color: 'var(--mute)', letterSpacing: '0.18em',
                        background: 'var(--paper-2)', border: '1.5px solid var(--ink)',
                        borderRadius: 6, padding: '3px 7px',
                      }}>Q.{String(i + 1).padStart(2,'0')}</span>
                      <span style={{ fontWeight: 700, fontSize: 16 }}>{row.q}</span>
                    </span>
                    <span style={{
                      width: 32, height: 32, borderRadius: 999,
                      border: '2px solid var(--ink)',
                      background: isOpen ? 'var(--flame)' : 'var(--paper-2)',
                      display: 'grid', placeItems: 'center',
                      flexShrink: 0,
                    }}>
                      {isOpen ? Icon.minus(14) : Icon.plus(14)}
                    </span>
                  </button>
                  {isOpen && (
                    <div style={{ padding: '0 18px 18px 60px' }}>
                      <p className="body-sm" style={{ margin: 0, maxWidth: 640 }}>{row.a}</p>
                    </div>
                  )}
                </div>
              );
            })}
          </div>

          {/* Side panel */}
          <aside style={{ position: 'sticky', top: 96, display: 'flex', flexDirection: 'column', gap: 14 }} className="faq-side">
            <div className="halftone-orange" style={{
              border: '2px solid var(--ink)',
              borderRadius: 22,
              boxShadow: '4px 4px 0 var(--ink)',
              padding: 20,
              position: 'relative',
              overflow: 'hidden',
              minHeight: 220,
            }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em' }}>STILL CURIOUS?</div>
              <div className="title-l" style={{ marginTop: 6 }}>BUG US.<br/>WE LIKE IT.</div>
              <p className="body-sm" style={{ marginTop: 8 }}>
                Email parents, teachers, dentists, journalists. We answer.
              </p>
              <img src="images/Shock_Variation.png" alt="" style={{
                position: 'absolute', right: -10, bottom: -8, width: 120,
              }}/>
            </div>
            <a href="#top" className="btn ghost">↑ BACK TO TOP</a>
          </aside>

        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .faq-grid { grid-template-columns: 1fr !important; }
          .faq-side { position: relative !important; top: 0 !important; }
        }
      `}</style>
    </section>
  );
}

window.RMS.FAQ = FAQ;