// Películas — página de produto (parceria SKF). Padrão derivado de espelhos.jsx e box.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"; };

const CATALOG = [
{ id: "bronze-natural", name: "Bronze Natural", img: "assets/peliculas/pelicula-bronze.webp",
  desc: "Tom amadeirado que reduz a entrada de luz e calor, trazendo privacidade sem escurecer totalmente o ambiente." },
{ id: "espelhada", name: "Espelhada", img: "assets/peliculas/pelicula-espelhada.webp",
  desc: "Efeito espelhado com forte privacidade durante o dia e controle térmico. A escolha clássica para box." },
{ id: "privacidade", name: "Privacidade", img: "assets/peliculas/pelicula-jateada.webp",
  desc: "Aparência jateada que difunde a luz e preserva a privacidade, mantendo a luminosidade do ambiente." },
{ id: "fume", name: "Fumê", img: "assets/peliculas/pelicula-fume.webp",
  desc: "Acabamento fumê que suaviza a claridade e reduz o ofuscamento, com um visual discreto e elegante." }];

// 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_OUTRAS = waLink("Olá! Gostaria de conhecer outros tipos de película além dos exibidos no site.");

function PeliculasHero() {
  return (
    <section className="subhero" data-screen-label="Películas — Hero">
      <div className="hero-media">
        <img src="assets/engenharias/eng-pelicula.webp" alt="Película aplicada em vidro temperado 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>Películas para controle térmico, privacidade e proteção.</h1>
        <p className="lead">Aplicadas sobre vidro temperado para suavizar a luz, garantir privacidade ou reforçar a segurança do vidro. O que o seu projeto pedir.</p>
        <div className="hero-ctas">
          <a className="btn btn-primary" href="#seguranca" onClick={(e) => { e.preventDefault(); scrollToId("seguranca"); }}>Veja os tipos de película</a>
          <a className="btn btn-outline-light" href="#catalogo" onClick={(e) => { e.preventDefault(); scrollToId("catalogo"); }}>Veja os modelos</a>
        </div>
      </div>
    </section>);

}

function PeliculasSeguranca() {
  return (
    <section className="section" id="seguranca" data-screen-label="Películas — Segurança">
      <div className="wrap">
        <div className="peliculas-grid reveal">
          <div className="peliculas-img">
            <img src="assets/peliculas/pelicula-protecao.webp" alt="Comparação: vidro temperado quebrado com película, com os cacos presos no lugar, e sem película, com os estilhaços no chão" loading="lazy" style={{ objectFit: "contain" }} onError={hideOnError} />
          </div>
          <div>
            <span className="label" style={{ color: "var(--camel-texto)" }}>Segurança</span>
            <h2>Película de segurança (PS04)</h2>
            <hr className="rule" />
            <p>A película de proteção PS04 é aplicada diretamente sobre o vidro temperado para aumentar a segurança em caso de quebra. Sua principal função é manter os fragmentos aderidos à película, evitando que os estilhaços se espalhem ou caiam pelo ambiente.</p>
            <p>É uma escolha comum em casas com crianças, áreas de circulação e vidros instalados em altura, onde a queda dos cacos representa o maior risco.</p>
          </div>
        </div>
      </div>
    </section>);

}

function PeliculasControleSolar() {
  return (
    <section className="section section-off" id="controle-solar" data-screen-label="Películas — Controle Solar">
      <div className="wrap">
        <div className="peliculas-grid peliculas-grid--rev reveal">
          <div className="peliculas-img">
            <img src="assets/peliculas/pelicula-controle-termico.webp" alt="Ambiente com película de controle solar aplicada sobre o vidro" loading="lazy" onError={hideOnError} />
          </div>
          <div>
            <span className="label" style={{ color: "var(--camel-texto)" }}>Controle solar</span>
            <h2>Controle térmico e solar</h2>
            <hr className="rule" />
            <p>A película de controle térmico e solar é aplicada diretamente sobre o vidro para reduzir a entrada de calor e o excesso de luminosidade nos ambientes, proporcionando mais conforto térmico ao longo do dia.</p>
            <ul className="blindex-points">
              <li><strong>Menos calor:</strong> reduz a radiação que entra pelo vidro.</li>
              <li><strong>Proteção UV:</strong> bloqueia a maior parte dos raios ultravioleta.</li>
              <li><strong>Luz preservada:</strong> mantém a luminosidade natural do ambiente.</li>
            </ul>
          </div>
        </div>
      </div>
    </section>);

}

function PeliculasPrivacidade() {
  return (
    <section className="section" id="privacidade" data-screen-label="Películas — Privacidade">
      <div className="wrap">
        <div className="peliculas-grid reveal">
          <div className="peliculas-img">
            <img src="assets/peliculas/pelicula-privacidade.webp" alt="Vidro com película de privacidade aplicada, difundindo a visão sem bloquear a luz" loading="lazy" onError={hideOnError} />
          </div>
          <div>
            <span className="label" style={{ color: "var(--camel-texto)" }}>Privacidade</span>
            <h2>Privacidade para o seu ambiente</h2>
            <hr className="rule" />
            <p>Solução aplicada diretamente sobre o vidro para reduzir ou impedir a visão através da superfície, proporcionando mais discrição aos ambientes sem a necessidade de substituir o vidro existente.</p>
            <ul className="blindex-points">
              <li><strong>Visão bloqueada, luz mantida:</strong> preserva a claridade do ambiente.</li>
              <li><strong>Alternativa à cortina:</strong> resolve vãos onde ela não cabe.</li>
              <li><strong>Jateada:</strong> aspecto de vidro fosco, com luz difusa.</li>
              <li><strong>Espelhada:</strong> reflexo na face externa durante o dia.</li>
            </ul>
          </div>
        </div>
      </div>
    </section>);

}

function PeliculasCatalogo() {
  return (
    <section className="section section-off" id="catalogo" data-screen-label="Películas — Catálogo">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label">Catálogo</span>
          <h2>Modelos</h2>
          <hr className="rule" />
        </div>
        <div className="cat-grid cat-grid-2">
          {CATALOG.map((m, i) =>
          <article id={"cat-" + m.id} className={"cat-card reveal" + (i % 3 === 1 ? " reveal-d1" : i % 3 === 2 ? " reveal-d2" : "")} key={m.id}>
              <a href={waLink(`Olá! Gostaria de um orçamento para ${m.name}.`)} target="_blank" rel="noopener" style={{ textDecoration: "none", color: "inherit" }}>
                <div className="cat-img">
                  <img src={m.img} alt={m.name} loading="lazy" onError={hideOnError} />
                </div>
                <div className="cat-body">
                  <h3>{m.name}</h3>
                  <p>{m.desc}</p>
                  <span className="prod-link">Faça um orçamento</span>
                </div>
              </a>
            </article>
          )}
        </div>
        <p className="acab-note reveal">
          Procura uma película que não está aqui?{" "}
          <a href={WA_OUTRAS} target="_blank" rel="noopener">Fale com a nossa equipe</a>{" "}
          — estudamos o seu caso e indicamos a melhor solução para o seu vidro.
        </p>
      </div>
    </section>);

}

function PeliculasCta() {
  return (
    <section className="cta-band" data-screen-label="CTA">
      <div className="wrap">
        <span className="label" style={{ color: "#D9B894" }}>Orçamento sem compromisso</span>
        <h2>Encontre a película certa para o seu projeto</h2>
        <p>Conte qual vidro você quer tratar e, se quiser, já mande uma foto ou medida aproximada pelo WhatsApp. Saímos com uma estimativa e agendamos a aplicação.</p>
        <div className="hero-ctas">
          <a className="btn btn-primary" href={WA_LINK} 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>
        <PeliculasHero />
        <PeliculasSeguranca />
        <PeliculasControleSolar />
        <PeliculasPrivacidade />
        <PeliculasCatalogo />
        <PeliculasCta />
      </main>
      <Footer />
      <WaFloat />
    </React.Fragment>);

}

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