function ObjectionPair({ idx, objection, answer, delay }) {
  const [open, setOpen] = React.useState(false);
  return (
    <motion.div {...fadeUp(delay)}
      style={{ borderTop: idx === 0 ? '1px solid var(--border)' : 'none', borderBottom: '1px solid var(--border)' }}>
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          background: 'transparent', border: 'none', cursor: 'pointer',
          width: '100%', textAlign: 'left', padding: '24px 0',
          display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 20, alignItems: 'flex-start',
          color: 'inherit',
        }}>
        <span style={{
          fontFamily: "'Space Mono', monospace", fontSize: 10,
          letterSpacing: '0.22em', color: 'var(--muted)', marginTop: 6,
        }}>Q.{String(idx + 1).padStart(2, '0')}</span>
        <span className="accent-it" style={{
          fontWeight: 400, fontSize: 'clamp(18px, 2.4vw, 24px)',
          lineHeight: 1.35,
          color: open ? 'var(--accent)' : 'rgba(var(--fg-tint),0.7)',
          transition: 'color 220ms ease',
        }}>"{objection}"</span>
        <motion.span animate={{ rotate: open ? 45 : 0 }}
          style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 26, height: 26, color: open ? 'var(--accent)' : 'var(--muted)',
            fontSize: 18, lineHeight: 1,
            border: '1px solid var(--border-2)', borderRadius: 2,
          }}>+</motion.span>
      </button>

      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.32, ease: [0.22, 1, 0.36, 1] }}
            style={{ overflow: 'hidden' }}>
            <div style={{
              padding: '0 0 28px',
              display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 20,
            }}>
              <span />
              <p className="body" style={{ fontSize: 14, lineHeight: 1.85, maxWidth: 700 }}>{answer}</p>
              <span />
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  );
}

function Objections() {
  const pairs = [
    {
      objection: "I tried ChatGPT. It gave me garbage.",
      answer: "That’s because generic AI gives generic output. What we build is trained on your workflows, your language, and your team’s actual process — not a general-purpose tool trying to cover everything for everyone. Off-the-shelf and custom are completely different products.",
    },
    {
      objection: "I don’t think this would work for a business like mine.",
      answer: "We work with trades companies, construction firms, professional services, distribution, family-owned operations. The less tech-forward your business is, the more room there is to gain. We don’t need you running a modern tech stack. We just need one task that’s eating time.",
    },
    {
      objection: "Now’s not the right time.",
      answer: "That’s the same answer you’ll have in six months. The task we’d fix isn’t going to get less time-consuming on its own. The 90-minute conversation costs you nothing — and if it isn’t a fit, you’ll know before it’s over.",
    },
    {
      objection: "What if my team won’t use it?",
      answer: "If they won’t use it, we haven’t built it right. That’s the constraint we design around from the start. The person who’s going to use it is part of how we scope and test the build. If it doesn’t stick, that’s on us to fix.",
    },
  ];

  return (
    <section id="objections">
      <div className="container-narrow">
        <motion.div {...fadeUp(0)} style={{ marginBottom: 16 }}>
          <span className="eyebrow" style={{ color: 'var(--muted)' }}>06 · IF YOU'RE THINKING{'…'}</span>
        </motion.div>

        <motion.h2 {...fadeUp(0.06)} className="h2" style={{ marginBottom: 48 }}>
          THE HONEST ANSWERS<br />TO THE REAL OBJECTIONS.
        </motion.h2>

        <div>
          {pairs.map((p, i) => <ObjectionPair key={i} idx={i} {...p} delay={i * 0.05} />)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Objections, ObjectionPair });