/* Hero animated flow diagram - Cliente WhatsApp -> IA -> CRM -> Follow-up -> Venda */
const { useEffect, useRef, useState } = React;

function StatusDot({ color = '#22c55e' }) {
  return (
    <span style={{
      display: 'inline-block', width: 6, height: 6, borderRadius: 99,
      background: color, boxShadow: `0 0 0 0 ${color}80`,
      animation: 'pulse 1.6s ease-out infinite'
    }} />
  );
}

function HeroFlow() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick(t => (t + 1) % 5), 1600);
    return () => clearInterval(id);
  }, []);

  const nodes = [
    { id: 0, label: 'WhatsApp', sub: 'Cliente: "Vocês entregam?"', tag: 'Cliente', color: '#22c55e' },
    { id: 1, label: 'Agente IA', sub: 'Intent: pedido • Confiança 0.96', tag: 'IA', color: '#2563EB' },
    { id: 2, label: 'CRM', sub: 'Lead criado • Marina S.', tag: 'CRM', color: '#5CE1E6' },
    { id: 3, label: 'Follow-up', sub: 'Mensagem agendada • 24h', tag: 'Auto', color: '#C6A15B' },
    { id: 4, label: 'Venda', sub: 'Pedido #2148 • R$ 187,90', tag: 'Receita', color: '#22c55e' }
  ];

  return (
    <div className="hero-flow-wrap glass" style={{
      borderRadius: 22,
      padding: 22,
      position: 'relative',
      overflow: 'hidden'
    }}>
      {/* top header */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 10, height: 10, borderRadius: 99, background: '#FF5F57' }} />
          <span style={{ width: 10, height: 10, borderRadius: 99, background: '#FEBC2E' }} />
          <span style={{ width: 10, height: 10, borderRadius: 99, background: '#28C840' }} />
          <span className="mono" style={{ marginLeft: 10, fontSize: 11.5, color: 'var(--muted)' }}>
            dominus / pipeline / live
          </span>
        </div>
        <span className="status-pill"><span className="pulse"></span>operacional</span>
      </div>

      {/* flow */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10, position: 'relative' }}>
        {/* connecting line */}
        <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }} preserveAspectRatio="none">
          <defs>
            <linearGradient id="flowG" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stopColor="#22c55e" />
              <stop offset="35%" stopColor="#2563EB" />
              <stop offset="65%" stopColor="#5CE1E6" />
              <stop offset="100%" stopColor="#C6A15B" />
            </linearGradient>
          </defs>
        </svg>
        {nodes.map((n, i) => (
          <FlowNode key={n.id} n={n} active={tick === i} next={tick === (i - 1 + 5) % 5} />
        ))}
      </div>

      {/* live ticker / events */}
      <div style={{
        marginTop: 18, paddingTop: 14, borderTop: '1px dashed var(--line)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontSize: 12.5
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }} className="mono">
          <StatusDot />
          <span style={{ color: 'var(--muted)' }}>14:32:08 ›</span>
          <EventTicker tick={tick} nodes={nodes} />
        </div>
        <span className="mono" style={{ color: 'var(--muted)' }}>
          uptime <span style={{ color: 'var(--ink)' }}>99.98%</span>
        </span>
      </div>
    </div>
  );
}

function FlowNode({ n, active, next }) {
  return (
    <div style={{
      position: 'relative',
      border: '1px solid var(--line)',
      borderRadius: 14,
      padding: '12px 12px 14px',
      background: '#fff',
      boxShadow: active ? '0 0 0 2px rgba(37,99,235,0.18), 0 12px 30px -12px rgba(37,99,235,0.45)' : 'var(--shadow-sm)',
      transform: active ? 'translateY(-3px)' : 'translateY(0)',
      transition: 'all .35s ease'
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8,
        fontSize: 10.5, color: 'var(--muted)', fontWeight: 500
      }} className="mono">
        <span style={{
          display: 'inline-block', width: 6, height: 6, borderRadius: 99,
          background: n.color,
          boxShadow: active ? `0 0 0 3px ${n.color}30` : 'none',
          transition: 'all .35s ease'
        }} />
        <span style={{ letterSpacing: '0.04em', textTransform: 'uppercase' }}>{n.tag}</span>
      </div>
      <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 4 }}>{n.label}</div>
      <div style={{ fontSize: 11.5, color: 'var(--muted)', lineHeight: 1.35 }}>{n.sub}</div>
      {/* arrow indicator */}
      {n.id < 4 && (
        <div style={{
          position: 'absolute', right: -12, top: '50%', transform: 'translateY(-50%)',
          width: 24, height: 24, display: 'flex', alignItems: 'center', justifyContent: 'center',
          zIndex: 2
        }}>
          <svg width="14" height="10" viewBox="0 0 14 10" fill="none">
            <path d="M0 5 L11 5 M7 1 L11 5 L7 9" stroke={active ? n.color : 'var(--line-strong)'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
      )}
    </div>
  );
}

function EventTicker({ tick, nodes }) {
  const events = [
    'WhatsApp inbound · "boa tarde, vocês entregam?"',
    'IA classificou intenção: pedido · 96%',
    'Lead criado no CRM · Marina S. · 3 itens',
    'Follow-up agendado · template_promo_24h',
    'Pedido confirmado · R$ 187,90 · #2148'
  ];
  return <span style={{ color: 'var(--ink)' }}>{events[tick]}</span>;
}

window.HeroFlow = HeroFlow;