// FAQ

const faqs = [
  ['Is Scrub another email client?', 'No. Scrub sits alongside your existing email — Gmail, Outlook, work — and turns the inbox into a feed of action cards. Your email keeps working exactly as it does today.'],
  ['Will Scrub send email from my account?', 'Never, unless you explicitly tap a quick reply. Scrub is read-only by default.'],
  ['How does WhatsApp delivery work?', 'You connect your number once. Scrub sends a daily morning digest and pings you only when something genuinely needs you — bill due tomorrow, flight delayed, reply overdue.'],
  ['Do you store my emails?', 'Scrub reads your emails, pulls the structured fields (amounts, dates, sender, intent) and stores those. The original email body is not retained beyond a short processing window.'],
  ['Is this only for India?', 'Scrub isn\u2019t limited to India. The beta is currently rolling out with an India-first focus, but anyone can join, and we\u2019re expanding globally soon.'],
  ['Who is the beta for?', 'Scrub\u2019s beta is for anyone who feels overwhelmed by email and wants a smarter, faster way to manage it\u2014especially people who prefer clear action items, quick summaries, and important alerts instead of constantly checking their inbox.'],
];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="rs-section" style={{
      position: 'relative', padding: '120px 0',
      background: 'var(--bg-cream)', color: 'var(--ink-cream)', overflow: 'hidden'
    }}>
      <div className="rs-container" style={{ position: 'relative', maxWidth: 1000, margin: '0 auto', padding: '0 32px' }}>
        <div className="rs-faq-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 80, alignItems: 'start' }}>
          <div className="rs-faq-side" style={{ position: 'sticky', top: 100 }}>
            <Reveal><SectionMark num="08" label="FAQ" /></Reveal>
            <Reveal delay={100}>
              <h2 style={{
                fontFamily: 'var(--serif)', fontWeight: 400,
                fontSize: 'clamp(2rem, 3.6vw, 3.2rem)', lineHeight: 1,
                letterSpacing: '-0.03em', margin: '24px 0 16px', textWrap: 'balance',
                color: 'var(--ink-cream)'
              }}>
                Things people<br /><span className="italic" style={{ color: 'var(--accent)' }}>ask first.</span>
              </h2>
            </Reveal>
            <Reveal delay={200}>
              <p style={{ fontSize: 14, color: 'var(--ink-cream-mute)', lineHeight: 1.6 }}>
                Still curious? Drop a line at <span className="mono" style={{ color: 'var(--accent)' }}>hello@scrubaiapp.com</span>
              </p>
            </Reveal>
          </div>

          <div style={{ borderTop: '1px solid var(--hair-lt)' }}>
            {faqs.map(([q, a], i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{ borderBottom: '1px solid var(--hair-lt)' }}>
                  <button
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    className="rs-faq-row"
                    style={{
                      width: '100%', padding: '22px 0',
                      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                      gap: 24, textAlign: 'left'
                    }}>
                    <span style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
                      <span className="rs-faq-num" style={{
                        fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-cream-faint)',
                        letterSpacing: '0.16em'
                      }}>{String(i + 1).padStart(2, '0')}</span>
                      <span className="rs-faq-question" style={{
                        fontFamily: 'var(--serif)', fontSize: 22,
                        color: isOpen ? 'var(--accent)' : 'var(--ink-cream)',
                        letterSpacing: '-0.01em', transition: 'color 0.3s'
                      }}>{q}</span>
                    </span>
                    <span style={{
                      flexShrink: 0, fontFamily: 'var(--mono)', fontSize: 18,
                      color: isOpen ? 'var(--accent)' : 'var(--ink-cream-mute)',
                      transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
                      transition: 'all 0.3s'
                    }}>+</span>
                  </button>
                  <div style={{
                    overflow: 'hidden',
                    maxHeight: isOpen ? 600 : 0,
                    opacity: isOpen ? 1 : 0,
                    transition: 'all 0.4s cubic-bezier(.2,.7,.2,1)'
                  }}>
                    <div className="rs-faq-answer-inner" style={{
                      padding: '0 0 22px 36px',
                      fontSize: 15, lineHeight: 1.65, fontWeight: 300,
                      color: 'var(--ink-cream-mute)', maxWidth: 600
                    }}>{a}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;