/* burp.agency homepage — How we work (Section 02)
   Five steps with a traveling orange highlight that cycles continuously.
   No subhead — the headline does the work. */

const STEPS = [
  { key: 'ideation',     label: 'IDEATION' },
  { key: 'creation',     label: 'CREATION' },
  { key: 'optimisation', label: 'OPTIMISATION' },
  { key: 'execution',    label: 'EXECUTION' },
  { key: 'compound',     label: 'COMPOUND', loop: true },
];

const Flow = () => {
  const [active, setActive] = React.useState(0);

  React.useEffect(() => {
    const t = setInterval(() => {
      setActive(a => (a + 1) % STEPS.length);
    }, 1100);
    return () => clearInterval(t);
  }, []);

  return (
    <section data-screen-label="02 How we work"
             style={{
               background: 'var(--color-charcoal)',
               color: '#fff',
               paddingTop: 96, paddingBottom: 96,
             }}>
      <Container>
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <Mascot shape="square" bg="orange" color="ink" size={44} rotate={-6} />
            <Label style={{ color: 'var(--color-orange)' }}>HOW WE WORK</Label>
          </div>
        </Reveal>

        <Reveal delay={120}>
          <h2 style={{
            fontFamily: 'Georgia, serif', fontWeight: 400,
            fontSize: 'clamp(36px, 5vw, 72px)',
            letterSpacing: '-0.018em', lineHeight: 1.05,
            color: '#fff', margin: '24px 0 56px',
            maxWidth: '20ch',
            textWrap: 'balance',
          }}>
            One cycle, then another — with everything we learned the first time.
          </h2>
        </Reveal>

        <Reveal delay={240}>
          <div className="flow-row" style={{
            display: 'flex', alignItems: 'center',
            gap: 16, rowGap: 24, flexWrap: 'wrap',
          }}>
            {STEPS.map((s, i) => {
              const isActive = active === i;
              return (
                <React.Fragment key={s.key}>
                  <div style={{
                    display: 'flex', alignItems: 'baseline', gap: 12,
                    transition: 'transform .4s cubic-bezier(.22,1,.36,1)',
                    transform: isActive ? 'translateY(-2px)' : 'translateY(0)',
                  }}>
                    <span style={{
                      fontFamily: 'Inter, sans-serif',
                      fontSize: 11, fontWeight: 600,
                      letterSpacing: '0.16em',
                      color: isActive ? 'var(--color-orange)' : 'rgba(255,255,255,0.4)',
                      transition: 'color .4s ease',
                      width: 22,
                    }}>{String(i + 1).padStart(2, '0')}</span>
                    <span style={{
                      fontFamily: 'Inter, sans-serif',
                      fontSize: 'clamp(15px, 1.5vw, 18px)', fontWeight: 600,
                      letterSpacing: '0.14em',
                      textTransform: 'uppercase',
                      color: isActive ? '#fff' : 'rgba(255,255,255,0.55)',
                      transition: 'color .4s ease',
                      position: 'relative',
                    }}>
                      {s.label}
                      <span style={{
                        position: 'absolute',
                        left: 0, right: 0, bottom: -10,
                        height: 2,
                        background: 'var(--color-orange)',
                        transform: isActive ? 'scaleX(1)' : 'scaleX(0)',
                        transformOrigin: 'left center',
                        transition: 'transform .55s cubic-bezier(.22,1,.36,1)',
                      }}/>
                    </span>
                  </div>

                  {i < STEPS.length - 1 && (
                    <span style={{
                      color: active > i ? 'var(--color-orange)' : 'rgba(255,255,255,0.3)',
                      fontFamily: 'Inter, sans-serif',
                      fontSize: 18, fontWeight: 600,
                      transition: 'color .4s ease',
                      flexShrink: 0,
                    }}>→</span>
                  )}
                </React.Fragment>
              );
            })}

            {/* Loop indicator — inline after COMPOUND, so it flows with the
                steps on every viewport instead of floating absolutely. */}
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              marginLeft: 8,
              fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600,
              letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'var(--color-orange)',
              whiteSpace: 'nowrap',
            }}>
              <span style={{ fontSize: 16 }}>↺</span>
              <span>back to ideation</span>
            </span>
          </div>
        </Reveal>

        <Reveal delay={360}>
          <p style={{
            marginTop: 64,
            fontFamily: 'Inter, sans-serif', fontSize: 15,
            lineHeight: 1.75, color: 'rgba(255,255,255,0.65)',
            maxWidth: '52ch',
          }}>
            Every campaign feeds the next. The brief gets sharper, the audience clearer, the work cheaper to ship. By cycle three, you’re shipping faster than your competitor can review their first proof.
          </p>
        </Reveal>
      </Container>
    </section>
  );
};

Object.assign(window, { Flow });