/* global React */
// ── Remaining sections: pricing, objections, guarantee, urgency, FAQ, CTA, footer ──

function PricingSection() {
  return (
    <section className="section" id="precos" style={{background: 'var(--surface-warm)'}}>
      <div className="shell-wide">
        <div className="sec-head">
          <div>
            <span className="kicker"><span className="num">09</span> Investimento</span>
            <h2 className="display-lg" style={{marginTop: 24}}>
              Tudo incluso. <em style={{fontStyle:'italic'}}>Sem letra miúda.</em>
            </h2>
          </div>
          <p className="lede">
            Menos do que você gasta num almoço por dia. Todos os módulos, todas as atualizações, suporte
            humano e LothusApp grátis pra todos os clientes.
          </p>
        </div>

        <div className="pricing-grid">
          <div className="price-card">
            <div className="head">
              <div>
                <div className="name">O que está incluído</div>
              </div>
            </div>
            <div className="price-includes">
              <div className="row"><span className="lbl">Sistema LothusPDV completo (caixa + estoque + fiscal)</span><span className="v">incluso</span></div>
              <div className="row"><span className="lbl">Módulos LothusCompras e LothusRetaguarda</span><span className="v">incluso</span></div>
              <div className="row"><span className="lbl">LothusApp — faturamento em tempo real + auditoria de vendas</span><span className="v gratis">grátis</span></div>
              <div className="row"><span className="lbl">Até 3 micros em rede no mesmo plano</span><span className="v">incluso</span></div>
              <div className="row"><span className="lbl">Suporte humano por telefone e WhatsApp</span><span className="v">incluso</span></div>
              <div className="row"><span className="lbl">Atualizações inclusas na mensalidade</span><span className="v">incluso</span></div>
              <div className="row"><span className="lbl">Funcionamento offline garantido</span><span className="v">incluso</span></div>
            </div>
          </div>

          <div className="price-card featured">
            <div className="head">
              <div className="name">Plano único</div>
              <span className="badge-included">mensal · sem fidelidade</span>
            </div>
            <div className="big">
              <span className="cur">R$</span>
              <span>159</span>
              <span style={{fontSize:'0.5em', paddingBottom: '0.1em', color: 'oklch(from var(--surface) l c h / 0.55)'}}>,90<sup style={{fontSize:'0.55em', marginLeft:'2px'}}>*</sup></span>
              <span className="per">/ mês</span>
            </div>
            <div className="price-fine">Menos de R$ 5,40 por dia. Sem contrato de fidelidade.</div>
            <div className="price-fine" style={{marginTop: 8, fontSize: 12.5, opacity: 0.75}}>
              <strong>* Valor base.</strong> O preço final varia conforme a quantidade de computadores em rede e
              módulos contratados — definido depois de uma rápida apresentação do sistema. Sem letra miúda.
            </div>

            <div className="impl" style={{background: 'oklch(from var(--surface) l c h / 0.08)', borderColor: 'oklch(from var(--surface) l c h / 0.18)', color: 'oklch(from var(--surface) l c h / 0.85)'}}>
              <strong style={{color:'var(--accent)'}}>Implantação a partir de R$ 300,00</strong> — taxa única na contratação.
              Inclui treinamento da equipe e conversão de dados. Valor varia conforme tamanho e complexidade
              da operação.
            </div>

            <div className="extra">+ R$ 30,00 por ponto adicional além dos 3</div>

            <div className="cta-row">
              <a className="btn btn-primary" href="https://wa.me/5511947977230?text=Ol%C3%A1!%20Vim%20pelo%20site%20do%20LothusPDV.%20Gostaria%20de%20agendar%20uma%20apresenta%C3%A7%C3%A3o." target="_blank" rel="noopener" style={{background:'var(--accent)', color:'var(--accent-ink)'}}>
                Agendar apresentação <span className="arrow"><IconArrow size={16}/></span>
              </a>
              <a className="btn btn-secondary" href="https://wa.me/5511947977230?text=Ol%C3%A1!%20Vim%20pelo%20site%20do%20LothusPDV.%20Gostaria%20de%20agendar%20uma%20apresenta%C3%A7%C3%A3o." target="_blank" rel="noopener" style={{borderColor:'oklch(from var(--surface) l c h / 0.3)', color:'var(--surface)'}}>
                <IconWhatsapp size={16}/> WhatsApp
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ObjectionsSection() {
  const objs = [
    { q: "Minha loja é pequena — será que preciso disso?",
      a: "Quanto menor a operação, mais cada centavo precisa ser controlado. O LothusPDV foi feito exatamente pra quem não tem equipe de TI nem tempo a perder. Você instala, treina em poucas horas e começa a ver o caixa fechar redondo na primeira semana." },
    { q: "R$ 159,90 mais implantação é caro pra mim.",
      a: "R$ 159,90 é o valor base. O preço final varia conforme a quantidade de computadores em rede e módulos — definido depois de uma rápida apresentação. Ainda assim, menos de R$ 5,40 por dia. Compare com o custo de um estoque descontrolado, um caixa que não fecha e produto sumindo no PDV sem você saber. O sistema se paga no primeiro mês." },
    { q: "Tenho medo de trocar e perder meus dados.",
      a: "A implantação inclui conversão de dados — nossa equipe migra o histórico junto com você. Você só troca depois de estar seguro. Sem pressa, sem risco, sem perder informação." },
    { q: "Já tentei sistema antes e foi uma bagunça.",
      a: "Entendemos. Por isso o suporte do LothusPDV é humano — você fala com alguém que conhece o sistema e resolve na hora. Não tem robô, não tem ticket que some, não tem PDF que não ajuda." },
    { q: "E se a internet cair?",
      a: "Sem problema. O sistema opera normalmente offline e sincroniza tudo quando a conexão voltar. Suas vendas nunca param — mesmo no horário de pico, mesmo com a operadora fora do ar." }
  ];
  const [active, setActive] = React.useState(0);
  return (
    <section className="section" id="duvidas">
      <div className="shell-wide">
        <div className="sec-head">
          <div>
            <span className="kicker"><span className="num">10</span> Objeções</span>
            <h2 className="display-lg" style={{marginTop: 24}}>
              "Mas e <em style={{fontStyle:'italic'}}>se…</em>"
            </h2>
          </div>
          <p className="lede">
            As perguntas que todo varejista faz antes de trocar de sistema. Respondidas direto, sem rodeio.
          </p>
        </div>
        <div className="objections">
          <div className="obj-tabs">
            {objs.map((o, i) => (
              <button
                className={`obj-tab ${i === active ? 'active' : ''}`}
                key={i}
                onClick={() => setActive(i)}>
                <span className="n">{String(i+1).padStart(2,'0')}</span>
                <span>{o.q.replace(/—.*/, '').replace(/\?$/, '').trim().split(' ').slice(0,5).join(' ')}…</span>
                <span className="arrow"><IconArrow size={14}/></span>
              </button>
            ))}
          </div>
          <div className="obj-panel">
            <div className="q">{objs[active].q}</div>
            <div className="a">{objs[active].a}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function GuaranteeSection() {
  return (
    <section className="section-tight" id="garantia">
      <div className="shell-wide">
        <div className="guarantee">
          <div>
            <span className="kicker no-rule" style={{color:'var(--accent)'}}><span className="num" style={{color:'var(--accent)'}}>11</span> Garantia</span>
            <h2 className="display-lg" style={{marginTop: 24, color:'var(--surface)'}}>
              Sem risco <em style={{fontStyle:'italic'}}>pra você.</em>
            </h2>
            <p className="lede" style={{color:'oklch(from var(--surface) l c h / 0.75)', marginTop: 20}}>
              Você não precisa decidir no escuro. Antes de assinar qualquer coisa, fazemos uma apresentação
              completa do sistema na sua realidade — você vê funcionando, tira todas as dúvidas e só decide
              depois de ter certeza.
            </p>
            <p className="lede" style={{color:'oklch(from var(--surface) l c h / 0.55)', marginTop: 12, fontSize: 15}}>
              Sem pressão. Sem letra miúda. Sem compromisso antes de você estar convicto.
            </p>
            <div style={{marginTop: 36, display:'flex', gap: 12, flexWrap:'wrap'}}>
              <a className="btn btn-amber" href="https://wa.me/5511947977230?text=Ol%C3%A1!%20Vim%20pelo%20site%20do%20LothusPDV.%20Gostaria%20de%20agendar%20uma%20apresenta%C3%A7%C3%A3o." target="_blank" rel="noopener">
                Agendar apresentação <span className="arrow"><IconArrow size={16}/></span>
              </a>
              <a className="btn btn-secondary" href="https://wa.me/5511947977230?text=Ol%C3%A1!%20Vim%20pelo%20site%20do%20LothusPDV.%20Gostaria%20de%20agendar%20uma%20apresenta%C3%A7%C3%A3o." target="_blank" rel="noopener" style={{background:'transparent', borderColor:'oklch(from var(--surface) l c h / 0.25)', color:'var(--surface)'}}>
                <IconWhatsapp size={16}/> Falar com humano
              </a>
            </div>
          </div>
          <div>
            <div className="seal">
              <div className="inner">
                <IconShield size={28} sw={1.4}/>
                <div style={{marginTop: 10}}>Sem compromisso</div>
                <span className="sub">Apresentação gratuita</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function UrgencySection() {
  return (
    <section className="urgency" id="urgencia">
      <div className="shell">
        <span className="kicker no-rule"><span className="num">12</span> Urgência</span>
        <h2 className="display-xl" style={{marginTop: 28}}>
          Cada semana sem controle é <em style={{fontStyle:'italic', color:'var(--primary)'}}>dinheiro que some.</em>
        </h2>
        <p className="lede" style={{margin:'32px auto 0'}}>
          Não existe o momento perfeito pra organizar a loja. Existe o momento em que você decide parar de
          perder dinheiro. Cada semana sem o sistema certo é mais uma semana de estoque impreciso, caixa
          com diferença e produto sumindo no PDV sem você saber.
        </p>
        <div className="urgency-cta">
          <a className="btn btn-primary" href="https://wa.me/5511947977230?text=Ol%C3%A1!%20Vim%20pelo%20site%20do%20LothusPDV.%20Gostaria%20de%20agendar%20uma%20apresenta%C3%A7%C3%A3o." target="_blank" rel="noopener">
            Agendar apresentação agora <span className="arrow"><IconArrow size={16}/></span>
          </a>
          <a className="btn btn-secondary" href="https://wa.me/5511947977230?text=Ol%C3%A1!%20Vim%20pelo%20site%20do%20LothusPDV.%20Gostaria%20de%20agendar%20uma%20apresenta%C3%A7%C3%A3o." target="_blank" rel="noopener">
            <IconWhatsapp size={16}/> WhatsApp
          </a>
        </div>
        <div className="hero-fine" style={{justifyContent:'center', marginTop: 24}}>
          <span><span className="dot"></span>Gratuito</span>
          <span><span className="dot"></span>Sem compromisso</span>
          <span><span className="dot"></span>Resposta em minutos</span>
        </div>
      </div>
    </section>
  );
}

function FaqSection() {
  const faqs = [
    { q: "O sistema funciona sem internet?",
      a: "Sim. Opera normalmente offline e sincroniza tudo quando a conexão voltar. Suas vendas não param — mesmo no pico, mesmo com a operadora fora do ar." },
    { q: "O que é o LothusApp?",
      a: "É o app mobile incluso gratuitamente pra todos os clientes. Você acompanha o faturamento do dia e do mês em tempo real direto pelo celular. E com o modo auditoria, se um vendedor deletar um produto no PDV sem finalizar a venda, você vê: data, hora e quem fez." },
    { q: "Quanto custa a implantação?",
      a: "A partir de R$ 300,00 — taxa única paga uma vez na contratação. Inclui treinamento da equipe e conversão dos seus dados. O valor varia conforme o tamanho e complexidade da operação." },
    { q: "O plano de R$ 159,90 serve pra quantos caixas?",
      a: "R$ 159,90 é o valor base, pra até 3 micros em rede. Se sua operação tiver mais pontos, o valor é ajustado: + R$ 30,00 por ponto adicional. Como cada loja é diferente, fazemos uma rápida apresentação antes pra fechar o valor exato do seu cenário." }
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq">
      <div className="shell-wide">
        <div className="faq">
          <div>
            <span className="kicker"><span className="num">13</span> FAQ</span>
            <h2 className="display-lg" style={{marginTop: 24}}>
              Perguntas que <em style={{fontStyle:'italic'}}>todo varejista faz.</em>
            </h2>
            <p className="lede" style={{marginTop: 24, fontSize: 16}}>
              Não achou sua dúvida? Manda no WhatsApp — a gente responde rápido e em português, não em ticket.
            </p>
            <div style={{marginTop: 24}}>
              <a className="btn btn-secondary" href="https://wa.me/5511947977230?text=Ol%C3%A1!%20Vim%20pelo%20site%20do%20LothusPDV.%20Gostaria%20de%20agendar%20uma%20apresenta%C3%A7%C3%A3o." target="_blank" rel="noopener">
                <IconWhatsapp size={16}/> Tirar dúvida no WhatsApp
              </a>
            </div>
          </div>
          <div className="faq-list">
            {faqs.map((f, i) => (
              <div className={`faq-item ${i === open ? 'open' : ''}`} key={i}>
                <button className="faq-q" onClick={() => setOpen(i === open ? -1 : i)}>
                  <span>{f.q}</span>
                  <span className="plus"><IconPlus size={14}/></span>
                </button>
                <div className="faq-a"><div style={{paddingRight: 32}}>{f.a}</div></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FinalCta() {
  return (
    <section className="section" id="agendar">
      <div className="shell-wide">
        <div className="cta-final">
          <span className="kicker no-rule" style={{color:'oklch(from var(--primary-ink) l c h / 0.7)'}}>
            <span className="num" style={{color:'var(--accent)'}}>→</span> Próximo passo
          </span>
          <h2 className="display-xl" style={{marginTop: 28, color:'var(--primary-ink)'}}>
            Ver o LothusPDV <em style={{fontStyle:'italic', color:'var(--accent)'}}>em ação.</em>
          </h2>
          <p className="lede" style={{marginTop: 24, maxWidth: '54ch'}}>
            Apresentação gratuita, sem compromisso. Você vê o sistema funcionando na realidade da sua loja
            e decide depois — sem pressão, sem letra miúda.
          </p>
          <div className="cta-row">
            <a className="btn btn-primary" href="https://wa.me/5511947977230?text=Ol%C3%A1!%20Vim%20pelo%20site%20do%20LothusPDV.%20Gostaria%20de%20agendar%20uma%20apresenta%C3%A7%C3%A3o." target="_blank" rel="noopener">
              Agendar apresentação gratuita <span className="arrow"><IconArrow size={16}/></span>
            </a>
            <a className="btn btn-secondary" href="https://wa.me/5511947977230?text=Ol%C3%A1!%20Vim%20pelo%20site%20do%20LothusPDV.%20Gostaria%20de%20agendar%20uma%20apresenta%C3%A7%C3%A3o." target="_blank" rel="noopener">
              <IconWhatsapp size={16}/> Resposta em minutos no WhatsApp
            </a>
          </div>
          <div className="hero-fine" style={{marginTop: 28, color:'oklch(from var(--primary-ink) l c h / 0.6)'}}>
            <span><span className="dot" style={{background:'oklch(from var(--primary-ink) l c h / 0.4)'}}></span>+500 lojas atendidas</span>
            <span><span className="dot" style={{background:'oklch(from var(--primary-ink) l c h / 0.4)'}}></span>15 anos de mercado</span>
            <span><span className="dot" style={{background:'oklch(from var(--primary-ink) l c h / 0.4)'}}></span>Suporte humano</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="shell-wide">
        <div className="footer-inner">
          <div className="footer-brand">
            <div className="nav-brand">
              <span className="footer-mark"><LotusMark size={36}/></span>
              <span className="footer-wordmark">
                LothusPDV
                <small>by SYSIT</small>
              </span>
            </div>
            <p>
              Sistema de gestão completo para o comércio varejista. Frente de caixa, estoque, fiscal e
              app mobile. Desenvolvido há mais de 15 anos pela SYSIT Comércio e Suporte em Informática.
            </p>
            <p className="footer-url">
              www.lothuspdv.com.br
            </p>
          </div>
          <div className="footer-col">
            <h5>Sistema</h5>
            <ul>
              <li><a href="#solucao">LothusPDV</a></li>
              <li><a href="#solucao">LothusCompras</a></li>
              <li><a href="#solucao">LothusRetaguarda</a></li>
              <li><a href="#solucao">LothusApp</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Empresa</h5>
            <ul>
              <li><a href="#prova">Clientes</a></li>
              <li><a href="#faq">Perguntas frequentes</a></li>
              <li><a href="#precos">Preços</a></li>
              <li><a href="https://wa.me/5511947977230?text=Ol%C3%A1!%20Vim%20pelo%20site%20do%20LothusPDV.%20Gostaria%20de%20agendar%20uma%20apresenta%C3%A7%C3%A3o." target="_blank" rel="noopener">Apresentação</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Contato</h5>
            <ul>
              <li><a href="https://wa.me/5511947977230?text=Ol%C3%A1!%20Vim%20pelo%20site%20do%20LothusPDV.%20Gostaria%20de%20agendar%20uma%20apresenta%C3%A7%C3%A3o." target="_blank" rel="noopener">WhatsApp (11) 94797-7230</a></li>
              <li><a href="mailto:leandro@sysit.com.br?subject=Quero%20conhecer%20o%20LothusPDV">leandro@sysit.com.br</a></li>
              <li><a href="https://wa.me/5511947977230" target="_blank" rel="noopener">Suporte humano</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-meta">
          <span>© 2026 LothusPDV · by SYSIT · todos os direitos reservados</span>
          <span>lothuspdv.com.br · feito pra varejista de verdade</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  PricingSection, ObjectionsSection, GuaranteeSection,
  UrgencySection, FaqSection, FinalCta, Footer
});