// VeryPay — Interactive Diagnostic
function Diagnostic() {
  const [revenue, setRevenue] = useState(150000); // R$/mês
  const [days, setDays] = useState(1); // D+N — começa em D+1 (realidade brasileira)
  const [split, setSplit] = useState({ c: 55, d: 25, p: 20 });
  const [hasSplit, setHasSplit] = useState(false);

  // Composition: adjust the others proportionally when one changes
  const updateSplit = (key, val) => {
    const newVal = Math.max(0, Math.min(100, val));
    const others = ["c", "d", "p"].filter(k => k !== key);
    const oldOthersSum = split[others[0]] + split[others[1]];
    const remain = 100 - newVal;
    let next = { ...split, [key]: newVal };
    if (oldOthersSum > 0) {
      next[others[0]] = Math.round((split[others[0]] / oldOthersSum) * remain);
      next[others[1]] = 100 - newVal - next[others[0]];
    } else {
      next[others[0]] = Math.round(remain / 2);
      next[others[1]] = remain - next[others[0]];
    }
    setSplit(next);
  };

  // Derived "estimates" — qualitative direction, not absolute taxes
  const yearlyDiff = useMemo(() => {
    // crescimento da diferença com faturamento e proporção crédito
    const base = revenue * 12 * 0.006; // 0.6% efetivo de "spread médio"
    const creditWeight = split.c / 100; // crédito é onde mais economiza
    const dayWeight = Math.min(1, days / 30); // quanto mais dias, mais a antecipação dói
    return Math.round(base * (0.5 + creditWeight * 1.0 + dayWeight * 0.4));
  }, [revenue, split.c, days]);

  const antMonthlySaving = useMemo(() => {
    // percentual estimado de economia ao mês com antecipação inteligente
    const v = (days / 30) * 1.6 + (split.c / 100) * 1.2;
    return Math.min(3.2, Math.max(0.4, v)).toFixed(1);
  }, [days, split.c]);

  const splitHours = useMemo(() => {
    return Math.round(8 + (revenue / 30000) * 0.6);
  }, [revenue]);

  // Chart heights: 12 months, antecipação automática vs inteligente
  const automMonths = useMemo(
    () => Array.from({ length: 12 }, (_, i) => 0.7 + Math.sin((i + revenue / 500000) * 1.2) * 0.18 + 0.1),
    [revenue]
  );
  const smartMonths = useMemo(
    () => Array.from({ length: 12 }, (_, i) => 0.20 + ((i % 4 === 0) ? 0.45 : 0) + Math.random() * 0.05),
    [days]
  );

  const cents = String(yearlyDiff % 100).padStart(2, "0");
  const intPart = fmtBRL(yearlyDiff);

  // WhatsApp context
  const waMsg = `Oi, fiz o diagnóstico no site com esses números: faturamento R$ ${fmtBRL(revenue)}/mês, crédito ${split.c}%, débito ${split.d}%, Pix ${split.p}%, recebimento D+${days}${hasSplit ? ", divido receita com sócios/fornecedores" : ""}. Quero o diagnóstico completo.`;

  // Bar comparison
  const marketH = 90;
  const veryH = Math.max(38, marketH - 12 - (revenue / 5000000) * 30 - split.c * 0.18);

  return (
    <section id="diagnostico" className="dark halo-magenta" style={{ overflow: "hidden" }}>
      <div className="container">
        <div className="diag-bridge">
          <span className="diag-bridge-dot"></span>
          <span>Tudo isso acontecendo agora no seu negócio? Mexa nos controles abaixo e veja.</span>
        </div>
        <SectionMeta label="DIAGNÓSTICO INTERATIVO" index="04" />
        <h2 className="display" style={{ maxWidth: "14ch" }}>
          <Reveal>Deixa eu olhar pra</Reveal>
          <br />
          <Reveal delay={0.1}>dentro do seu negócio.</Reveal>
        </h2>
        <p className="sub" style={{ maxWidth: 560, marginTop: 28, color: "rgba(255,255,255,0.72)", fontSize: 18, lineHeight: 1.5 }}>
          Mova os controles. A gente te mostra o que ninguém te contou ainda
          sobre o seu recebimento.
        </p>

        <div className="diag-wrap">
          {/* CONTROLS */}
          <div>
            {/* Revenue */}
            <div className="diag-control">
              <div className="label">
                <span>Faturamento mensal</span>
                <span className="value">
                  <span className="sml">R$</span>
                  {fmtBRL(revenue)}
                  <span className="sml" style={{ marginLeft: 8 }}>/ mês</span>
                </span>
              </div>
              <input
                type="range"
                className="diag-slider"
                min="30000"
                max="5000000"
                step="10000"
                value={revenue}
                onChange={e => setRevenue(parseInt(e.target.value))}
              />
            </div>

            {/* Composition */}
            <div className="diag-control">
              <div className="label">
                <span>Composição das suas vendas</span>
                <span className="value mono">100%</span>
              </div>
              <div className="diag-split">
                <div className="seg-c" style={{ width: `${split.c}%` }}></div>
                <div className="seg-d" style={{ width: `${split.d}%` }}></div>
                <div className="seg-p" style={{ width: `${split.p}%` }}></div>
              </div>
              <div className="diag-split-labels">
                <SplitInput label="CRÉDITO" value={split.c} onChange={v => updateSplit("c", v)} color="magenta" />
                <SplitInput label="DÉBITO" value={split.d} onChange={v => updateSplit("d", v)} color="petroleo" />
                <SplitInput label="PIX" value={split.p} onChange={v => updateSplit("p", v)} color="cromo" />
              </div>
            </div>

            {/* Days */}
            <div className="diag-control">
              <div className="label">
                <span>Seu prazo médio de recebimento</span>
                <span className="value mono">D+{days}</span>
              </div>
              <input
                type="range"
                className="diag-slider"
                min="1"
                max="30"
                step="1"
                value={days}
                onChange={e => setDays(parseInt(e.target.value))}
              />
              <div className="diag-hint">
                Quanto mais cedo você recebe sem critério, mais antecipação está pagando.
              </div>
            </div>

            {/* Split toggle */}
            <div
              className={"diag-toggle" + (hasSplit ? " on" : "")}
              onClick={() => setHasSplit(!hasSplit)}
              role="button"
              tabIndex={0}
              aria-label="Toggle: divide receita"
              aria-pressed={hasSplit}
              onKeyDown={(e) => e.key === "Enter" && setHasSplit(!hasSplit)}
            >
              <div className="switch"></div>
              <span className="txt">Você divide receita com sócios, fornecedores ou comissionados?</span>
            </div>
          </div>

          {/* VIZ CARDS */}
          <div className="diag-viz">
            {/* Taxa atual vs ideal */}
            <div className="diag-card">
              <div className="ck-title">Taxa <Slash /> diferença anual estimada</div>
              <div className="ck-viz">
                <div className="bars-2">
                  <div className="bar" style={{ height: `${marketH}px` }}>
                    <span className="cap">Mercado</span>
                  </div>
                  <div className="bar magenta" style={{ height: `${veryH}px` }}>
                    <span className="cap">VeryPay</span>
                  </div>
                </div>
              </div>
              <div>
                <div className="ck-mono">
                  <span className="rs">R$</span>
                  {intPart}
                  <span className="cents">,{cents}</span>
                </div>
                <div className="ck-label">Diferença estimada por ano para um perfil semelhante.</div>
                <div className="ck-note">// Estimativa baseada em perfis comparáveis</div>
              </div>
            </div>

            {/* Antecipação */}
            <div className="diag-card">
              <div className="ck-title">Antecipação <Slash /> inteligente vs automática</div>
              <div className="ck-viz">
                <div className="bars-12" style={{ height: 90 }}>
                  {automMonths.map((h, i) => (
                    <div
                      key={"a" + i}
                      className="bar"
                      style={{ height: `${h * 90}px` }}
                      title={`Automática mês ${i+1}`}
                    ></div>
                  ))}
                </div>
              </div>
              <div className="ck-viz" style={{ marginTop: -8, marginBottom: 12 }}>
                <div className="bars-12" style={{ height: 30 }}>
                  {smartMonths.map((h, i) => (
                    <div
                      key={"s" + i}
                      className="bar smart"
                      style={{ height: `${h * 30}px` }}
                    ></div>
                  ))}
                </div>
              </div>
              <div className="ck-label">
                Antecipação inteligente pode economizar até{" "}
                <span style={{ color: "var(--magenta-soft)", fontFamily: "var(--font-mono)" }}>
                  {antMonthlySaving}%
                </span>{" "}
                ao mês.
              </div>
            </div>

            {/* Split */}
            <div className={"diag-card" + (hasSplit ? "" : " muted")}>
              <div className="ck-title">Split <Slash /> manual vs automático</div>
              <div className="ck-viz">
                <SplitDots organized={hasSplit} />
              </div>
              <div className="ck-label">
                {hasSplit ? (
                  <>
                    Horas economizadas por mês com split automático:{" "}
                    <span style={{ color: "var(--magenta-soft)", fontFamily: "var(--font-mono)" }}>
                      ~{splitHours}h
                    </span>
                  </>
                ) : (
                  <span style={{ opacity: 0.7 }}>Não se aplica ao seu perfil hoje.</span>
                )}
              </div>
            </div>

            {/* Relatório */}
            <div className="diag-card">
              <div className="ck-title">Relatório <Slash /> 20 PDFs vs 1 painel</div>
              <div className="ck-viz">
                <div className="dashboard-viz">
                  <div className="pdfs">
                    {Array.from({ length: 12 }).map((_, i) => (
                      <div key={i} className="pdf"></div>
                    ))}
                  </div>
                  <div className="panel">
                    <div className="row"><span className="k">Receita</span><span className="v">+</span></div>
                    <div className="row"><span className="k">Custo</span><span className="v">↓</span></div>
                    <div className="row"><span className="k">Caixa</span><span className="v">●</span></div>
                    <div className="row"><span className="k">Próximo</span><span className="v">→</span></div>
                  </div>
                </div>
              </div>
              <div className="ck-label">1 painel substituiu 20 PDFs.</div>
            </div>
          </div>
        </div>

        {/* CTA */}
        <div className="diag-cta">
          <span className="dot-pulse"></span>
          <span className="txt">Pronto para o diagnóstico completo?</span>
          <a href={waLink(waMsg)} target="_blank" rel="noopener">
            Continuar no WhatsApp <span>→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

function SplitInput({ label, value, onChange, color }) {
  const colorMap = { magenta: "var(--magenta)", petroleo: "var(--petroleo-light)", cromo: "var(--cromo)" };
  return (
    <div className="item">
      <span style={{ color: colorMap[color] }}>{label}</span>
      <span className="v"><span className="mono">{value}%</span></span>
      <div style={{ display: "flex", gap: 4 }}>
        <button onClick={() => onChange(value - 5)} aria-label="Diminuir">−</button>
        <button onClick={() => onChange(value + 5)} aria-label="Aumentar">+</button>
      </div>
    </div>
  );
}

function SplitDots({ organized }) {
  // Generate fixed pseudo-random offsets for chaos mode
  const offsets = useMemo(() => {
    return Array.from({ length: 12 }, (_, i) => ({
      rx: (Math.sin(i * 2.3) * 14).toFixed(1),
      ry: (Math.cos(i * 1.7) * 12).toFixed(1)
    }));
  }, []);
  return (
    <div className="split-circles">
      <div className="col chaos" style={{ display: organized ? "none" : "grid" }}>
        {offsets.map((o, i) => (
          <span
            key={i}
            className="dot"
            style={{ "--rx": o.rx, "--ry": o.ry }}
          ></span>
        ))}
      </div>
      <div className="col" style={{ display: organized ? "grid" : "none", inset: 0 }}>
        {offsets.map((o, i) => (
          <span
            key={i}
            className="dot"
            style={{ background: i % 4 === 0 ? "var(--magenta)" : (i % 4 === 1 ? "var(--petroleo-light)" : "rgba(255,255,255,0.5)") }}
          ></span>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Diagnostic });