/* global React, Reveal, useReveal */
const { useState } = React;

function Process() {
  const steps = [
    {
      n: '01', title: 'Scope & architecture',
      body: 'We start with a short paid discovery: we read your code, talk to your team, and come back with a written proposal - problem, approach, estimate, risks. No slide decks.',
      sample: ['Repo walkthrough · 2–5 days', 'Written proposal + estimate', 'Architecture diagram'],
    },
    {
      n: '02', title: 'Ship in small slices',
      body: 'We prefer week-long slices: design, build, deploy, review, move on. You see real progress every Friday, and you can stop at any slice boundary without penalty.',
      sample: ['Weekly shipping cadence', 'Deploy behind flags', 'Demo every Friday'],
    },
    {
      n: '03', title: 'Hand off properly',
      body: 'When we leave, we leave cleanly. Runbooks your on-call can actually use. CI your team owns. No tribal knowledge stuck in our heads.',
      sample: ['Runbook + on-call guide', 'CI/CD owned by your team', '30-day support window'],
    },
  ];
  const [active, setActive] = useState(0);
  return (
    <section id="work" data-screen-label="04 Process" style={{ padding: '140px clamp(20px,4vw,48px) 120px', background: '#F7F9FB', position: 'relative' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <Reveal y={14}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#3A7BB8', marginBottom: 20, display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 22, height: 1, background: '#3A7BB8' }} />
            How we work
          </div>
        </Reveal>
        <Reveal y={16} delay={100}>
          <h2 style={{ fontSize: 'clamp(40px,5vw,72px)', fontWeight: 600, letterSpacing: '-0.035em', lineHeight: 1.0, margin: 0, maxWidth: 880, color: '#0B1220' }}>
            Three slices, <span style={{ color: '#8695A8', fontStyle: 'italic', fontWeight: 400 }}>no surprises.</span>
          </h2>
        </Reveal>

        <div className="nal-proc-grid" style={{ marginTop: 72, display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 60, alignItems: 'start' }}>
          {/* Left: step list */}
          <div>
            {steps.map((s, i) => (
              <Reveal key={s.n} y={14} delay={i * 80}>
                <button
                  onMouseEnter={() => setActive(i)}
                  onClick={() => setActive(i)}
                  style={{
                    width: '100%', textAlign: 'left', background: 'transparent', border: 0,
                    padding: '28px 0', borderTop: '1px solid #D9E0E8',
                    cursor: 'pointer', display: 'flex', gap: 24, alignItems: 'flex-start',
                    position: 'relative',
                  }}
                >
                  {/* Active indicator line */}
                  <span style={{
                    position: 'absolute', top: -1, left: 0,
                    height: 2, width: active === i ? '100%' : 0,
                    background: '#0B1220',
                    transition: 'width 500ms cubic-bezier(.16,1,.3,1)',
                  }} />
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 12, color: active === i ? '#0B1220' : '#8695A8',
                    letterSpacing: '0.12em', minWidth: 28, paddingTop: 6, fontWeight: 600,
                    transition: 'color 300ms',
                  }}>{s.n}</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 26, fontWeight: 600, letterSpacing: '-0.02em', color: active === i ? '#0B1220' : '#5F6E82', lineHeight: 1.2, transition: 'color 300ms' }}>
                      {s.title}
                    </div>
                    <div style={{
                      overflow: 'hidden',
                      maxHeight: active === i ? 140 : 0,
                      opacity: active === i ? 1 : 0,
                      transition: 'max-height 500ms cubic-bezier(.16,1,.3,1), opacity 400ms',
                    }}>
                      <p style={{ fontSize: 15, lineHeight: 1.6, color: '#3E4B5E', marginTop: 10, marginBottom: 0 }}>{s.body}</p>
                    </div>
                  </div>
                  <span style={{
                    fontSize: 18, color: active === i ? '#0B1220' : '#8695A8',
                    transition: 'transform 400ms cubic-bezier(.16,1,.3,1), color 300ms',
                    transform: active === i ? 'rotate(90deg)' : 'rotate(0deg)',
                    paddingTop: 8,
                  }}>→</span>
                </button>
              </Reveal>
            ))}
          </div>

          {/* Right: visual card */}
          <div style={{
            position: 'sticky', top: 120,
            background: '#fff', border: '1px solid #EEF2F6', borderRadius: 20,
            padding: 32, boxShadow: '0 24px 60px rgba(14,22,38,0.06)',
            overflow: 'hidden', position: 'relative',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: '#8695A8' }}>
              <span style={{ color: '#0B1220', fontWeight: 600 }}>{steps[active].n}</span>
              <span style={{ width: 18, height: 1, background: '#D9E0E8' }} />
              STEP
            </div>
            <div style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em', color: '#0B1220', marginTop: 20, lineHeight: 1.2 }}>
              {steps[active].title}
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
              {steps[active].sample.map((t, i) => (
                <li key={t} style={{
                  padding: '14px 16px', background: '#F7F9FB', borderRadius: 10,
                  fontSize: 13.5, color: '#0B1220',
                  display: 'flex', alignItems: 'center', gap: 12,
                  animation: `nal-fade-up 500ms cubic-bezier(.16,1,.3,1) ${i * 90}ms both`,
                }}>
                  <span style={{ width: 20, height: 20, borderRadius: 999, background: '#fff', border: '1px solid #D9E0E8', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, color: '#3A7BB8' }}>✓</span>
                  {t}
                </li>
              ))}
            </ul>

            {/* Progress bars */}
            <div style={{ marginTop: 28, display: 'flex', gap: 6 }}>
              {steps.map((_, i) => (
                <span key={i} style={{
                  flex: 1, height: 3, background: '#EEF2F6', borderRadius: 999, overflow: 'hidden', position: 'relative',
                }}>
                  <span style={{
                    position: 'absolute', inset: 0,
                    background: i === active ? '#0B1220' : i < active ? '#0B1220' : 'transparent',
                    transform: i === active ? 'translateX(0)' : i < active ? 'translateX(0)' : 'translateX(-100%)',
                    transition: 'transform 500ms cubic-bezier(.16,1,.3,1)',
                  }} />
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Process = Process;