// Engenharias e Decorações — projetos sob medida em vidro temperado. Padrão derivado de persianas.jsx, box.jsx e espelhos.jsx.

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_PROJETO_ESPECIAL = waLink("Olá! Gostaria de saber mais sobre um projeto especial em vidro temperado.");
const WA_PERSONALIZACAO = waLink("Olá! Gostaria de saber mais sobre as opções de personalização para o meu projeto.");

const ENGENHARIAS = [
{ id: "guarda-corpo", name: "Guarda-Corpo", img: "assets/engenharias/eng-guarda-corpo.webp",
  desc: "Proteção em vidro temperado e laminado. Diversos tipos de fixação (torre, botton, infinity view, entre outros.)" },
{ id: "fechamentos", name: "Fechamentos de Área", img: "assets/engenharias/eng-fechamento.webp",
  desc: "Portas, janelas e fechamentos de vão em vidro temperado e laminado, de abrir ou de correr." },
{ id: "divisorias", name: "Divisórias", img: "assets/engenharias/eng-divisoria.webp", pos: "center 40%",
  desc: "Divisórias fixas e móveis em vidro temperado e laminado. Ideal para separação de ambientes." }];

const DECORACOES = [
{ id: "prateleiras", name: "Prateleiras", img: "assets/engenharias/eng-prateleira2.webp", pos: "center 0%",
  desc: "Prateleiras de vidro comum ou temperado. Fixação com suportes dimensionados para o espaço e o peso que irão receber." },
{ id: "tampos", name: "Tampos", img: "assets/engenharias/eng-tampo.webp", pos: "center 70%",
  desc: "Tampo de vidro comum ou temperado sob medida para o local onde será instalado." },
{ id: "mesas", name: "Mesas", img: "assets/engenharias/eng-projetos-especiais.webp", pos: "center 70%",
  desc: "Mesas de vidro temperado, fixação com cola UV, projetos específicos." }];

// Vidro: mesma paleta usada em box.jsx (VIDRO_SWATCHES).
const VIDRO_SWATCHES = [
{ label: "Incolor", style: { background: "rgba(228,234,230,0.35)", border: "1px solid var(--cinza)" } },
{ label: "Verde", style: { background: "#9DBFAE" } },
{ label: "Cinza", style: { background: "#3E4144" } },
{ label: "Bronze", style: { background: "#7C6A52" } },
{ label: "Pontilhado", style: { background: "radial-gradient(#EAF6F2 1.4px, #A8D5C7 1.5px) 0 0/7px 7px" } }];

// Ferragens: cores aproximadas — trocar pelos hex oficiais quando o cliente fornecer.
const FERRAGEM_SWATCHES = [
{ label: "Preto", style: { background: "#1A1A1A" } },
{ label: "Branco", style: { background: "#FFFFFF", border: "1px solid var(--cinza)" } },
{ label: "Bronze", style: { background: "#6E4B32" } },
{ label: "Prata Fosco", style: { background: "#B0B0B0" } },
{ label: "Prata Brilhante", style: { background: "linear-gradient(135deg, #D6D6D6, #F2F2F2, #D6D6D6)" } },
{ label: "Champagne", style: { background: "#C9B79C" } }];

function EngenhariasHero() {
  return (
    <section className="subhero" data-screen-label="Engenharias e Projetos Especiais — Hero">
      <div className="hero-media">
        <img src="assets/engenharias/eng-hero2.webp" alt="Fechamento de vidro temperado em ambiente residencial" 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>Vidro sob medida para as exigências do seu projeto</h1>
      </div>
    </section>);
}

function EngenhariasProjetosEspeciais() {
  return (
    <section className="section" id="projetos-especiais" data-screen-label="Projetos Especiais">
      <div className="wrap">
        <div className="peliculas-grid reveal">
          <div className="peliculas-img">
            <img src="assets/engenharias/eng-projetos-especiais.webp" alt="Detalhe de projeto sob medida em vidro temperado" loading="lazy" onError={hideOnError} />
          </div>
          <div>
            <span className="label" style={{ color: "var(--camel-texto)" }}>Projetos Especiais</span>
            <h2>Projetos pensados para as suas necessidades</h2>
            <hr className="rule" />
            <p>Guarda-corpo, fechamento de área, divisória, prateleira, tampo, mesa, ou qualquer outra peça que você imagine em vidro. Projetos especiais desenvolvidos por nossa equipe técnica.</p>
            <a className="btn btn-primary peliculas-cta" href={WA_PROJETO_ESPECIAL} target="_blank" rel="noopener">Conte sobre o seu projeto</a>
          </div>
        </div>
      </div>
    </section>);
}

// Seção de catálogo reutilizável dentro deste arquivo — Engenharias e Decorações
// têm exatamente a mesma estrutura visual, só mudam label/título/itens/fundo.
function CatalogSection({ id, offBg, label, title, lead, items }) {
  return (
    <section className={"section" + (offBg ? " section-off" : "")} id={id} data-screen-label={title}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label" style={{ color: "var(--camel-texto)" }}>{label}</span>
          <h2>{title}</h2>
          <hr className="rule" />
          <p>{lead}</p>
        </div>
        <div className="cat-grid">
          {items.map((m, i) =>
          <article 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} style={m.pos ? { objectPosition: m.pos } : undefined} />
                </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>
      </div>
    </section>);
}

function EngenhariasCatalogo() {
  return (
    <CatalogSection
      id="engenharias"
      offBg
      label="Engenharias"
      title="Estrutura e proteção em vidro"
      lead="Peças que organizam e protegem o espaço, sempre em vidro temperado."
      items={ENGENHARIAS}
    />);
}

function EngenhariasDecoracoes() {
  return (
    <CatalogSection
      id="decoracoes"
      label="Decorações"
      title="Acabamentos em vidro"
      lead="Peças que valorizam o ambiente com o mesmo padrão de segurança do vidro temperado."
      items={DECORACOES}
    />);
}

function EngenhariasPersonalizacao() {
  return (
    <section className="section section-off" id="personalizacao" data-screen-label="Personalização">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label" style={{ color: "var(--camel-texto)" }}>Personalização</span>
          <h2>Personalize o seu projeto</h2>
          <hr className="rule" />
        </div>

        <div className="acab-block reveal">
          <h3>Vidro</h3>
          <div className="acab-swatches">
            {VIDRO_SWATCHES.map((s) =>
            <div className="acab-swatch" key={s.label}>
                <span className="acab-swatch-color" style={s.style}></span>
                <span className="acab-swatch-label">{s.label}</span>
              </div>
            )}
          </div>
        </div>

        <div className="acab-block reveal">
          <h3>Ferragens</h3>
          <div className="acab-swatches">
            {FERRAGEM_SWATCHES.map((s) =>
            <div className="acab-swatch" key={s.label}>
                <span className="acab-swatch-color" style={s.style}></span>
                <span className="acab-swatch-label">{s.label}</span>
              </div>
            )}
          </div>
        </div>

        <p className="acab-note reveal">
          As opções de ferragem variam conforme o tipo de projeto.{" "}
          <a href={WA_PERSONALIZACAO} target="_blank" rel="noopener">Fale com a nossa equipe</a> para confirmar o que se aplica ao seu caso.
        </p>
      </div>
    </section>);
}

function EngenhariasPeliculas() {
  return (
    <section className="section" data-screen-label="Películas">
      <div className="wrap">
        <div className="peliculas-grid reveal">
          <div className="peliculas-img">
            <img src="assets/engenharias/eng-pelicula.webp" alt="Película aplicada em vidro temperado" loading="lazy" onError={hideOnError} />
          </div>
          <div>
            <span className="label" style={{ color: "var(--camel-texto)" }}>Complemento</span>
            <h2>Películas para o seu projeto</h2>
            <hr className="rule" />
            <p>Aplicação de película de segurança (PS04), privacidade ou controle térmico.</p>
            <a className="btn btn-primary peliculas-cta" href="peliculas.html">Conheça as opções de película</a>
          </div>
        </div>
      </div>
    </section>);
}

function EngenhariasCta() {
  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 solução certa para o seu projeto</h2>
        <p>Entre em contato conosco para auxiliarmos no projeto.</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>
        <EngenhariasHero />
        <EngenhariasProjetosEspeciais />
        <EngenhariasCatalogo />
        <EngenhariasDecoracoes />
        <EngenhariasPersonalizacao />
        <EngenhariasPeliculas />
        <EngenhariasCta />
      </main>
      <Footer />
      <WaFloat />
    </React.Fragment>);
}

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