function Process() {
  const steps = [
    {
      n: '01',
      tag: 'Ideation',
      title: 'Idea analysis',
      body: 'We research your niche, audience and goals — analyzing trends, competitors and what\'s working in your industry — to build a full 30-day content calendar.',
      meta: ['Niche audit', 'Competitor map', '30-day calendar'],
      visual: 'tags',
      duration: 'Day 1–2',
    },
    {
      n: '02',
      tag: 'Scripting',
      title: 'Writing content',
      body: 'We write engaging, hook-driven scripts for every video — optimized for retention and conversions. Every script follows hook → value → CTA.',
      meta: ['Hook · Value · CTA', 'Retention-optimized', '30 scripts'],
      visual: 'script',
      duration: 'Day 2–4',
    },
    {
      n: '03',
      tag: 'Shooting',
      title: 'Video shooting (your part)',
      body: 'The only step you handle. Spend just 2 hours a month shooting all 30 videos using our scripts and shot guidelines, then send us the raw footage. That\'s it.',
      meta: ['2 hours / month', '30 videos batched', 'Shot-by-shot guide'],
      visual: 'shoot',
      duration: 'Day 4 · 2 hrs',
      client: true,
    },
    {
      n: '04',
      tag: 'Editing',
      title: 'Video production',
      body: 'Our 40+ editors handle every cut, transition, effect, caption, color grade and sound design — polished to a professional standard.',
      meta: ['40+ editors', 'Captions · Color · SFX', 'Motion graphics'],
      visual: 'editor',
      duration: 'Day 4–6',
    },
    {
      n: '05',
      tag: 'Thumbnail',
      title: 'Thumbnail design',
      body: 'Scroll-stopping, click-worthy thumbnails for every video — custom-made to match your brand and optimized for CTR.',
      meta: ['3 variants', 'CTR-optimized', 'Brand-safe'],
      visual: 'thumb',
      duration: 'Day 6',
    },
    {
      n: '06',
      tag: 'Post',
      title: 'Captions, description & SEO',
      body: 'Captions, descriptions, hashtags and SEO metadata for every video. You receive the final cut + thumbnail + ready-to-post copy. Just hit publish.',
      meta: ['SEO metadata', 'Hashtag set', 'Copy & post'],
      visual: 'post',
      duration: 'Day 7',
    },
  ];

  const [active, setActive] = useState(0);
  const [paused, setPaused] = useState(false);
  const [autoPct, setAutoPct] = useState(0);
  const AUTOPLAY_MS = 4200;
  useEffect(() => {
    if (paused) return;
    setAutoPct(0);
    const start = performance.now();
    let raf;
    const tick = (now) => {
      const p = Math.min(1, (now - start) / AUTOPLAY_MS);
      setAutoPct(p * 100);
      if (p < 1) raf = requestAnimationFrame(tick);
      else setActive(a => (a + 1) % steps.length);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [active, paused, steps.length]);
  const onUserPick = (i) => { setActive(i); setPaused(true); setAutoPct(0); };

  function Visual({ kind }) {
    if (kind === 'tags') {
      return (
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'flex-start' }}>
          {['#growth', '#hook', '#authority', '#virality', '#shortform', '#audience', '#niche'].map(t => (
            <div key={t} style={{
              display: 'inline-flex', alignItems: 'center',
              padding: '6px 12px', borderRadius: 8,
              background: 'rgba(74,142,255,0.14)', border: '1px solid rgba(74,142,255,0.3)',
              fontSize: 11, fontFamily: 'Geist Mono, monospace',
              color: '#cfe0ff', letterSpacing: '0.06em',
            }}>{t}</div>
          ))}
        </div>
      );
    }
    if (kind === 'script') {
      return (
        <div style={{
          width: '100%',
          background: 'rgba(7,10,20,0.7)',
          border: '1px solid var(--line-2)',
          borderRadius: 12, padding: 16,
          fontFamily: 'Geist Mono, monospace', fontSize: 11,
          textAlign: 'left',
        }}>
          <div style={{ display: 'flex', gap: 6, marginBottom: 10 }}>
            {['Hook', 'Value', 'CTA'].map(s => (
              <div key={s} style={{
                padding: '3px 8px', borderRadius: 6,
                background: 'rgba(74,142,255,0.18)', border: '1px solid rgba(74,142,255,0.3)',
                color: '#cfe0ff', fontSize: 10,
              }}>{s}</div>
            ))}
          </div>
          <div style={{ color: 'var(--ink-dim)', lineHeight: 1.6 }}>
            <span style={{ color: '#cfe0ff' }}>{'>'}</span> If you've ever struggled to post consistently...<br />
            <span style={{ color: '#cfe0ff' }}>{'>'}</span> here's what nobody tells you about content...
          </div>
        </div>
      );
    }
    if (kind === 'shoot') {
      return (
        <div style={{ width: '100%' }}>
          <div style={{
            aspectRatio: '9/16',
            maxWidth: 150,
            margin: '0 auto',
            borderRadius: 14,
            background: '#0a0e18',
            border: '1px solid var(--line-2)',
            position: 'relative',
            overflow: 'hidden',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            {/* Footage in the viewfinder */}
            <img
              src="assets/process-shooting.png"
              alt="Creator filming a content shoot"
              loading="lazy"
              style={{
                position: 'absolute', inset: 0,
                width: '100%', height: '100%',
                objectFit: 'cover',
                display: 'block',
              }}
            />
            {/* Subtle vignette so the viewfinder UI stays legible */}
            <div aria-hidden style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5) 100%)',
              pointerEvents: 'none',
            }} />
            {/* Viewfinder corners */}
            {[
              { t: 10, l: 10, b: 'auto', r: 'auto', rot: 0 },
              { t: 10, r: 10, l: 'auto', b: 'auto', rot: 90 },
              { b: 10, l: 10, r: 'auto', t: 'auto', rot: 270 },
              { b: 10, r: 10, l: 'auto', t: 'auto', rot: 180 },
            ].map((c, i) => (
              <div key={i} style={{
                position: 'absolute',
                top: c.t, left: c.l, right: c.r, bottom: c.b,
                width: 14, height: 14,
                borderTop: '2px solid #6EA8FE',
                borderLeft: '2px solid #6EA8FE',
                transform: `rotate(${c.rot}deg)`,
              }} />
            ))}
            {/* REC badge */}
            <div style={{
              position: 'absolute', top: 12, right: 24,
              display: 'flex', alignItems: 'center', gap: 5,
              fontFamily: 'Geist Mono, monospace', fontSize: 9,
              color: '#ff6363', letterSpacing: '0.1em',
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: '50%',
                background: '#ff6363',
                boxShadow: '0 0 6px #ff6363',
                animation: 'procRecBlink 1.2s ease-in-out infinite',
              }} />
              REC
            </div>
            {/* Timecode */}
            <div style={{
              position: 'absolute', bottom: 10, left: 0, right: 0,
              textAlign: 'center',
              fontFamily: 'Geist Mono, monospace', fontSize: 9,
              color: 'rgba(255,255,255,0.7)',
              letterSpacing: '0.1em',
            }}>
              00:02:17 / 02:00:00
            </div>
          </div>
          <div style={{
            marginTop: 12, display: 'flex', justifyContent: 'center', gap: 6,
            fontFamily: 'Geist Mono, monospace', fontSize: 10,
            color: 'var(--ink-muted)', letterSpacing: '0.08em',
          }}>
            <span>30 VIDEOS</span><span>·</span><span>2 HRS</span><span>·</span><span>1 DAY</span>
          </div>
          <style>{`@keyframes procRecBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }`}</style>
        </div>
      );
    }
    if (kind === 'editor') {
      return (
        <div style={{ width: '100%' }}>
          <div style={{
            aspectRatio: '16/9',
            borderRadius: 10,
            background: '#0a0e18',
            border: '1px solid var(--line-2)',
            position: 'relative', overflow: 'hidden',
          }}>
            <img
              src="assets/process-editing.png"
              alt="Editing timeline in a video app"
              loading="lazy"
              style={{
                position: 'absolute', inset: 0,
                width: '100%', height: '100%',
                objectFit: 'cover',
                display: 'block',
              }}
            />
          </div>
          <div style={{ display: 'flex', gap: 4, marginTop: 10 }}>
            {[40, 25, 60, 35, 50].map((w, i) => (
              <div key={i} style={{
                height: 18, flex: w, borderRadius: 3,
                background: i % 2 === 0 ? 'rgba(74,142,255,0.4)' : 'rgba(255,255,255,0.1)',
              }} />
            ))}
          </div>
        </div>
      );
    }
    if (kind === 'thumb') {
      return (
        <div style={{
          width: '100%', maxWidth: 150, margin: '0 auto',
          aspectRatio: '9/16',
          borderRadius: 12, overflow: 'hidden',
          background: '#0a0e18', border: '1px solid var(--line-2)',
          position: 'relative',
        }}>
          <img src="assets/process-thumb.png"
            alt="Action creates results thumbnail"
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        </div>
      );
    }
    if (kind === 'post') {
      return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: '100%' }}>
          {['#growthmindset', '#contentstrategy', '#shortformvideo', '#creator'].map(t => (
            <div key={t} style={{
              padding: '9px 12px', borderRadius: 8,
              background: 'rgba(255,255,255,0.04)',
              border: '1px solid var(--line)',
              fontSize: 12, fontFamily: 'Geist Mono, monospace',
              color: '#cfe0ff', textAlign: 'left',
            }}>{t}</div>
          ))}
        </div>
      );
    }
    return null;
  }

  return (
    <section id="process" style={{ padding: '80px 0 90px', position: 'relative', overflow: 'hidden' }}>
      {/* Background ambient orb */}
      <div aria-hidden style={{
        position: 'absolute', top: '20%', left: '50%', transform: 'translateX(-50%)',
        width: 1200, height: 800,
        background: 'radial-gradient(ellipse at center, rgba(41,73,229,0.10), transparent 60%)',
        filter: 'blur(80px)', pointerEvents: 'none',
      }} />

      <div className="container" style={{ textAlign: 'center', marginBottom: 18, position: 'relative' }}>
        <SectionEyebrow label="Our Process" />
        <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 56px)', marginTop: 22, lineHeight: 1.05 }}>
          <span className="serif-italic" style={{ color: 'var(--ink-dim)' }}>Our Process To Create</span><br />
          30 Days Of Content In 2 Hours
        </h2>
        <p style={{ marginTop: 14, fontSize: 14, color: 'var(--ink-muted)', maxWidth: 560, marginInline: 'auto', lineHeight: 1.55 }}>
          A 6-step engine. You shoot once a month — we handle the rest.
        </p>
      </div>

      <div className="container container-wide" style={{ position: 'relative' }}>
        {/* Stepper rail */}
        <div className="proc-rail">
          <div className="proc-rail-line" aria-hidden></div>
          <div className="proc-rail-line proc-rail-progress" aria-hidden style={{
            // Line spans pin 1 center (8.333%) to pin 6 center (91.667%) = 83.333% range.
            // Progress should end exactly at the active pin's center.
            width: `${(active / (steps.length - 1)) * 83.333}%`,
          }}></div>
          {steps.map((s, i) => {
            const isActive = i === active;
            const isDone = i < active;
            return (
              <button
                key={s.n}
                onClick={() => onUserPick(i)}
                className="proc-pin"
                data-state={isActive ? 'active' : isDone ? 'done' : 'idle'}
                style={isActive ? { '--auto-progress': `${autoPct}%` } : undefined}
                aria-label={`Step ${s.n} — ${s.title}`}
              >
                <span className="proc-pin-dot" aria-hidden></span>
                <span className="proc-pin-num">{s.n}</span>
                <span className="proc-pin-tag">{s.tag}</span>
              </button>
            );
          })}
        </div>

        {/* Detail card for the active step */}
        <div className="proc-card" key={active}>
          <div className="proc-card-left">
            <div className="proc-card-meta">
              <span className="proc-card-tag">
                {steps[active].tag}
                {steps[active].client && <span style={{ marginLeft: 8, opacity: 0.7 }}>· Your part</span>}
              </span>
              <span className="proc-card-dur">{steps[active].duration}</span>
            </div>
            <div className="proc-card-num">{steps[active].n}</div>
            <h3 className="proc-card-title">{steps[active].title}</h3>
            <p className="proc-card-body">{steps[active].body}</p>
            <div className="proc-card-chips">
              {steps[active].meta.map(m => (
                <span key={m} className="proc-card-chip">
                  <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
                    <path d="M2 5.5l2 2 4-5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  {m}
                </span>
              ))}
            </div>
            <div className="proc-card-nav">
              <button
                onClick={() => onUserPick(Math.max(0, active - 1))}
                disabled={active === 0}
                className="proc-nav-btn"
                aria-label="Previous step"
              >
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M13 8H3M7 4L3 8l4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </button>
              <span className="proc-nav-counter">
                <span style={{ color: 'var(--ink)' }}>{steps[active].n}</span> / {String(steps.length).padStart(2, '0')}
              </span>
              <button
                onClick={() => onUserPick(Math.min(steps.length - 1, active + 1))}
                disabled={active === steps.length - 1}
                className="proc-nav-btn"
                aria-label="Next step"
              >
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </button>
            </div>
          </div>
          <div className="proc-card-right">
            <div className="proc-card-stage">
              <div aria-hidden className="proc-stage-glow"></div>
              <div className="proc-stage-frame">
                <Visual kind={steps[active].visual} />
              </div>
              <span className="proc-stage-label">Step {steps[active].n} — {steps[active].tag}</span>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .proc-rail {
          position: relative;
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          padding: 40px 0 20px;
          max-width: 860px;
          margin: 0 auto;
        }
        .proc-rail-line {
          position: absolute;
          top: 68px;
          /* Line runs from pin 1 center to pin 6 center: 100%/12 .. 11*100%/12 */
          left: 8.333%;
          right: 8.333%;
          height: 1px;
          background: var(--line);
          z-index: 0;
        }
        .proc-rail-progress {
          background: linear-gradient(90deg, #2949E5, #6EA8FE);
          box-shadow: 0 0 12px rgba(110,168,254,0.6);
          /* width is set inline per active step; let it animate */
          right: auto;
          transition: width .25s linear;
        }
        .proc-pin {
          all: unset;
          position: relative;
          z-index: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 10px;
          cursor: pointer;
          padding: 8px 4px;
          transition: transform .2s ease;
        }
        .proc-pin:hover { transform: translateY(-2px); }
        .proc-pin-dot {
          width: 16px; height: 16px; border-radius: 50%;
          background: #0a0e18;
          border: 1px solid var(--line-2);
          position: relative;
          transition: all .25s ease;
        }
        .proc-pin[data-state="active"] .proc-pin-dot {
          background: #2949E5;
          border-color: #6EA8FE;
          box-shadow: 0 0 0 6px rgba(41,73,229,0.18), 0 0 18px rgba(110,168,254,0.6);
        }
        .proc-pin[data-state="active"] .proc-pin-dot::before {
          content: '';
          position: absolute;
          inset: -3px;
          border-radius: 50%;
          background: conic-gradient(from -90deg, #6EA8FE var(--auto-progress, 0%), rgba(110,168,254,0.15) 0);
          -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%);
                  mask: radial-gradient(circle, transparent 60%, #000 62%);
        }
        .proc-pin[data-state="active"] .proc-pin-dot::after {
          content: '';
          position: absolute;
          inset: -8px;
          border-radius: 50%;
          border: 1px solid rgba(110,168,254,0.45);
          animation: procPulse 2s ease-out infinite;
        }
        .proc-pin[data-state="done"] .proc-pin-dot {
          background: #2949E5;
          border-color: #2949E5;
        }
        .proc-pin-num {
          font-family: 'Geist Mono', monospace;
          font-size: 11px;
          color: var(--ink-muted);
          letter-spacing: 0.1em;
        }
        .proc-pin[data-state="active"] .proc-pin-num { color: var(--ink); }
        .proc-pin-tag {
          font-size: 12px;
          color: var(--ink-dim);
          letter-spacing: -0.005em;
        }
        .proc-pin[data-state="active"] .proc-pin-tag { color: var(--ink); }
        @keyframes procPulse {
          0% { transform: scale(1); opacity: .8; }
          100% { transform: scale(1.8); opacity: 0; }
        }

        .proc-card {
          position: relative;
          display: grid;
          grid-template-columns: 1.05fr 1fr;
          gap: 0;
          margin: 14px auto 0;
          max-width: 980px;
          border-radius: 20px;
          overflow: hidden;
          border: 1px solid var(--line);
          background:
            linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
          animation: procCardIn .5s cubic-bezier(.22,.61,.36,1);
        }
        @keyframes procCardIn {
          from { opacity: 0; transform: translateY(12px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        .proc-card-left {
          padding: 28px 32px 26px;
          display: flex; flex-direction: column;
          position: relative;
          border-right: 1px solid var(--line);
        }
        .proc-card-meta {
          display: flex; align-items: center; justify-content: space-between;
          margin-bottom: 12px;
        }
        .proc-card-tag {
          font-family: 'Geist Mono', monospace;
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: #6EA8FE;
          padding: 5px 10px;
          border-radius: 6px;
          background: rgba(74,142,255,0.12);
          border: 1px solid rgba(74,142,255,0.28);
        }
        .proc-card-dur {
          font-family: 'Geist Mono', monospace;
          font-size: 11px;
          color: var(--ink-muted);
          letter-spacing: 0.08em;
        }
        .proc-card-num {
          font-family: 'Editorial New', 'Times New Roman', serif;
          font-style: italic;
          font-weight: 300;
          font-size: clamp(56px, 7vw, 92px);
          line-height: 0.9;
          background: linear-gradient(180deg, #ffffff 0%, #6EA8FE 60%, rgba(110,168,254,0.2) 100%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          margin: 4px 0 12px;
          letter-spacing: -0.04em;
        }
        .proc-card-title {
          font-size: clamp(20px, 1.9vw, 24px);
          font-weight: 500;
          letter-spacing: -0.015em;
          margin: 0 0 8px;
        }
        .proc-card-body {
          font-size: 13.5px;
          color: var(--ink-dim);
          line-height: 1.55;
          max-width: 440px;
          margin: 0 0 16px;
        }
        .proc-card-chips {
          display: flex; flex-wrap: wrap; gap: 6px;
          margin-bottom: 20px;
        }
        .proc-card-chip {
          display: inline-flex; align-items: center; gap: 6px;
          padding: 6px 11px;
          border-radius: 999px;
          border: 1px solid var(--line);
          background: rgba(255,255,255,0.025);
          font-size: 12px;
          color: var(--ink-dim);
        }
        .proc-card-chip svg { color: #6EA8FE; }
        .proc-card-nav {
          display: flex; align-items: center; gap: 12px;
          margin-top: auto;
        }
        .proc-nav-btn {
          all: unset;
          width: 36px; height: 36px;
          border-radius: 50%;
          border: 1px solid var(--line);
          display: inline-flex;
          align-items: center; justify-content: center;
          color: var(--ink);
          cursor: pointer;
          transition: all .2s ease;
        }
        .proc-nav-btn:hover:not(:disabled) {
          background: rgba(110,168,254,0.12);
          border-color: rgba(110,168,254,0.4);
        }
        .proc-nav-btn:disabled { opacity: .25; cursor: not-allowed; }
        .proc-nav-counter {
          font-family: 'Geist Mono', monospace;
          font-size: 12px;
          color: var(--ink-muted);
          letter-spacing: 0.06em;
        }

        .proc-card-right {
          position: relative;
          padding: 28px;
          display: flex;
          align-items: center;
          justify-content: center;
          background:
            radial-gradient(ellipse at top right, rgba(41,73,229,0.12), transparent 60%),
            linear-gradient(180deg, rgba(7,10,20,0.4), rgba(7,10,20,0.0));
        }
        .proc-card-stage {
          position: relative;
          width: 100%;
          max-width: 300px;
          padding: 20px 18px 32px;
          border-radius: 16px;
          background: rgba(7,10,20,0.55);
          border: 1px solid var(--line);
          backdrop-filter: blur(6px);
        }
        .proc-stage-glow {
          position: absolute;
          inset: -20px;
          border-radius: 24px;
          background: radial-gradient(ellipse at center, rgba(41,73,229,0.25), transparent 70%);
          filter: blur(24px);
          z-index: -1;
        }
        .proc-stage-frame {
          display: flex;
          align-items: center;
          justify-content: center;
          min-height: 140px;
        }
        .proc-stage-label {
          position: absolute;
          left: 18px; bottom: 14px;
          font-family: 'Geist Mono', monospace;
          font-size: 10.5px;
          color: var(--ink-muted);
          letter-spacing: 0.1em;
          text-transform: uppercase;
        }

        @media (max-width: 900px) {
          .proc-card { grid-template-columns: 1fr; }
          .proc-card-left { border-right: none; border-bottom: 1px solid var(--line); padding: 28px 24px; }
          .proc-card-right { padding: 28px 24px; }
          .proc-rail { grid-template-columns: repeat(6, 1fr); }
          .proc-pin-tag { display: none; }
          .proc-rail-line { top: 70px; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Process });