function FAQ() {
  const items = [
    {
      cat: 'About',
      q: 'Tell me about your agency?',
      a: 'Nexcut is a full-service content agency. We handle strategy, scripting, editing, thumbnails and SEO for creators and founders who want consistent output without losing time to production.',
    },
    {
      cat: 'Content',
      q: 'Tell me about your content plan?',
      a: 'You film once for ~2 hours. We then script, edit and deliver a month of platform-native content — long form, shorts, captions and thumbnails — ready to post on Instagram, TikTok, LinkedIn and YouTube.',
    },
    {
      cat: 'Services',
      q: 'What services will you provide?',
      a: 'YouTube long-form editing, short-form video for Reels and TikTok, podcast editing, ad creatives and VSLs, plus thumbnails, captions and SEO descriptions.',
    },
    {
      cat: 'Guarantee',
      q: "What if I don't get the results?",
      a: "We work in monthly sprints. If we don't hit the agreed goals, we keep iterating until we do — no extra cost. The first strategy session is always free.",
    },
    {
      cat: 'Compare',
      q: "Why wouldn't I hire a freelancer?",
      a: 'A freelancer edits. We run an end-to-end system — strategy, script, edit, thumbnail, distribution, with a dedicated team and a CRM so nothing falls through.',
    },
    {
      cat: 'Workflow',
      q: 'Tell me about your workflow?',
      a: 'Onboarding call → strategy doc → batch shoot → 48-hour first cuts → revisions → publish. You get a Slack channel, a CRM dashboard and weekly reporting.',
    },
  ];
  const [open, setOpen] = useState(0);

  return (
    <section id="faq" style={{ padding: '96px 0 140px', position: 'relative', overflow: 'hidden' }}>
      {/* Rise from black at top — cinematic match with CTA fade-out */}
      <div aria-hidden style={{
        position: 'absolute',
        left: 0, right: 0, top: 0,
        height: 240,
        background: 'linear-gradient(180deg, #000 0%, rgba(0,0,0,0.55) 40%, transparent 100%)',
        pointerEvents: 'none',
        zIndex: 1,
      }} />
      {/* Backdrop: subtle grid */}
      <div aria-hidden style={{
        position: 'absolute',
        inset: 0,
        backgroundImage:
          'linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)',
        backgroundSize: '56px 56px',
        maskImage:
          'radial-gradient(ellipse 55% 55% at 30% 30%, #000 0%, rgba(0,0,0,0.55) 50%, transparent 85%)',
        WebkitMaskImage:
          'radial-gradient(ellipse 55% 55% at 30% 30%, #000 0%, rgba(0,0,0,0.55) 50%, transparent 85%)',
        pointerEvents: 'none',
        zIndex: 0,
      }} />
      {/* Soft accent halo behind the left column */}
      <div aria-hidden style={{
        position: 'absolute',
        left: '-8%', top: '18%',
        width: 520, height: 520,
        background: 'radial-gradient(circle at center, rgba(74,142,255,0.18) 0%, rgba(74,142,255,0.04) 40%, transparent 70%)',
        filter: 'blur(20px)',
        pointerEvents: 'none',
        zIndex: 0,
      }} />

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div className="faq-grid">
          {/* LEFT: heading + helper card */}
          <div className="faq-left">
            <Reveal>
              <h2 className="display" style={{ fontSize: 'clamp(36px, 4.4vw, 56px)', lineHeight: 1.02, margin: 0 }}>
                <span className="serif-italic" style={{ color: 'var(--ink-dim)' }}>Questions</span><br />
                you may ask.
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <p style={{
                marginTop: 18,
                color: 'var(--ink-dim)',
                fontSize: 15.5,
                lineHeight: 1.6,
                maxWidth: 380,
              }}>
                Six things founders ask us before signing. If yours isn't here, ping us — we usually answer within the hour.
              </p>
            </Reveal>

            <Reveal delay={180}>
              <div className="faq-card">
                <div className="faq-card-pulse" aria-hidden />
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
                  <div className="faq-avatars">
                    <div className="faq-avatar" style={{ background: 'linear-gradient(135deg, #6ea7ff, #2b6cf0)' }}>N</div>
                    <div className="faq-avatar" style={{ background: 'linear-gradient(135deg, #ffb37a, #d9683c)' }}>R</div>
                    <div className="faq-avatar" style={{ background: 'linear-gradient(135deg, #9ad0a0, #4a8e60)' }}>K</div>
                  </div>
                  <div>
                    <div style={{ fontSize: 13.5, fontWeight: 500 }}>Still curious?</div>
                    <div style={{ fontSize: 11.5, color: 'var(--ink-muted)', display: 'flex', alignItems: 'center', gap: 6, marginTop: 2 }}>
                      <span className="faq-dot" /> Replies in &lt; 1 hour
                    </div>
                  </div>
                </div>
                <p style={{ fontSize: 13.5, color: 'var(--ink-dim)', lineHeight: 1.55, margin: '0 0 16px' }}>
                  Hop on a 20-min strategy call. No pitch, no contract — we'll just map out what your content month could look like.
                </p>
                <a href="#book-a-call" className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', padding: '12px 18px', fontSize: 13.5 }}>
                  Book a free call
                  <svg width="13" height="13" viewBox="0 0 16 16" fill="none">
                    <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </a>
              </div>
            </Reveal>
          </div>

          {/* RIGHT: accordion */}
          <div className="faq-right">
            {items.map((it, i) => {
              const isOpen = open === i;
              const num = String(i + 1).padStart(2, '0');
              return (
                <Reveal key={i} delay={i * 50}>
                  <div className={`faq-item ${isOpen ? 'is-open' : ''}`}>
                    <button
                      onClick={() => setOpen(isOpen ? -1 : i)}
                      aria-expanded={isOpen}
                      className="faq-trigger"
                    >
                      <span className="faq-num">{num}</span>
                      <span className="faq-q-wrap">
                        <span className="faq-cat">{it.cat}</span>
                        <span className="faq-q">{it.q}</span>
                      </span>
                      <span className="faq-toggle">
                        <svg width="11" height="11" viewBox="0 0 11 11">
                          <path d="M5.5 1v9M1 5.5h9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
                        </svg>
                      </span>
                    </button>
                    <div className="faq-body" style={{ gridTemplateRows: isOpen ? '1fr' : '0fr' }}>
                      <div style={{ overflow: 'hidden' }}>
                        <div className="faq-a">
                          <span className="faq-a-rule" aria-hidden />
                          {it.a}
                        </div>
                      </div>
                    </div>
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </div>

      <style>{`
        .faq-grid {
          display: grid;
          grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.4fr);
          gap: 80px;
          align-items: start;
        }
        .faq-left { position: relative; }
        .faq-card {
          position: relative;
          margin-top: 32px;
          padding: 22px;
          border-radius: 18px;
          background: linear-gradient(180deg, rgba(74,142,255,0.07), rgba(74,142,255,0.015));
          border: 1px solid rgba(74,142,255,0.18);
          overflow: hidden;
        }
        .faq-card-pulse {
          position: absolute; inset: -1px;
          border-radius: inherit;
          background: radial-gradient(120px 80px at 12% 0%, rgba(110,167,255,0.18), transparent 70%);
          pointer-events: none;
        }
        .faq-avatars { display: flex; }
        .faq-avatar {
          width: 30px; height: 30px;
          border-radius: 50%;
          display: inline-flex; align-items: center; justify-content: center;
          font-size: 12px; font-weight: 600; color: #fff;
          border: 2px solid #0a0e18;
          margin-left: -8px;
        }
        .faq-avatar:first-child { margin-left: 0; }
        .faq-dot {
          width: 6px; height: 6px; border-radius: 50%;
          background: #4ade80;
          box-shadow: 0 0 8px #4ade80;
          display: inline-block;
        }

        .faq-right { display: flex; flex-direction: column; gap: 10px; }
        .faq-item {
          position: relative;
          border-radius: 16px;
          background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.004));
          border: 1px solid rgba(255,255,255,0.06);
          overflow: hidden;
          transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
        }
        .faq-item:hover { border-color: rgba(255,255,255,0.10); }
        .faq-item.is-open {
          background: linear-gradient(180deg, rgba(74,142,255,0.08), rgba(74,142,255,0.015));
          border-color: rgba(74,142,255,0.30);
          box-shadow: 0 12px 36px -18px rgba(74,142,255,0.45);
        }
        .faq-trigger {
          width: 100%;
          display: grid;
          grid-template-columns: 48px 1fr auto;
          align-items: center;
          gap: 16px;
          padding: 22px 22px;
          background: transparent;
          border: none;
          color: inherit;
          text-align: left;
          cursor: pointer;
        }
        .faq-num {
          font-family: 'Geist Mono', ui-monospace, monospace;
          font-size: 11.5px;
          letter-spacing: 0.06em;
          color: var(--ink-muted);
          transition: color 0.3s;
        }
        .faq-item.is-open .faq-num { color: var(--accent-2); }
        .faq-q-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
        .faq-cat {
          font-family: 'Geist Mono', ui-monospace, monospace;
          font-size: 10px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--ink-muted);
          transition: color 0.3s;
        }
        .faq-item.is-open .faq-cat { color: rgba(110,167,255,0.85); }
        .faq-q {
          font-size: 16px;
          font-weight: 500;
          letter-spacing: -0.005em;
          color: var(--ink);
        }
        .faq-toggle {
          width: 32px; height: 32px;
          border-radius: 50%;
          display: inline-flex; align-items: center; justify-content: center;
          background: rgba(255,255,255,0.04);
          border: 1px solid rgba(255,255,255,0.10);
          color: var(--ink-dim);
          flex-shrink: 0;
          transition: transform 0.35s cubic-bezier(.5,.05,.2,1), background 0.3s, border-color 0.3s, color 0.3s;
        }
        .faq-item.is-open .faq-toggle {
          background: rgba(74,142,255,0.22);
          border-color: rgba(74,142,255,0.42);
          color: var(--accent-2);
          transform: rotate(45deg);
        }
        .faq-body {
          display: grid;
          grid-template-rows: 0fr;
          transition: grid-template-rows 0.45s cubic-bezier(.5,.05,.2,1);
        }
        .faq-a {
          display: grid;
          grid-template-columns: 48px 1fr;
          gap: 16px;
          padding: 0 22px 22px 22px;
          font-size: 14.5px;
          color: var(--ink-dim);
          line-height: 1.65;
        }
        .faq-a-rule {
          grid-column: 1;
          width: 24px;
          height: 1px;
          margin-top: 11px;
          background: linear-gradient(90deg, transparent, rgba(110,167,255,0.55), transparent);
          justify-self: center;
        }
        .faq-a > :not(.faq-a-rule) { grid-column: 2; }

        @media (max-width: 900px) {
          .faq-grid { grid-template-columns: 1fr; gap: 40px; }
          .faq-left { position: static; }
          .faq-card { margin-top: 24px; }
          .faq-trigger { grid-template-columns: 36px 1fr auto; gap: 12px; padding: 18px 18px; }
          .faq-a { grid-template-columns: 36px 1fr; gap: 12px; padding: 0 18px 18px 18px; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { FAQ });