// Manutenção — página de serviço (enxuta). Padrão derivado de espelhos.jsx e cliente-final.jsx.

// Esconde a imagem se o arquivo ainda não foi enviado, deixando só o fundo do card.
const hideOnError = (e) => { e.currentTarget.style.display = "none"; };

// Links de WhatsApp com mensagem pré-preenchida, reaproveitando o número já usado em WA_LINK.
const waLink = (msg) => WA_LINK.split("?")[0] + "?text=" + encodeURIComponent(msg);
const WA_MANUT_BOX = waLink("Olá! Gostaria de solicitar a manutenção do meu box.");
const WA_MANUT_ROLO = waLink("Olá! Gostaria de solicitar a manutenção da minha cortina rolô.");
const WA_MANUT_VERIFICAR = waLink("Olá! Gostaria de verificar se vocês fazem manutenção para o meu caso.");

const SERVICOS = [
{ id: "serv-box", name: "Manutenção de Box", img: "assets/produtos-box.webp", wa: WA_MANUT_BOX,
  desc: "Troca de roldanas e vidros, regulagem e alinhamento das portas de correr, substituição de vedações e borrachas, ajuste de trilho e reaperto das ferragens." },
{ id: "serv-rolo", name: "Manutenção/Lavagem de Cortina Rolô", img: "assets/persianas/persiana_rolo.webp", wa: WA_MANUT_ROLO,
  desc: "Troca do mecanismo de acionamento, ajuste de tensão, substituição de componentes e realinhamento." }];

function ManutencaoHero() {
  return (
    <section className="subhero" data-screen-label="Manutenção — Hero">
      <div className="hero-media">
        <img src="assets/proc-5.webp" alt="Ambiente com box e persianas instalados pela Tendências" fetchpriority="high" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center" }} onError={hideOnError} />
      </div>
      <div className="hero-scrim"></div>
      <div className="wrap">
        <span className="label">Produtos e Serviços</span>
        <h1>Manutenção com quem conhece.</h1>
      </div>
    </section>);

}

function ManutencaoServicos() {
  return (
    <section className="section section-off" id="servicos" data-screen-label="Manutenção — Serviços">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label">O que atendemos</span>
          <h2>Serviços de manutenção</h2>
          <hr className="rule" />
          <p>O reparo é feito com peça de reposição e ajuste pela nossa equipe.</p>
        </div>
        <div className="cat-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", maxWidth: "820px", margin: "0 auto" }}>
          {SERVICOS.map((s, i) =>
          <article id={s.id} className={"cat-card reveal" + (i % 2 === 1 ? " reveal-d1" : "")} key={s.id}>
              <a href={s.wa} target="_blank" rel="noopener" style={{ textDecoration: "none", color: "inherit" }}>
                <div className="cat-img">
                  <img src={s.img} alt={s.name} loading="lazy" onError={hideOnError} />
                </div>
                <div className="cat-body">
                  <h3>{s.name}</h3>
                  <p>{s.desc}</p>
                  <span className="prod-link">Solicitar manutenção</span>
                </div>
              </a>
            </article>
          )}
        </div>
      </div>
    </section>);

}

function ManutencaoCta() {
  return (
    <section className="cta-band" data-screen-label="CTA">
      <div className="wrap">
        <span className="label" style={{ color: "#D9B894" }}>Atendimento pela nossa equipe</span>
        <h2>Faltou algo?</h2>
        <p>Conte o que está acontecendo, e, se possível, envie uma mensagem por WhatsApp. Iremos avaliar e agendar uma visita sem compromisso.</p>
        <div className="hero-ctas">
          <a className="btn btn-primary" href={WA_MANUT_VERIFICAR} target="_blank" rel="noopener">Chamar no WhatsApp</a>
          <a className="btn btn-outline-light" href={HOME + "#contato"}>Mande uma mensagem</a>
        </div>
      </div>
    </section>);

}

function App() {
  React.useEffect(() => {
    setupReveal();
  }, []);
  React.useEffect(() => {
    const id = window.location.hash.slice(1);
    if (!id) return;
    const go = () => { const el = document.getElementById(id); if (el) scrollToId(id); };
    const r1 = requestAnimationFrame(() => setTimeout(go, 120));
    return () => cancelAnimationFrame(r1);
  }, []);
  return (
    <React.Fragment>
      <Navbar />
      <main>
        <ManutencaoHero />
        <ManutencaoServicos />
        <ManutencaoCta />
      </main>
      <Footer />
      <WaFloat />
    </React.Fragment>);

}

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