function ProcessStep({ number, title, body, delay }) {
  const ref = React.useRef(null);
  const inView = useInView(ref, { once: true, margin: '-60px' });

  return (
    <motion.div
      ref={ref}
      {...fadeUp(delay)}
      style={{ display: 'flex', gap: 36, alignItems: 'flex-start' }}
    >
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>
        <div
          style={{
            width: 44, height: 44, borderRadius: '50%',
            border: inView ? '1.5px solid var(--accent)' : '1.5px solid rgba(237,233,225,0.1)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: "'Playfair Display'", fontSize: 16, fontStyle: 'italic',
            color: 'var(--accent)', flexShrink: 0,
            transition: 'border-color 0.6s ease',
          }}
        >{number}</div>
        {number < 3 && (
          <motion.div
            initial={{ height: 0 }}
            animate={{ height: inView ? 80 : 0 }}
            transition={{ duration: 0.7, delay: delay + 0.5 }}
            style={{ width: 1, background: 'rgba(237,233,225,0.08)', marginTop: 8 }}
          />
        )}
      </div>

      <div style={{ paddingBottom: number < 3 ? 48 : 0 }}>
        <div style={{
          fontFamily: "'DM Sans'", fontSize: 11.5,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          color: 'var(--accent)', marginBottom: 10, fontWeight: 500,
        }}>Step {number}</div>
        <h3 style={{
          fontFamily: "'Playfair Display'", fontSize: 26,
          fontWeight: 700, lineHeight: 1.2, color: 'var(--fg)',
          marginBottom: 14, letterSpacing: '-0.01em',
        }}>{title}</h3>
        <p style={{
          fontFamily: "'DM Sans'", fontSize: 15.5, lineHeight: 1.8,
          color: 'var(--muted)', maxWidth: 520,
        }}>{body}</p>
      </div>
    </motion.div>
  );
}

function Process() {
  const steps = [
    {
      title: "90 minutes with you",
      body: "We look at how your business actually runs. No questionnaire. No slide decks. A real conversation about what is eating your team's time and where one well-placed fix would do the most.",
    },
    {
      title: "We write up your top three opportunities",
      body: "Ranked by time saved and ease of build. You see exactly what is possible before anything is built. No surprises, no scope creep. Just a clear picture of what we can do and what it would take.",
    },
    {
      title: "We build what makes the most sense first",
      body: "You or someone on your team uses it. Same week. If it does not work the way it should, we fix it. That is not a guarantee we offer because it sounds good. It is just how this has to work for it to mean anything.",
    },
  ];

  return (
    <section id="what-we-build" style={{ padding: '120px 48px', borderTop: '1px solid rgba(237,233,225,0.06)' }}>
      <div style={{ maxWidth: 800, 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)' }}>The process</span>
        </motion.div>

        <motion.h2 {...fadeUp(0.06)} style={{
          fontFamily: "'Playfair Display'", fontSize: 'clamp(32px, 4vw, 52px)',
          fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.02em',
          color: 'var(--fg)', marginBottom: 64,
        }}>
          Here is exactly what happens.
        </motion.h2>

        <div>
          {steps.map((s, i) => (
            <ProcessStep key={i} number={i + 1} {...s} delay={i * 0.12} />
          ))}
        </div>


      </div>
    </section>
  );
}

Object.assign(window, { Process, ProcessStep });