// Interactive AI workflow visualization — clickable pipeline
const Workflow = () => {
  const stages = [
    { id: 'input', label: 'Input', icon: 'Database',
      desc: 'A new event arrives — a document upload, an inbound message, an API call from your system of record.',
      example: 'PDF · invoice_4821.pdf · 2.1 MB',
      color: '#E63329',
    },
    { id: 'ai', label: 'AI', icon: 'Spark',
      desc: 'A domain-tuned model parses, classifies, and extracts the structured data — with confidence scores attached.',
      example: 'vendor: Acme Co · total: $12,480 · conf 0.98',
      color: '#F5C518',
    },
    { id: 'decision', label: 'Decision', icon: 'Target',
      desc: 'Rules + reasoning route the event. Auto-approve if confident, escalate if novel, hold if anomalous.',
      example: 'route: auto-approve · policy: vendor.tier1 · ok',
      color: '#14A04A',
    },
    { id: 'auto', label: 'Automation', icon: 'Bolt',
      desc: 'The system writes back to the source-of-truth. Posts to the ledger, updates the CRM, kicks off the payment.',
      example: 'NetSuite.bill.create · payment.scheduled',
      color: '#1B7BD6',
    },
    { id: 'output', label: 'Output', icon: 'Check',
      desc: 'The outcome lands. The vendor is paid. The team is notified. The signal feeds back into the model.',
      example: 'paid · −0.4s cycle · learning.loop ✓',
      color: '#E63329',
    },
  ];

  const [active, setActive] = useState(0);

  // Auto-advance
  useEffect(() => {
    const t = setInterval(() => setActive(a => (a + 1) % stages.length), 3200);
    return () => clearInterval(t);
  }, []);

  return (
    <Section
      id="workflow"
      eyebrow="The loop in motion"
      title="An AI workflow, rendered."
      sub="A real production trace from a Webever-built finance pipeline. Tap any node to inspect the stage."
      className="border-t border-token"
    >
      <div className="card p-6 md:p-10 reveal">
        {/* Pipeline */}
        <div className="relative">
          <div className="hidden md:block absolute top-[44px] left-[60px] right-[60px] h-px">
            <svg width="100%" height="2" preserveAspectRatio="none" viewBox="0 0 1000 2">
              <line x1="0" y1="1" x2="1000" y2="1" stroke="var(--border)" strokeWidth="1"/>
              <line x1="0" y1="1" x2={`${(active/(stages.length-1))*1000}`} y2="1" stroke="url(#wfGrad)" strokeWidth="2" style={{transition:'all .8s ease'}}/>
              <defs>
                <linearGradient id="wfGrad" x1="0" x2="1">
                  <stop offset="0%" stopColor="#E63329"/>
                  <stop offset="33%" stopColor="#F5C518"/>
                  <stop offset="66%" stopColor="#14A04A"/>
                  <stop offset="100%" stopColor="#1B7BD6"/>
                </linearGradient>
              </defs>
            </svg>
          </div>

          <div className="grid grid-cols-5 gap-2 md:gap-4 relative">
            {stages.map((s, i) => {
              const IconCmp = I[s.icon];
              const isActive = i === active;
              const isPast = i < active;
              return (
                <button
                  key={s.id}
                  onClick={() => setActive(i)}
                  className="flex flex-col items-center group"
                >
                  <div
                    className={`relative w-[56px] h-[56px] md:w-[88px] md:h-[88px] rounded-2xl border flex items-center justify-center transition-all ${
                      isActive ? 'border-transparent' : 'border-token'
                    }`}
                    style={{
                      background: isActive ? s.color : 'var(--surface)',
                      color: isActive ? '#fff' : (isPast ? s.color : 'var(--muted)'),
                      transform: isActive ? 'scale(1.05)' : 'scale(1)',
                      boxShadow: isActive ? `0 12px 32px -12px ${s.color}66` : 'none',
                    }}
                  >
                    <IconCmp size={26}/>
                    {isActive && <span className="absolute inset-0 rounded-2xl pulse-ring"/>}
                  </div>
                  <div className="mt-3 font-mono text-[10px] tracking-[0.18em] uppercase text-muted">
                    {String(i+1).padStart(2,'0')}
                  </div>
                  <div className={`mt-0.5 text-[14px] md:text-[16px] font-medium transition-colors ${isActive ? '' : 'text-muted'}`}>
                    {s.label}
                  </div>
                </button>
              );
            })}
          </div>
        </div>

        {/* Detail panel */}
        <div className="mt-10 grid md:grid-cols-12 gap-6 items-start">
          <div className="md:col-span-7">
            <div className="font-mono text-[10px] tracking-[0.18em] uppercase text-muted">
              Stage {String(active+1).padStart(2,'0')} · {stages[active].label}
            </div>
            <h3 className="display text-[28px] md:text-[34px] mt-2 leading-[1.1]">{stages[active].desc.split(' — ')[0]}</h3>
            <p className="mt-4 text-[15px] text-muted leading-relaxed max-w-xl">{stages[active].desc}</p>
          </div>
          <div className="md:col-span-5">
            <div className="rounded-xl border border-token p-5 font-mono text-[12.5px] leading-relaxed"
                 style={{background: 'var(--bg)'}}>
              <div className="flex items-center justify-between text-muted text-[10px] tracking-[0.16em] uppercase mb-3">
                <span>trace · {stages[active].id}.event</span>
                <span style={{color: stages[active].color}}>● live</span>
              </div>
              <div className="text-muted">→ {stages[active].example}</div>
              <div className="text-muted mt-1.5">t = {(active*0.18).toFixed(2)}s</div>
              <div className="mt-1.5" style={{color: stages[active].color}}>status: {active === stages.length-1 ? 'completed' : 'forward.next'}</div>
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
};

window.Workflow = Workflow;