function ConstraintCard({ number, title, body, contrast, delay }) {
  const isMobile = useIsMobile();
  const [active, setActive] = React.useState(false);
  const { ref, rotateX, rotateY, handleMouseMove, handleMouseLeave } = useTilt(isMobile);

  return (
    <motion.div
      ref={ref}
      {...fadeUp(delay)}
      onMouseMove={handleMouseMove}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      onClick={() => setActive(o => !o)}
      style={{
        rotateX, rotateY,
        transformStyle: 'preserve-3d',
        background: active ? 'rgba(237,233,225,0.05)' : 'rgba(237,233,225,0.025)',
        border: `1px solid ${active ? 'rgba(var(--accent-rgb),0.2)' : 'rgba(237,233,225,0.08)'}`,
        borderRadius: 12, padding: '36px 32px',
        cursor: 'pointer',
        transition: 'background 0.3s, border-color 0.3s',
        position: 'relative',
        display: 'flex', flexDirection: 'column',
      }}
    >
      <div style={{
        fontFamily: "'Playfair Display'", fontSize: 13, fontStyle: 'italic',
        color: 'var(--accent)', marginBottom: 24, letterSpacing: '0.01em',
      }}>0{number}</div>

      <h3 style={{
        fontFamily: "'Playfair Display'", fontSize: 26,
        fontWeight: 700, lineHeight: 1.2, letterSpacing: '-0.01em',
        color: 'var(--fg)', marginBottom: 18,
      }}>{title}</h3>

      <p style={{
        fontFamily: "'DM Sans'", fontSize: 15, lineHeight: 1.75,
        color: 'var(--muted)',
      }}>{body}</p>

      <motion.div
        animate={{ opacity: active ? 1 : 0, height: active ? 'auto' : 0 }}
        transition={{ duration: 0.28 }}
        style={{ overflow: 'hidden' }}
      >
        <div style={{
          marginTop: 24, paddingTop: 20,
          borderTop: '1px solid rgba(var(--accent-rgb),0.2)',
        }}>
          <div style={{ fontFamily: "'DM Sans'", fontSize: 13, lineHeight: 1.65, color: 'var(--muted)' }}>
            <span style={{ color: 'rgba(237,233,225,0.3)', marginRight: 6 }}>Not:</span>
            <span>{contrast.not}</span>
            <br /><br />
            <span style={{ color: 'var(--accent)', marginRight: 6 }}>Yes:</span>
            <span style={{ color: 'var(--fg)' }}>{contrast.yes}</span>
          </div>
        </div>
      </motion.div>

      {/* Hint */}
      {!active && (
        <div style={{ marginTop: 'auto', paddingTop: 16, fontFamily: "'DM Sans'", fontSize: 12, fontWeight: 600, color: 'rgba(237,233,225,0.2)', textAlign: 'center' }}>
          'click for example'
        </div>
      )}
    </motion.div>
  );
}

function Position() {
  const constraints = [
    {
      title: "Built around your people",
      body: "We don't build company-wide systems. We build tools for the people on your team who are losing the most time. Your estimator, scheduler, office manager, etc. Role-specific, scoped tight, no fluff.",
      contrast: {
        not: "A platform for your whole team to adopt over the next quarter.",
        yes: "Quoting tools for Derek, a scheduling briefing for Maria, and nothing your other team members have to touch.",
      },
    },
    {
      title: "Works with zero training",
      body: "If the person who is going to use it needs to be trained on it, we have failed. Zero learning curve is not a feature. It is a design constraint. If it does not work the first time they open it, we rebuild it.",
      contrast: {
        not: "A system that requires onboarding sessions and a user manual.",
        yes: "Something Sarah opens Monday morning and figures out in two minutes.",
      },
    },
    {
      title: "Won't touch what's working",
      body: "We do not touch your existing systems once so ever. We do not rearrange your operation. Whatever is working right now keeps working. We add one tools that you can lay on top. That is it.",
      contrast: {
        not: "A migration, integration project, or reason to change how you operate.",
        yes: "One addition that fits around everything you already have.",
      },
    },
  ];

  return (
    <section id="how-it-works" style={{ padding: '120px 48px', borderTop: '1px solid rgba(237,233,225,0.06)' }}>
      <div style={{ maxWidth: 1100, 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)' }}>Our position</span>
        </motion.div>

        <motion.h2 {...fadeUp(0.06)} style={{
          fontFamily: "'Playfair Display'", fontSize: 'clamp(28px, 4.5vw, 58px)',
          fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.02em',
          color: 'var(--fg)', maxWidth: 740, margin: '0px 0px 25px',
        }}>
          We do not transform your business.{' '}
          <em style={{ fontStyle: 'italic', fontWeight: 400 }}>We fix the specific things</em>{' '}
          holding specific people back.
        </motion.h2>



        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 20 }}>
          {constraints.map((c, i) => (
            <ConstraintCard key={i} number={i + 1} {...c} delay={i * 0.1} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Position, ConstraintCard });