// Main app: routes between screens, manages theme + tweaks + view mode (desktop / mobile)

const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primary": "blue",
  "density": "regular",
  "cardStyle": "shadow",
  "sidebar": "expanded",
  "view": "desktop"
}/*EDITMODE-END*/;

const TITLES = {
  overview:  { title: "Visão Geral", crumb: ["Início", "Visão Geral"] },
  brands:    { title: "Marcas", crumb: ["Início", "Análises", "Marcas"] },
  sectors:   { title: "Setores", crumb: ["Início", "Análises", "Setores"] },
  sellers:   { title: "Vendedores", crumb: ["Início", "Análises", "Vendedores"] },
  inactive:  { title: "Clientes Inativos", crumb: ["Início", "Clientes", "Inativos"] },
  recurring: { title: "Clientes Recorrentes", crumb: ["Início", "Clientes", "Recorrentes"] },
  dre:       { title: "DRE", crumb: ["Início", "Financeiro", "DRE"] },
  cashflow:  { title: "Fluxo de Caixa", crumb: ["Início", "Financeiro", "Fluxo de Caixa"] },
  closing:   { title: "Fechamento Diário", crumb: ["Início", "Financeiro", "Fechamento Diário"] },
  forecast:  { title: "Previsão de Vendas", crumb: ["Início", "Financeiro", "Previsão"] },
  ecommerce: { title: "E-commerce", crumb: ["Início", "E-commerce"] },
  admin:     { title: "Administração", crumb: ["Início", "Administração"] },
  more:      { title: "Mais", crumb: ["Início", "Mais"] },
};

function renderScreen(screen, setScreen) {
  switch (screen) {
    case "overview":  return <OverviewScreen onNavigate={setScreen} />;
    case "brands":    return <BrandsScreen />;
    case "sectors":   return <SectorsScreen />;
    case "sellers":   return <SellersScreen />;
    case "inactive":  return <InactiveScreen />;
    case "recurring": return <RecurringScreen />;
    case "dre":       return <DREScreen />;
    case "cashflow":  return <CashflowScreen />;
    case "closing":   return <DailyClosingScreen />;
    case "forecast":  return <ForecastScreen />;
    case "ecommerce": return <EcommerceScreen />;
    case "admin":     return <AdminScreen />;
    case "pricing":   return <PricingPage onNavigate={setScreen} />;
    case "slides":    return <SlidesPage onNavigate={setScreen} />;
    default:          return <OverviewScreen onNavigate={setScreen} />;
  }
}

// Apresentação de 4 slides (acessível só via ?slides=1)
// CEO abre antes da reunião, navega com setas ou clique. Slide 4 leva pro mockup.
function SlidesPage({ onNavigate }) {
  const { useState: useStateS, useEffect: useEffectS } = React;
  const [slide, setSlide] = useStateS(0);
  const M = window.MOCK;

  const slides = [
    // SLIDE 1 — CAPA
    {
      id: "capa",
      bg: "linear-gradient(135deg, #102080 0%, #203090 50%, #2B40C2 100%)",
      content: (
        <div style={{ textAlign: "center", color: "white" }}>
          <img
            src="/mockup/assets/cefeq-logo.png"
            alt="CEFEQ"
            style={{ height: 100, marginBottom: 16, filter: "drop-shadow(0 8px 24px rgba(0,0,0,0.3))" }}
          />
          <div style={{
            fontSize: 22, fontWeight: 700, fontStyle: "italic",
            color: "#F0F000",
            marginBottom: 40,
            letterSpacing: "0.02em",
            textShadow: "0 2px 8px rgba(0,0,0,0.3)",
          }}>
            Equipando Quem Constrói o Futuro!
          </div>
          <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: "0.2em", color: "rgba(255,255,255,0.7)", marginBottom: 12 }}>
            APRESENTAÇÃO COMERCIAL · MAIO/2026
          </div>
          <h1 style={{ fontSize: 60, fontWeight: 900, letterSpacing: "-0.03em", margin: "0 0 16px", lineHeight: 1.05 }}>
            Transformando<br/>dados em decisão
          </h1>
          <p style={{ fontSize: 22, opacity: 0.85, maxWidth: 720, margin: "16px auto 0", lineHeight: 1.4 }}>
            Painel de BI sob medida pra CEFEQ Ferramentas
          </p>
          <div style={{
            display: "inline-block",
            marginTop: 60,
            padding: "12px 24px",
            border: "1px solid rgba(255,255,255,0.3)",
            borderRadius: 99,
            fontSize: 13,
            fontWeight: 600,
            letterSpacing: "0.06em",
          }}>
            CEFEQ × Grupo DashM
          </div>
        </div>
      ),
    },

    // SLIDE 2 — A DOR
    {
      id: "dor",
      bg: "linear-gradient(180deg, #FAFAF8 0%, #EEF1FA 100%)",
      content: (
        <div style={{ maxWidth: 1000, margin: "0 auto" }}>
          <div style={{ fontSize: 13, fontWeight: 800, letterSpacing: "0.18em", color: "#203090", marginBottom: 18 }}>
            01 · A REALIDADE DE HOJE
          </div>
          <h2 style={{ fontSize: 54, fontWeight: 900, color: "#0F1830", margin: "0 0 48px", lineHeight: 1.1, letterSpacing: "-0.02em" }}>
            Vocês têm dados.<br/>
            <span style={{ color: "#203090" }}>Mas têm </span>
            <span style={{ background: "#F0F000", padding: "2px 18px", color: "#102080" }}>decisão</span>
            <span style={{ color: "#203090" }}>?</span>
          </h2>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24, marginTop: 40 }}>
            {[
              { emoji: "❓", q: "Qual cliente VIP sumiu há 6 meses e ninguém ligou?" },
              { emoji: "🏪", q: "Qual loja tá puxando o mês — e qual tá segurando?" },
              { emoji: "💸", q: "Onde tá vazando margem que vocês não veem?" },
            ].map((item, i) => (
              <div key={i} style={{
                background: "white",
                padding: 28,
                borderRadius: 16,
                borderLeft: "4px solid #203090",
                boxShadow: "0 8px 24px rgba(32, 48, 144, 0.08)",
              }}>
                <div style={{ fontSize: 36, marginBottom: 12 }}>{item.emoji}</div>
                <div style={{ fontSize: 17, fontWeight: 600, color: "#0F1830", lineHeight: 1.4 }}>
                  {item.q}
                </div>
              </div>
            ))}
          </div>

          <div style={{
            marginTop: 48,
            padding: "16px 24px",
            background: "#0F1830",
            color: "white",
            borderRadius: 12,
            fontSize: 18,
            fontWeight: 600,
            textAlign: "center",
            letterSpacing: "-0.01em",
          }}>
            Relatório sem ação é só planilha bonita. BI sem inteligência é custo.
          </div>
        </div>
      ),
    },

    // SLIDE 3 — O QUE ENTREGAMOS
    {
      id: "entrega",
      bg: "linear-gradient(180deg, #FAFAF8 0%, #FFFAEB 100%)",
      content: (
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <div style={{ fontSize: 13, fontWeight: 800, letterSpacing: "0.18em", color: "#203090", marginBottom: 18 }}>
            02 · O QUE A GENTE ENTREGA
          </div>
          <h2 style={{ fontSize: 54, fontWeight: 900, color: "#0F1830", margin: "0 0 12px", lineHeight: 1.1, letterSpacing: "-0.02em" }}>
            Não é dashboard.<br/>
            É <span style={{ color: "#203090" }}>ferramenta de gestão diária</span>.
          </h2>
          <p style={{ fontSize: 18, color: "#3A4060", maxWidth: 700, marginBottom: 48 }}>
            3 pilares que mudam como vocês operam — sem precisar de pessoa nova, sem TI complexa, sem aprender a usar.
          </p>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 20 }}>
            {[
              {
                emoji: "👁️",
                title: "Visibilidade total",
                desc: "Toda operação em 1 tela.",
                bullets: ["5 unidades juntas", "Mobile + Desktop", "Filtros por loja, vendedor, marca, setor, produto"],
                color: "#203090",
              },
              {
                emoji: "🎯",
                title: "Inteligência acionável",
                desc: "O painel diz o que fazer.",
                bullets: ["Alertas inteligentes", "Ações sugeridas em cada cliente", "Gestora de Insights via WhatsApp"],
                color: "#0F7F50",
              },
              {
                emoji: "🚀",
                title: "Crescimento previsível",
                desc: "Antecipar antes de reagir.",
                bullets: ["Previsão com ML", "Comparativo entre lojas", "Identificação automática de oportunidades"],
                color: "#B47B00",
              },
            ].map((p, i) => (
              <div key={i} style={{
                background: "white",
                padding: 28,
                borderRadius: 16,
                borderTop: `4px solid ${p.color}`,
                boxShadow: "0 12px 32px rgba(32, 48, 144, 0.10)",
              }}>
                <div style={{ fontSize: 44, marginBottom: 16 }}>{p.emoji}</div>
                <div style={{ fontSize: 22, fontWeight: 800, color: "#0F1830", marginBottom: 6 }}>{p.title}</div>
                <div style={{ fontSize: 14, color: p.color, fontWeight: 700, marginBottom: 16 }}>{p.desc}</div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                  {p.bullets.map((b, j) => (
                    <li key={j} style={{ fontSize: 13, color: "#3A4060", display: "flex", gap: 8, lineHeight: 1.4 }}>
                      <span style={{ color: p.color, fontWeight: 900 }}>✓</span> {b}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      ),
    },

    // SLIDE 4 — O FECHAMENTO (frase matadora)
    {
      id: "fechamento",
      bg: "linear-gradient(135deg, #102080 0%, #0F1830 100%)",
      content: (
        <div style={{ maxWidth: 1100, margin: "0 auto", color: "white" }}>
          <div style={{ fontSize: 13, fontWeight: 800, letterSpacing: "0.18em", color: "#F0F000", marginBottom: 18 }}>
            03 · O INVESTIMENTO
          </div>
          <h2 style={{ fontSize: 44, fontWeight: 900, color: "white", margin: "0 0 32px", lineHeight: 1.15, letterSpacing: "-0.02em" }}>
            A pergunta não é quanto custa.<br/>
            <span style={{ color: "#F0F000" }}>É se vocês vão usar.</span>
          </h2>

          <div style={{
            background: "rgba(255,255,255,0.08)",
            border: "1px solid rgba(255,255,255,0.15)",
            borderLeft: "5px solid #F0F000",
            borderRadius: 12,
            padding: "32px 36px",
            marginBottom: 36,
            backdropFilter: "blur(8px)",
          }}>
            <div style={{ fontSize: 24, fontWeight: 600, lineHeight: 1.45, color: "rgba(255,255,255,0.95)" }}>
              "Se em 6 meses esse painel ajudar vocês a recuperar
              <span style={{ color: "#F0F000", fontWeight: 800 }}> R$ 50k em vendas inativas</span> ou
              otimizar <span style={{ color: "#F0F000", fontWeight: 800 }}>R$ 30k em margem por mês</span>, isso paga
              <span style={{ color: "#F0F000", fontWeight: 800 }}> 10 anos de assinatura</span>.
            </div>
            <div style={{ fontSize: 20, fontWeight: 700, marginTop: 16, color: "#F0F000" }}>
              É o investimento mais barato que vocês fazem no ano.
            </div>
          </div>

          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16,
            marginBottom: 36,
          }}>
            {[
              { label: "5 unidades", val: "1 só painel" },
              { label: "Sem TI nova", val: "Implantação acompanhada" },
              { label: "Sem fidelidade", val: "Aviso prévio de 30 dias" },
            ].map((b, i) => (
              <div key={i} style={{
                background: "rgba(240, 240, 0, 0.10)",
                border: "1px solid rgba(240, 240, 0, 0.25)",
                padding: "16px 20px",
                borderRadius: 10,
                textAlign: "center",
              }}>
                <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.06em", color: "#F0F000", textTransform: "uppercase", marginBottom: 6 }}>
                  {b.label}
                </div>
                <div style={{ fontSize: 18, fontWeight: 800 }}>
                  {b.val}
                </div>
              </div>
            ))}
          </div>

          <div style={{ textAlign: "center", marginTop: 28 }}>
            <button
              onClick={() => onNavigate("overview")}
              style={{
                background: "#F0F000",
                color: "#102080",
                border: "0",
                padding: "20px 48px",
                fontSize: 19,
                fontWeight: 900,
                letterSpacing: "0.02em",
                borderRadius: 12,
                cursor: "pointer",
                boxShadow: "0 12px 32px rgba(240, 240, 0, 0.35)",
                fontFamily: "inherit",
              }}
            >
              ▶ Ver o painel funcionando com seus dados
            </button>
            <div style={{ fontSize: 13, color: "rgba(255,255,255,0.6)", marginTop: 14 }}>
              (5 unidades · marcas reais · contatos reais · simulação completa)
            </div>
            <div style={{
              marginTop: 36,
              paddingTop: 24,
              borderTop: "1px solid rgba(255,255,255,0.15)",
              fontSize: 16,
              fontStyle: "italic",
              fontWeight: 600,
              color: "#F0F000",
              letterSpacing: "0.02em",
            }}>
              Equipando Quem Constrói o Futuro!
            </div>
          </div>
        </div>
      ),
    },
  ];

  const cur = slides[slide];
  const total = slides.length;

  // Atalhos de teclado: ←/→ pra navegar, Esc volta pro mockup
  useEffectS(() => {
    function onKey(e) {
      if (e.key === "ArrowRight" || e.key === " ") {
        e.preventDefault();
        setSlide(s => Math.min(s + 1, total - 1));
      } else if (e.key === "ArrowLeft") {
        e.preventDefault();
        setSlide(s => Math.max(s - 1, 0));
      } else if (e.key === "Escape") {
        onNavigate("overview");
      }
    }
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [total]);

  return (
    <div className="slides-shell" style={{ background: cur.bg }}>
      <div className="slides-stage">
        {cur.content}
      </div>

      {/* Controls bottom */}
      <div className="slides-controls">
        <button
          className="slides-btn"
          onClick={() => setSlide(s => Math.max(s - 1, 0))}
          disabled={slide === 0}
          title="Slide anterior (←)"
        >
          ← Anterior
        </button>

        <div className="slides-progress">
          {slides.map((_, i) => (
            <button
              key={i}
              className={`slides-dot ${i === slide ? "active" : ""}`}
              onClick={() => setSlide(i)}
              aria-label={`Slide ${i + 1}`}
            />
          ))}
        </div>

        <div className="slides-counter">{slide + 1} / {total}</div>

        <button
          className="slides-btn"
          onClick={() => slide === total - 1 ? onNavigate("overview") : setSlide(s => s + 1)}
          title="Próximo (→) · no último, abre o painel"
        >
          {slide === total - 1 ? "Abrir painel →" : "Próximo →"}
        </button>
      </div>

      {/* Skip link top-right */}
      <button
        className="slides-skip"
        onClick={() => onNavigate("overview")}
        title="Pular pra demo do painel (Esc)"
      >
        Pular pro painel →
      </button>
    </div>
  );
}

// Tela full-screen de pricing (acessível só via ?planos=1 — CEO usa pra apresentação)
function PricingPage({ onNavigate }) {
  const { useState: useStateP } = React;
  const [tab, setTab] = useStateP("planos");

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="muted">Planos e investimento</div>
          <h2 style={{ margin: 0, fontWeight: 600 }}>CEFEQ — Planos disponíveis</h2>
        </div>
        <div className="page-head-actions">
          <button className="btn btn-ghost" onClick={() => onNavigate("slides")}>
            <Icon name="overview" size={14}/> Slides de abertura
          </button>
          <button className="btn btn-ghost" onClick={() => onNavigate("overview")}>
            <Icon name="chevron" size={14} style={{ transform: "rotate(180deg)" }}/> Voltar ao painel
          </button>
          <button className="btn btn-outline" onClick={() => window.openPrintPreview()}>
            <Icon name="printer" size={14}/> Imprimir PDF
          </button>
        </div>
      </div>

      <div className="pricing-tabs">
        <button
          className={`pricing-tab ${tab === "planos" ? "active" : ""}`}
          onClick={() => setTab("planos")}
        >
          📋 Planos & Preços
        </button>
        <button
          className={`pricing-tab ${tab === "pitch" ? "active" : ""}`}
          onClick={() => setTab("pitch")}
        >
          🎯 Pitch de venda
        </button>
      </div>

      {tab === "planos" && <PricingTab />}
      {tab === "pitch" && <PitchTab />}
    </div>
  );
}

// Aba PITCH — cola interna do CEO na hora de vender (não pra cliente)
function PitchTab() {
  return (
    <div className="pitch-section">
      {/* 1. MAPEAMENTO DE DOR */}
      <div className="pitch-block">
        <div className="pitch-block-eyebrow">01 · MAPEAMENTO DA DOR</div>
        <h3 className="pitch-block-title">Perguntas pra fazer ANTES de falar preço</h3>
        <p>Faça o cliente pensar primeiro. Cada pergunta abaixo abre uma porta. Não fale preço enquanto ele não tiver concordado que tem dor.</p>
        <div className="pitch-questions">
          {[
            { e: "❓", q: "Qual cliente VIP de vocês sumiu há mais de 6 meses? Quem ligou pra entender por quê?" },
            { e: "🏪", q: "Hoje, sem olhar relatório, qual loja tá puxando o resultado e qual tá segurando?" },
            { e: "💸", q: "Onde tá vazando margem no fim do mês? Em qual marca, setor, vendedor ou loja?" },
            { e: "⭐", q: "Quem são seus top 5% de clientes? O que tá sendo feito específico pra eles?" },
            { e: "📞", q: "Quantas oportunidades de venda passam todo dia sem ninguém perceber?" },
            { e: "📊", q: "Quanto tempo leva pra vocês descobrirem se uma decisão funcionou?" },
          ].map((it, i) => (
            <div key={i} className="pitch-q">
              <div className="pitch-q-emoji">{it.e}</div>
              <div className="pitch-q-text">{it.q}</div>
            </div>
          ))}
        </div>
      </div>

      {/* 2. BENCHMARK */}
      <div className="pitch-block">
        <div className="pitch-block-eyebrow">02 · BENCHMARK DE MERCADO</div>
        <h3 className="pitch-block-title">Onde a gente tá no preço (cola pra ter na cabeça)</h3>
        <p>Use isso quando o cliente disser "a Flow tá cara". Mostre que a gente é competitivo + entrega mais acional.</p>
        <div className="pitch-benchmark-table">
          <div className="pbt-head">Solução</div>
          <div className="pbt-head" style={{ textAlign: "center" }}>Faixa típica</div>
          <div className="pbt-head">Pra cliente porte CEFEQ (5 unid)</div>

          <div className="pitch-benchmark-row">
            <div>Flow Analytics (o que acharam caro)</div>
            <div style={{ textAlign: "center" }}>R$ 4-12k/mês</div>
            <div>R$ 6-10k/mês · setup R$ 5-15k</div>
          </div>
          <div className="pitch-benchmark-row">
            <div>Tableau Cloud + consultoria</div>
            <div style={{ textAlign: "center" }}>R$ 8-20k/mês</div>
            <div>Fora da realidade deles</div>
          </div>
          <div className="pitch-benchmark-row">
            <div>Power BI Pro + dev brasileiro</div>
            <div style={{ textAlign: "center" }}>R$ 3-7k/mês</div>
            <div>Direto concorrente nosso</div>
          </div>
          <div className="pitch-benchmark-row">
            <div>BI in-house (1 pessoa CLT + ferramentas)</div>
            <div style={{ textAlign: "center" }}>R$ 6-9k/mês</div>
            <div>É o que CEFEQ tem hoje (mas passivo)</div>
          </div>
          <div className="pitch-benchmark-row is-ours">
            <div>Grupo DashM — Profissional</div>
            <div style={{ textAlign: "center" }}>R$ 5.500/mês</div>
            <div>5 unidades · acional · sweet spot</div>
          </div>
        </div>
      </div>

      {/* 3. OBJEÇÕES E RESPOSTAS */}
      <div className="pitch-block">
        <div className="pitch-block-eyebrow">03 · OBJEÇÕES E RESPOSTAS</div>
        <h3 className="pitch-block-title">O que eles vão dizer + como responder</h3>
        <div className="pitch-objections">
          <div className="pitch-obj">
            <div className="pitch-obj-q">Tá caro</div>
            <div className="pitch-obj-a">
              <strong>ROI 6 meses:</strong> "Se recuperar R$ 50k em LTV inativo ou otimizar R$ 30k em margem por mês, paga 10 anos. Quanto vocês investem em folha de pagamento por ano comparado a isso?"
            </div>
          </div>
          <div className="pitch-obj">
            <div className="pitch-obj-q">Já temos BI in-house</div>
            <div className="pitch-obj-a">
              <strong>BI passivo vs ativo:</strong> "Quanto custa o BI in-house total (CLT + encargos + ferramentas + tempo da pessoa)? Provavelmente R$ 6-8k. E ele entrega visão. O nosso entrega ação. Não é substituir — é potencializar."
            </div>
          </div>
          <div className="pitch-obj">
            <div className="pitch-obj-q">Vamos pensar</div>
            <div className="pitch-obj-a">
              <strong>Cliente piloto / trial:</strong> "Vamos fazer 30 dias de implementação com vocês como cliente piloto. Se em 30 dias não fizer sentido, paramos sem custo de saída. Topa pensar em cima de 30 dias rodando, não em cima de slide?"
            </div>
          </div>
          <div className="pitch-obj">
            <div className="pitch-obj-q">Não sabemos se vamos usar</div>
            <div className="pitch-obj-a">
              <strong>Adoção garantida:</strong> "Por isso a reunião quinzenal de adoção tá incluída. A gente acompanha o que vocês estão usando e o que não. Se em 60 dias vocês não estiverem usando, a gente devolve."
            </div>
          </div>
          <div className="pitch-obj">
            <div className="pitch-obj-q">Quero comparar com outras opções</div>
            <div className="pitch-obj-a">
              <strong>Diferenciador real:</strong> "Pode comparar. Mas vai ver que nosso painel é o único que fala em PT-BR de varejo, que conecta direto com Sollus + Tray, e que tem gestora de insights via WhatsApp. Os outros são genéricos."
            </div>
          </div>
          <div className="pitch-obj">
            <div className="pitch-obj-q">É muito caro pra começar</div>
            <div className="pitch-obj-a">
              <strong>Negociação aberta:</strong> "Felipe, vamos começar com o Essencial (R$ 3.000/mês pelas 5 unidades) por 3 meses. Quando vocês virem o valor, sobem pro Profissional. Topa começar simples?"
            </div>
          </div>
        </div>
      </div>

      {/* 4. FRASE MATADORA */}
      <div className="pitch-killer">
        <div className="pitch-killer-eyebrow">04 · A FRASE PRA FECHAR</div>
        <p className="pitch-killer-quote">
          "Se em 6 meses esse painel ajudar vocês a recuperar <span className="hl">R$ 50k em vendas inativas</span> ou
          otimizar <span className="hl">R$ 30k em margem por mês</span>, isso paga <span className="hl">10 anos de assinatura</span>.
          A pergunta não é quanto custa — é se vocês vão usar."
        </p>
        <div className="pitch-killer-tagline">
          Se sim, é o investimento mais barato que vocês fazem no ano.
        </div>
      </div>

      {/* 5. ESTRATÉGIA DE PREÇO */}
      <div className="pitch-block">
        <div className="pitch-block-eyebrow">05 · ESTRATÉGIA NA HORA DE FECHAR</div>
        <h3 className="pitch-block-title">Onde negociar, onde segurar</h3>
        <div className="pitch-questions">
          <div className="pitch-q">
            <div className="pitch-q-emoji">🎯</div>
            <div className="pitch-q-text">
              <strong style={{ display: "block", marginBottom: 4 }}>Alvo: R$ 5.500/mês (Profissional)</strong>
              É o sweet spot. Cliente cabe, você lucra bem.
            </div>
          </div>
          <div className="pitch-q">
            <div className="pitch-q-emoji">📉</div>
            <div className="pitch-q-text">
              <strong style={{ display: "block", marginBottom: 4 }}>Piso: R$ 4.000/mês (R$ 800/loja)</strong>
              Não cai abaixo disso. Abaixo é exaustão.
            </div>
          </div>
          <div className="pitch-q">
            <div className="pitch-q-emoji">📈</div>
            <div className="pitch-q-text">
              <strong style={{ display: "block", marginBottom: 4 }}>Se brilharem: sobe pra R$ 6.500-8.000/mês</strong>
              Profissional + NRT ou Avançado completo.
            </div>
          </div>
          <div className="pitch-q">
            <div className="pitch-q-emoji">⚠️</div>
            <div className="pitch-q-text">
              <strong style={{ display: "block", marginBottom: 4 }}>Sinal de alerta na reunião</strong>
              Observa quem reage primeiro: CEO ou Gerente. Se gerente reagir antes, foca ROI direto com CEO.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  // Acessos secretos via URL (CEO usa pra apresentação)
  const initialScreen = (() => {
    if (typeof window === "undefined") return "login";
    const sp = new URLSearchParams(window.location.search);
    if (sp.get("slides") === "1") return "slides";
    if (sp.get("planos") === "1") return "pricing";
    return "login";
  })();
  const [screen, setScreen] = useStateA(initialScreen);
  const [dark, setDark] = useStateA(false);
  const [notifsOpen, setNotifsOpen] = useStateA(false);

  useEffectA(() => {
    document.documentElement.dataset.theme = dark ? "dark" : "light";
    document.documentElement.dataset.primary = t.primary;
    document.documentElement.dataset.density = t.density;
    document.documentElement.dataset.cardstyle = t.cardStyle;
    document.documentElement.dataset.view = t.view;
  }, [dark, t.primary, t.density, t.cardStyle, t.view]);

  // Sincroniza tela atual pro PrintPreviewModal saber qual scope renderizar
  useEffectA(() => {
    window.CURRENT_SCREEN = screen;
  }, [screen]);

  if (screen === "login") {
    return (
      <>
        <LoginScreen onLogin={() => setScreen("overview")} />
        <TweaksUI t={t} setTweak={setTweak} dark={dark} setDark={setDark} />
      </>
    );
  }

  // MOBILE VIEW — wrap in iPhone frame
  if (t.view === "mobile") {
    return (
      <>
        <MobileShell
          screen={screen}
          onNavigate={(s) => { if (s === "login") setScreen("login"); else setScreen(s); }}
          dark={dark}
          onToggleTheme={() => setDark(v => !v)}
          onOpenNotifs={() => setNotifsOpen(true)}
          onSwitchToDesktop={() => setTweak("view", "desktop")}
          notifsOpen={notifsOpen}
          onCloseNotifs={() => setNotifsOpen(false)}
        >
          {renderScreen(screen, setScreen)}
        </MobileShell>
        <TweaksUI t={t} setTweak={setTweak} dark={dark} setDark={setDark} />
      </>
    );
  }

  // DESKTOP VIEW
  const meta = TITLES[screen] || TITLES.overview;

  // ADMIN AREA — distinct chrome (no sidebar, dedicated header)
  if (screen === "admin") {
    return (
      <div className="admin-shell" data-admin="true">
        <header className="admin-topbar">
          <div className="admin-topbar-left">
            <button className="btn btn-ghost admin-back" onClick={() => setScreen("overview")}>
              <Icon name="chevron" size={14} style={{ transform: "rotate(180deg)" }}/> Voltar ao painel
            </button>
            <div className="admin-divider"/>
            <div className="admin-brand">
              <div className="admin-badge"><Icon name="admin" size={13}/> Administração</div>
              <div className="admin-area-title">Configurações do sistema</div>
            </div>
          </div>
          <div className="topbar-right">
            <button className="icon-btn" title="Notificações" onClick={() => setNotifsOpen(true)}>
              <Icon name="bell" size={17}/><span className="badge-dot"></span>
            </button>
            <button className="icon-btn" title="Trocar tema" onClick={() => setDark(v => !v)}>
              <Icon name={dark ? "sun" : "moon"} size={17}/>
            </button>
            <div className="admin-user">
              <div className="avatar">FS</div>
              <div className="profile-meta">
                <div className="profile-name">Felipe Sergio</div>
                <div className="profile-role">CEO</div>
              </div>
            </div>
          </div>
        </header>
        <div className="admin-content">
          <AdminScreen />
        </div>
        <NotificationsDrawer open={notifsOpen} onClose={() => setNotifsOpen(false)} onNavigate={setScreen}/>
        <TweaksUI t={t} setTweak={setTweak} dark={dark} setDark={setDark} />
      </div>
    );
  }

  return (
    <div className="app-shell">
      <Sidebar
        current={screen}
        onNavigate={setScreen}
        layout={t.sidebar}
        onToggle={() => setTweak("sidebar", t.sidebar === "icons" ? "expanded" : "icons")}
        onSwitchView={() => setTweak("view", "mobile")}
      />
      <main className="app-main">
        <Topbar
          title={meta.title}
          breadcrumb={meta.crumb}
          dark={dark}
          onToggleTheme={() => setDark(v => !v)}
          onNavigate={setScreen}
          screenKey={screen}
          onOpenNotifs={() => setNotifsOpen(true)}
          onSwitchView={() => setTweak("view", "mobile")}
        />
        <div className="app-content">
          {renderScreen(screen, setScreen)}
        </div>
      </main>
      <NotificationsDrawer open={notifsOpen} onClose={() => setNotifsOpen(false)} onNavigate={setScreen}/>
      <TweaksUI t={t} setTweak={setTweak} dark={dark} setDark={setDark} />
    </div>
  );
}

function TweaksUI({ t, setTweak, dark, setDark }) {
  return (
    <TweaksPanel>
      <TweakSection label="Visualização" />
      <TweakRadio label="View"
        value={t.view}
        options={["desktop", "mobile"]}
        onChange={v => setTweak("view", v)} />

      <TweakSection label="Marca / cor primária" />
      <TweakRadio label="Tom"
        value={t.primary}
        options={["blue", "yellow", "neutral"]}
        onChange={v => setTweak("primary", v)} />

      <TweakSection label="Tema" />
      <TweakToggle label="Dark mode"
        value={dark}
        onChange={v => setDark(v)} />

      <TweakSection label="Layout" />
      <TweakRadio label="Densidade"
        value={t.density}
        options={["compact", "regular"]}
        onChange={v => setTweak("density", v)} />
      <TweakRadio label="Cards"
        value={t.cardStyle}
        options={["flat", "shadow", "outline"]}
        onChange={v => setTweak("cardStyle", v)} />
      <TweakRadio label="Sidebar"
        value={t.sidebar}
        options={["expanded", "icons"]}
        onChange={v => setTweak("sidebar", v)} />
    </TweaksPanel>
  );
}

function AppRoot() {
  return (
    <>
      <App />
      <PrintPreviewModal />
      <SearchHelpModal />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<AppRoot />);