// Result screen — reescrito para clareza e honestidade dos dados

const CALENDLY_URL = "https://calendly.com/shsquads/discovery-call";

// ---------- Modal de agendamento inline ----------
function SchedModal({ open, onClose, form }) {
  React.useEffect(() => {
    if (!open) return;
    const h = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [open, onClose]);

  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  if (!open) return null;

  const name  = encodeURIComponent(form.nome    || "");
  const email = encodeURIComponent(form.email   || "");
  const src   = `${CALENDLY_URL}?name=${name}&email=${email}&hide_gdpr_banner=1&primary_color=00a55e`;

  const onBackdrop = (e) => { if (e.target === e.currentTarget) onClose(); };

  return (
    <div className="sched-modal-backdrop" onClick={onBackdrop}>
      <div className="sched-modal">
        <div className="sched-modal-head">
          <div>
            <div className="sched-modal-title">Agendar conversa</div>
            <div className="sched-modal-sub">30 min · Diagnóstico personalizado · Sem compromisso</div>
          </div>
          <button className="sched-modal-close" onClick={onClose} aria-label="Fechar">
            <Icon name="x" size={18}/>
          </button>
        </div>
        <div className="sched-modal-body">
          <iframe
            src={src}
            width="100%" height="100%"
            frameBorder="0"
            title="Agendar conversa SH Squads"
            allow="camera; microphone"
          />
        </div>
      </div>
    </div>
  );
}

function Confetti() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    const dpr = window.devicePixelRatio || 1;
    const resize = () => {
      canvas.width = window.innerWidth * dpr;
      canvas.height = window.innerHeight * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };
    resize();
    window.addEventListener("resize", resize);
    const W = () => window.innerWidth, H = () => window.innerHeight;
    const colors = ["#00E887","#33EFA0","#1AFFA1","#00C772"];
    const particles = Array.from({length:90}, () => ({
      x: W()/2 + (Math.random()-.5)*200,
      y: H()*.35 + (Math.random()-.5)*30,
      vx: (Math.random()-.5)*7,
      vy: -Math.random()*8-3,
      g: .22+Math.random()*.1,
      r: 3+Math.random()*4,
      rot: Math.random()*Math.PI*2,
      vrot: (Math.random()-.5)*.2,
      color: colors[Math.floor(Math.random()*colors.length)],
      life: 0, max: 90+Math.random()*40,
    }));
    let raf;
    const tick = () => {
      ctx.clearRect(0,0,W(),H());
      let alive = false;
      for (const p of particles) {
        if (p.life > p.max) continue;
        alive = true;
        p.x+=p.vx; p.y+=p.vy; p.vy+=p.g; p.rot+=p.vrot; p.life++;
        const alpha = Math.max(0, 1-p.life/p.max);
        ctx.save(); ctx.translate(p.x,p.y); ctx.rotate(p.rot);
        ctx.fillStyle=p.color; ctx.globalAlpha=alpha*.9;
        ctx.fillRect(-p.r,-p.r*.4,p.r*2,p.r*.8);
        ctx.restore();
      }
      if (alive) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => { cancelAnimationFrame(raf); window.removeEventListener("resize",resize); };
  }, []);
  return <canvas ref={ref} className="confetti-canvas"/>;
}

function DonutChart({ data, totalLabel }) {
  const [active, setActive] = React.useState(null); // index ou null
  const total = data.reduce((s,d) => s+d.value, 0);
  const size=220, stroke=30, r=(size-stroke)/2, cx=size/2, cy=size/2, C=2*Math.PI*r;

  const hov = active !== null ? data[active] : null;
  const centerPct  = hov ? ((hov.value/total)*100).toFixed(0)+"% do total" : "TOTAL/ANO";
  const centerVal  = hov ? fmtBRL(hov.value,{short:true}) : totalLabel;
  const centerCol  = hov ? hov.color : "var(--fg-1)";
  // Nome curto para caber no centro (máx ~18 chars)
  const centerName = hov ? (hov.name.length > 18 ? hov.name.slice(0,16)+"…" : hov.name) : null;

  let acc=0;
  return (
    <div className="donut-wrap">
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}
        onMouseLeave={() => setActive(null)} style={{overflow:"visible"}}>
        <circle cx={cx} cy={cy} r={r} stroke="rgba(10,24,16,.07)" strokeWidth={stroke} fill="none"/>
        {data.map((d,i) => {
          const frac = total>0 ? d.value/total : 0;
          const len=frac*C, gap=C-len, off=-acc*C;
          acc+=frac;
          const isActive = active === i;
          return <circle key={d.id} cx={cx} cy={cy} r={r}
            stroke={d.color} strokeWidth={isActive ? stroke+5 : stroke} fill="none"
            strokeDasharray={`${len} ${gap}`} strokeDashoffset={off}
            transform={`rotate(-90 ${cx} ${cy})`}
            style={{
              transition:"stroke-dasharray .6s var(--ease-standard), stroke-width .18s",
              cursor:"pointer",
              filter: isActive ? "brightness(1.12)" : "none",
            }}
            onMouseEnter={() => setActive(i)}
            onClick={() => setActive(active === i ? null : i)}
          />;
        })}
        {/* Centro dinâmico */}
        {centerName && (
          <text x={cx} y={cy-20} textAnchor="middle"
            style={{font:"500 9px var(--font-mono)",letterSpacing:".1em",textTransform:"uppercase",fill:"var(--fg-3)"}}>
            {centerName}
          </text>
        )}
        <text x={cx} y={centerName ? cy-4 : cy-6} textAnchor="middle"
          style={{font:"500 10px var(--font-mono)",letterSpacing:".14em",textTransform:"uppercase",fill:"var(--fg-3)"}}>
          {centerPct}
        </text>
        <text x={cx} y={centerName ? cy+18 : cy+18} textAnchor="middle"
          style={{font:"700 22px var(--font-mono)",fill:centerCol,letterSpacing:"-0.02em",
            transition:"fill .18s"}}>
          {centerVal}
        </text>
      </svg>
      <div className="donut-legend">
        {data.map((d,i) => (
          <div
            className={"row" + (active === i ? " active" : "")}
            key={d.id}
            onClick={() => setActive(active === i ? null : i)}
            style={{cursor:"pointer", userSelect:"none"}}
          >
            <div className="left">
              <span className="sw" style={{background:d.color, transition:"transform .15s", transform: active===i ? "scale(1.35)" : "scale(1)"}}/>
              <span className="nm">{d.name}</span>
            </div>
            <div>
              <span className="val">{fmtBRL(d.value,{short:true})}</span>
              <span className="pct">{total>0?((d.value/total)*100).toFixed(0):0}%</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function BarChart({ bars }) {
  const max = Math.max(...bars.map(b => b.value), 1);
  return (
    <div className="bar-chart">
      {[0.25,0.5,0.75,1].map((p,i) => (
        <div key={i} className="gridline" style={{bottom:(32+(248-32)*p)+"px"}}/>
      ))}
      {bars.map(b => (
        <div className="bar-col" key={b.year}>
          <div className="bar" style={{height:((b.value/max)*220)+"px",background:b.color,boxShadow:"0 0 24px "+b.glow}}>
            <div className="lbl-top">{fmtBRL(b.value, {short:true})}</div>
          </div>
          <div className="x-label">{b.year}</div>
        </div>
      ))}
    </div>
  );
}

// ---------- Insights por segmento ----------
const SEGMENT_INSIGHTS = {
  marketplace: {
    headline: "Marketplaces têm o melhor encaixe para embedded finance",
    body: "Você já tem o fluxo de dinheiro — compradores pagando, vendedores recebendo. A camada financeira captura uma fatia desse fluxo sem aumentar CAC. A base transacional existente é o ativo mais valioso para ativar serviços financeiros com alta adoção.",
    // Ordem de prioridade para o segmento — independente do que foi selecionado
    priority: ["credito", "maquininha", "antecipacao", "conta", "cartao"],
    tips: {
      maquininha:  "Cada venda no marketplace é uma transação que gera MDR. Com gateway próprio, esse spread volta para você em vez de ir para a adquirente.",
      antecipacao: "Antecipação de recebíveis é o produto mais pedido por vendedores — e o de maior conversão imediata. Seus sellers recebem antes, você captura a taxa.",
      conta:       "Conta digital para vendedores cria lock-in forte: quem recebe na sua conta dificilmente migra de plataforma.",
      credito:     "Crediário e carnê digital são produtos naturais para marketplaces — você tem o histórico de vendas como garantia. Capital de giro para sellers com risco calculado pela própria plataforma.",
      cartao:      "Cartão co-branded aumenta ticket médio e cria hábito de compra dentro do marketplace.",
      cambio:      "Para marketplaces com sellers ou compradores internacionais, o spread cambial é receita direta em cada operação.",
    },
  },
  saas: {
    headline: "SaaS que embute financeiro multiplica LTV sem aumentar CAC",
    body: "Você já tem recorrência e previsibilidade. Adicionar serviços financeiros ao seu SaaS cria uma segunda linha de receita sobre a mesma base — e aumenta o custo de troca para o cliente. Quem movimenta dinheiro dentro da sua plataforma dificilmente cancela.",
    priority: ["conta", "credito", "cartao", "antecipacao", "maquininha"],
    tips: {
      conta:       "Conta digital integrada ao SaaS é o maior fator de retenção: o cliente que paga fornecedores pelo seu sistema não sai.",
      cartao:      "Cartão corporativo com sua marca cria dependência positiva — o usuário usa no dia a dia, não só no software.",
      credito:     "Capital de giro usando dados do próprio SaaS como score — diferencial competitivo real. Você conhece o cliente melhor que qualquer banco.",
      maquininha:  "Para SaaS com componente de vendas físicas, gateway integrado elimina integrações externas e captura spread.",
      antecipacao: "Antecipar faturas emitidas via seu SaaS é natural — o risco já está no dado da plataforma.",
      cambio:      "SaaS com clientes ou fornecedores internacionais pode capturar spread cambial em cada remessa.",
    },
  },
  varejo: {
    headline: "No varejo, o dinheiro que sai pela adquirente pode ficar na sua operação",
    body: "Varejo tem volume alto e margem apertada. Cada ponto percentual de MDR que você recupera é resultado direto — sem precisar vender mais. Com crediário próprio, você ainda financia a compra e captura os juros que hoje vão para o banco ou para a operadora.",
    priority: ["maquininha", "credito", "antecipacao", "cartao", "conta"],
    tips: {
      maquininha:  "Recuperar o MDR pago hoje para a adquirente é o ROI mais imediato. Quanto você paga de taxa por mês? Esse valor pode ser receita.",
      credito:     "Crediário próprio e carnê digital — você financia a compra do seu cliente e fica com os juros. Conversão maior que cartão de crédito em muitos tickets.",
      antecipacao: "Antecipação de recebíveis própria é capital de giro com custo baixo — você deixa de pagar para o banco.",
      conta:       "Conta digital para funcionários ou fornecedores reduz custo operacional e cria nova linha de receita.",
      cartao:      "Cartão fidelidade com cashback captura recorrência e aumenta ticket médio no PDV.",
      cambio:      "Para importadores ou e-commerce com fornecedores internacionais, câmbio próprio reduz custo direto.",
    },
  },
  educacao: {
    headline: "Educação e saúde têm o relacionamento mais longo — e o maior potencial de crédito",
    body: "Nesse segmento, o cliente já confia em você com algo valioso — saúde ou educação. Serviços financeiros nesse contexto têm aceitação alta porque a relação já existe. Financiamento de cursos, planos parcelados e conta para alunos ou pacientes são extensões naturais.",
    priority: ["credito", "conta", "maquininha", "cartao", "antecipacao"],
    tips: {
      credito:     "Financiamento próprio de mensalidades ou planos: você elimina intermediários, reduz inadimplência e aumenta a conversão de matrículas com condições melhores que o mercado.",
      conta:       "Conta digital para alunos ou pacientes cria ecossistema — bolsas, reembolsos e pagamentos dentro da sua plataforma.",
      cartao:      "Cartão com sua marca usado para pagar serviços ou na sua loja aumenta LTV e cria hábito recorrente.",
      maquininha:  "Gateway próprio para pagamentos de planos e mensalidades reduz custo de processamento e elimina o MDR externo.",
      antecipacao: "Antecipação de recebíveis de mensalidades parceladas melhora o fluxo de caixa sem depender de crédito bancário.",
      cambio:      "Para instituições com alunos ou pacientes internacionais, câmbio próprio simplifica remessas e gera receita.",
    },
  },
  fintech: {
    headline: "Você já tem a estrutura — a pergunta é quais frentes ainda não foram ativadas",
    body: "Fintechs têm a vantagem de já operar no ambiente regulado. Cada produto novo é receita incremental sobre a mesma base ativada, sem custo de aquisição adicional. O movimento natural é ampliar o wallet share: mais produtos por cliente, não mais clientes por produto.",
    priority: ["credito", "cambio", "antecipacao", "cartao", "maquininha"],
    tips: {
      credito:     "Com dados transacionais próprios, seu score de crédito é mais preciso que qualquer bureau externo — e o spread fica com você.",
      cambio:      "Câmbio é a frente com menor competição interna para fintechs de pagamentos — spread alto por operação e demanda crescente.",
      antecipacao: "Antecipação sobre recebíveis da sua carteira é a forma mais segura de alavancar sem risco de crédito externo.",
      maquininha:  "Sub-adquirência própria fecha o ciclo: você emite, processa e recebe — sem intermediário no MDR.",
      conta:       "Expandir funcionalidades da conta (investimentos, seguros, benefícios) aumenta ARPU sem precisar de novo produto.",
      cartao:      "Cartão adicional para PJ ou dependente aumenta o volume processado e o interchange sem novo cliente.",
    },
  },
  outro: {
    headline: "Qualquer negócio com base recorrente tem potencial de embedded finance",
    body: "O primeiro passo é mapear onde o dinheiro dos seus clientes já flui — e posicionar sua empresa nesse caminho. Negócios com relacionamento contínuo têm adoção de serviços financeiros muito acima da média de mercado porque a confiança já existe.",
    priority: ["maquininha", "conta", "credito", "antecipacao", "cartao"],
    tips: {
      maquininha:  "Se você já processa pagamentos, gateway próprio é o retorno mais imediato — recupera MDR desde o primeiro mês.",
      conta:       "Conta digital faz sentido para qualquer base de clientes recorrentes — cria dependência positiva com o serviço.",
      credito:     "Com histórico de relacionamento, você tem dados para originar crédito com qualidade acima do mercado.",
      antecipacao: "Antecipação de recebíveis é o produto mais fácil de explicar para o cliente — e o de maior conversão inicial.",
      cartao:      "Cartão com sua marca transforma clientes em embaixadores e cria receita passiva por interchange.",
      cambio:      "Se você tem clientes ou operações internacionais, câmbio próprio é receita que você hoje deixa no banco.",
    },
  },
};

function SHInsights({ form, adjItems, selectedCount }) {
  const seg = form.segmento || 'outro';
  const insight = SEGMENT_INSIGHTS[seg] || SEGMENT_INSIGHTS['outro'];
  const selectedIds = new Set(adjItems.map(it => it.id));

  // Mostra os top produtos por prioridade do segmento (máx 4)
  // Mistura selecionados e sugeridos, mantendo a ordem de prioridade
  const bulletIds = insight.priority.slice(0, 4);

  return (
    <section className="section" style={{paddingTop:0}}>
      <div className="container">
        <div className="sh-insights">
          <div className="sh-insights-head">
            <span className="eyebrow">Análise SH · {SEGMENT_LABEL[seg] || "Seu segmento"}</span>
            <h3>{insight.headline}</h3>
            <p>{insight.body}</p>
          </div>

          <div className="sh-insights-bullets">
            {bulletIds.map(pid => {
              const tip = insight.tips[pid];
              const product = PRODUCTS.find(p => p.id === pid);
              if (!tip || !product) return null;
              const isSelected = selectedIds.has(pid);
              return (
                <div className={"sh-insight-bullet" + (isSelected ? " is-active" : " is-suggested")} key={pid}>
                  <div className="sh-insight-icon">
                    <Icon name={product.icon} size={16}/>
                  </div>
                  <div className="sh-insight-text">
                    <div className="sh-insight-prod-row">
                      <span className="sh-insight-prod">{product.name}</span>
                      {isSelected
                        ? <span className="sh-badge sh-badge--active"><Icon name="check" size={9} stroke={2.8}/> Selecionado</span>
                        : <span className="sh-badge sh-badge--suggested">Sugerido</span>
                      }
                    </div>
                    <div className="sh-insight-tip">{tip}</div>
                  </div>
                </div>
              );
            })}
          </div>

          {selectedCount < 6 && (
            <div className="sh-insights-footer">
              <span className="sh-insights-nudge">
                Você explorou {selectedCount} de 6 frentes disponíveis para {SEGMENT_LABEL[seg] || "seu segmento"}.
                Um consultor SH mapeia as que têm maior fit com sua operação.
              </span>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// Calcula potencial máximo (todos os 6 produtos)
function calcMax(form, result) {
  const allProducts = PRODUCTS.map(p => p.id);
  const weightSum = allProducts.reduce((s, pid) => s + (PRODUCT_WEIGHTS[pid]||0), 0);
  return result.adoptingClients * (BASE_PER_CLIENT + weightSum);
}

function ResultScreen({ form, result, onRestart, onSchedule, leadSent }) {
  const [copied, setCopied] = React.useState(false);
  const [schedOpen, setSchedOpen] = React.useState(false);
  // Slider de adoção — default 70 (arredondado do 70.127%)
  const [sliderRate, setSliderRate] = React.useState(70);
  // Produtos selecionados — editável diretamente no resultado
  const [selectedProducts, setSelectedProducts] = React.useState(form.produtos);

  const toggleProduct = (pid) => {
    setSelectedProducts(prev => {
      const has = prev.includes(pid);
      if (has && prev.length === 1) return prev; // mínimo 1
      return has ? prev.filter(x => x !== pid) : [...prev, pid];
    });
  };

  const palette = ["#00E887","#1AFFA1","#00C772","#00A55E","#33EFA0","#007A4A"];
  const selectedCount = selectedProducts.length;

  // Valores ajustados pelo slider + produtos selecionados
  const adjAdopting = result.clientes * (sliderRate / 100);
  // ARPU recalculado com os produtos atualmente selecionados
  const adjWeightSum = selectedProducts.reduce((s, pid) => s + (PRODUCT_WEIGHTS[pid]||0), 0);
  const adjBasePerClient = BASE_PER_CLIENT + adjWeightSum;
  const adjTotal    = adjAdopting * adjBasePerClient;
  const adjItems    = selectedProducts.map(pid => {
    const n = selectedCount || 1;
    const w = (PRODUCT_WEIGHTS[pid] || 0) + BASE_PER_CLIENT / n;
    return { id: pid, product: PRODUCTS.find(p => p.id === pid), value: adjAdopting * w };
  }).filter(x => x.product).sort((a,b) => b.value - a.value);

  // Potencial máximo com slider atual
  const allWeights   = PRODUCTS.reduce((s,p) => s + (PRODUCT_WEIGHTS[p.id]||0), 0);
  const maxPotential = adjAdopting * (BASE_PER_CLIENT + allWeights);
  const unexplored   = maxPotential - adjTotal;

  // Curva de adoção — ilustrativa
  const bars = [
    { year: "Ano 1", value: adjTotal * 0.40, color: "#33EFA0", glow: "rgba(0,232,135,.18)" },
    { year: "Ano 2", value: adjTotal * 0.75, color: "#00E887", glow: "rgba(0,232,135,.32)" },
    { year: "Ano 3", value: adjTotal * 1.00, color: "#00A55E", glow: "rgba(0,232,135,.22)" },
  ];

  const copyLink = () => {
    navigator.clipboard?.writeText(window.location.href);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const shareText = encodeURIComponent(
    `Calculei o potencial da minha fintech na calculadora da SH Squads: ${fmtBRL(result.total,{short:true})}/ano. Calcule o seu:`
  );
  const url = encodeURIComponent(window.location.href);

  // Label do range de clientes selecionado
  const clientesLabel = CLIENTES_LABEL[form.clientes] || form.clientes;

  return (
    <React.Fragment>
      <Confetti/>
      <Nav onCalc={onRestart}/>

      {/* ── HERO ── */}
      <section className="result-hero">
        <div className="hero-glow"/>
        <div className="container">
          <div className="eyebrow center">
            Diagnóstico · {form.empresa || "Sua empresa"}{form.segmento && form.segmento !== 'outro' ? ` · ${SEGMENT_LABEL[form.segmento]}` : ""}
          </div>
          <h1>Sua fintech tem potencial de</h1>
          <div className="bignum">
            <span className="pre">R$</span>
            {adjTotal.toLocaleString("pt-BR", {minimumFractionDigits:2, maximumFractionDigits:2})}
          </div>
          <div className="subline">
            em receita financeira anual
            <span className="subline-sep">·</span>
            <span className="subline-month">{fmtBRL(adjTotal/12, {short:true})}/mês em média</span>
          </div>
          <div className="meta-line">
            <span>~{fmtNum(result.clientes)} clientes estimados</span>
            <span className="sep">·</span>
            <span>{fmtNum(Math.round(adjAdopting))} acionados</span>
            <span className="sep">·</span>
            <span>{selectedCount} {selectedCount===1?"produto":"produtos"} de 6</span>
          </div>

          {/* Slider de taxa de adoção */}
          <div className="result-slider-wrap">
            <div className="result-slider-head">
              <span className="result-slider-label">Taxa de adoção</span>
              <span className="result-slider-val">{sliderRate}%</span>
            </div>
            <input
              type="range" min="10" max="100" step="1"
              value={sliderRate}
              onChange={e => setSliderRate(Number(e.target.value))}
              className="result-slider"
              style={{"--pct": ((sliderRate-10)/90*100)+"%"}}
            />
            <div className="result-slider-hints">
              <span>10%</span>
              {sliderRate !== 70 ? (
                <button className="result-slider-reset" onClick={() => setSliderRate(70)}>
                  ↺ restaurar base (70%)
                </button>
              ) : (
                <span className="result-slider-hint-ref">base estimada</span>
              )}
              <span>100%</span>
            </div>
          </div>

          {/* Cards de produto — toggle direto no resultado */}
          <div className="result-prod-toggle-grid">
            {PRODUCTS.map(p => {
              const isOn = selectedProducts.includes(p.id);
              const isLast = isOn && selectedCount === 1;
              return (
                <button
                  key={p.id}
                  className={"result-prod-toggle" + (isOn ? " on" : " off")}
                  onClick={() => toggleProduct(p.id)}
                  disabled={isLast}
                >
                  <div className="rpt-icon"><Icon name={p.icon} size={15}/></div>
                  <div className="rpt-name">{p.name}</div>
                  <div className="rpt-check">
                    {isOn
                      ? <Icon name="check" size={10} stroke={2.8}/>
                      : <span className="rpt-plus">+</span>
                    }
                  </div>
                </button>
              );
            })}
          </div>
        </div>
      </section>

      {/* ── COMO FOI CALCULADO ── */}
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <div className="section-head" style={{marginBottom:32}}>
            <span className="eyebrow center">Composição</span>
            <h2>Como chegamos <span className="hl">nesse número</span></h2>
          </div>

          {/* Cards de resumo */}
          <div className="result-summary-cards">
            <div className="result-summary-card">
              <div className="result-summary-label">ARPU</div>
              <div className="result-summary-val">{fmtBRL(adjBasePerClient, {fractionDigits:2})}</div>
              <div className="result-summary-sub">receita média por cliente / ano</div>
            </div>
            <div className="result-summary-card">
              <div className="result-summary-label">Faixa de clientes</div>
              <div className="result-summary-val">{clientesLabel}</div>
              <div className="result-summary-sub">estimativa de {fmtNum(result.clientes)} clientes</div>
            </div>
            <div className="result-summary-card accent">
              <div className="result-summary-label">Clientes acionados</div>
              <div className="result-summary-val">{fmtNum(Math.round(adjAdopting))}</div>
              <div className="result-summary-sub">{sliderRate}% de adoção</div>
            </div>
          </div>

          {/* Cards de produto */}
          {adjItems.length > 0 && (
            <div className="result-prod-grid" style={{marginTop:32}}>
              {adjItems.map((it, i) => (
                <div className="result-prod" key={it.id}>
                  <div className="name">
                    <span style={{width:8,height:8,borderRadius:2,background:palette[i%palette.length],display:"inline-block",marginRight:6}}/>
                    {it.product.name}
                  </div>
                  <div className="bignum">
                    <span className="pre">R$</span>
                    {it.value.toLocaleString("pt-BR",{minimumFractionDigits:2,maximumFractionDigits:2})}
                  </div>
                  <div className="per">
                    por ano · {fmtBRL(it.value/12,{short:true})}/mês
                    {selectedCount > 1 && (
                      <span className="per-share">{adjTotal>0 ? ((it.value/adjTotal)*100).toFixed(0) : 0}% do total</span>
                    )}
                  </div>
                  <div className="filete"/>
                  <div className="body">
                    {fmtNum(Math.round(adjAdopting))} clientes × {fmtBRL(PRODUCT_WEIGHTS[it.id]+BASE_PER_CLIENT/selectedCount,{fractionDigits:2})}/cliente/ano
                  </div>
                </div>
              ))}

              {/* Card: potencial não explorado */}
              {selectedCount < 6 && (
                <div className="result-prod result-prod--context">
                  <div className="name">
                    <span style={{width:8,height:8,borderRadius:2,background:"rgba(0,232,135,.3)",display:"inline-block",marginRight:6}}/>
                    Potencial não explorado
                  </div>
                  <div className="bignum" style={{color:"var(--green-700)"}}>
                    <span className="pre">+R$</span>
                    {unexplored.toLocaleString("pt-BR",{minimumFractionDigits:2,maximumFractionDigits:2})}
                  </div>
                  <div className="per">adicionando os outros {6-selectedCount} produtos</div>
                  <div className="filete"/>
                  <div className="ctx-stats">
                    <div className="ctx-row">
                      <span className="lbl">Com todos os 6 produtos</span>
                      <span className="val">{fmtBRL(maxPotential,{short:true})}/ano</span>
                    </div>
                    <div className="ctx-row">
                      <span className="lbl">Você está explorando</span>
                      <span className="val">{maxPotential>0?((adjTotal/maxPotential)*100).toFixed(0):0}% do potencial</span>
                    </div>
                    <div className="ctx-row">
                      <span className="lbl">Frentes ativas</span>
                      <span className="val">{selectedCount} de 6</span>
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}
        </div>
      </section>

      {/* ── CTA RELATÓRIO ── */}
      <div className="result-report-strip">
        <div className="result-report-strip-inner">
          <div className="result-report-text">
            <div className="result-report-title">Quer entender como chegar nesse resultado?</div>
            <div className="result-report-sub">Agende 30 minutos com um especialista SH para receber o seu relatório completo e entender o que precisa ser construído para transformar esse potencial em receita real.</div>
          </div>
          <button className="btn btn--primary btn--lg" onClick={() => setSchedOpen(true)}>
            <Icon name="calendar" size={16}/> Agendar conversa <span className="arr">→</span>
          </button>
        </div>
      </div>

      {/* ── GRÁFICOS ── */}
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <div className={selectedCount > 1 ? "charts-row" : ""}>

            {/* Donut — só com mais de 1 produto */}
            {selectedCount > 1 && (
              <div className="chart-card">
                <div className="title">Composição da receita</div>
                <div className="subtitle">Distribuição por produto selecionado</div>
                  <DonutChart
                    data={adjItems.map((it,i) => ({id:it.id, name:it.product.name, value:it.value, color:palette[i%palette.length]}))}
                    totalLabel={fmtBRL(adjTotal,{short:true})}
                  />
              </div>
            )}

            {/* Curva de adoção */}
            <div className="chart-card">
              <div className="title">Curva de receita — adoção crescente</div>
              <div className="subtitle" style={{marginBottom:8}}>
                Estimativa ilustrativa · 40% → 75% → 100% de adoção
              </div>
              <BarChart bars={bars}/>
              <div style={{marginTop:12,font:"400 11px var(--font-body)",color:"var(--fg-3)"}}>
                Esta projeção é ilustrativa. O consultor da SH refina com base no seu go-to-market.
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* ── INSIGHTS SH ── */}
      <SHInsights form={form} adjItems={adjItems} selectedCount={selectedCount}/>

      {/* ── CTA ── */}
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <div className="sched-cta">
            <div className="sched-cta-inner">
              <span className="eyebrow center">Próximo passo</span>
              <h2>Este número é uma estimativa.<br/>A conversa transforma em plano.</h2>
              <p>30 minutos com um consultor que já construiu e vendeu fintech. Você sai sabendo o que é real pro seu negócio — sem deck, sem enrolação.</p>
              <div className="sched-actions">
                <button className="btn btn--primary btn--xl" onClick={() => setSchedOpen(true)}>
                  <Icon name="calendar" size={18}/> Agendar conversa <span className="arr">→</span>
                </button>
                {leadSent && (
                  <a className="sched-link" href="#" onClick={e => { e.preventDefault(); alert("PDF em breve — integração em desenvolvimento."); }}>
                    <Icon name="download" size={14} style={{verticalAlign:"-2px",marginRight:4}}/>
                    Baixar diagnóstico em PDF
                  </a>
                )}
              </div>
            </div>
          </div>

          <div className="share-row">
            <div className="share-left">
              <span className="lbl">Conheça a SH Squads</span>
              <div className="share-btns">
                <a className="share-btn" target="_blank" rel="noreferrer"
                   href="https://www.linkedin.com/company/shsquads/">
                  <Icon name="linkedin" size={14}/> LinkedIn
                </a>
                <a className="share-btn"
                   href="../solucoes.html">
                  <Icon name="arrow-right" size={14}/> Nossas soluções
                </a>
                <a className="share-btn"
                   href="../fintech-banking.html">
                  <Icon name="arrow-right" size={14}/> Fintech & Banking
                </a>
              </div>
            </div>
            <button className="share-redo" onClick={onRestart}>
              Refazer com outro cenário <span className="arr">→</span>
            </button>
          </div>
        </div>
      </section>

      <FooterMini/>

      <SchedModal open={schedOpen} onClose={() => setSchedOpen(false)} form={form}/>
    </React.Fragment>
  );
}

Object.assign(window, { ResultScreen });