/* global React */

/* =====================================================
   Digital Valor — Visual modules
   - HeroDashboard: aquisição & vendas dashboard
   - FlowDiagram: campanhas → otimização
   - EDVADiagram: 4 pilares conectados
   - MiniFunnel: visitante → otimização
   ===================================================== */

const { useState, useEffect } = React;

/* ---------- Helper: count-up number ---------- */
function CountUp({ value, suffix = "", prefix = "", duration = 1200 }) {
  const [n, setN] = useState(0);
  useEffect(() => {
    let raf;
    const start = performance.now();
    const tick = (now) => {
      const t = Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - t, 3);
      setN(value * eased);
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [value, duration]);
  const fmt = Number.isInteger(value) ? Math.round(n).toLocaleString("pt-BR") : n.toFixed(1).replace(".", ",");
  return <span>{prefix}{fmt}{suffix}</span>;
}

/* ---------- Hero Dashboard ---------- */
function HeroDashboard() {
  const months = ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago"];
  // pairs of [oportunidades, vendas]
  const data = [
    [42, 16], [55, 22], [68, 28], [74, 32],
    [82, 38], [95, 44], [110, 52], [124, 61],
  ];
  const maxV = 130;

  return (
    <div className="dash" role="img" aria-label="Painel de Aquisição e Vendas — Oportunidades, atendimento e conversão">
      <div className="dash-head">
        <div className="dash-title">
          <span className="dot" />
          Painel · Aquisição e Vendas
        </div>
        <div className="dash-tabs">
          <span className="dash-tab active">Mês</span>
          <span className="dash-tab">Trimestre</span>
          <span className="dash-tab">Ano</span>
        </div>
      </div>

      <div className="kpi-row">
        <div className="kpi green-accent">
          <div className="label">Oportunidades</div>
          <div className="value"><CountUp value={1248} /></div>
          <div className="delta">↑ 28% vs período anterior</div>
        </div>
        <div className="kpi">
          <div className="label">Em atendimento</div>
          <div className="value"><CountUp value={342} /></div>
          <div className="delta">↑ 14% follow-up ativo</div>
        </div>
        <div className="kpi purple-accent">
          <div className="label">Conversão comercial</div>
          <div className="value"><CountUp value={31.4} suffix="%" /></div>
          <div className="delta">↑ 6,2 p.p. ajuste de funil</div>
        </div>
      </div>

      <div className="dash-chart">
        <div className="dash-chart-head">
          <div className="dash-chart-title">Funil mensal · oportunidades vs vendas fechadas</div>
          <div className="dash-chart-legend">
            <span><span className="dot" style={{ background: "var(--dv-green)" }} />Oportunidades</span>
            <span><span className="dot" style={{ background: "var(--dv-purple)" }} />Vendas</span>
          </div>
        </div>
        <div className="bars" aria-hidden="true">
          {data.map(([o, v], i) => (
            <div className="bar-col" key={i}>
              <div className="bar green" style={{ height: `${(o / maxV) * 100}%`, animationDelay: `${i * 80}ms` }} />
              <div className="bar purple" style={{ height: `${(v / maxV) * 100}%`, animationDelay: `${i * 80 + 40}ms` }} />
            </div>
          ))}
        </div>
        <div className="bar-labels">
          {months.map(m => <span key={m}>{m}</span>)}
        </div>
      </div>

      <div className="pillars">
        <div className="pillar"><span className="letter">E</span><span className="label">Estrutura</span></div>
        <div className="pillar"><span className="letter">D</span><span className="label">Demanda</span></div>
        <div className="pillar"><span className="letter">V</span><span className="label">Vendas</span></div>
        <div className="pillar"><span className="letter">A</span><span className="label">Aceleração</span></div>
      </div>

      <div className="dash-foot">
        <span className="live-dot">Dados em tempo real</span>
        <span className="stamp">Atualizado há 4 min</span>
      </div>
    </div>
  );
}

/* ---------- Flow diagram (Tese section) ---------- */
function FlowDiagram() {
  const steps = [
    { name: "Campanhas",     icon: "spark"   },
    { name: "Oportunidades", icon: "leads"   },
    { name: "Atendimento",   icon: "chat"    },
    { name: "Conversão",     icon: "check"   },
    { name: "Dados",         icon: "data"    },
    { name: "Otimização",    icon: "tune"    },
  ];
  return (
    <div className="diagram-flow" aria-label="Fluxo: Campanhas, Oportunidades, Atendimento, Conversão, Dados, Otimização">
      <div className="flow-row">
        {steps.map((s, i) => (
          <div className="flow-step" key={s.name}>
            <div className="num">{String(i + 1).padStart(2, "0")}</div>
            <FlowIcon name={s.icon} />
            <div className="name">{s.name}</div>
            {i < steps.length - 1 && <span className="flow-arrow" aria-hidden="true">→</span>}
          </div>
        ))}
      </div>
    </div>
  );
}

function FlowIcon({ name }) {
  const common = { width: 28, height: 28, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  const color = { color: "var(--dv-green)" };
  if (name === "spark") return <svg {...common} style={color}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8" /></svg>;
  if (name === "leads") return <svg {...common} style={color}><path d="M3 7h18M5 12h14M8 17h8" /></svg>;
  if (name === "chat")  return <svg {...common} style={color}><path d="M21 12a8 8 0 1 1-3.2-6.4L21 4l-1 4.2A8 8 0 0 1 21 12z" /></svg>;
  if (name === "check") return <svg {...common} style={color}><path d="M4 12l5 5L20 6" /></svg>;
  if (name === "data")  return <svg {...common} style={color}><path d="M4 20V8M10 20V4M16 20v-8M22 20H2" /></svg>;
  if (name === "tune")  return <svg {...common} style={color}><path d="M4 8h12M20 8h0M4 16h4M12 16h8M16 6v4M8 14v4" /></svg>;
  return null;
}

/* ---------- EDVA Diagram ---------- */
function EDVADiagram() {
  const tiles = [
    { L: "E", name: "Estrutura",   step: "Etapa 01", body: "Organizamos a base: funil, canais, CRM, WhatsApp comercial, indicadores e processo de acompanhamento." },
    { L: "D", name: "Demanda",     step: "Etapa 02", body: "Ativamos campanhas, criativos e canais digitais para gerar novas oportunidades comerciais." },
    { L: "V", name: "Vendas",      step: "Etapa 03", body: "Ajustamos o processo de atendimento, follow-up e conversão para que mais interessados avancem até a compra." },
    { L: "A", name: "Aceleração",  step: "Etapa 04", body: "Analisamos dados, identificamos gargalos e otimizamos campanhas, funil e comercial continuamente." },
  ];
  return (
    <div className="edva-canvas" aria-label="Método EDVA — Estrutura, Demanda, Vendas, Aceleração">
      <div className="edva-grid">
        {tiles.map((t, i) => (
          <div className="edva-tile" key={t.L}>
            <div className="edva-letter">{t.L}</div>
            <div>
              <div className="edva-step">{t.step}</div>
              <h3 className="h-card" style={{ marginTop: 6 }}>{t.name}</h3>
            </div>
            <p className="body">{t.body}</p>
            {i < tiles.length - 1 && <span className="edva-connect" aria-hidden="true" />}
          </div>
        ))}
      </div>
      <div className="edva-foot">
        <p className="quote">
          <span className="green">→</span> Quando marketing e vendas trabalham como sistema, a empresa ganha previsibilidade.
        </p>
      </div>
    </div>
  );
}

/* ---------- Mini Funnel ---------- */
function MiniFunnel() {
  const steps = [
    { label: "Visitante",   v: "100%" },
    { label: "Lead",        v: "42%"  },
    { label: "Atendimento", v: "31%"  },
    { label: "Proposta",    v: "18%"  },
    { label: "Venda",       v: "9%"   },
  ];
  return (
    <div className="funnel" aria-label="Funil de aquisição — visitante até venda, com retorno via otimização">
      <div className="funnel-head">
        <div className="h">Funil de aquisição</div>
        <div className="h" style={{ color: "var(--fg-mute)" }}>conversão por etapa</div>
      </div>
      {steps.map((s, i) => (
        <div className={`funnel-step s${i + 1}`} key={s.label}>
          <span>
            <span style={{ color: "var(--fg-mute)", marginRight: 10, fontFamily: "var(--font-display)", fontSize: 12 }}>
              {String(i + 1).padStart(2, "0")}
            </span>
            {s.label}
          </span>
          <span className="v">{s.v}</span>
        </div>
      ))}
      <div className="funnel-step s6">
        <span>↺</span>
        <span>Otimização contínua sobre os dados do funil</span>
      </div>
    </div>
  );
}

Object.assign(window, { HeroDashboard, FlowDiagram, EDVADiagram, MiniFunnel, CountUp });