// FAQ, accordion with smooth height animation
const { useRef: useFaqRef, useEffect: useFaqEffect, useState: useFaqState } = React;

const FAQS = [
  {
    q: 'How is this different from hiring a Zapier consultant?',
    a: 'A Zapier consultant connects existing tools. We build full systems. Agents with memory, real tools, evals, and error handling that do actual work autonomously. When you need custom logic, a trained classifier, or a production API, a no-code consultant stops. That\'s where we start.',
  },
  {
    q: 'Do you replace our staff or augment them?',
    a: 'Augment, almost always. We target the repetitive, low-judgment work that consumes hours but doesn\'t require human expertise. Sourcing leads, drafting first versions, routing tickets, scheduling, data entry. Your team focuses on the work that actually needs them.',
  },
  {
    q: 'What happens if the AI gets it wrong?',
    a: 'We build evals into every production system. That means automated quality checks, human-in-the-loop escalation for edge cases, and monitoring that catches drift before it becomes a problem. Our systems don\'t fail silently. They surface issues to the right person immediately.',
  },
  {
    q: 'Do you work fixed-price or retainer?',
    a: 'Both. Project builds are fixed-price with a clear spec before you commit. No hourly billing surprises. After deployment, optional retainers cover reliability monitoring, iteration, and model retraining. You can walk away after the build is done. The system is yours.',
  },
  {
    q: 'Where is our data stored?',
    a: 'Wherever you need it. We design around your compliance requirements: US-only storage, GDPR-compliant EU hosting, DIFC/ADGM for GCC clients, HIPAA-aware architectures for healthcare. PII isolation and encryption at rest are standard.',
  },
  {
    q: 'Will this work with our specific software?',
    a: 'Almost certainly. We\'ve integrated with major CRMs (Salesforce, HubSpot, Clio), accounting platforms (QuickBooks, Xero), EHRs, MLS systems, e-commerce platforms (Shopify, WooCommerce), and dozens of vertical-specific tools. If it has an API, we can work with it.',
  },
  {
    q: 'What if we\'re not technical?',
    a: 'Good. Our best clients aren\'t. We translate business problems into technical solutions. You don\'t need to understand the architecture. You need to understand the outcome you want and whether it matches what we deliver. We\'ll be honest if it doesn\'t.',
  },
  {
    q: 'How much does a typical build cost?',
    a: 'Starter sprints (single workflow, 2 weeks) from $2,500. Growth builds (multi-step systems, 3–4 weeks) from $7,500. Scale builds (multi-agent, 5–6 weeks) from $15,000. Optional maintenance retainers $1,500–$4,000/month. Enterprise scoped separately. Prices stay this honest because hiding pricing wastes both our time.',
  },
  {
    q: 'How do you protect my budget if the project changes?',
    a: 'Everything (tech stack, scope, success metric, deliverables, and price) is locked in a written spec before any code is written. No mid-build surprises. No scope creep. No hourly billing trap. If you change your mind about scope after the spec is signed, we re-spec and re-quote together. Spec-first is non-negotiable for us. It\'s how both sides stay protected.',
  },
  {
    q: 'Do you work across time zones?',
    a: 'Yes. We have active clients in US Eastern, UK, and Gulf Standard Time zones. Async-first communication means you\'re never waiting on a reply because of time zones. We post Loom updates every Friday so you\'re always current.',
  },
];

function FAQItem({ item, index, revealed }) {
  const [open, setOpen] = useFaqState(false);
  const contentRef = useFaqRef(null);
  const [height, setHeight] = useFaqState(0);

  useFaqEffect(() => {
    if (contentRef.current) {
      setHeight(contentRef.current.scrollHeight);
    }
  }, []);

  return (
    <div style={{
      borderBottom: '1px solid var(--border-subtle)',
      opacity: revealed ? 1 : 0,
      transform: revealed ? 'translateY(0)' : 'translateY(12px)',
      transition: `all 0.5s var(--ease-expo) ${0.05 * index}s`,
    }}>
      <button
        onClick={() => setOpen(!open)}
        style={{
          width: '100%', background: 'none', border: 'none',
          cursor: 'pointer', padding: '20px 0',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 20, textAlign: 'left',
        }}
        onMouseEnter={e => e.currentTarget.style.opacity = '0.85'}
        onMouseLeave={e => e.currentTarget.style.opacity = '1'}
      >
        <span style={{
          fontSize: 16, fontWeight: 500,
          color: open ? 'var(--text-primary)' : 'var(--text-secondary)',
          lineHeight: 1.4, transition: 'color 0.2s ease',
        }}>{item.q}</span>
        <span style={{
          width: 24, height: 24, borderRadius: '50%',
          border: '1px solid var(--border-emphasis)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
          color: open ? 'var(--accent-mint)' : 'var(--text-tertiary)',
          transition: 'all 0.3s ease',
          transform: open ? 'rotate(45deg)' : 'rotate(0deg)',
          borderColor: open ? 'var(--accent-mint)' : 'var(--border-emphasis)',
          fontSize: 16, lineHeight: 1,
        }}>+</span>
      </button>
      <div style={{
        maxHeight: open ? `${height}px` : '0px',
        overflow: 'hidden',
        transition: 'max-height 0.4s var(--ease-expo)',
      }}>
        <div ref={contentRef} style={{ paddingBottom: 20 }}>
          <p style={{
            fontSize: 15, color: 'var(--text-secondary)',
            lineHeight: 1.65,
          }}>{item.a}</p>
        </div>
      </div>
    </div>
  );
}

function FAQ() {
  const [revealed, setRevealed] = useFaqState(false);
  const sectionRef = useFaqRef(null);

  useFaqEffect(() => {
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) setRevealed(true);
    }, { threshold: 0.1 });
    if (sectionRef.current) obs.observe(sectionRef.current);
    return () => obs.disconnect();
  }, []);

  return (
    <section ref={sectionRef} style={{ padding: '120px 0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 40px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80,
          alignItems: 'start',
        }} className="faq-grid">
          {/* Left */}
          <div style={{
            position: 'sticky', top: 100,
            opacity: revealed ? 1 : 0,
            transform: revealed ? 'translateY(0)' : 'translateY(24px)',
            transition: 'all 0.6s var(--ease-expo)',
          }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11,
              color: 'var(--accent-mint-text)', letterSpacing: '0.12em',
              textTransform: 'uppercase', marginBottom: 12,
            }}>// FAQ</div>
            <h2 style={{
              fontSize: 'clamp(28px, 3vw, 44px)',
              fontFamily: 'Syne, sans-serif',
              fontWeight: 700, letterSpacing: '-0.02em',
              lineHeight: 1.12, marginBottom: 20,
            }}>Common questions.</h2>
            <p style={{
              fontSize: 14, color: 'var(--text-secondary)',
              lineHeight: 1.6, marginBottom: 28,
            }}>
              If your question isn't here, the discovery call is the right place to ask it.
            </p>
            <a href="#contact" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              fontFamily: 'var(--font-mono)', fontSize: 12,
              color: 'var(--accent-mint)', textDecoration: 'none',
              padding: '10px 16px',
              border: '1px solid var(--accent-mint)',
              borderRadius: 6,
              transition: 'all 0.2s ease',
            }}
            onMouseEnter={e => { e.currentTarget.style.background = 'rgba(0,217,160,0.08)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}
            >
              Book a call <span>→</span>
            </a>
          </div>

          {/* Right */}
          <div>
            {FAQS.map((item, i) => (
              <FAQItem key={i} item={item} index={i} revealed={revealed} />
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 768px) {
          .faq-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .faq-grid > div:first-child { position: static !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { FAQ });
