// Workflow — animated 4-stage pipeline w/ flowing dots on scroll

const STEPS = [
  { num:'01', title:'Audit & Scope', desc:'Free 48hr audit diagnosing automation gaps, creative fatigue, and system bottlenecks.', color:'#00B4FF' },
  { num:'02', title:'Architect', desc:'Design the full pipeline: n8n flows, Claude agents, data routing, API integrations.', color:'#9B6CFF' },
  { num:'03', title:'Build & Wire', desc:'Code, configure, and connect every node. Parallel tracks for automation + video.', color:'#F59E0B' },
  { num:'04', title:'Activate', desc:"Deploy, test, and hand off. The system runs. You don't touch it again.", color:'#00E5A0' },
];

function PipelineDiagram({ active }) {
  return (
    <div style={{
      position:'relative', width:'100%', aspectRatio:'20/7',
      borderRadius:18, background:'rgba(6,20,34,0.5)', border:'1px solid var(--border)',
      overflow:'hidden', padding:'20px 30px',
    }}>
      {/* Grid bg */}
      <div style={{ position:'absolute', inset:0, backgroundImage:'radial-gradient(rgba(var(--accent-rgb), 0.12) 1px, transparent 1px)', backgroundSize:'24px 24px', opacity:0.5 }}/>

      <svg viewBox="0 0 800 200" style={{ position:'relative', width:'100%', height:'100%' }}>
        <defs>
          <linearGradient id="pipeGrad" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#00B4FF"/>
            <stop offset="33%" stopColor="#9B6CFF"/>
            <stop offset="66%" stopColor="#F59E0B"/>
            <stop offset="100%" stopColor="#00E5A0"/>
          </linearGradient>
          <filter id="glow"><feGaussianBlur stdDeviation="2.5" /></filter>
        </defs>

        {/* main pipe */}
        <line x1="90" y1="100" x2="710" y2="100" stroke="url(#pipeGrad)" strokeWidth="1.5" opacity="0.55"/>

        {/* Nodes */}
        {STEPS.map((s, i) => {
          const x = 90 + i * ((710-90) / 3);
          return (
            <g key={s.num}>
              <circle cx={x} cy="100" r="28" fill="rgba(6,20,34,0.95)" stroke={s.color} strokeWidth="1.5"/>
              <circle cx={x} cy="100" r="28" fill="none" stroke={s.color} strokeWidth="0.5" opacity="0.3" filter="url(#glow)"/>
              <text x={x} y="105" textAnchor="middle" fill={s.color} fontFamily="Geist Mono, monospace" fontSize="12" fontWeight="600">{s.num}</text>
              <text x={x} y="155" textAnchor="middle" fill="rgba(240,248,255,0.8)" fontFamily="Manrope, sans-serif" fontSize="11" fontWeight="500">{s.title}</text>
            </g>
          );
        })}

        {/* flowing dots */}
        {active && Array.from({ length: 5 }).map((_, i) => (
          <circle key={i} r="3" fill="#fff" opacity="0.9">
            <animateMotion dur="6s" repeatCount="indefinite" begin={`${i * 1.2}s`}
              path="M 90 100 L 710 100" />
            <animate attributeName="fill" values="#00B4FF;#9B6CFF;#F59E0B;#00E5A0" dur="6s" repeatCount="indefinite" begin={`${i * 1.2}s`}/>
          </circle>
        ))}

        {/* sub branches */}
        <g opacity="0.3">
          <path d="M 296 100 Q 296 60 340 60" stroke="#9B6CFF" strokeWidth="1" fill="none" strokeDasharray="3 3"/>
          <circle cx="340" cy="60" r="4" fill="#9B6CFF"/>
          <path d="M 503 100 Q 503 140 550 140" stroke="#F59E0B" strokeWidth="1" fill="none" strokeDasharray="3 3"/>
          <circle cx="550" cy="140" r="4" fill="#F59E0B"/>
        </g>

        {/* Start/End labels */}
        <text x="30" y="105" fontFamily="Geist Mono, monospace" fontSize="9" fill="rgba(240,248,255,0.4)" letterSpacing="2">BRIEF</text>
        <text x="730" y="105" fontFamily="Geist Mono, monospace" fontSize="9" fill="rgba(240,248,255,0.4)" letterSpacing="2">LIVE</text>
      </svg>

      {/* status chips */}
      <div style={{ position:'absolute', top:18, left:18, display:'flex', gap:6, alignItems:'center', fontFamily:'var(--font-mono)', fontSize:10, color:'var(--muted)', letterSpacing:'0.12em', textTransform:'uppercase' }}>
        <span style={{ width:6, height:6, borderRadius:'50%', background:'#00E5A0', boxShadow:'0 0 6px #00E5A0', animation:'pulseDot 2s infinite' }}/>
        Pipeline · Active
      </div>
      <div style={{ position:'absolute', top:18, right:18, fontFamily:'var(--font-mono)', fontSize:10, color:'var(--muted)', letterSpacing:'0.12em', textTransform:'uppercase' }}>
        4 · STAGES
      </div>
    </div>
  );
}

function WorkflowSection() {
  const [ref, vis] = useReveal();
  return (
    <section id="process" ref={ref} className="section-full" style={{ background:'var(--bg-alt)' }}>
      <div className="section" style={{ padding:'0 var(--section-px)' }}>
        <SectionHeader
          eyebrow="The Process"
          title={<>How a project becomes a <span style={{ fontStyle:'italic', color:'var(--accent)' }}>running system.</span></>}
          sub="From intake to autonomous operation — a 4-stage build that ends with you doing nothing."
        />

        <div className="workflow-diagram-container" style={{ opacity: vis?1:0, transform: vis?'translateY(0)':'translateY(20px)', transition:'all .8s ease' }}>
          <PipelineDiagram active={vis} />
        </div>

        <div style={{
          display:'grid', gap:'var(--gap)', marginTop:40,
          gridTemplateColumns:'repeat(auto-fit, minmax(220px, 1fr))',
        }}>
          {STEPS.map((s, i) => (
            <div key={s.num} className="glass-card" style={{
              padding:'var(--card-p)', position:'relative', overflow:'hidden',
              opacity: vis?1:0, transform: vis?'translateY(0)':'translateY(20px)',
              transition:`all .7s ease ${i*0.1}s`,
            }}>
              <div aria-hidden className="mono" style={{
                position:'absolute', top:12, right:16,
                fontSize:40, fontWeight:700, lineHeight:1,
                color:`${s.color}18`,
              }}>{s.num}</div>
              <div style={{
                width:34, height:34, borderRadius:8,
                background:`${s.color}18`, border:`1px solid ${s.color}44`,
                display:'flex', alignItems:'center', justifyContent:'center',
                color:s.color, fontFamily:'var(--font-mono)', fontSize:12, fontWeight:700,
                marginBottom:14,
              }}>{s.num}</div>
              <h4 className="serif" style={{ fontSize:18, fontWeight:700, color:'var(--text)', marginBottom:8 }}>
                {s.title}
              </h4>
              <p style={{ fontSize:13, color:'var(--muted-strong)', lineHeight:1.65 }}>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 768px) {
          .workflow-diagram-container { display: none !important; }
        }
      `}</style>
    </section>
  );
}

window.WorkflowSection = WorkflowSection;