/* global React */
// ── Section components for LothusPDV landing ──────────────────────────────

const HEADLINES = {
  A: { kicker: "Variação A · dor", text: <>Seu sistema de caixa <em style={{fontStyle:'italic', color:'var(--primary)'}}>trava</em>, some dados e ainda cobra caro por isso?</> },
  B: { kicker: "Variação B · resultado", text: <>Controle de caixa, estoque e nota fiscal a partir de <span style={{color:'var(--primary)'}}>R$ 159,90<sup style={{fontSize:'0.45em', fontWeight:600, marginLeft:'2px'}}>*</sup></span>. Sem travar, sem perder dado, sem complicação.</> },
  C: { kicker: "Variação C · provocação", text: <>A maioria dos varejistas não sabe quanto <em style={{fontStyle:'italic'}}>lucrou ontem</em>. Você sabe?</> }
};

function Nav({ headlineKey }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 8);
    on();
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <header className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="shell-wide nav-inner">
        <a href="#top" className="nav-brand" onClick={(e) => {
          e.preventDefault();
          window.scrollTo({ top: 0, behavior: 'smooth' });
        }} aria-label="Voltar ao topo">
          <LothusLogo height={36}/>
        </a>
        <nav className="nav-links">
          <a href="#solucao">Sistema</a>
          <a href="#beneficios">Benefícios</a>
          <a href="#precos">Preço</a>
          <a href="#faq">Perguntas</a>
        </nav>
        <div className="nav-cta">
          <a className="btn btn-ghost" 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">Falar no WhatsApp</a>
          <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 <span className="arrow"><IconArrow size={16}/></span>
          </a>
        </div>
      </div>
    </header>
  );
}

function Hero({ headlineKey }) {
  const h = HEADLINES[headlineKey] || HEADLINES.B;
  return (
    <section className="hero">
      <div className="shell-wide">
        <div className="hero-grid">
          <div className="hero-copy">
            <span className="chip">
              <span className="dot"></span>
              15 anos no comércio · +500 lojas
            </span>
            <h1 className="display-xl">
              <span className="hero-h-rotator">
                <span key={headlineKey}>{h.text}</span>
              </span>
            </h1>
            <p className="hero-sub">
              O LothusPDV reúne frente de caixa, controle de estoque e emissão de nota fiscal num só sistema —
              com app mobile pra você acompanhar tudo em tempo real, de onde estiver.
            </p>
            <div className="hero-meta-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}/> Falar no WhatsApp
              </a>
            </div>
            <div className="hero-fine">
              <span><span className="dot"></span>Sem compromisso</span>
              <span><span className="dot"></span>Você vê o sistema funcionando antes de decidir</span>
              <span><span className="dot"></span>Resposta em minutos</span>
            </div>
          </div>
          <div className="hero-visual hero-visual-devices">
            <div className="hero-backdrop"></div>
            <img className="hero-devices" src="assets/hero-devices.png" alt="LothusPDV em operação — desktop, impressora fiscal, leitor de código de barras e laptop com módulo de compras"/>
            <PhoneMock/>
            <div className="hero-callout hero-callout-2">
              <span className="dot orange"></span>
              <div>
                <strong>+50 mil NFs</strong>
                <small>emitidas hoje</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function StatsStrip() {
  const stats = [
    { num: "+500", lbl: "lojas usando\ntodos os dias" },
    { num: "+15", lbl: "anos ajudando\nvarejistas" },
    { num: "+1.800", lbl: "usuários\ndiários" },
    { num: "R$ 159,90*", lbl: "por mês —\na partir de" }
  ];
  return (
    <section className="stats-strip">
      <div className="shell-wide">
        <div className="stats-strip-grid">
          {stats.map((s) => (
            <div className="stats-strip-item" key={s.num}>
              <div className="num">{s.num}</div>
              <div className="lbl">{s.lbl.split('\n').map((l,i) => <div key={i}>{l}</div>)}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PainSection() {
  const pains = [
    { n: "01", txt: "O caixa fecha com diferença e você não consegue rastrear onde foi o dinheiro.", tag: "Caixa" },
    { n: "02", txt: "O estoque some — mas ninguém sabe quem vendeu, quando ou por quanto.", tag: "Estoque" },
    { n: "03", txt: "Na hora de emitir nota fiscal, o sistema trava. O cliente espera. Você passa vergonha.", tag: "Fiscal" },
    { n: "04", txt: "Você está fora da loja e não tem como saber o que está acontecendo no caixa agora.", tag: "Mobilidade" },
    { n: "05", txt: "Você suspeita que produto some no PDV sem virar venda — mas não tem como provar.", tag: "Auditoria" },
    { n: "06", txt: "O suporte do sistema atual some quando você mais precisa — ou manda PDF que não resolve nada.", tag: "Suporte" }
  ];
  return (
    <section className="section" id="dor">
      <div className="shell-wide">
        <div className="sec-head">
          <div>
            <span className="kicker"><span className="num">05</span> Identificação</span>
            <h2 className="display-lg" style={{marginTop: 24}}>
              Você se identifica com alguma <em style={{fontStyle:'italic'}}>dessas situações?</em>
            </h2>
          </div>
          <p className="lede">
            Você não abriu sua loja pra ficar apagando incêndio todo dia. Mas é isso que acontece quando o
            sistema trava no pico, o estoque não bate com a prateleira, o caixa fecha com diferença — e você
            nem sabe o que o vendedor fez enquanto estava fora.
          </p>
        </div>
        <div className="pain-grid">
          {pains.map((p) => (
            <div className="pain-cell" key={p.n}>
              <div className="num">{p.n}</div>
              <div className="txt">{p.txt}</div>
              <div className="tag">{p.tag}</div>
            </div>
          ))}
        </div>
        <div className="pain-conclusion">
          <div className="txt">Isso não é falta de dedicação. É falta da <em style={{color:'var(--accent)', fontStyle:'normal'}}>ferramenta certa.</em></div>
          <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">Ver a ferramenta certa <span className="arrow"><IconArrow size={16}/></span></a>
        </div>
      </div>
    </section>
  );
}

function SolutionSection() {
  const mods = [
    { name: "LothusPDV", suffix: "Frente de caixa", desc: "Vendas, orçamentos e NFC-e na mesma tela. Atalhos pensados pra balcão.", feats: ["Venda em 4 cliques","NFC-e integrada","Modo offline"], icon: <IconReceipt size={20}/> },
    { name: "LothusCompras", suffix: "Entradas", desc: "Entrada de mercadoria, controle de fornecedores e XML automático.", feats: ["XML do fornecedor","Custo médio","Vencimentos"], icon: <IconBox size={20}/> },
    { name: "LothusRetaguarda", suffix: "Gestão", desc: "Relatórios, estoque consolidado, financeiro, comissão e fechamento.", feats: ["Lucro por produto","Comissão","DRE simplificada"], icon: <IconChart size={20}/> },
    { name: "LothusApp", suffix: "No seu bolso", desc: "Faturamento em tempo real e auditoria de vendas — direto no celular, de onde estiver.", feats: ["Tempo real","Modo auditoria","Alertas push"], icon: <IconPhone size={20}/>, featured: true }
  ];
  return (
    <section className="section" id="solucao" style={{background: 'var(--surface-warm)'}}>
      <div className="shell-wide">
        <div className="sec-head">
          <div>
            <span className="kicker"><span className="num">06</span> Apresentando</span>
            <h2 className="display-lg" style={{marginTop: 24}}>
              Quatro frentes integradas. <em style={{fontStyle:'italic'}}>Um sistema só.</em>
            </h2>
          </div>
          <p className="lede">
            Desenvolvido há mais de 15 anos por quem entende a rotina do balcão — não por uma startup que
            nunca pisou numa loja. Tudo conversando entre si, sem planilha paralela, sem papel, sem sistema
            que só o técnico entende.
          </p>
        </div>
        <div className="modules">
          {mods.map((m) => (
            <article className={`module ${m.featured ? 'featured' : ''}`} key={m.name}>
              {m.featured && <div className="gratis">grátis</div>}
              <div className="badge">{m.suffix}</div>
              <div className="name">{m.name}</div>
              <div className="feats">
                {m.feats.map((f) => <span key={f}>{f}</span>)}
              </div>
              <div className="desc">{m.desc}</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function BenefitsSection() {
  const items = [
    { n: "01", txt: "Você fecha o caixa todo dia sabendo exatamente o que entrou e o que saiu — sem surpresa.", tag: "Caixa zerado" },
    { n: "02", txt: "Cada venda baixa o estoque automaticamente. Você sabe o que tem na loja sem contar na mão.", tag: "Estoque vivo" },
    { n: "03", txt: "NF-e e NFC-e saem direto na tela de venda — sem abrir outro programa, sem copiar dado.", tag: "Fiscal integrado" },
    { n: "04", txt: "Se a internet cair, a loja continua vendendo. Quando voltar, o sistema sincroniza sozinho.", tag: "Sempre online" },
    { n: "05", txt: "Faturamento do dia e do mês em tempo real no celular — mesmo fora da loja.", tag: "Tempo real" },
    { n: "06", txt: "Vendedor deletou produto sem finalizar venda? Você recebe data, hora e nome. Sem prejuízo invisível.", tag: "Auditoria" },
    { n: "07", txt: "Você decide com número — não com chute. Lucro do dia, do mês, por produto, por vendedor.", tag: "Decisão" },
    { n: "08", txt: "Suporte humano por telefone e WhatsApp. Sem robô, sem fila de e-mail.", tag: "Gente atende" }
  ];
  return (
    <section className="section" id="beneficios">
      <div className="shell-wide">
        <div className="sec-head">
          <div>
            <span className="kicker"><span className="num">07</span> Transformação</span>
            <h2 className="display-lg" style={{marginTop: 24}}>
              O que muda na sua loja a partir <em style={{fontStyle:'italic'}}>do dia 1.</em>
            </h2>
          </div>
          <p className="lede">
            Não vendemos features. Vendemos o dia em que o caixa fecha redondo, o estoque bate com a prateleira
            e você descobre — pelo celular — que está tudo sob controle.
          </p>
        </div>
        <div className="benefits">
          {items.map((b) => (
            <div className="benefit" key={b.n}>
              <div className="b-num">↳ {b.n}</div>
              <div className="b-txt">{b.txt}</div>
              <div className="b-tag">{b.tag}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SocialProofSection() {
  return (
    <section className="section" id="prova">
      <div className="shell-wide">
        <div className="sec-head">
          <div>
            <span className="kicker"><span className="num">08</span> Prova</span>
            <h2 className="display-lg" style={{marginTop: 24}}>
              Quem já trocou <em style={{fontStyle:'italic'}}>não volta atrás.</em>
            </h2>
          </div>
          <p className="lede">
            15 anos no mercado, mais de 500 empresas atendidas, milhares de vendas processadas por dia.
            Comércio de verdade — não pitch de startup.
          </p>
        </div>

        <div className="social-stats">
          <div className="stat">
            <div className="v"><span className="accent">+500</span></div>
            <div className="lbl">empresas atendidas</div>
          </div>
          <div className="stat">
            <div className="v"><span className="accent">+1.800</span></div>
            <div className="lbl">usuários diários</div>
          </div>
          <div className="stat">
            <div className="v"><span className="accent">15</span> anos</div>
            <div className="lbl">desenvolvendo p/ varejo</div>
          </div>
        </div>

        <div className="testimonials">
          <div className="testimonial">
            <div className="quote-mark">“</div>
            <div className="body">Antes eu fechava o caixa e nunca batia. Desde que instalei o LothusPDV, sei exatamente onde foi cada centavo.</div>
            <div className="author">
              <div className="av">CM</div>
              <div>
                <div className="who">Carlos M.</div>
                <div className="where">Varejista · São Paulo / SP</div>
              </div>
            </div>
          </div>
          <div className="testimonial">
            <div className="quote-mark">“</div>
            <div className="body">O suporte é o que me impressiona. Ligo e já resolvem. Nunca fiquei na mão.</div>
            <div className="author">
              <div className="av">AP</div>
              <div>
                <div className="who">Ana P.</div>
                <div className="where">Comércio varejista · Minas Gerais</div>
              </div>
            </div>
          </div>
          <div className="testimonial placeholder">
            <div className="quote-mark">“</div>
            <div className="body">Descobri no primeiro mês que um vendedor estava deletando produto. O app me mostrou tudo — data, hora e nome.</div>
            <div className="author">
              <div className="av">+</div>
              <div>
                <div className="who">[ inserir depoimento real ]</div>
                <div className="where">Sobre LothusApp · auditoria</div>
              </div>
            </div>
          </div>
        </div>

        <div className="testimonial-note">
          <div>⚠</div>
          <div>Os 2 primeiros depoimentos vieram da copy original (gerados por IA). Substituir por depoimentos reais antes de publicar.</div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, StatsStrip, PainSection, SolutionSection, BenefitsSection, SocialProofSection, HEADLINES });