// ============================================================
// DIAGNÓSTICO INTERATIVO — qualitativo, sem R$, foco no caminho
// O resultado é uma faixa estimada + o valor da gestão da Apta
// ============================================================

function Toggle({ on, onChange, children }) {
  return (
    <button
      type="button"
      onClick={() => onChange(!on)}
      className={`diag-toggle ${on ? 'on' : ''}`}
    >
      <span className="diag-toggle-track">
        <span className="diag-toggle-thumb"></span>
      </span>
      <span className="diag-toggle-label">{children}</span>
    </button>
  );
}

const SETUPS = [
  {
    name: 'Setup 1',
    title: 'A base que te faz aparecer',
    range: [40, 80],
    desc: 'Site que converte + Google Meu Negócio + Google Ads. O essencial pra sair da invisibilidade e começar a receber lead.',
    items: ['Site / landing page', 'Google Meu Negócio', 'Google Ads'],
    tone: 'gold',
  },
  {
    name: 'Setup 2',
    title: 'Mais canais, atendimento organizado',
    range: [90, 160],
    desc: 'Tudo do Setup 1 + Meta Ads pra ampliar alcance + Kommo CRM pra nenhum lead esfriar no caminho.',
    items: ['Tudo do Setup 1', 'Meta Ads', 'Kommo CRM'],
    tone: 'coral',
  },
  {
    name: 'Setup 3',
    title: 'Operação inteligente, no automático',
    range: [180, 300],
    desc: 'Tudo do Setup 2 + automações n8n + IA atendendo e qualificando 24/7. Cresce sem virar caos nem depender de você.',
    items: ['Tudo do Setup 2', 'Automações n8n', 'IA + atendimento', 'Visão completa do negócio'],
    tone: 'sage',
  },
];

function Diagnostic() {
  // O que o negócio já tem hoje (qualitativo, sem valores)
  const [hasSite, setHasSite] = React.useState(false);
  const [hasGMN, setHasGMN] = React.useState(false);
  const [hasAds, setHasAds] = React.useState(false);
  const [hasMeta, setHasMeta] = React.useState(false);
  const [hasCRM, setHasCRM] = React.useState(false);
  const [hasAuto, setHasAuto] = React.useState(false);

  const setup1Ok = hasSite && hasGMN && hasAds;
  const setup2Ok = setup1Ok && hasMeta && hasCRM;
  const setup3Ok = setup2Ok && hasAuto;

  // Qual setup recomendar: o primeiro incompleto
  let recIdx;
  if (!setup1Ok) recIdx = 0;
  else if (!setup2Ok) recIdx = 1;
  else recIdx = 2;

  const rec = SETUPS[recIdx];
  const jaCompleto = setup3Ok;

  // Faixa de crescimento estimada do setup recomendado (anima o piso da faixa)
  const target = rec.range[0];
  const [displayed, setDisplayed] = React.useState(target);
  React.useEffect(() => {
    const start = displayed, end = target, dur = 600, t0 = performance.now();
    let raf;
    const step = (t) => {
      const k = Math.min(1, (t - t0) / dur);
      const eased = 1 - Math.pow(1 - k, 3);
      setDisplayed(Math.round(start + (end - start) * eased));
      if (k < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [target]);

  // O que ainda falta ativar (lista as peças desligadas, em ordem de setup)
  const pecas = [
    { on: hasSite, label: 'Site / landing page', why: 'sem destino, o anúncio queima verba e não mede nada.' },
    { on: hasGMN, label: 'Google Meu Negócio', why: '70% das buscas locais no celular param aqui. Sem ficha, o lead é do concorrente.' },
    { on: hasAds, label: 'Google Ads', why: 'é onde quem já quer comprar te encontra na hora exata da busca.' },
    { on: hasMeta, label: 'Meta Ads', why: 'amplia o alcance e aquece quem ainda não te conhece.' },
    { on: hasCRM, label: 'Kommo CRM', why: 'sem acompanhamento, vendedor esquece e o lead esfria.' },
    { on: hasAuto, label: 'Automação + IA', why: 'responde, qualifica e organiza 24/7 — sem depender de você.' },
  ];
  const faltam = pecas.filter(p => !p.on);

  return (
    <section className="section" id="diagnostico" data-screen-label="02 Diagnóstico">
      <div className="container">

        <div className="reveal" style={{ maxWidth: 820 }}>
          <span className="eyebrow">02 · diagnóstico interativo</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            Onde seu negócio<br />pode <em>crescer mais?</em>
          </h2>
          <p className="lead" style={{ marginTop: 22 }}>
            Marque o que você já tem rodando hoje. A gente mostra qual o próximo passo
            e a faixa de crescimento que ele costuma destravar — em percentual, nunca em R$,
            porque cada negócio tem seu próprio ticket.
          </p>
        </div>

        <div className="diag-grid reveal">

          {/* CONTROLES — 3 blocos, um por setup */}
          <div className="diag-controls">
            {[
              {
                setup: SETUPS[0], ok: setup1Ok,
                toggles: [
                  { on: hasSite, set: setHasSite, label: 'Site ou landing page', small: 'que mede e qualifica o lead' },
                  { on: hasGMN, set: setHasGMN, label: 'Google Meu Negócio', small: 'ficha ativa, com fotos e reviews' },
                  { on: hasAds, set: setHasAds, label: 'Google Ads', small: 'anúncio na busca de quem quer comprar' },
                ],
              },
              {
                setup: SETUPS[1], ok: setup2Ok,
                toggles: [
                  { on: hasMeta, set: setHasMeta, label: 'Meta Ads', small: 'Instagram + Facebook pra ampliar alcance' },
                  { on: hasCRM, set: setHasCRM, label: 'CRM / atendimento organizado', small: 'cada lead acompanhado, ninguém esquecido' },
                ],
              },
              {
                setup: SETUPS[2], ok: setup3Ok,
                toggles: [
                  { on: hasAuto, set: setHasAuto, label: 'Automação + IA + BI Operacional', small: 'responde, qualifica e mostra os números 24/7' },
                ],
              },
            ].map((b, i) => {
              const isNext = !jaCompleto && i === recIdx;
              const status = b.ok ? 'done' : isNext ? 'next' : 'pending';
              const statusLabel = b.ok ? '✓ completo' : isNext ? '← próximo passo' : 'ainda não';
              return (
                <div key={b.setup.name} className={`diag-group diag-setup-block tone-${b.setup.tone} status-${status}`}>
                  <div className="diag-block-head">
                    <span className="diag-group-title">{b.setup.name}</span>
                    <span className={`diag-block-status st-${status}`}>{statusLabel}</span>
                  </div>
                  <div className="diag-block-growth">+{b.setup.range[0]}–{b.setup.range[1]}%<span> faixa típica de crescimento</span></div>
                  <div className="diag-toggles">
                    {b.toggles.map((t) => (
                      <Toggle key={t.label} on={t.on} onChange={t.set}>
                        <strong>{t.label}</strong>
                        <small>{t.small}</small>
                      </Toggle>
                    ))}
                  </div>
                </div>
              );
            })}

            <div className="diag-formula">
              <span style={{ color: 'var(--olive)' }}>{`// `}</span>
              as faixas são a média dos nossos clientes — não uma promessa.<br />
              <span style={{ color: 'var(--olive)' }}>{`// `}</span>
              o resultado real depende do seu nicho, da sua oferta e da gestão contínua.
            </div>
          </div>

          {/* RESULTADO */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>

            <div className="diag-compare">

              {jaCompleto ? (
                <div className="diag-gain">
                  <div className="dg-label">operação completa ✓</div>
                  <div className="dg-num" style={{ fontSize: 'clamp(34px,4vw,52px)' }}>
                    Tá <em style={{ fontStyle: 'italic', color: 'var(--olive)' }}>redondo</em>.
                  </div>
                  <div className="dg-sub">Você já tem os três setups. Agora é otimizar e escalar — e é exatamente aí que a gestão contínua faz diferença.</div>
                </div>
              ) : (
                <div className="diag-gain">
                  <div className="dg-label">potencial estimado ativando o {rec.name}</div>
                  <div className="dg-num">
                    <span className="pre" style={{ color: 'var(--olive)' }}>+</span>{displayed}<span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: '0.45em', color: 'var(--ink-soft)' }}> a +{rec.range[1]}%</span>
                  </div>
                  <div className="dg-sub">faixa de crescimento em clientes novos que esse passo costuma destravar</div>
                  <div className="dg-note">
                    <span style={{ color: 'var(--olive)' }}>{`// `}</span>varia por nicho, ticket médio e gestão. São médias reais dos nossos clientes ativos.
                  </div>
                </div>
              )}

              {/* Callout: o valor está na gestão, não no número */}
              <div className="diag-value">
                <div className="dv-mark">A Apta</div>
                <p>
                  O número não vem de um setup mágico — vem de <strong>alguém cuidando disso todo dia</strong>:
                  ajustando campanha, respondendo lead, lendo o que funciona e corrigindo o que não funciona.
                  É isso que a gente faz.
                </p>
              </div>

              <div className="diag-cta">
                <a className="btn btn-primary" href="#contato">
                  Quero ativar o {jaCompleto ? 'próximo nível' : rec.name} <Icon.arrow />
                </a>
                <a className="btn btn-outline" href="https://wa.me/5516997106682" target="_blank" rel="noreferrer">
                  <Icon.whatsapp /> WhatsApp
                </a>
              </div>
            </div>

            {/* O que ainda falta */}
            {faltam.length > 0 && (
              <div className="diag-narrative">
                <div className="diag-narrative-head">
                  <span className="eyebrow">o que ainda falta ativar</span>
                  <span className="diag-narrative-count">{faltam.length} peça{faltam.length === 1 ? '' : 's'}</span>
                </div>
                <div className="diag-narrative-list">
                  {faltam.map((p, i) => (
                    <div className="diag-narr-item sev-medium" key={i}>
                      <div className="dn-marker">+</div>
                      <div className="dn-body">
                        <div className="dn-title">{p.label}</div>
                        <div className="dn-text">{p.why}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* Setup track — 3 níveis com recomendação destacada */}
            <div className="diag-setups">
              <div className="ds-head">
                <span className="eyebrow">caminho sugerido</span>
                <span className="ds-meta">3 setups · ative no seu ritmo</span>
              </div>
              <div className="ds-track">
                {SETUPS.map((s, i) => {
                  const isCurrent = !jaCompleto && i === recIdx;
                  const isPast = i < recIdx || (jaCompleto);
                  return (
                    <div key={s.name} className={`ds-item tone-${s.tone} ${isCurrent ? 'is-current' : ''} ${isPast ? 'is-past' : ''}`}>
                      <div className="ds-item-head">
                        <span className="ds-num">{s.name}</span>
                        {isCurrent && <span className="ds-flag">← seu próximo passo</span>}
                        {isPast && <span className="ds-checked">✓ você já tem</span>}
                      </div>
                      <div className="ds-item-title">{s.title}</div>
                      <div className="ds-item-growth">+{s.range[0]}–{s.range[1]}%<span> faixa típica</span></div>
                      <ul className="ds-item-list">
                        {s.items.map(it => <li key={it}>{it}</li>)}
                      </ul>
                      {isCurrent && (
                        <a className="btn btn-primary ds-cta" href="#contato">
                          Quero o {s.name} <Icon.arrow />
                        </a>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>

          </div>

        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Diagnostic });