// ============================================================
// STACK / FLUXO — diagrama amplo end-to-end com ícones
// ============================================================

// ─── ÍCONES SVG INLINE ─────────────────────────────────────
const FlowIcon = {
  google: () => (
    <svg viewBox="0 0 24 24" width="100%" height="100%">
      <path fill="#4285F4" d="M22.5 12.27c0-.79-.07-1.54-.2-2.27H12v4.51h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.32z"/>
      <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.99.66-2.25 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z"/>
      <path fill="#FBBC05" d="M5.84 14.1A6.6 6.6 0 0 1 5.5 12c0-.73.12-1.44.34-2.1V7.07H2.18A11 11 0 0 0 1 12c0 1.77.43 3.45 1.18 4.93l3.66-2.83z"/>
      <path fill="#EA4335" d="M12 5.38c1.61 0 3.06.56 4.2 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1A11 11 0 0 0 2.18 7.07l3.66 2.83C6.71 7.31 9.14 5.38 12 5.38z"/>
    </svg>
  ),
  meta: () => (
    <svg viewBox="0 0 36 24" width="100%" height="100%">
      <defs>
        <linearGradient id="meta-g1" x1="0%" y1="100%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="#0866FF"/>
          <stop offset="100%" stopColor="#A45EFF"/>
        </linearGradient>
        <linearGradient id="meta-g2" x1="0%" y1="100%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="#FF5C8A"/>
          <stop offset="100%" stopColor="#0866FF"/>
        </linearGradient>
      </defs>
      <path fill="url(#meta-g1)" d="M0 12c0-4 2.6-7.5 6.4-7.5 4 0 6.6 4.8 11.6 12C13.7 22.5 11 24 7.5 24 3.3 24 0 20.7 0 12z"/>
      <path fill="url(#meta-g2)" d="M36 12c0 8.7-3.3 12-7.5 12-3.5 0-6.2-1.5-10.5-7.5C13 9.3 10.4 4.5 6.4 4.5 9 4.5 11.4 6 14.7 10.5 19 16.5 21.7 18 25 18c4.2 0 7.5-3.3 7.5-7.5C32.5 6.3 35.8 3 40 3"/>
    </svg>
  ),
  site: () => (
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="none">
      <rect x="3" y="3.5" width="18" height="13" rx="2" stroke="currentColor" strokeWidth="1.5"/>
      <path d="M3 7h18" stroke="currentColor" strokeWidth="1.5"/>
      <circle cx="5.4" cy="5.25" r=".55" fill="currentColor"/>
      <circle cx="7.2" cy="5.25" r=".55" fill="currentColor"/>
      <rect x="6" y="9.5" width="7" height="1.6" rx="0.8" fill="currentColor" opacity="0.55"/>
      <rect x="6" y="12.4" width="5" height="1.6" rx="0.8" fill="currentColor" opacity="0.35"/>
      <path d="M14.5 13.2l5.2 2.1-2.1.7-.7 2.1-2.1-5.2z" fill="currentColor"/>
    </svg>
  ),
  whatsapp: () => (
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="#25D366">
      <path d="M17.5 14.4c-.3-.1-1.7-.8-1.9-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-1.8-.9-3-1.6-4.2-3.6-.3-.5.3-.5.9-1.6.1-.2 0-.4 0-.5s-.7-1.6-.9-2.2c-.2-.5-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1.1 1.1-1.1 2.6 0 1.5 1.1 3 1.3 3.2.2.3 2.2 3.4 5.4 4.7 2 .9 2.8.9 3.8.8.6-.1 1.7-.7 2-1.4.3-.7.3-1.3.2-1.4-.1-.2-.3-.3-.5-.4Zm-5.4 7.4c-1.6 0-3.2-.4-4.5-1.2l-.3-.2-3.4.9.9-3.3-.2-.3a8.8 8.8 0 0 1-1.4-4.8 9 9 0 0 1 17.7-2 8.9 8.9 0 0 1-8.8 10.9ZM20 4a11 11 0 0 0-19.3 7.4c0 1.9.5 3.8 1.5 5.4L.7 23l6.4-1.7a11 11 0 0 0 16.4-9.5c0-3-1.2-5.7-3.4-7.8Z"/>
    </svg>
  ),
  gmn: () => (
    // Google Meu Negócio — store
    <svg viewBox="0 0 24 24" width="100%" height="100%">
      <path fill="#4285F4" d="M3 8.5h18l-1-3.5H4z"/>
      <path fill="#34A853" d="M3 8.5v9.8c0 .4.3.7.7.7h6.3v-6h4v6h6.3c.4 0 .7-.3.7-.7V8.5z"/>
      <path fill="#FBBC05" d="M14 8.5h4l-.5 2.5c-.2 1-1 1.7-2 1.7-1.1 0-2-.9-2-2.1z"/>
      <path fill="#EA4335" d="M10 8.5h4v2.1c0 1.2-.9 2.1-2 2.1-1.2 0-2.1-.9-2.1-2.1z"/>
    </svg>
  ),
  sparkles: () => (
    // IA spark
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="none">
      <path d="M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z" fill="currentColor"/>
      <path d="M19 14l.7 2.1L22 17l-2.3.9L19 20l-.7-2.1L16 17l2.3-.9L19 14z" fill="currentColor" opacity=".8"/>
      <path d="M5 14l.6 1.6L7.2 16l-1.6.4L5 18l-.6-1.6L2.8 16l1.6-.4L5 14z" fill="currentColor" opacity=".6"/>
    </svg>
  ),
  kommo: () => (
    <svg viewBox="0 0 24 24" width="100%" height="100%">
      <rect width="24" height="24" rx="5" fill="#0E14EE"/>
      <text x="50%" y="56%" textAnchor="middle" dominantBaseline="middle"
        fontFamily="Geist, sans-serif" fontSize="9.5" fontWeight="700" fill="white" letterSpacing="-0.04em">Kommo</text>
    </svg>
  ),
  user: () => (
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="none">
      <circle cx="12" cy="8.5" r="3.5" stroke="currentColor" strokeWidth="1.6"/>
      <path d="M5 20c1-3.5 4-5.5 7-5.5s6 2 7 5.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
    </svg>
  ),
  star: () => (
    <svg viewBox="0 0 24 24" width="100%" height="100%">
      <path fill="#FCBF49" d="M12 2l2.9 6.3 6.9.7-5.1 4.7 1.4 6.8L12 17l-6.1 3.5 1.4-6.8L2.2 9l6.9-.7L12 2z"/>
    </svg>
  ),
  chart: () => (
    <svg viewBox="0 0 24 24" width="100%" height="100%" fill="none">
      <path d="M3 19h18" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
      <rect x="5" y="11" width="3" height="6" fill="#FCBF49"/>
      <rect x="10.5" y="8" width="3" height="9" fill="#C26A55"/>
      <rect x="16" y="5" width="3" height="12" fill="#7E9573"/>
    </svg>
  ),
};

// ─── NÓ DO FLUXOGRAMA ────────────────────────────────────────
function FlowNode({ icon, iconBg, label, name, sub, accent }) {
  return (
    <div className={`flow-node ${accent ? 'flow-node--accent' : ''}`}>
      <div className="flow-node-icon" style={{ background: iconBg || 'rgba(255,255,255,0.04)' }}>
        {icon}
      </div>
      <div className="flow-node-text">
        <span className="flow-node-label">{label}</span>
        <span className="flow-node-name">{name}</span>
        {sub && <span className="flow-node-sub">{sub}</span>}
      </div>
    </div>
  );
}

// ─── FLUXOGRAMA PRINCIPAL ─────────────────────────────────────
function Fluxograma() {
  return (
    <div className="fluxo">

      {/* Stage labels (top) */}
      <div className="fluxo-stages">
        <div className="fluxo-stage"><span className="num">01</span><span>Atração</span></div>
        <div className="fluxo-stage"><span className="num">02</span><span>Conversão</span></div>
        <div className="fluxo-stage fluxo-stage--core"><span className="num">03</span><span>Inteligência</span></div>
        <div className="fluxo-stage"><span className="num">04</span><span>Atendimento</span></div>
        <div className="fluxo-stage"><span className="num">05</span><span>Fidelização</span></div>
      </div>

      <div className="fluxo-grid">

        {/* COL 1 — Atração */}
        <div className="fluxo-col">
          <FlowNode
            icon={<FlowIcon.google />}
            label="anúncio busca"
            name="Google Ads"
            sub="cupom R$1.200"
          />
          <FlowNode
            icon={<img src={R('assets/logo-meta.png')} alt="" loading="lazy" decoding="async" style={{ width: '90%', height: '90%', objectFit: 'contain' }} />}
            label="rede social"
            name="Meta Ads"
            sub="IG + Facebook"
          />
        </div>

        {/* COL 2 — Conversão */}
        <div className="fluxo-col">
          <FlowNode
            icon={<div style={{ color: 'var(--gold)', width: '60%', height: '60%' }}><FlowIcon.site /></div>}
            label="ponto de entrada"
            name="Landing page"
            sub="otimizada p/ conversão"
          />
          <FlowNode
            icon={<img src={R('assets/logo-whatsapp.png')} alt="" loading="lazy" decoding="async" style={{ width: '90%', height: '90%', objectFit: 'contain' }} />}
            label="canal direto"
            name="WhatsApp"
            sub="API oficial"
          />
          <FlowNode
            icon={<img src={R('assets/logo-gmn-store.png')} alt="" loading="lazy" decoding="async" style={{ width: '88%', height: '88%', objectFit: 'contain' }} />}
            label="busca local"
            name="Google Meu Negócio"
            sub="ficha + reviews"
          />
        </div>

        {/* COL 3 — NÚCLEO */}
        <div className="fluxo-col fluxo-col--core">
          <div className="flow-core">
            <div className="flow-core-glow"></div>
            <div className="flow-core-label">
              <span className="dot"></span>
              núcleo · 24/7
            </div>
            <div className="flow-core-icon flow-core-icon--apta">
              <img src={R('assets/logo-apta-mark.png')} alt="Apta" loading="lazy" decoding="async" />
            </div>
            <div className="flow-core-name">A Apta orquestra tudo</div>
            <div className="flow-core-sub">qualifica intenção · roteia · responde</div>
            <ul className="flow-core-list">
              <li>+ lê histórico do cliente</li>
              <li>+ entende grau de interesse</li>
              <li>+ distribui pro vendedor certo</li>
              <li>+ dispara follow-up se demorar</li>
            </ul>
            <div className="flow-core-tech">
              <span className="tech-chip">workflow n8n</span>
              <span className="tech-chip">automação contínua</span>
            </div>
          </div>
        </div>

        {/* COL 4 — Atendimento */}
        <div className="fluxo-col">
          <FlowNode
            icon={<img src={R('assets/logo-kommo-circle.png')} alt="" loading="lazy" decoding="async" style={{ width: '95%', height: '95%', objectFit: 'contain' }} />}
            label="CRM"
            name="Kommo"
            sub="funil organizado"
          />
          <FlowNode
            icon={<div style={{ color: 'var(--sage)', width: '62%', height: '62%' }}><FlowIcon.user /></div>}
            label="seu vendedor"
            name="Atendimento instantâneo"
            sub="0 lead sem resposta"
          />
        </div>

        {/* COL 5 — Fidelização */}
        <div className="fluxo-col">
          <FlowNode
            icon={<FlowIcon.star />}
            label="pós-venda"
            name="Pede review"
            sub="automático no GMN"
          />
          <FlowNode
            icon={<FlowIcon.chart />}
            label="toda segunda 9h"
            name="Dashboard"
            sub="WhatsApp + Sheets"
          />
        </div>

      </div>

      {/* SVG: linhas conectando + dots animados */}
      <svg className="fluxo-svg" viewBox="0 0 1200 360" preserveAspectRatio="none" aria-hidden="true">
        <defs>
          <linearGradient id="fl-line" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#7E9573" stopOpacity=".25"/>
            <stop offset="50%" stopColor="#DCAF3A" stopOpacity=".55"/>
            <stop offset="100%" stopColor="#C26A55" stopOpacity=".25"/>
          </linearGradient>
          <filter id="fl-glow">
            <feGaussianBlur stdDeviation="2.5" result="b"/>
            <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
          </filter>
        </defs>

        {/* Col 1 → Col 3 (núcleo) */}
        <path id="fp1" d="M 200 90 C 350 90, 450 180, 580 180" fill="none" stroke="url(#fl-line)" strokeWidth="1.5" strokeDasharray="2 5"/>
        <path id="fp2" d="M 200 270 C 350 270, 450 180, 580 180" fill="none" stroke="url(#fl-line)" strokeWidth="1.5" strokeDasharray="2 5"/>

        {/* Col 2 → Col 3 */}
        <path id="fp3" d="M 440 70 C 500 70, 540 180, 580 180" fill="none" stroke="url(#fl-line)" strokeWidth="1.5" strokeDasharray="2 5"/>
        <path id="fp4" d="M 440 180 L 580 180" fill="none" stroke="url(#fl-line)" strokeWidth="1.5" strokeDasharray="2 5"/>
        <path id="fp5" d="M 440 290 C 500 290, 540 180, 580 180" fill="none" stroke="url(#fl-line)" strokeWidth="1.5" strokeDasharray="2 5"/>

        {/* Col 3 → Col 4 */}
        <path id="fp6" d="M 700 180 C 750 180, 780 90, 870 90" fill="none" stroke="url(#fl-line)" strokeWidth="1.5" strokeDasharray="2 5"/>
        <path id="fp7" d="M 700 180 C 750 180, 780 270, 870 270" fill="none" stroke="url(#fl-line)" strokeWidth="1.5" strokeDasharray="2 5"/>

        {/* Col 4 → Col 5 */}
        <path id="fp8" d="M 1010 90 C 1060 90, 1080 90, 1130 90" fill="none" stroke="url(#fl-line)" strokeWidth="1.5" strokeDasharray="2 5"/>
        <path id="fp9" d="M 1010 270 C 1060 270, 1080 270, 1130 270" fill="none" stroke="url(#fl-line)" strokeWidth="1.5" strokeDasharray="2 5"/>

        {/* Loop volta col 5 → col 3 (review alimenta IA) */}
        <path id="fp10" d="M 1130 90 C 1180 90, 1180 330, 640 330 C 600 330, 590 280, 640 250" fill="none" stroke="#7E9573" strokeWidth="1" strokeDasharray="3 6" opacity=".4"/>

        {/* Dots */}
        {[
          { p: 'fp1', d: 3.8, b: '0s', f: '#DCAF3A' },
          { p: 'fp2', d: 3.8, b: '1.5s', f: '#A45EFF' },
          { p: 'fp3', d: 3.8, b: '0.8s', f: '#4285F4' },
          { p: 'fp4', d: 3.4, b: '2.0s', f: '#25D366' },
          { p: 'fp5', d: 3.8, b: '2.8s', f: '#34A853' },
          { p: 'fp6', d: 3.4, b: '3.2s', f: '#0E14EE' },
          { p: 'fp7', d: 3.4, b: '3.6s', f: '#7E9573' },
          { p: 'fp8', d: 2.4, b: '4.4s', f: '#FCBF49' },
          { p: 'fp9', d: 2.4, b: '4.8s', f: '#FCBF49' },
        ].map((dot, i) => (
          <circle key={i} r="3.5" fill={dot.f} filter="url(#fl-glow)">
            <animateMotion dur={`${dot.d}s`} repeatCount="indefinite" begin={dot.b}>
              <mpath href={`#${dot.p}`}/>
            </animateMotion>
          </circle>
        ))}
      </svg>

      {/* Stats footer */}
      <div className="fluxo-stats">
        <div className="fluxo-stat">
          <span className="l">clientes ativos</span>
          <span className="v">12</span>
        </div>
        <div className="fluxo-stat">
          <span className="l">lead sem atendimento</span>
          <span className="v">0</span>
        </div>
        <div className="fluxo-stat">
          <span className="l">setups disponíveis</span>
          <span className="v">3<em> níveis</em></span>
        </div>
        <div className="fluxo-stat">
          <span className="l">operação</span>
          <span className="v">24/7</span>
        </div>
      </div>

    </div>
  );
}

// ─── SEÇÃO INTEIRA ────────────────────────────────────────────
function Stack() {
  return (
    <section className="section dark fluxo-section" id="stack" data-screen-label="05 Fluxo">
      <div className="container">

        <div className="fluxo-header reveal">
          <span className="eyebrow dark">05 · o fluxo · end-to-end</span>
          <h2 className="h-section" style={{ marginTop: 18, maxWidth: '20ch' }}>
            Do clique do anúncio até o <em>review</em> no Google.
          </h2>
          <p className="lead" style={{ marginTop: 22, color: 'var(--dark-mute)', maxWidth: '52ch' }}>
            Cada peça da operação conectada num fluxo só. Nada de planilha solta, lead perdido em conversa,
            ou vendedor esquecendo de retornar. A Apta orquestra o caminho inteiro com automação + IA aplicada.
          </p>
        </div>

        <Fluxograma />

      </div>
    </section>
  );
}

Object.assign(window, { Stack, Fluxograma, FlowIcon });
