/* PROCESS — 5 step workflow on a vertical timeline */

function Process() {
  const isMobile = useWindowWidth() < 768;
  const steps = [
    { n: '01', t: 'Discover & Strategy', d: 'We run discovery workshops with founders + ops, audit your funnel, study your competitors, and define the metric we\'re moving — before a single mock.' },
    { n: '02', t: 'Plan & Prioritize',   d: 'We map user journeys, project milestones and deliverables. Every sprint has a hypothesis, owner and a north-star metric.' },
    { n: '03', t: 'Design & Prototyping',d: 'Our team crafts purposeful design, copy and branding that communicates clearly and converts. We prototype in code — not Figma alone.' },
    { n: '04', t: 'Build & Launch',      d: 'Whether it\'s no-code or custom, we bring your digital presence to life with pixel-perfect execution and performance optimization.' },
    { n: '05', t: 'Support & Evolve',    d: 'Post-launch, we stay close — monitoring performance, making refinements and helping your brand adapt and grow continuously.' },
  ];

  return (
    <section data-screen-label="07 Process" id="process" style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.4fr', gap: isMobile ? 32 : 80 }}>
          {/* Left intro */}
          <div>
            <div style={{ position: isMobile ? 'static' : 'sticky', top: 120 }}>
              <span className="eyebrow"><span className="dot"></span>Our process</span>
              <h2 className="h2" style={{ marginTop: 16 }}>
                A proven & effective<br /><span className="accent">workflow process.</span>
              </h2>
              <p className="lead" style={{ marginTop: 18 }}>
                We dig deep into your goals, customers and challenges to align on strategy and direction — then ship every two weeks.
              </p>

              {/* Mini cadence card */}
              <div style={{ marginTop: 28, background: 'white', border: '1px solid var(--hairline-2)', borderRadius: 14, padding: 16, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
                {[
                  ['Sprint',  '14 days'],
                  ['Standup', 'Daily'],
                  ['Demo',    'Friday'],
                ].map(([l, v]) => (
                  <div key={l}>
                    <div className="mono-label">{l}</div>
                    <div style={{ fontSize: 16, fontWeight: 600, marginTop: 4 }}>{v}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Right timeline */}
          <div style={{ position: 'relative' }}>
            {/* Vertical accent line */}
            <div style={{
              position: 'absolute', left: 0, top: 8, bottom: 8, width: 2,
              background: 'linear-gradient(180deg, var(--green) 0%, var(--green-deep) 100%)',
              borderRadius: 2, opacity: 0.18,
            }}></div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
              {steps.map((s, i) => (
                <Reveal key={s.n} delay={i * 80} style={{ paddingLeft: 36, position: 'relative' }}>
                  {/* Dot */}
                  <div style={{
                    position: 'absolute', left: -6, top: 6,
                    width: 14, height: 14, borderRadius: '50%',
                    background: 'var(--bg)', border: '2px solid var(--green)',
                  }}></div>

                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16, marginBottom: 10 }}>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 18 }}>
                      <span className="mono-label" style={{ color: 'var(--green-deep)' }}>{s.n}</span>
                      <h3 className="h3" style={{ fontSize: 26, fontWeight: 500, letterSpacing: '-0.02em' }}>{s.t}</h3>
                    </div>
                    <Icon.Arrow size={14} />
                  </div>
                  <p style={{ fontSize: 15, color: 'var(--ink-soft)', margin: 0, maxWidth: '62ch', lineHeight: 1.55 }}>{s.d}</p>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Process = Process;