// UltraB Digital - Bundle de produção
// Todos os componentes consolidados em um único arquivo


// ═══════════════════════════════════════
// SiteHeader.jsx
// ═══════════════════════════════════════
// SiteHeader.jsx
const SiteHeader = ({ active = "inicio", onNavigate = () => {} }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);

  const items = [
    { id: "metodo",   label: "Método ULTRA" },
    { id: "como",     label: "Como Funciona" },
    { id: "prova",    label: "Resultados" },
    { id: "sobre",    label: "Sobre" },
    { id: "faq",      label: "FAQ" },
    { id: "contato",  label: "Contato" },
  ];

  const handleNav = (id) => {
    onNavigate(id);
    setMenuOpen(false);
    const el = document.getElementById(id);
    if (el) {
      const offset = 70;
      const top = el.getBoundingClientRect().top + window.pageYOffset - offset;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  return (
    <>
      <header className="nav">
        <a className="nav__logo" onClick={() => handleNav("inicio")} style={{cursor:"pointer"}}>
          <img src={window.__resources && window.__resources.logoImg || "assets/ultrab-horizontal-branco.png"} alt="Ultrab Digital" />
        </a>
        <nav className="nav__menu">
          {items.map(it => (
            <a key={it.id}
               className={"nav__a " + (active === it.id ? "active" : "")}
               onClick={() => handleNav(it.id)}>
              {it.label}
            </a>
          ))}
        </nav>
        <button className="btn btn--primary nav__cta-btn" onClick={() => handleNav("contato")}>
          Agendar diagnóstico <span className="btn__arrow">→</span>
        </button>
        {/* Hamburguer */}
        <button className="nav__hamburger" onClick={() => setMenuOpen(o => !o)} aria-label="Menu">
          <span style={{display:"block",width:"22px",height:"2px",background:"#fff",transition:"all 0.2s",transform: menuOpen ? "rotate(45deg) translate(4px,4px)" : "none"}}></span>
          <span style={{display:"block",width:"22px",height:"2px",background:"#fff",margin:"5px 0",transition:"all 0.2s",opacity: menuOpen ? 0 : 1}}></span>
          <span style={{display:"block",width:"22px",height:"2px",background:"#fff",transition:"all 0.2s",transform: menuOpen ? "rotate(-45deg) translate(4px,-4px)" : "none"}}></span>
        </button>
      </header>
      {/* Mobile drawer */}
      {menuOpen && (
        <div className="nav__drawer">
          {items.map(it => (
            <a key={it.id} className="nav__drawer-a" onClick={() => handleNav(it.id)}>
              {it.label}
            </a>
          ))}
          <button className="btn btn--primary" style={{width:"100%",justifyContent:"center",marginTop:"8px"}} onClick={() => handleNav("contato")}>
            Agendar diagnóstico <span className="btn__arrow">→</span>
          </button>
        </div>
      )}
    </>
  );
};

window.SiteHeader = SiteHeader;


// ═══════════════════════════════════════
// Hero.jsx
// ═══════════════════════════════════════
// Hero.jsx
const Hero = ({ onNavigate }) => {
  const handleNav = (id) => {
    if (onNavigate) onNavigate(id);
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.pageYOffset - 70;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  return (
    <section className="hero" id="inicio">
      <div className="hero__bg">
        <div className="hero__radial"></div>
        <div className="hero__dots"></div>
        <div className="hero__ring"></div>
        <div className="hero__ring2"></div>
      </div>
      <div className="c">
        <div className="hero__inner">
          <div className="eyebrow">BI · MARKETING DIGITAL · INTELIGÊNCIA ARTIFICIAL</div>
          <h1 className="hero__h1">
            Pare de crescer<br />
            <em>no escuro.</em>
          </h1>
          <p className="hero__sub">
            Conectamos <strong>BI, Marketing Digital e IA</strong> na sua operação — para você
            decidir com dado, escalar com previsibilidade e parar de queimar verba em campanhas
            que ninguém consegue medir.
          </p>
          <div className="hero__ctas">
            <button className="btn btn--primary btn--lg" onClick={() => handleNav("contato")}>
              Agendar diagnóstico estratégico (gratuito) <span className="btn__arrow">→</span>
            </button>
            <button className="btn btn--ghost btn--lg" onClick={() => handleNav("prova")}>
              Ver resultados
            </button>
          </div>
          <p className="hero__micro">
            30 minutos. Saída com clareza do próximo passo — independente de fechar ou não.
          </p>
          <div className="hero__divider"></div>
          <div className="hero__stats">
            <div className="hero__stat">
              <b className="mono">+55</b>
              <span>empresas atendidas</span>
            </div>
            <div className="hero__stat">
              <b className="mono">+11 anos</b>
              <span>de mercado</span>
            </div>
            <div className="hero__stat">
              <b className="mono">R$2M+</b>
              <span>em mídia gerenciada</span>
            </div>
            <div className="hero__stat">
              <b className="mono">Empresas Nacionais</b>
              <span>e multinacionais</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

};

window.Hero = Hero;

// ═══════════════════════════════════════
// PainSection.jsx
// ═══════════════════════════════════════
// PainSection.jsx
const PainSection = ({ onNavigate }) => {
  const pains = [
    { text: <>Investe em <b>Meta Ads, Google, YouTube</b> e ainda não sabe ao certo qual canal traz cliente que paga e qual só consome verba.</> },
    { text: <>Tem dashboards, planilhas, CRM — mas se perguntarem agora <b>"quanto vale um cliente seu?"</b>, você precisa parar pra calcular.</> },
    { text: <>Vê concorrente menor crescendo mais rápido e desconfia que <b>o problema não é capacidade — é estratégia.</b></> },
    { text: <>Sabe que <b>IA virou divisor de águas</b> — mas não tem tempo de virar especialista em ferramenta nova toda semana.</> },
    { text: <>No fim do mês, decisões importantes ainda são tomadas mais no <b>feeling</b> do que no <b>número.</b></> },
    { text: <>Seu time opera cheio de urgência, mas sem direção clara. <b>Apaga incêndio em vez de liderar.</b></> },
  ];

  const handleNav = (id) => {
    if (onNavigate) onNavigate(id);
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.pageYOffset - 70;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  return (
    <section className="pain" id="dor">
      <div className="c">
        <div className="eyebrow">DIAGNÓSTICO</div>
        <h2 className="sec-h2">Provavelmente você<br/>está vivendo isso agora.</h2>
        <div className="rule"></div>
        <div className="pain__grid">
          {pains.map((p, i) => (
            <div className="pain__item" key={i}>
              <div className="pain__dot"></div>
              <p className="pain__text">{p.text}</p>
            </div>
          ))}
        </div>
        <div className="pain__cta">
          Se você balançou a cabeça em pelo menos duas delas,{" "}
          <span onClick={() => handleNav("contato")} style={{cursor:"pointer", textDecoration:"underline", textDecorationColor:"var(--accent)"}}>
            a gente precisa conversar.
          </span>
        </div>
      </div>
    </section>
  );
};

window.PainSection = PainSection;


// ═══════════════════════════════════════
// MethodUltra.jsx
// ═══════════════════════════════════════
// MethodUltra.jsx
const MethodUltra = () => {
  const pillars = [
  {
    num: "01",
    label: "Business Intelligence",
    h: "Dados que decidem.",
    p: "Seus dados conversando entre si. Indicadores que mostram onde está o gargalo e onde está a oportunidade real de receita — não relatório bonito sem plano de ação.",
    icon:
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#0c869f" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="3" width="7" height="7" rx="1" />
          <rect x="14" y="3" width="7" height="7" rx="1" />
          <rect x="3" y="14" width="7" height="7" rx="1" />
          <path d="M14 17.5h7M17.5 14v7" />
        </svg>

  },
  {
    num: "02",
    label: "Marketing de Performance",
    h: "Escala com propósito.",
    p: "Meta, Google, YouTube — cada canal com função clara dentro do funil. Campanhas estruturadas com base em dado, não em achismo. ROAS que você consegue explicar.",
    icon:
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#0c869f" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 17l4-8 4 5 3-3 4 6" />
          <path d="M17 6l4-3M21 3v5" strokeWidth="2" />
        </svg>

  },
  {
    num: "03",
    label: "Inteligência Artificial Aplicada",
    h: "IA com critério.",
    p: "Automação dos processos repetitivos da sua empresa, ganho de produtividade do time e novos diferenciais competitivos com IA ajustada ao seu nicho — não modinha.",
    icon:
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#0c869f" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <rect x="5" y="7" width="14" height="12" rx="2" />
          <path d="M9 7V4M15 7V4M5 11H3M5 15H3M21 11h-2M21 15h-2" />
          <circle cx="10" cy="13" r="1.2" fill="#0c869f" stroke="none" />
          <circle cx="14" cy="13" r="1.2" fill="#0c869f" stroke="none" />
          <path d="M9.5 16.5h5" />
        </svg>

  }];


  return (
    <section className="method" id="metodo">
      <div className="c">
        <div className="eyebrow">MÉTODO ULTRA</div>
        <h2 className="sec-h2">A maioria das agências entrega<br /><em style={{ fontStyle: "normal", color: "var(--accent)" }}>um serviço.</em> A gente entrega um sistema.</h2>
        <div className="rule"></div>
        <p className="method__lead">
          O <strong>Método ULTRA</strong> — Integra dados, marketing e IA para acelerar resultados — conecta os três pilares que, isolados, travam o crescimento da maioria das empresas.
        </p>
        <div className="method__pillars">
          {pillars.map((p, i) =>
          <div className="pillar" key={i}>
              <div className="pillar__num">{p.num} — {p.label}</div>
              <div className="pillar__icon">{p.icon}</div>
              <h3 className="pillar__h">{p.h}</h3>
              <p className="pillar__p">{p.p}</p>
            </div>
          )}
        </div>
        <p className="method__tagline">
          Quando esses três operam em sinergia, sua empresa{" "}
          <em>avança com eficiência, escala e previsibilidade.</em>
        </p>
      </div>
    </section>);
};

window.MethodUltra = MethodUltra;

// ═══════════════════════════════════════
// HowItWorks.jsx
// ═══════════════════════════════════════
// HowItWorks.jsx
const HowItWorks = () => {
  const phases = [
    {
      num: "01",
      tag: "Fase 1",
      h: "Diagnóstico",
      p: "Analisamos a sua operação: dados, campanhas, processos, time. Saída: um raio-X claro de onde você está perdendo dinheiro e onde está o próximo ganho rápido.",
    },
    {
      num: "02",
      tag: "Fase 2",
      h: "Estratégia",
      p: "Transformamos análise em ação: quem faz, o quê, quando e como medir. Nada de PDF que ninguém lê — entregamos um plano que sai do papel.",
    },
    {
      num: "03",
      tag: "Fase 3",
      h: "Implementação",
      p: "Tráfego pago estruturado, dashboards executivos e IA aplicada onde realmente gera impacto. Operamos lado a lado com você — não apenas por você.",
    },
    {
      num: "04",
      tag: "Fase 4",
      h: "Acompanhamento",
      p: "Reuniões estratégicas, ajustes de rota e otimização contínua. A consultoria não acaba na entrega — começa nela.",
    },
  ];

  return (
    <section className="how" id="como">
      <div className="c">
        <div className="eyebrow">COMO FUNCIONA</div>
        <h2 className="sec-h2">Você não contrata um pacote.<br/>Você contrata um plano.</h2>
        <div className="rule"></div>
        <div className="how__phases">
          {phases.map((ph, i) => (
            <div className="phase" key={i}>
              <div className="phase__num">{ph.num}</div>
              <div className="phase__tag">{ph.tag}</div>
              <h3 className="phase__h">{ph.h}</h3>
              <p className="phase__p">{ph.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.HowItWorks = HowItWorks;


// ═══════════════════════════════════════
// Benefits.jsx
// ═══════════════════════════════════════
// Benefits.jsx
const Benefits = () => {
  const items = [
    { text: <>Clareza absoluta sobre <strong>CAC, LTV e ROAS por canal</strong> — você passa a saber quanto investir hoje pra fechar X clientes no próximo mês.</> },
    { text: <><strong>Decisões baseadas em dado</strong>, não em reunião de fim de tarde ou feeling do gestor.</> },
    { text: <>Marketing <strong>previsível e escalável</strong> — sem o medo de "será que esse mês vai entrar?"</> },
    { text: <>Equipe <strong>mais produtiva com IA</strong> rodando o trabalho repetitivo enquanto você foca em estratégia.</> },
    { text: <><strong>Posicionamento de autoridade</strong> no nicho — você deixa de competir por preço e passa a competir por valor.</> },
    { text: <><strong>Crescimento sustentável</strong> sem precisar dobrar a folha de pagamento.</> },
    { text: <>Visão estratégica de <strong>dono</strong>, não de operador apagando incêndio todo dia.</> },
  ];

  return (
    <section className="benefits" id="beneficios">
      <div className="c">
        <div className="eyebrow">TRANSFORMAÇÃO</div>
        <h2 className="sec-h2">O que muda na sua empresa<br/>em 90 dias.</h2>
        <div className="rule"></div>
        <div className="benefits__grid">
          {items.map((item, i) => (
            <div className="benefit" key={i}>
              <div className="benefit__check">
                <svg width="12" height="9" viewBox="0 0 12 9" fill="none" stroke="#0c869f" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M1 4.5l3.5 3.5L11 1"/>
                </svg>
              </div>
              <p className="benefit__text">{item.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Benefits = Benefits;


// ═══════════════════════════════════════
// SocialProof.jsx
// ═══════════════════════════════════════
// SocialProof.jsx
const SocialProof = () => {
  const numbers = [
    { big: "+55", label: "empresas atendidas" },
    { big: "R$2M+", label: "em mídia gerenciada" },
    { big: "+11anos", label: "de experiência" },
    { big: "2.2x", label: "ROI médio em 90 dias" },
  ];

  const cases = [
    {
      seg: "E-commerce — Moda",
      before: "ROAS de 1.4 sem clareza de canal. Verba espalhada em 5 plataformas sem estratégia.",
      action: "Centralizamos dados no BI, reestruturamos tráfego e aplicamos IA no atendimento.",
      after: "ROAS 4.2",
      afterDetail: "em 4 meses",
    },
    {
      seg: "SaaS — B2B",
      before: "CAC alto, funil desconectado. Marketing e vendas operando em silos.",
      action: "Mapeamos jornada completa, criamos dashboards executivos e automatizamos qualificação.",
      after: "CAC -38%",
      afterDetail: "em 90 dias",
    },
    {
      seg: "Clínica Médica",
      before: "Tráfego gerando leads, mas conversão em consultas abaixo de 20%.",
      action: "BI de funil + automação de follow-up com IA + reorganização de campanha por serviço.",
      after: "Conversão 52%",
      afterDetail: "em 60 dias",
    },
  ];

  const testimonials = [
    {
      quote: "Antes eu achava que marketing era gasto. Depois do método ULTRA, eu sei exatamente quanto cada real investido retorna. É outra empresa.",
      name: "Carlos M.",
      role: "CEO, E-commerce de Suplementos",
      initial: "C",
    },
    {
      quote: "O Robson não entregou relatório. Entregou plano. Em 3 meses dobrei o faturamento mantendo a mesma equipe. BI mudou o jogo.",
      name: "Fernanda L.",
      role: "Diretora, Clínica Estética SP",
      initial: "F",
    },
    {
      quote: "Tentei 3 agências antes. Nenhuma sabia me dizer qual campanha trazia cliente bom. Com a UltraB isso ficou claro na primeira semana.",
      name: "Ricardo P.",
      role: "Sócio, Distribuidora Nacional",
      initial: "R",
    },
    {
      quote: "A IA que implementaram reduziu 6 horas de trabalho manual por dia no meu time. Parece exagero — não é.",
      name: "Aline S.",
      role: "COO, SaaS Jurídico",
      initial: "A",
    },
  ];

  return (
    <section className="proof" id="prova">
      <div className="c">
        <div className="eyebrow">PROVA SOCIAL</div>
        <h2 className="sec-h2">Resultado é o que importa.</h2>
        <div className="rule"></div>

        {/* Numbers */}
        <div className="proof__numbers">
          {numbers.map((n, i) => (
            <div className="proof__num-item" key={i}>
              <span className="big mono">{n.big}</span>
              <span className="label">{n.label}</span>
            </div>
          ))}
        </div>

        {/* Cases */}
        <div className="eyebrow" style={{marginBottom:"24px"}}>MINI-CASES</div>
        <div className="proof__cases">
          {cases.map((c, i) => (
            <div className="case-card" key={i}>
              <div className="case-card__seg">{c.seg}</div>
              <div className="case-card__body">
                <div className="case-card__row">
                  <span className="case-card__badge badge--before">Antes</span>
                  <p className="case-card__text">{c.before}</p>
                </div>
                <div className="case-card__row">
                  <span className="case-card__badge badge--action">Fizemos</span>
                  <p className="case-card__text">{c.action}</p>
                </div>
                <div className="case-card__row">
                  <span className="case-card__badge badge--after">Depois</span>
                  <div>
                    <div className="case-card__result">{c.after}</div>
                    <p className="case-card__text" style={{marginTop:"2px"}}>{c.afterDetail}</p>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Testimonials */}
        <div className="eyebrow" style={{marginTop:"64px", marginBottom:"24px"}}>DEPOIMENTOS</div>
        <div className="proof__testimonials">
          {testimonials.map((t, i) => (
            <div className="testimonial" key={i}>
              <p className="testimonial__quote">{t.quote}</p>
              <div className="testimonial__author">
                <div className="testimonial__avatar">{t.initial}</div>
                <div>
                  <div className="testimonial__name">{t.name}</div>
                  <div className="testimonial__role">{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.SocialProof = SocialProof;


// ═══════════════════════════════════════
// ForWhom.jsx
// ═══════════════════════════════════════
// ForWhom.jsx
const ForWhom = () => {
  const yes = [
    { text: <>Sua empresa fatura <b>acima de R$50k/mês</b> e quer estruturar pra escalar com previsibilidade.</> },
    { text: <>Você já investe em marketing digital e quer <b>profissionalizar a operação</b> com dado real.</> },
    { text: <>Quer aplicar <b>IA com critério</b>, não modinha. Com retorno mensurável.</> },
    { text: <>Está disposto a <b>decidir com base em número</b>, não em opinião ou feeling.</> },
  ];

  const no = [
    { text: <>Está procurando <b>fórmula mágica de enriquecer rápido</b> sem processo.</> },
    { text: <>Não tem <b>nenhum processo mínimo</b> rodando ainda. (Nesse caso, indicamos onde começar.)</> },
    { text: <>Quer terceirizar a decisão e <b>não se envolver</b> no plano estratégico.</> },
  ];

  return (
    <section className="forwhom" id="paraQuem">
      <div className="c">
        <div className="eyebrow">ALINHAMENTO</div>
        <h2 className="sec-h2">Honestidade salva<br/>tempo dos dois lados.</h2>
        <div className="rule"></div>
        <div className="forwhom__grid">
          <div className="forwhom__col forwhom__col--yes">
            <h3 className="forwhom__col-h">
              <span style={{color:"var(--accent)", fontSize:"20px"}}>✓</span>
              A consultoria é pra você se:
            </h3>
            <div className="forwhom__list">
              {yes.map((item, i) => (
                <div className="forwhom__item" key={i}>
                  <svg className="forwhom__icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <circle cx="8" cy="8" r="7.5" stroke="rgba(12,134,159,0.4)"/>
                    <path d="M4.5 8l2.5 2.5 4.5-5" stroke="#0c869f" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  <p>{item.text}</p>
                </div>
              ))}
            </div>
          </div>
          <div className="forwhom__col forwhom__col--no">
            <h3 className="forwhom__col-h">
              <span style={{color:"rgba(255,80,80,0.7)", fontSize:"20px"}}>✕</span>
              A consultoria NÃO é pra você se:
            </h3>
            <div className="forwhom__list">
              {no.map((item, i) => (
                <div className="forwhom__item" key={i}>
                  <svg className="forwhom__icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <circle cx="8" cy="8" r="7.5" stroke="rgba(255,80,80,0.3)"/>
                    <path d="M5.5 10.5l5-5M10.5 10.5l-5-5" stroke="rgba(255,80,80,0.6)" strokeWidth="1.8" strokeLinecap="round"/>
                  </svg>
                  <p>{item.text}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.ForWhom = ForWhom;


// ═══════════════════════════════════════
// AuthorityBlock.jsx
// ═══════════════════════════════════════
// AuthorityBlock.jsx
const AuthorityBlock = () => {
  const tags = [
  "Business Intelligence",
  "Marketing de Performance",
  "Inteligência Artificial Aplicada",
  "Sistemas de Informação",
  "Clientes Nacionais & Multinacionais"];


  return (
    <section className="authority" id="sobre">
      <div className="c">
        <div className="authority__inner">
          <div>
            <div className="authority__photo">
              <img src={window.__resources && window.__resources.portraitImg || "assets/portrait-robson.jpg"} alt="Robson Ernesto — Fundador UltraB Digital" loading="lazy" />
              <div className="authority__photo-badge">
                <div className="name">Robson Ernesto</div>
                <div className="role">Fundador & Estrategista — UltraB Digital</div>
              </div>
            </div>
          </div>
          <div className="authority__text">
            <div className="eyebrow">QUEM ESTÁ POR TRÁS DO MÉTODO</div>
            <h2 className="sec-h2">Rigor analítico<br />de grande empresa.<br />Execução de PME.</h2>
            <div className="rule"></div>
            <p className="sec-sub" style={{ marginTop: "0" }}>
              <strong style={{ color: "var(--fg-1)" }}>Robson Ernesto</strong> é especialista em Business Intelligence e estrategista digital. Graduado em Sistemas de Informação, com mais de 11 anos de experiência aplicando BI, Marketing de Performance e IA em empresas de diferentes portes — incluindo projetos para grandes clientes nacionais e multinacionais.
            


            </p>
            <p className="sec-sub" style={{ marginTop: "16px" }}>
              Em 2020 fundou a <strong style={{ color: "var(--fg-1)" }}>UltraB Digital</strong> com a missão de levar pra pequenas e médias
              empresas o mesmo rigor analítico que grandes corporações usam — só que executável,
              prático e ajustado à realidade do empreendedor brasileiro.
            </p>
            <div className="authority__pillars">
              {tags.map((tag, i) =>
              <div className="authority__pillar-tag" key={i}>
                  <span className="dot"></span>
                  {tag}
                </div>
              )}
            </div>
            <blockquote className="authority__quote">"Nada de fórmulas mágicas. Apenas método e consistência."

            </blockquote>
            <p style={{ fontSize: "13px", color: "var(--fg-3)", fontStyle: "italic" }}>
              Pilares do trabalho: Clareza · Resultado · Posicionamento.
            </p>
          </div>
        </div>
      </div>
    </section>);

};

window.AuthorityBlock = AuthorityBlock;

// ═══════════════════════════════════════
// Objections.jsx
// ═══════════════════════════════════════
// Objections.jsx
const Objections = () => {
  const items = [
    {
      q: '"Não tenho tempo agora."',
      a: <>Justamente por isso a consultoria. O nosso tempo é precioso, e por isso somos objetivos, com entregas práticas. <b>Menos reunião, mais decisão.</b></>,
    },
    {
      q: '"Já contratei agência e não funcionou."',
      a: <>Faz sentido. A maioria entrega diagnóstico e some. Aqui você recebe <b>plano com responsável, prazo e métrica</b> — e a gente acompanha junto até o resultado.</>,
    },
    {
      q: '"É caro."',
      a: <>Caro é <b>continuar queimando verba</b> sem saber o que dá retorno. O ROI da consultoria costuma se pagar nos <b>primeiros 90 dias</b> — o resto vira lucro.</>,
    },
    {
      q: '"Minha empresa é pequena demais."',
      a: <>Empresa pequena é quem <b>mais ganha com isso.</b> É mais barato ajustar a rota agora do que depois de 5 anos no piloto automático errado.</>,
    },
    {
      q: '"Não entendo de IA, vou ficar perdido."',
      a: <>Você não precisa entender de IA. <b>Eu entendo.</b> Você toma a decisão de negócio, eu opero a tecnologia.</>,
    },
    {
      q: '"Preciso de resultado imediato."',
      a: <>Clareza estratégica: <b>primeira semana.</b> Resultados mensuráveis: entre 30 e 90 dias. Não fazemos promessa impossível — fazemos entrega real.</>,
    },
  ];

  return (
    <section className="objections" id="objecoes">
      <div className="c">
        <div className="eyebrow">QUEBRA DE OBJEÇÕES</div>
        <h2 className="sec-h2">"Mas, Robson…"</h2>
        <div className="rule"></div>
        <div className="objections__grid">
          {items.map((item, i) => (
            <div className="objection" key={i}>
              <div className="objection__q">
                <span className="x">✕</span>
                <span>{item.q}</span>
              </div>
              <div className="objection__a">
                <span className="check">✓</span>
                <span>{item.a}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Objections = Objections;


// ═══════════════════════════════════════
// Scarcity.jsx
// ═══════════════════════════════════════
// Scarcity.jsx
const Scarcity = ({ onNavigate }) => {
  const handleNav = (id) => {
    if (onNavigate) onNavigate(id);
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.pageYOffset - 70;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  return (
    <section className="scarcity" id="vagas">
      <div className="c">
        <div className="scarcity__box">
          <div className="scarcity__text">
            <h3>⏳ Não escalamos com volume. Escalamos com seleção.</h3>
            <p>
              Cada consultoria é estratégica e personalizada — por isso atendemos no máximo{" "}
              <strong>5 novas empresas por mês.</strong> As próximas vagas são para{" "}
              <strong>os próximos 30 dias.</strong> Se quiser garantir, agende ainda esta semana.
            </p>
          </div>
          <button className="btn btn--primary btn--lg" onClick={() => handleNav("contato")}>
            Garantir minha vaga <span className="btn__arrow">→</span>
          </button>
        </div>
      </div>
    </section>);

};

window.Scarcity = Scarcity;

// ═══════════════════════════════════════
// FAQ.jsx
// ═══════════════════════════════════════
// FAQ.jsx
const FAQ = () => {
  const [open, setOpen] = React.useState(null);

  const items = [
    {
      q: "Quanto tempo dura o diagnóstico?",
      a: "Cerca de 30 minutos. Em uma conversa direta, mapeamos onde você está perdendo dinheiro e entregamos um plano de ação claro, baseado em dados e estratégia, para gerar resultados já nos próximos dias.",
    },
    {
      q: "Preciso ter equipe de marketing ou TI montada?",
      a: "Não. A consultoria se adapta ao seu cenário — você sozinho, com equipe interna ou com agência terceirizada. Avaliamos o melhor modelo na fase de diagnóstico.",
    },
    {
      q: "Vocês executam ou só orientam?",
      a: "Atuamos como estrategistas + braço operacional nos pontos críticos. Tráfego pago, BI e IA são executados pela nossa equipe — não só recomendados.",
    },
    {
      q: "Em quanto tempo vejo resultado?",
      a: "Clareza estratégica: primeira semana. Resultados mensuráveis: entre 30 e 90 dias, dependendo do cenário inicial e dos canais envolvidos.",
    },
    {
      q: "Funciona pra qualquer segmento?",
      a: "Funciona pra qualquer empresa que tenha dado, cliente e processo. O método se adapta — os princípios não mudam. Já atendemos e-commerce, serviços, SaaS, clínicas e distribuidoras.",
    },
    {
      q: "Quanto custa?",
      a: "O investimento é definido após o diagnóstico gratuito — porque cada empresa tem um cenário diferente. Agende a conversa e saímos com uma proposta clara.",
    },

  ];

  const toggle = (i) => setOpen(open === i ? null : i);

  return (
    <section className="faq" id="faq">
      <div className="c">
        <div className="eyebrow">FAQ</div>
        <h2 className="sec-h2">Perguntas frequentes.</h2>
        <div className="rule"></div>
        <div className="faq__list">
          {items.map((item, i) => (
            <div className={"faq__item" + (open === i ? " open" : "")} key={i}>
              <button className="faq__q" onClick={() => toggle(i)}>
                <span>{item.q}</span>
                <span className="faq__icon">+</span>
              </button>
              <div className="faq__a" style={{
                maxHeight: open === i ? "400px" : "0",
                overflow: "hidden",
                transition: "max-height 0.4s cubic-bezier(0.22,1,0.36,1)",
                padding: open === i ? "0 28px 22px" : "0 28px",
              }}>
                <p>{item.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.FAQ = FAQ;


// ═══════════════════════════════════════
// FinalCTA.jsx
// ═══════════════════════════════════════
// FinalCTA.jsx
const FinalCTA = ({ onNavigate }) => {
  const [submitted, setSubmitted] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [form, setForm] = React.useState({ name: "", email: "", company: "", phone: "", message: "" });
  const onChange = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  // Máscara de celular: (XX) XXXXX-XXXX
  const onPhoneChange = (e) => {
    let v = e.target.value.replace(/\D/g, "").slice(0, 11);
    if (v.length > 10) {
      v = v.replace(/^(\d{2})(\d{5})(\d{4})$/, "($1) $2-$3");
    } else if (v.length > 6) {
      v = v.replace(/^(\d{2})(\d{4})(\d*)$/, "($1) $2-$3");
    } else if (v.length > 2) {
      v = v.replace(/^(\d{2})(\d*)$/, "($1) $2");
    }
    setForm(f => ({ ...f, phone: v }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    try {
      const res = await fetch("https://formspree.io/f/xeenkbya", {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify({
          nome: form.name,
          email: form.email,
          whatsapp: form.phone,
          empresa: form.company,
          mensagem: form.message,
          _subject: "🚀 Novo diagnóstico solicitado — UltraB Digital",
          _replyto: form.email,
        }),
      });
      if (res.ok) {
        setSubmitted(true);
      } else {
        const data = await res.json();
        setError(data?.errors?.[0]?.message || "Erro ao enviar. Tente novamente.");
      }
    } catch (err) {
      setError("Erro de conexão. Verifique sua internet e tente novamente.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <section className="final-cta" id="contato">
      <div className="final-cta__bg"></div>
      <div className="c">
        <div className="final-cta__grid">
          {/* Left — copy */}
          <div>
            <div className="eyebrow">CTA FINAL</div>
            <h2 className="final-cta__h" style={{textAlign:"left", margin:"12px 0 20px"}}>
              A diferença entre quem cresce e quem trava está na decisão de hoje.
            </h2>
            <p className="final-cta__sub" style={{textAlign:"left", margin:"0 0 32px"}}>
              Você pode fechar essa página e seguir tomando decisão no escuro. Ou pode dar
              30 minutos do seu dia e sair com clareza do que sua empresa precisa fazer agora
              para crescer com BI, Marketing e IA trabalhando juntos.
            </p>
            <ul style={{listStyle:"none", display:"flex", flexDirection:"column", gap:"12px", marginBottom:"32px"}}>
              {["Diagnóstico inicial gratuito", "Plano executável em até 7 dias", "Acompanhamento contínuo de BI + Performance"].map((item, i) => (
                <li key={i} style={{display:"flex", alignItems:"flex-start", gap:"12px", fontSize:"15px", color:"var(--fg-2)"}}>
                  <span style={{width:"22px",height:"22px",borderRadius:"50%",background:"rgba(12,134,159,0.15)",border:"1px solid rgba(12,134,159,0.4)",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0, marginTop:"1px"}}>
                    <svg width="11" height="8" viewBox="0 0 11 8" fill="none" stroke="#0c869f" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M1 4l3 3 6-6"/></svg>
                  </span>
                  <span style={{flex:1}}>{item}</span>
                </li>
              ))}
            </ul>
            <div className="final-cta__ps">
              <p><span className="ps-label">PS</span> Se você chegou até aqui, alguma parte sua já sabe que está deixando dinheiro na mesa. <strong>Dado bom + estratégia certa + IA aplicada</strong> muda o jogo em semanas, não anos.</p>
              <p style={{marginTop:"10px"}}><span className="ps-label">PPS</span> A UltraB <strong>não é pra todo mundo.</strong> É pra quem quer parar de operar o próprio negócio e começar a liderar ele.</p>
            </div>
          </div>

          {/* Right — form */}
          <div className="final-cta__form-panel">
            {submitted ? (
              <div style={{padding:"40px 0"}}>
                <div className="eyebrow" style={{color:"#ACE8FF"}}>RECEBIDO</div>
                <h3 style={{fontSize:"24px",fontWeight:"700",color:"#fff",margin:"12px 0 16px"}}>
                  Obrigado, {form.name.split(" ")[0] || "amigo"}.
                </h3>
                <p style={{fontSize:"15px",color:"rgba(255,255,255,0.75)",lineHeight:"1.65"}}>
                  Entraremos em contato em até 24h. Prepare-se para a clareza que você precisa.
                </p>
              </div>
            ) : (
              <form onSubmit={handleSubmit}>
                <h3 style={{fontSize:"20px",fontWeight:"700",color:"#fff",marginBottom:"6px"}}>Agendar diagnóstico gratuito</h3>
                <p style={{fontSize:"14px",color:"rgba(255,255,255,0.6)",marginBottom:"28px"}}>30 minutos. Sem compromisso.</p>
                {[
                  {key:"name",  label:"Nome",    placeholder:"Seu nome completo",    type:"text",  required:true,  onChange: onChange("name")},
                  {key:"email", label:"E-mail",  placeholder:"voce@empresa.com",     type:"email", required:true,  onChange: onChange("email"), pattern:"[a-z0-9._%+\\-]+@[a-z0-9.\\-]+\\.[a-z]{2,}$"},
                  {key:"phone", label:"WhatsApp",placeholder:"(11) 99999-9999",      type:"tel",   required:false, onChange: onPhoneChange, maxLength:15},
                  {key:"company",label:"Empresa",placeholder:"Nome da empresa",      type:"text",  required:false, onChange: onChange("company")},
                ].map(f => (
                  <div key={f.key} style={{marginBottom:"16px"}}>
                    <label style={{fontSize:"11px",letterSpacing:"0.18em",textTransform:"uppercase",color:"rgba(255,255,255,0.6)",fontWeight:"500",marginBottom:"6px",display:"block"}}>{f.label}</label>
                    <input
                      type={f.type}
                      value={form[f.key]}
                      onChange={f.onChange}
                      placeholder={f.placeholder}
                      required={f.required}
                      pattern={f.pattern || undefined}
                      maxLength={f.maxLength || undefined}
                      style={{width:"100%",background:"rgba(0,0,0,0.25)",border:"1px solid rgba(255,255,255,0.12)",color:"#fff",padding:"14px 16px",borderRadius:"10px",fontFamily:"inherit",fontSize:"15px",outline:"none",boxSizing:"border-box"}}
                    />
                  </div>
                ))}
                <div style={{marginBottom:"20px"}}>
                  <label style={{fontSize:"11px",letterSpacing:"0.18em",textTransform:"uppercase",color:"rgba(255,255,255,0.6)",fontWeight:"500",marginBottom:"6px",display:"block"}}>Sobre o seu negócio</label>
                  <textarea
                    value={form.message}
                    onChange={onChange("message")}
                    placeholder="Qual é o principal desafio que você quer resolver?"
                    rows={3}
                    style={{width:"100%",background:"rgba(0,0,0,0.25)",border:"1px solid rgba(255,255,255,0.12)",color:"#fff",padding:"14px 16px",borderRadius:"10px",fontFamily:"inherit",fontSize:"15px",outline:"none",resize:"vertical",boxSizing:"border-box"}}
                  />
                </div>
                <button type="submit" className="btn btn--primary" disabled={loading} style={{width:"100%",justifyContent:"center",fontSize:"15px",padding:"16px 28px",opacity: loading ? 0.7 : 1}}>
                  {loading ? "Enviando..." : <><span>Agendar meu diagnóstico gratuito</span> <span className="btn__arrow">→</span></>}
                </button>
                {error && (
                  <p style={{fontSize:"13px",color:"#ff6b6b",textAlign:"center",marginTop:"10px"}}>
                    ⚠️ {error}
                  </p>
                )}
                <p style={{fontSize:"12px",color:"rgba(255,255,255,0.4)",textAlign:"center",marginTop:"12px"}}>
                  Atendimento limitado a 5 empresas/mês. Vagas para Junho/2026.
                </p>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

window.FinalCTA = FinalCTA;


// ═══════════════════════════════════════
// SiteFooter.jsx
// ═══════════════════════════════════════
// SiteFooter.jsx
const SiteFooter = ({ onNavigate }) => {
  const handleNav = (id) => {
    if (onNavigate) onNavigate(id);
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.pageYOffset - 70;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  const navLinks = [
    { label: "Método ULTRA",   id: "metodo" },
    { label: "Como Funciona",  id: "como" },
    { label: "Resultados",     id: "prova" },
    { label: "Sobre Robson",   id: "sobre" },
    { label: "FAQ",            id: "faq" },
    { label: "Contato",        id: "contato" },
  ];

  const contacts = [
    {
      href: "https://wa.me/5511949089515",
      label: "+55 11 94908-9515",
      icon: (
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.63 3.4 2 2 0 0 1 3.6 1.22h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.81a16 16 0 0 0 6.29 6.29l.96-.96a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>
        </svg>
      ),
    },
    {
      href: "mailto:robson@ultrabdigital.com",
      label: "robson@ultrabdigital.com",
      icon: (
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="5" width="18" height="14" rx="2"/>
          <path d="M3 7l9 6 9-6"/>
        </svg>
      ),
    },
    {
      href: "https://instagram.com/orobsonernesto",
      label: "@orobsonernesto",
      target: "_blank",
      icon: (
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <rect x="2" y="2" width="20" height="20" rx="5"/>
          <circle cx="12" cy="12" r="4"/>
          <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/>
        </svg>
      ),
    },
    {
      href: "https://ultrabdigital.com",
      label: "ultrabdigital.com",
      target: "_blank",
      icon: (
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="9"/>
          <path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/>
        </svg>
      ),
    },
  ];

  return (
    <footer className="footer">
      <div className="c footer__inner">
        {/* Brand */}
        <div>
          <img
            src={window.__resources && window.__resources.logoImg || "assets/ultrab-horizontal-branco.png"}
            alt="Ultrab Digital"
            style={{height:"32px", width:"auto"}}
          />
          <p className="footer__tagline">
            Consultoria estratégica que une BI, Marketing Digital e IA para empresas que crescem com previsibilidade.
          </p>
          <div className="footer__hash">#MetodoULTRA</div>
        </div>

        {/* Cols */}
        <div className="footer__cols">
          {/* Navegação */}
          <div className="footer__col">
            <div className="footer__col-h">Navegação</div>
            {navLinks.map((l, i) => (
              <a key={i} onClick={() => handleNav(l.id)} style={{cursor:"pointer"}}>
                {l.label}
              </a>
            ))}
          </div>

          {/* Espaço vazio / padding */}
          <div className="footer__col"></div>

          {/* Contato com ícones */}
          <div className="footer__col">
            <div className="footer__col-h">Contato</div>
            {contacts.map((c, i) => (
              <a
                key={i}
                href={c.href}
                target={c.target || undefined}
                rel={c.target ? "noopener noreferrer" : undefined}
                style={{display:"flex", alignItems:"center", gap:"8px"}}
              >
                <span style={{
                  color:"var(--accent)", flexShrink:0,
                  display:"flex", alignItems:"center"
                }}>
                  {c.icon}
                </span>
                {c.label}
              </a>
            ))}
          </div>
        </div>
      </div>

      <div className="c">
        <div className="footer__bar">
          <span>© 2026 Ultrab Digital. Todos os direitos reservados.</span>
          <span>Consagre ao Senhor tudo o que faz e os seus planos serão bem-sucedidos. — Provérbios 16:3</span>
        </div>
      </div>
    </footer>
  );
};

window.SiteFooter = SiteFooter;