// Process v6, Cinematic phase journey. Less dashboard, more story.
const { useRef: useProcRef, useEffect: useProcEffect, useState: useProcState } = React;

const PHASES = [
  {
    num: '01',
    week: 'WEEK 0',
    name: 'Discovery',
    duration: '60 min · Free',
    color: '#00D9A0',
    rgba: '0,217,160',
    headline: 'You leave with answers, even if we don\'t work together.',
    deliverables: [
      { type: 'doc',  label: 'Bottleneck map'              },
      { type: 'doc',  label: 'AI vs no-AI honest read'    },
      { type: 'doc',  label: 'Rough scope + cost range'   },
      { type: 'meet', label: 'Written next step'          },
    ],
    rail: { dot: '●', tag: 'STARTS HERE' },
  },
  {
    num: '02',
    week: 'WEEK 1',
    name: 'Scoping',
    duration: '5–7 days',
    color: '#8B5CF6',
    rgba: '139,92,246',
    headline: 'Spec locked. Tech stack locked. Price locked. In writing.',
    deliverables: [
      { type: 'doc',  label: 'Build specification document' },
      { type: 'tech', label: 'Tech stack decision · signed' },
      { type: 'doc',  label: 'Success metrics + eval plan'  },
      { type: 'doc',  label: 'Fixed-price contract'         },
    ],
    rail: { dot: '●', tag: 'NO MID-BUILD SURPRISES' },
  },
  {
    num: '03',
    week: 'WEEKS 2–4',
    name: 'Build',
    duration: '3 weeks',
    color: '#00D9A0',
    rgba: '0,217,160',
    headline: 'Daily commits. Weekly Loom demos. Linear board open.',
    deliverables: [
      { type: 'code', label: 'Daily commits to private repo'   },
      { type: 'meet', label: 'Loom demo every Friday'          },
      { type: 'tech', label: 'Linear board · live access'      },
      { type: 'code', label: 'Staging environment by week 3'   },
    ],
    rail: { dot: '●', tag: 'YOU SEE EVERYTHING' },
  },
  {
    num: '04',
    week: 'WEEK 5',
    name: 'Pilot',
    duration: '1 week',
    color: '#F59E0B',
    rgba: '245,158,11',
    headline: 'Real users. Real data. Tested before full deploy.',
    deliverables: [
      { type: 'tech', label: 'Limited rollout to real users' },
      { type: 'doc',  label: 'Eval results vs success metric'},
      { type: 'doc',  label: 'Edge case + failure mode log'  },
      { type: 'meet', label: 'Go / no-go decision call'      },
    ],
    rail: { dot: '●', tag: 'DATA BEFORE COMMITMENT' },
  },
  {
    num: '05',
    week: 'WEEK 6',
    name: 'Ship',
    duration: 'Deploy day',
    color: '#00D9A0',
    rgba: '0,217,160',
    headline: 'Production. Documented. Yours forever.',
    deliverables: [
      { type: 'tech', label: 'Production deployment + monitoring' },
      { type: 'doc',  label: 'Full handoff documentation'         },
      { type: 'code', label: 'Source code + infra repo handoff'   },
      { type: 'meet', label: '30 days post-launch support'        },
    ],
    rail: { dot: '●', tag: 'CODE YOU OWN' },
  },
];

const ICON_MAP = {
  doc:  '📄',
  meet: '◆',
  tech: '⚙',
  code: '⟨/⟩',
};

function Process() {
  const [revealed,  setRevealed]  = useProcState(false);
  const [active,    setActive]    = useProcState(0);
  const [paused,    setPaused]    = useProcState(false);
  const sectionRef = useProcRef(null);

  useProcEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setRevealed(true); }, { threshold: 0.08 });
    if (sectionRef.current) obs.observe(sectionRef.current);
    return () => obs.disconnect();
  }, []);

  // Auto-cycle through phases when in view & not paused
  useProcEffect(() => {
    if (!revealed || paused) return;
    const id = setInterval(() => setActive(a => (a + 1) % PHASES.length), 5500);
    return () => clearInterval(id);
  }, [revealed, paused]);

  const cur = PHASES[active];

  return (
    <section id="process" ref={sectionRef} style={{
      padding: '120px 0', background: 'var(--bg-primary)',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Top accent */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 1,
        background: 'linear-gradient(90deg, transparent, var(--accent-mint), var(--accent-violet), transparent)',
        opacity: 0.3,
      }} />

      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 48px' }}>

        {/* ── HEADER ────────────────────────────────────────────────── */}
        <div style={{
          marginBottom: 56, textAlign: 'center',
          opacity: revealed ? 1 : 0, transform: revealed ? 'translateY(0)' : 'translateY(24px)',
          transition: 'all 0.6s cubic-bezier(0.16,1,0.3,1)',
        }}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
            color: 'var(--accent-mint-text)', letterSpacing: '0.14em',
            textTransform: 'uppercase', marginBottom: 14,
          }}>// THE PROCESS</div>
          <h2 style={{
            fontFamily: 'Syne, sans-serif',
            fontSize: 'clamp(32px, 4.4vw, 56px)',
            fontWeight: 700, letterSpacing: '-0.025em',
            lineHeight: 1.05, marginBottom: 16,
          }}>
            Discovery to deployed,<br />
            <span style={{ color: 'var(--accent-mint)' }}>in 6 weeks.</span>
          </h2>
          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: 17,
            color: 'var(--text-secondary)', maxWidth: 580, margin: '0 auto', lineHeight: 1.6,
          }}>
            Each phase ships something real. Not "trust the process." See the process.
          </p>
        </div>

        {/* ── PHASE RAIL, clickable navigator ──────────────────────── */}
        <div style={{
          position: 'relative', marginBottom: 48,
          opacity: revealed ? 1 : 0,
          transition: 'opacity 0.6s ease 0.15s',
          paddingTop: 12,
        }}>
          {/* Connecting line — sits behind dots (zIndex 0), dots cover it (zIndex 2) */}
          <div style={{
            position: 'absolute', left: '10%', right: '10%', top: '27px',
            height: 2, background: 'var(--border-subtle)',
            zIndex: 0,
          }} />
          {/* Active progress fill */}
          <div style={{
            position: 'absolute', left: '10%', top: '27px',
            width: `${(active / (PHASES.length - 1)) * 80}%`,
            height: 2,
            background: `linear-gradient(90deg, ${PHASES[0].color}, ${cur.color})`,
            transition: 'width 0.7s cubic-bezier(0.16,1,0.3,1)',
            boxShadow: `0 0 8px ${cur.color}80`,
            zIndex: 1,
          }} />

          <div style={{
            display: 'grid', gridTemplateColumns: `repeat(${PHASES.length}, 1fr)`, gap: 0,
            position: 'relative', zIndex: 2,
          }} className="proc-rail">
            {PHASES.map((p, i) => {
              const isActive = i === active;
              const isDone   = i < active;
              return (
                <button key={i}
                  onClick={() => { setActive(i); setPaused(true); setTimeout(() => setPaused(false), 8000); }}
                  style={{
                    background: 'none', border: 'none', cursor: 'pointer',
                    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
                    padding: '0 4px',
                  }}>
                  {/* Dot */}
                  <span style={{
                    width: 30, height: 30, borderRadius: '50%',
                    background: isActive ? p.color : isDone ? `rgba(${p.rgba},0.5)` : 'var(--bg-tertiary)',
                    border: `2px solid ${isActive || isDone ? p.color : 'var(--border-emphasis)'}`,
                    boxShadow: isActive ? `0 0 0 6px rgba(${p.rgba},0.15), 0 0 18px ${p.color}` : 'none',
                    transition: 'all 0.45s cubic-bezier(0.16,1,0.3,1)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'JetBrains Mono, monospace', fontSize: 11, fontWeight: 700,
                    color: isActive ? '#0A0A0B' : isDone ? '#0A0A0B' : 'var(--text-tertiary)',
                  }}>{p.num}</span>
                  <div style={{ textAlign: 'center' }}>
                    <div style={{
                      fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
                      color: isActive ? p.color : 'var(--text-tertiary)',
                      letterSpacing: '0.1em', fontWeight: isActive ? 700 : 400,
                      transition: 'color 0.3s ease', marginBottom: 2,
                    }}>{p.week}</div>
                    <div style={{
                      fontFamily: 'Syne, sans-serif', fontSize: 13,
                      color: isActive ? 'var(--text-primary)' : 'var(--text-secondary)',
                      fontWeight: isActive ? 700 : 500,
                      transition: 'color 0.3s ease',
                    }}>{p.name}</div>
                  </div>
                </button>
              );
            })}
          </div>
        </div>

        {/* ── BIG PHASE CARD, cinematic ────────────────────────────── */}
        <div key={active} style={{
          background: `linear-gradient(135deg, rgba(${cur.rgba},0.04) 0%, var(--bg-primary) 60%)`,
          border: `1px solid rgba(${cur.rgba},0.3)`,
          borderTop: `2px solid ${cur.color}`,
          borderRadius: 18, overflow: 'hidden',
          boxShadow: `0 24px 60px rgba(${cur.rgba},0.08), var(--shadow-card)`,
          opacity: revealed ? 1 : 0,
          transform: revealed ? 'translateY(0)' : 'translateY(28px)',
          transition: 'all 0.7s cubic-bezier(0.16,1,0.3,1) 0.25s',
          animation: 'proc-card-in 0.55s cubic-bezier(0.16,1,0.3,1)',
        }}>
          {/* Top bar */}
          <div style={{
            padding: '14px 26px', borderBottom: '1px solid var(--border-subtle)',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            background: 'var(--bg-tertiary)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{
                width: 7, height: 7, borderRadius: '50%',
                background: cur.color, boxShadow: `0 0 8px ${cur.color}`,
                animation: 'proc-blink 1.6s ease infinite',
              }} />
              <span style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                color: cur.color, letterSpacing: '0.14em', fontWeight: 600,
              }}>// {cur.rail.tag}</span>
            </div>
            <span style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
              color: 'var(--text-tertiary)', letterSpacing: '0.08em',
            }}>{cur.duration}</span>
          </div>

          {/* Body, 2 columns */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 0,
          }} className="proc-body">

            {/* LEFT, phase identity */}
            <div style={{ padding: '40px 44px', borderRight: '1px solid var(--border-subtle)' }}>
              <div style={{
                display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 28,
              }}>
                <span style={{
                  fontFamily: 'Syne, sans-serif', fontSize: 'clamp(72px, 9vw, 120px)',
                  fontWeight: 800, color: cur.color, lineHeight: 0.85, letterSpacing: '-0.04em',
                  background: `linear-gradient(180deg, ${cur.color} 0%, rgba(${cur.rgba},0.4) 100%)`,
                  WebkitBackgroundClip: 'text',
                  WebkitTextFillColor: 'transparent',
                  backgroundClip: 'text',
                }}>{cur.num}</span>
                <div>
                  <div style={{
                    fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                    color: cur.color, letterSpacing: '0.14em', marginBottom: 6,
                  }}>{cur.week}</div>
                  <div style={{
                    fontFamily: 'Syne, sans-serif', fontSize: 'clamp(28px, 3.4vw, 42px)',
                    fontWeight: 700, color: 'var(--text-primary)',
                    letterSpacing: '-0.02em', lineHeight: 1,
                  }}>{cur.name}</div>
                </div>
              </div>

              {/* Headline statement */}
              <p style={{
                fontFamily: 'Syne, sans-serif', fontSize: 'clamp(18px, 1.7vw, 22px)',
                fontWeight: 500, fontStyle: 'italic',
                color: 'var(--text-primary)', lineHeight: 1.45,
                marginBottom: 24, maxWidth: 480,
              }}>
                "{cur.headline}"
              </p>

              {/* Phase progress mini-rail */}
              <div style={{ display: 'flex', gap: 4, marginBottom: 20 }}>
                {PHASES.map((_, i) => (
                  <div key={i} style={{
                    flex: 1, height: 3, borderRadius: 2,
                    background: i <= active ? cur.color : 'var(--border-subtle)',
                    transition: 'background 0.5s ease',
                    opacity: i === active ? 1 : i < active ? 0.5 : 1,
                  }} />
                ))}
              </div>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                color: 'var(--text-tertiary)', letterSpacing: '0.06em',
              }}>PHASE {active + 1} OF {PHASES.length}</div>
            </div>

            {/* RIGHT, what you actually get */}
            <div style={{ padding: '40px 44px', background: `rgba(${cur.rgba},0.02)` }}>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                color: cur.color, letterSpacing: '0.14em', marginBottom: 22,
              }}>// WHAT YOU GET THIS PHASE</div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {cur.deliverables.map((d, i) => (
                  <div key={i} style={{
                    display: 'flex', alignItems: 'center', gap: 14,
                    padding: '14px 16px',
                    background: 'var(--bg-secondary)',
                    border: '1px solid var(--border-subtle)',
                    borderLeft: `2px solid ${cur.color}`,
                    borderRadius: 8,
                    opacity: 0,
                    animation: `proc-item-in 0.45s cubic-bezier(0.16,1,0.3,1) ${0.15 + i * 0.08}s forwards`,
                  }}>
                    <span style={{
                      width: 28, height: 28, borderRadius: 7,
                      background: `rgba(${cur.rgba},0.12)`,
                      border: `1px solid rgba(${cur.rgba},0.32)`,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      color: cur.color, fontSize: 12, fontFamily: 'JetBrains Mono, monospace',
                      fontWeight: 700, flexShrink: 0,
                    }}>{ICON_MAP[d.type]}</span>
                    <span style={{
                      fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500,
                      color: 'var(--text-primary)', lineHeight: 1.4,
                    }}>{d.label}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* ── STATS ROW ─────────────────────────────────────────────── */}
        <div style={{
          marginTop: 36,
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
          opacity: revealed ? 1 : 0,
          transition: 'opacity 0.7s ease 0.5s',
        }} className="proc-stats">
          {[
            { v: '6 wks',   l: 'discovery to deployed',     c: '#00D9A0' },
            { v: '0',       l: 'mid-build surprises',       c: '#8B5CF6' },
            { v: 'Friday',  l: 'Loom demo · every week',    c: '#F59E0B' },
          ].map((s, i) => (
            <div key={i} style={{
              padding: '20px 24px',
              background: 'var(--bg-tertiary)',
              border: '1px solid var(--border-subtle)',
              borderLeft: `3px solid ${s.c}`,
              borderRadius: 10,
            }}>
              <div style={{
                fontFamily: 'Syne, sans-serif', fontSize: 26, fontWeight: 700,
                color: s.c, letterSpacing: '-0.02em', lineHeight: 1, marginBottom: 6,
              }}>{s.v}</div>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                color: 'var(--text-tertiary)', letterSpacing: '0.06em',
              }}>{s.l}</div>
            </div>
          ))}
        </div>

        {/* ── CTA ──────────────────────────────────────────────────── */}
        <div style={{
          marginTop: 36, textAlign: 'center',
          opacity: revealed ? 1 : 0, transition: 'opacity 0.7s ease 0.6s',
        }}>
          <a href="https://cal.com/ratan-kumar/ai-automation-startegy-call-with-ratan-quantaeight"
            target="_blank" rel="noopener"
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 600,
              color: 'var(--accent-mint)', textDecoration: 'none',
              padding: '13px 26px', border: '1px solid var(--accent-mint)',
              borderRadius: 9, transition: 'all 0.2s ease',
            }}
            onMouseEnter={e => { e.currentTarget.style.background = 'rgba(0,217,160,0.12)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'transparent';            e.currentTarget.style.transform = 'translateY(0)'; }}
          >Start with Week 0, it's free →</a>
        </div>
      </div>

      <style>{`
        @keyframes proc-blink   { 0%,100%{opacity:1} 50%{opacity:0.3} }
        @keyframes proc-card-in { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
        @keyframes proc-item-in { from{opacity:0;transform:translateX(-12px)} to{opacity:1;transform:translateX(0)} }
        @media (max-width: 880px) {
          .proc-body  { grid-template-columns: 1fr !important; }
          .proc-body > div:first-child { border-right: none !important; border-bottom: 1px solid var(--border-subtle) !important; padding: 28px 24px !important; }
          .proc-body > div:last-child  { padding: 24px !important; }
          .proc-stats { grid-template-columns: repeat(3,1fr) !important; }
          .proc-rail  { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
          .proc-rail button { min-width: 60px; }
        }
        @media (max-width: 600px) {
          .proc-rail { gap: 0 !important; }
          .proc-stats { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Process });