// Espelhos — página de produto (catálogo + projetos sob medida). Padrão derivado de persianas.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: "bisote", name: "Bisotê", img: "assets/espelhos/espelho-bisote.webp",
  desc: "O bisotê é o corte em bisel nas bordas do espelho, que cria um relevo sutil e reflete a luz de um jeito diferente. Um detalhe discreto que dá um acabamento mais sofisticado a qualquer ambiente." },
{ id: "organico_redondo", name: "Orgânico / Redondo", img: "assets/espelhos/espelho-redondo-organico.webp",
  desc: "Espelhos com recortes redondos ou formas orgânicas, fugindo do padrão retangular tradicional. Uma opção contemporânea para quem busca uma peça com mais personalidade." },
{ id: "juncoes", name: "Junções", img: "assets/espelhos/espelho-juncao.webp",
  desc: "Composições feitas a partir da junção de placas de espelho, criando efeitos e desenhos personalizados na parede. Uma forma de dar identidade visual a um material simples." }];
// 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_PROJETOS_ESPECIAIS = waLink("Olá! Gostaria de saber mais sobre um projeto especial de espelho.");

// Cores de espelho disponíveis para projetos sob medida.
const CORES = [
{ label: "Cristal", style: { background: "rgba(228,234,230,0.35)", border: "1px solid var(--cinza)" } },
{ label: "Bronze", style: { background: "#7C6A52" } },
{ label: "Fumê", style: { background: "#3E4144" } }];


function EspelhosHero() {
  return (
    <section className="subhero" data-screen-label="Espelhos — Hero">
      <div className="hero-media">
        <img src="assets/espelhos/espelho-hero.webp" alt="Ambiente com espelho instalado 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>Espelhos sob medida para cada ambiente.</h1>
      </div>
    </section>);

}

function EspelhosCatalogo() {
  return (
    <section className="section section-off" id="catalogo" data-screen-label="Espelhos — Catálogo">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label">Catálogo</span>
          <h2>Tipos de Espelhos</h2>
          <hr className="rule" />
        </div>
        <div className="cat-grid">
          {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>
      </div>
    </section>);

}

function EspelhosProjetosEspeciais() {
  return (
    <section className="section" id="projetos-especiais" data-screen-label="Espelhos — Projetos Especiais">
      <div className="wrap">
        <div className="peliculas-grid pe-media reveal">
          <div className="peliculas-img">
            <img src="assets/espelhos/espelho-led2.webp" alt="Espelho sob medida com iluminação em LED" loading="lazy" onError={hideOnError} />
          </div>
          <div>
            <span className="label" style={{ color: "var(--camel-texto)" }}>Projetos Especiais</span>
            <h2>Um espelho pensado para o seu projeto</h2>
            <hr className="rule" />
            <p>Além dos modelos de catálogo, também desenvolvemos espelhos sob medida para necessidades específicas. Nesses casos, o projeto é desenvolvido diretamente com a nossa equipe.</p>
            <div className="acab-block" style={{ marginTop: "24px" }}>
              <h3>Cores</h3>
              <div className="acab-swatches">
                {CORES.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>
            <a className="btn btn-primary peliculas-cta" href={WA_PROJETOS_ESPECIAIS} target="_blank" rel="noopener">Conte sobre o seu projeto</a>
          </div>
        </div>
      </div>
    </section>);

}

function EspelhosCta() {
  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 o espelho certo para o seu projeto</h2>
        <p>Conte qual ambiente você quer atender e, se quiser, já mande uma medida aproximada pelo WhatsApp. Calculamos uma estimativa e agendamos a medição no local.</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>
        <EspelhosHero />
        <EspelhosCatalogo />
        <EspelhosProjetosEspeciais />
        <EspelhosCta />
      </main>
      <Footer />
      <WaFloat />
    </React.Fragment>);

}

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