// Process — four numbered steps, horizontal timeline

window.AtProcess = () => {
  const steps = [
    {
      n: '01',
      title: 'Talk',
      tag: 'Day 0',
      desc: 'We hop on a call — no pitch deck, no fluff. You tell us what\'s broken or what you want to build. We tell you if we can help.',
    },
    {
      n: '02',
      title: 'Plan',
      tag: 'Day 1',
      desc: 'A short doc: what we\'ll build, what it\'ll cost, and when it\'ll ship. You approve it, or we change it.',
    },
    {
      n: '03',
      title: 'Build',
      tag: 'Days 2–7',
      desc: 'We work in public: a live staging URL, quick daily check-ins, working software you can click through. You see it come together, not just at the end.',
    },
    {
      n: '04',
      title: 'Ship & support',
      tag: 'Ongoing',
      desc: 'We launch, train your team, and stay around for bug fixes and small improvements. No long-term retainers required.',
    },
  ];

  return (
    <section id="process" style={{
      background: TC.ink,
      color: TC.bone,
      padding: '140px 40px 120px',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* decorative corner seal */}
      <div style={{
        position: 'absolute', top: 48, right: 48, width: 96, height: 96,
        animation: 'atSpin 44s linear infinite', opacity: 0.5,
      }}>
        <svg viewBox="0 0 96 96">
          <defs>
            <path id="atProcSeal" d="M48,48 m-36,0 a36,36 0 1,1 72,0 a36,36 0 1,1 -72,0" />
          </defs>
          <text fill={TC.terraLight} fontFamily={TC.serif} fontSize="9" letterSpacing="3">
            <textPath href="#atProcSeal" startOffset="0">
              · HOW WE WORK · HOW WE WORK · HOW WE WORK
            </textPath>
          </text>
        </svg>
      </div>

      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ maxWidth: 760, marginBottom: 88 }}>
          <Eyebrow light>§ 03 — Process</Eyebrow>
          <h2 style={{
            fontFamily: TC.serif, fontSize: 'clamp(48px, 6.2vw, 92px)',
            lineHeight: 0.96, letterSpacing: -2.2, fontWeight: 400,
            margin: '24px 0 24px', color: TC.bone,
          }}>
            Simple, small<br />
            <em style={{ color: TC.terraLight }}>on purpose.</em>
          </h2>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: 'rgba(241,233,218,0.72)', maxWidth: 560, margin: 0 }}>
            We write code by hand, the way we learned — one line at a time.
            No noisy pipelines, no daily standups. Small team, long focus,
            work that ships when it's ready.
          </p>
        </div>

        <div style={{ position: 'relative' }}>
          {/* horizontal rule with dots */}
          <div style={{
            position: 'absolute', top: 44, left: 0, right: 0, height: 1,
            background: 'rgba(241,233,218,0.18)',
          }} />

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32,
            position: 'relative',
          }}>
            {steps.map((s, i) => (
              <div key={s.n} style={{ position: 'relative' }}>
                <div style={{
                  width: 88, height: 88, borderRadius: 44,
                  background: TC.ink,
                  border: `1px solid rgba(241,233,218,0.2)`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: TC.serif, fontSize: 32, fontStyle: 'italic',
                  color: TC.terraLight, marginBottom: 32,
                  position: 'relative', zIndex: 2,
                  letterSpacing: -0.8,
                }}>
                  {s.n}
                </div>
                <div style={{
                  fontFamily: TC.mono, fontSize: 10, color: TC.terraLight,
                  letterSpacing: 2, textTransform: 'uppercase', marginBottom: 10,
                }}>
                  {s.tag}
                </div>
                <h3 style={{
                  fontFamily: TC.serif, fontSize: 40, fontWeight: 400,
                  letterSpacing: -1, margin: '0 0 14px', color: TC.bone,
                }}>
                  {s.title}
                </h3>
                <p style={{ fontSize: 15, lineHeight: 1.55,
                  color: 'rgba(241,233,218,0.65)', margin: 0, maxWidth: 260 }}>
                  {s.desc}
                </p>
              </div>
            ))}
          </div>
        </div>

        {/* quote */}
        <div style={{
          marginTop: 120, paddingTop: 48,
          borderTop: '1px solid rgba(241,233,218,0.18)',
          display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 48, alignItems: 'start',
        }}>
          <div style={{
            fontFamily: TC.mono, fontSize: 11,
            color: 'rgba(241,233,218,0.5)', letterSpacing: 2, textTransform: 'uppercase',
          }}>
            From a client
          </div>
          <div>
            <blockquote style={{
              fontFamily: TC.serif, fontSize: 'clamp(28px, 3.2vw, 44px)',
              lineHeight: 1.25, letterSpacing: -0.8, fontStyle: 'italic',
              color: TC.bone, margin: 0, fontWeight: 400,
            }}>
              "We wanted to show off how great our program is and how much we do for our kids."
            </blockquote>
            <div style={{
              marginTop: 24, fontFamily: TC.mono, fontSize: 12,
              color: 'rgba(241,233,218,0.6)', letterSpacing: 0.5,
            }}>
              — Mr. Oh, Program Leader, Hamilton SRLA
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};