;(() => {
// SERVIÇOS — manutenção, limpeza técnica de tanques, filtragem e laudos
// Copy baseada no material comercial da Jheiny (WhatsApp, 04/09/2026).
const { WhatsIcon, Link } = window.FaukoChrome;

// Canais próprios da aba Serviços. NÃO usar WHATSAPP_URL: aquela constante é global
// e trocaria o número em todos os botões do site.
const WHATS_SERVICOS = 'https://wa.me/5511978352620?text=' + encodeURIComponent('Olá! Vim pelo site e gostaria de uma avaliação técnica dos serviços da Fauko.');
const EMAIL_SERVICOS = 'servicos@fauko.com.br';
const mailTo = (assunto) => `mailto:${EMAIL_SERVICOS}?subject=${encodeURIComponent(assunto)}`;

function ServicosPage({ products = [] }) {
  const estabilizador = products.find(p => String(p.codigo).split(/[^0-9A-Za-z]+/).includes('2999'));

  return (
    <main>
      <section className="page-hero page-hero--lg">
        <div className="page-hero__bg" />
        <div className="container page-hero__inner">
          <span className="eyebrow eyebrow--light">Serviços</span>
          <h1>Manutenção preventiva para sistemas que operam com diesel.</h1>
          <p>
            Além de importar e distribuir equipamentos, a Fauko mantém oficina técnica própria,
            peças de reposição em estoque e equipe treinada para limpeza técnica de tanques,
            filtragem de combustível e emissão de ART e laudos.
          </p>
          <div className="page-hero__ctas">
            <a className="btn btn--whats" href={WHATS_SERVICOS} target="_blank" rel="noopener">
              <WhatsIcon /> Avaliação técnica sem custo
            </a>
          </div>
          <div className="page-hero__metrics">
            <div><strong>Própria</strong><span>oficina técnica</span></div>
            <div><strong>ART</strong><span>por engenheiro responsável</span></div>
            <div><strong>+35</strong><span>anos de experiência</span></div>
          </div>
        </div>
      </section>

      {/* Os 4 serviços em grade 2×2. Quando as fotos da Jheiny chegarem, voltar ao
          zigue-zague (.servico-row / .servico-row__inner--reverse) e re-renderizar
          <BeforeAfterSection />, que segue definida abaixo. */}
      <section className="section">
        <div className="container">
          <div className="servicos-grid">

            <article className="servico-card">
              <div className="servico-card__icon"><ScrewdriverIcon /></div>
              <span className="eyebrow">Assistência técnica</span>
              <h2>Manutenção de equipamentos</h2>
              <p className="servico-card__lead">
                Oficina especializada em bombas, medidores e bicos de abastecimento, com técnicos que
                conhecem cada linha que a Fauko importa e peças originais em estoque.
              </p>
              <ul className="servico-list">
                <li><CheckIcon /> Manutenção corretiva e preventiva</li>
                <li><CheckIcon /> Instalação de equipamentos</li>
                <li><CheckIcon /> Peças de reposição originais em estoque</li>
                <li><CheckIcon /> Diagnóstico técnico e orçamento de reparo</li>
                <li><CheckIcon /> Suporte para bombas, medidores, bicos e filtros</li>
              </ul>
              <a className="btn btn--whats" href={WHATS_SERVICOS} target="_blank" rel="noopener">
                <WhatsIcon /> Falar com a assistência
              </a>
            </article>

            <article className="servico-card">
              <div className="servico-card__icon"><TankIcon /></div>
              <span className="eyebrow">Operação em campo</span>
              <h2>Limpeza técnica de tanques e geradores</h2>
              <p className="servico-card__lead">
                Remoção de borras, sedimentos e água acumulada no fundo do tanque, evitando
                entupimentos, falhas em geradores e prejuízo com manutenção corretiva.
              </p>
              <div className="servico-highlight">
                <strong>Sem necessidade de abrir o tanque.</strong>
                Serviço executado com segurança, por equipe treinada e equipada.
              </div>
              <ul className="servico-list">
                <li><CheckIcon /> Limpeza técnica de tanques de combustível</li>
                <li><CheckIcon /> Limpeza de geradores</li>
                <li><CheckIcon /> Remoção de borra, sedimentos e água</li>
                <li><CheckIcon /> Descarte do produto contaminado</li>
                <li><CheckIcon /> Execução conforme as NRs necessárias</li>
              </ul>
              <a className="btn btn--primary" href={mailTo('Limpeza técnica de tanques e geradores')}>
                Solicitar orçamento por e-mail
              </a>
            </article>

            <article className="servico-card">
              <div className="servico-card__icon"><FilterIcon /></div>
              <span className="eyebrow">Recuperação de combustível</span>
              <h2>Filtragem e polimento do óleo diesel</h2>
              <p className="servico-card__lead">
                Processo que recupera o diesel contaminado, removendo partículas sólidas e água e
                devolvendo a qualidade ideal para o uso. Evita descarte desnecessário e aumenta a
                vida útil dos equipamentos.
              </p>
              <ul className="servico-list">
                <li><CheckIcon /> Filtragem executada pela equipe Fauko</li>
                <li><CheckIcon /> Polimento e recuperação do diesel</li>
                <li><CheckIcon /> Remoção de partículas sólidas e água</li>
                <li><CheckIcon /> Análise da condição do combustível</li>
              </ul>
              {estabilizador && (
                <Link to={`/produto/${estabilizador.id}`} className="servico-crosslink">
                  Conheça o Estabilizador de Diesel FAUKO
                  <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
                </Link>
              )}
              <a className="btn btn--primary" href={mailTo('Filtragem e polimento de óleo diesel')}>
                Solicitar orçamento por e-mail
              </a>
            </article>

            <article className="servico-card">
              <div className="servico-card__icon"><DocIcon /></div>
              <span className="eyebrow">Documentação</span>
              <h2>Emissão de ART e laudo técnico</h2>
              <p className="servico-card__lead">
                Todos os serviços são acompanhados de laudo técnico detalhado e ART emitida por
                engenheiro responsável, atendendo às exigências legais, ambientais e de auditoria,
                inclusive ISO.
              </p>
              <ul className="servico-list">
                <li><CheckIcon /> ART emitida por engenheiro responsável</li>
                <li><CheckIcon /> Laudo técnico detalhado do serviço</li>
                <li><CheckIcon /> Laudo de estanqueidade</li>
                <li><CheckIcon /> Evidência documental para auditorias e fiscalizações</li>
              </ul>
              <a className="btn btn--ghost" href={mailTo('ART e laudo técnico')}>
                Falar sobre documentação
              </a>
            </article>

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

      {/* Benefícios */}
      <section className="section section--soft">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Benefícios diretos</span>
            <h2 className="section-title">O que a manutenção preventiva evita</h2>
          </div>
          <div className="beneficios-grid">
            {[
              { t: 'Prevenção de falhas', d: 'Geradores e motores protegidos contra entupimento e parada inesperada.' },
              { t: 'Menos custo corretivo', d: 'Redução de gastos com manutenção emergencial e troca de componentes.' },
              { t: 'Conformidade', d: 'Atendimento a normas ambientais e requisitos de segurança do setor.' },
              { t: 'Respaldo em auditoria', d: 'Evidência documental para fiscalizações, auditorias e certificação ISO.' },
            ].map(b => (
              <div key={b.t} className="beneficio-card">
                <CheckIcon />
                <h3>{b.t}</h3>
                <p>{b.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA final */}
      <section className="servico-cta">
        <div className="container servico-cta__inner">
          <div>
            <h2>Avaliação técnica sem custo</h2>
            <p>
              Nossa equipe analisa a sua operação e propõe a melhor solução, sem compromisso.
            </p>
          </div>
          <div className="servico-cta__actions">
            <a className="btn btn--whats" href={WHATS_SERVICOS} target="_blank" rel="noopener">
              <WhatsIcon /> Falar no WhatsApp
            </a>
            <a className="btn btn--light" href={mailTo('Avaliação técnica')}>
              Enviar e-mail
            </a>
          </div>
        </div>
      </section>

      {React.createElement(window.ContactSection)}
    </main>
  );
}

// Antes e depois com arraste (mesmo efeito do site da Petroserv)
function BeforeAfterSection() {
  const [pos, setPos] = React.useState(50);
  const frameRef = React.useRef(null);
  const dragging = React.useRef(false);

  const moveTo = (clientX) => {
    const el = frameRef.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    setPos(Math.max(0, Math.min(100, ((clientX - r.left) / r.width) * 100)));
  };

  React.useEffect(() => {
    const onMove = (e) => {
      if (!dragging.current) return;
      e.preventDefault();
      moveTo(e.touches ? e.touches[0].clientX : e.clientX);
    };
    const onUp = () => { dragging.current = false; };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('touchmove', onMove, { passive: false });
    window.addEventListener('mouseup', onUp);
    window.addEventListener('touchend', onUp);
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('touchmove', onMove);
      window.removeEventListener('mouseup', onUp);
      window.removeEventListener('touchend', onUp);
    };
  }, []);

  const start = (e) => { dragging.current = true; moveTo(e.touches ? e.touches[0].clientX : e.clientX); };

  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Resultado</span>
          <h2 className="section-title">Antes e depois da limpeza</h2>
          <p className="section-lead">
            Arraste para comparar o estado do tanque antes e depois da intervenção da equipe Fauko.
          </p>
        </div>
        <div className="ba" ref={frameRef} onMouseDown={start} onTouchStart={start}>
          <div className="ba__layer ba__layer--after fk-ph">
            <span className="fk-ph__label">[FOTO] DEPOIS — tanque limpo</span>
          </div>
          <div className="ba__layer ba__layer--before fk-ph" style={{ clipPath: `inset(0 ${100 - pos}% 0 0)` }}>
            <span className="fk-ph__label">[FOTO] ANTES — tanque com borra</span>
          </div>
          <span className="ba__tag ba__tag--before">Antes</span>
          <span className="ba__tag ba__tag--after">Depois</span>
          <div className="ba__handle" style={{ left: pos + '%' }}>
            <button type="button" aria-label="Arraste para comparar antes e depois"
              onKeyDown={(e) => {
                if (e.key === 'ArrowLeft') setPos(v => Math.max(0, v - 4));
                if (e.key === 'ArrowRight') setPos(v => Math.min(100, v + 4));
              }}>
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M9 7l-4 5 4 5M15 7l4 5-4 5" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

function ScrewdriverIcon() {
  return (
    <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <rect x="8.5" y="1.6" width="7" height="8" rx="2.4" />
      <path d="M10.6 4.1h2.8M10.6 6.5h2.8" />
      <path d="M12 9.6v8.8" />
      <path d="M9.5 18.4h5v2.8h-5z" />
    </svg>
  );
}

function TankIcon() {
  return (
    <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="7" width="18" height="12" rx="2" />
      <path d="M7 7V5h10v2" />
      <path d="M6 14c2-1.4 4-1.4 6 0s4 1.4 6 0" />
    </svg>
  );
}

function FilterIcon() {
  return (
    <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 4h16l-6 8v8l-4-2v-6z" />
    </svg>
  );
}

function DocIcon() {
  return (
    <svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" />
      <path d="M14 3v5h5" />
      <path d="M9 13h6M9 17h4" />
    </svg>
  );
}

function CheckIcon() {
  return (<svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="var(--fauko-navy)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l4 4L19 7" /></svg>);
}

window.ServicosPage = ServicosPage;

})();