const FAQ = () => {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  const [open, setOpen] = React.useState(null);
  React.useEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVisible(true); }, { threshold: 0.1 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const faqs = [
    { q: 'How long does a typical project take?', a: 'Timelines vary by scope. A focused MVP typically takes 6–12 weeks. A full SaaS platform or AI system is usually 3–6 months. We give precise estimates after our discovery phase — and we stick to them.' },
    { q: 'Do you work with startups or only enterprises?', a: 'Both. About half of our clients are early-stage startups building their first product; the other half are SMEs and enterprises modernizing existing systems. Our engagement models are tailored to each.' },
    { q: 'Who owns the code and IP when the project ends?', a: 'You do — completely. All code, designs, documentation, and infrastructure configurations are transferred to you at project completion. We sign whatever IP transfer agreements you require.' },
    { q: 'How do you handle project communication and updates?', a: 'Every project has a dedicated Slack channel, a shared project board (Jira or Linear), and bi-weekly demo calls. You\'ll always know exactly what\'s been built, what\'s next, and any blockers — in real-time.' },
    { q: 'Can you integrate with our existing systems?', a: 'Yes. We\'ve integrated with hundreds of third-party APIs, legacy enterprise systems, ERPs, CRMs, and custom databases. Integration complexity is scoped during discovery and factored into the project plan.' },
    { q: 'What happens after launch?', a: 'We offer ongoing retainer support packages for maintenance, monitoring, feature development, and scaling. Most clients continue with us after launch — either on a reduced retainer or for the next phase of development.' },
    { q: 'Do you sign NDAs?', a: 'Absolutely. We sign NDAs before any project discussion. Client confidentiality is a non-negotiable part of how we operate. We can also sign your template NDA rather than requiring our own.' },
    { q: 'What is your pricing model?', a: 'We use monthly retainers — no surprise invoices, no hourly billing debates. Scope is defined at the start of each engagement and adjusted collaboratively. See our Pricing section for starting rates.' },
  ];

  return (
    <section id="faq" data-screen-label="FAQ" ref={ref} style={{ padding: '100px 0', background: 'var(--bg, #e8edf5)' }}>
      <div className="inner-wrap" style={{ maxWidth: 800, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ textAlign: 'center', marginBottom: 56, opacity: visible ? 1 : 0, transition: 'all 0.6s ease' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '5px 14px', borderRadius: 100, background: 'var(--accentbg)', border: '1px solid rgba(37,99,235,0.18)', marginBottom: 18 }}>
            <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, fontWeight: 600, color: 'var(--accent, #1d4ed8)', letterSpacing: '0.07em' }}>FAQ</span>
          </div>
          <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 'clamp(28px, 4vw, 44px)', fontWeight: 700, color: 'var(--text, #0f172a)', letterSpacing: '-0.03em', lineHeight: 1.1, margin: '0 0 14px' }}>
            Frequently asked questions
          </h2>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, color: 'var(--text2, #64748b)', lineHeight: 1.7, margin: 0 }}>
            Everything you need to know before starting a project with us.
          </p>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {faqs.map((f, i) => (
            <div key={i} onClick={() => setOpen(open === i ? null : i)} className="dm-card" style={{
              borderRadius: 12, overflow: 'hidden', background: 'var(--bg3, #fff)',
              border: `1.5px solid ${open === i ? 'var(--accent2, #2563eb)' : 'var(--border)'}`,
              boxShadow: open === i ? '0 4px 20px rgba(29,78,216,0.08)' : 'var(--shadow)',
              cursor: 'pointer', transition: 'all 0.25s ease',
              opacity: visible ? 1 : 0, transitionDelay: `${i * 0.04}s`,
            }}>
              <div style={{ padding: '18px 22px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16 }}>
                <h4 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 15.5, fontWeight: 600, color: open === i ? 'var(--accent, #1d4ed8)' : 'var(--text, #0f172a)', margin: 0, lineHeight: 1.4, flex: 1, transition: 'color 0.2s' }}>{f.q}</h4>
                <div style={{ width: 28, height: 28, borderRadius: '50%', background: open === i ? 'var(--accentbg)' : 'var(--bg2, #f8fafc)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'all 0.25s', transform: open === i ? 'rotate(45deg)' : 'rotate(0deg)', border: '1px solid var(--border)' }}>
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M6 2V10M2 6H10" stroke={open === i ? 'var(--accent, #1d4ed8)' : 'var(--text2, #64748b)'} strokeWidth="1.5" strokeLinecap="round"/></svg>
                </div>
              </div>
              {open === i && (
                <div style={{ padding: '0 22px 18px', borderTop: '1px solid var(--border2)' }}>
                  <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14.5, color: 'var(--text2, #64748b)', lineHeight: 1.7, margin: '14px 0 0' }}>{f.a}</p>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { FAQ });