// Persianas e Cortinas — página de produto (catálogo Amorim, derivada de cliente-final)

// 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 slugify = (s) => s.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");

// 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 CATALOG = [
{ name: "Rolô", img: "assets/persianas/persiana_rolo.webp", desc: "Praticidade e leveza ao ambiente. Grande variedade de tecidos, entre eles tela solar e blackout, que se adequam aos mais diversos estilos de decoração. Disponível com acionamento manual ou motorizado." },
{ name: "Rolô Stillo", img: "assets/persianas/persiana_rolo_stillo.webp", desc: "Beleza, conforto e bem-estar. A base deslizante permite que os tecidos se intercalem, criando um efeito lúdico e tornando o ambiente mais agradável. Grande variedade de tecidos e cores." },
{ name: "Romana", img: "assets/persianas/persiana_romana.webp", desc: "Ideal para ambientes sofisticados. Os gomos formados quando a cortina é recolhida trazem charme ao ambiente. Acionamento easy control, monocontrole ou motorizado." },
{ name: "Illuminê", img: "assets/persianas/persiana_illumine.webp", desc: "Moderna e elegante, para os mais variados projetos. Ao ser acionada, os tecidos formam gomos; a combinação de translúcido e opaco valoriza a visibilidade externa e a entrada de luz." },
{ name: "Lumière", img: "assets/persianas/persiana_lumiere.webp", desc: "Elegância e leveza. Suas delicadas lâminas em tecido podem ser posicionadas para controlar a luminosidade do ambiente." },
{ name: "Melíade", img: "assets/persianas/persiana_meliade.webp", desc: "Produto exclusivo Amorim. Lâminas em dois tecidos, opaco e translúcido, que refletem os raios UV, trazendo proteção e privacidade." },
{ name: "Eternity", img: "assets/persianas/persiana_eternity.webp", desc: "Modernidade e sofisticação. As delicadas lâminas permitem controlar a luminosidade; a combinação de translúcido e opaco dá leveza ao ambiente." },
{ name: "Eternity Line", img: "assets/persianas/persiana_eternity_line.webp", desc: "Controle de luz e privacidade, ideal para projetos contemporâneos. Seu diferencial são as linhas especiais que sustentam o tecido, com resultado visual sofisticado." },
{ name: "Infinity", img: "assets/persianas/persiana_infinity.webp", desc: "Para quem busca um toque diferenciado. As lâminas em tecido são sustentadas por fitas que permitem o controle preciso da luminosidade." },
{ name: "Celular", img: "assets/persianas/persiana_celular.webp", desc: "Inovadora e prática, com grande variedade de cores. O tecido em design de colmeia forma bolsas de ar, reduzindo o ruído externo e oferecendo conforto térmico. Indicada para janelas que precisam de máxima área livre quando recolhidas." },
{ name: "Plissada", img: "assets/persianas/persiana_plissada.webp", desc: "Moderna e indicada para instalação dentro de vãos. Seus acionamentos possibilitam diferentes sistemas de recolhimento. Acionamento standard, monocontrole ou motorizado." },
{ name: "Passione", img: "assets/persianas/persiana_passione.webp", desc: "Faz referência às cortinas tradicionais de tecido. O movimento das lâminas oferece diversas possibilidades de luz e privacidade. Indicada para grandes janelas e vãos de passagem. Poliéster com tratamento antiestático que inibe o acúmulo de poeira." },
{ name: "Galaxy", img: "assets/persianas/persiana_galaxy.webp", desc: "Solução prática e criativa em poliéster com tratamento antiestático. As lâminas recolhidas formam uma delicada onda, trazendo um toque arrojado para a janela." },
{ name: "Sublime", img: "assets/persianas/persiana_sublime.webp", desc: "Ideal para grandes janelas. Combina a praticidade da persiana com a elegância do tecido. Lâminas de PVC liso de 9mm revestidas em Voil, em várias cores." },
{ name: "Painel", img: "assets/persianas/persiana_painel.webp", desc: "Valoriza áreas amplas ao ser recolhida. Diferentes formas de abertura atendem diversos estilos. Disponível liso ou com hastes, acionado por cordão ou bastão." },
{ name: "Vertical", img: "assets/persianas/persiana_vertical.webp", desc: "Prática e versátil, valoriza todos os tipos de ambiente. Coleções exclusivas com ampla variedade de tecidos e lâminas em PVC." },
{ name: "PH Alumínio", img: "assets/persianas/persiana_aluminio.webp", desc: "Resistente, prática e clássica, para ambientes comerciais e residenciais. Disponível em 16mm e 25mm (standard, comando único, entre vidros, monocontrole ou motorizado) e 50mm (standard, monocontrole ou motorizado)." },
{ name: "PH Curve", img: "assets/persianas/persiana_curve.webp", desc: "Persiana horizontal em 100% PVC, material ecologicamente correto. Lâminas de 50mm com leve curvatura e design diferenciado. Coleções lisa, texturizada e em tons de madeira." },
{ name: "Bambu, Madeira e Sintética", img: "assets/persianas/persiana_bambu.webp", desc: "Bambu: ecologicamente correta, ideal para salas, quartos e escritórios. Madeira: retrata a arquitetura clássica e acompanha as tendências modernas. Sintética: a beleza da madeira sem usar o recurso natural. Acionamento standard, monocontrole ou motorizado." },
{ name: "Cortina de Teto", img: "assets/persianas/persiana_teto.webp", desc: "Solução para áreas externas cobertas por vidro ou similar. Reduz a intensidade da luz e bloqueia os raios UV. Em tecido Screen, atua como isolante térmico. Modelos allure, monocontrole e motorizado." }];


function PersianasHero() {
  return (
    <section className="subhero" data-screen-label="Persianas — Hero">
      <div className="hero-media">
        <img src="assets/divider-sala.webp" alt="Ambiente com persianas instaladas 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>Persianas e cortinas para cada tipo de ambiente.</h1>
      </div>
    </section>);

}

function AmorimBand() {
  return (
    <section className="section-sm section-off" data-screen-label="Revenda Amorim">
      <div className="wrap">
        <div className="amorim-band reveal">
          <div className="amorim-logo">
            <img src="assets/partner-amorim.png" alt="Amorim Cortinas" loading="lazy" onError={hideOnError} />
          </div>
          <div className="amorim-text">
            <p>
              <strong>Revenda oficial Amorim Cortinas.</strong> A Amorim é uma das
              principais fabricantes de persianas e cortinas do país, reconhecida pela
              variedade de modelos, pela qualidade dos tecidos e por uma linha de
              motorização compatível com os principais sistemas de automação.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

function Motorizacao() {
  return (
    <section className="section" data-screen-label="Motorização">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label">Motorização</span>
          <h2>Motorizada ou manual</h2>
          <hr className="rule" />
          <p>
            A motorização de persianas e cortinas tornou-se indispensável: proporciona
            comodidade, além de valorizar o resultado estético do ambiente, eliminando os
            componentes de acionamento manual. A motorização Amorim é compatível com todos
            os sistemas de automação.
          </p>
        </div>
        <div className="motor-grid">
          <article className="motor-card reveal">
            <div className="cat-img">
              <img src="assets/persianas/persiana_motorizada.webp" alt="Motorizada" loading="lazy" onError={hideOnError} />
            </div>
            <hr className="motor-rule" />
            <h3>Motorizada</h3>
            <p>
              Acionamento por controle, aplicativo ou integração com a automação da
              casa. Sem cordões à vista, com acabamento mais limpo. Ideal para janelas
              altas, grandes vãos ou vários pontos no mesmo ambiente.
            </p>
          </article>
          <article className="motor-card reveal reveal-d1">
            <div className="cat-img">
              <img src="assets/persianas/persiana_manual.webp" alt="Manual" loading="lazy" onError={hideOnError} />
            </div>
            <hr className="motor-rule" />
            <h3>Manual</h3>
            <p>
              Fácil manuseio e bastante confiável. O acionamento por corrente, bastão ou
              monocontrole atende perfeitamente todos os ambientes. 
            </p>
          </article>
        </div>
      </div>
    </section>);

}

function Catalogo() {
  return (
    <section className="section section-off" id="catalogo" data-screen-label="Catálogo de Modelos" style={{ paddingTop: "0" }}>
      <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">
          {CATALOG.map((m, i) =>
          <article id={"cat-" + slugify(m.name)} className={"cat-card reveal" + (i % 3 === 1 ? " reveal-d1" : i % 3 === 2 ? " reveal-d2" : "")} key={m.name}>
              <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 PersianasCta() {
  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 cortina ou persiana certa para o seu projeto</h2>
        <p>Solicite um orçamento sem compromisso e agendaremos uma 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>
        <PersianasHero />
        <AmorimBand />
        <Catalogo />
        <Motorizacao />
        <PersianasCta />
      </main>
      <Footer />
      <WaFloat />
    </React.Fragment>);

}

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