function ObjectionPair({ objection, answer, delay }) {
  const [open, setOpen] = React.useState(false);

  return (
    <motion.div
      {...fadeUp(delay)}
      style={{ borderBottom: '1px solid rgba(237,233,225,0.07)', paddingBottom: 36, marginBottom: 36 }}
    >
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          background: 'none', border: 'none', cursor: 'pointer',
          textAlign: 'left', width: '100%', padding: 0,
          display: 'flex', justifyContent: 'space-between',
          alignItems: 'flex-start', gap: 24,
        }}
      >
        <span style={{
          fontFamily: "'Playfair Display'", fontSize: 'clamp(18px, 2.8vw, 28px)',
          fontWeight: 400, fontStyle: 'italic', lineHeight: 1.3,
          color: open ? 'var(--fg)' : 'rgba(237,233,225,0.5)',
          transition: 'color 0.25s',
        }}>"{objection}"</span>
        <motion.div
          animate={{ rotate: open ? 45 : 0 }}
          transition={{ duration: 0.25 }}
          style={{
            width: 32, height: 32, borderRadius: '50%',
            border: '1px solid rgba(237,233,225,0.12)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            flexShrink: 0, color: 'var(--muted)', fontSize: 18, lineHeight: 1,
          }}
        >+</motion.div>
      </button>

      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ opacity: 0, height: 0, marginTop: 0 }}
            animate={{ opacity: 1, height: 'auto', marginTop: 24 }}
            exit={{ opacity: 0, height: 0, marginTop: 0 }}
            transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
            style={{ overflow: 'hidden' }}
          >
            <p style={{
              fontFamily: "'DM Sans'", fontSize: 16.5, lineHeight: 1.8,
              color: 'var(--fg)', maxWidth: 680, margin: 0,
            }}>{answer}</p>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  );
}

function Objections() {
  const pairs = [
    {
      objection: "I tried ChatGPT. It gave me garbage.",
      answer: "That is because generic AI gives generic output. What we build is trained on your workflows, your language, 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 businesses, family-owned operations. The less tech-forward your business is, the more room there is to gain. We do not need you to be running a modern tech stack. We just need one task that is eating time.",
    },
    {
      objection: "Now's not the right time.",
      answer: "That is the same answer you will have in six months. The task we would fix is not going to get less time-consuming on its own. The 90-minute conversation costs you nothing, and if it is not a fit, you will know before it is over.",
    },
    {
      objection: "What if my team won't use it?",
      answer: "If they will not use it, we have not built it right. That is the constraint we design around from the start. The person who is going to use the tool is part of how we scope and test it. If it does not stick, that is on us to fix.",
    },
  ];

  return (
    <section style={{ padding: '120px 48px', borderTop: '1px solid rgba(237,233,225,0.06)' }}>
      <div style={{ maxWidth: 860, margin: '0 auto' }}>
        <motion.div {...fadeUp(0)} style={{ marginBottom: 16 }}>
          <span style={{ fontFamily: "'DM Sans'", fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--muted)' }}>If you're thinking...</span>
        </motion.div>

        <motion.h2 {...fadeUp(0.06)} style={{
          fontFamily: "'Playfair Display'", fontSize: 'clamp(28px, 4vw, 52px)',
          fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.02em',
          color: 'var(--fg)', marginBottom: 64,
        }}>
          The honest answers to the real objections.
        </motion.h2>

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

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