// Cliente Final — produtos para compra direta
function ClienteHero() {
  return (
    <section className="subhero" style={{ minHeight: "72vh" }} data-screen-label="Cliente Final — Hero">
      <div className="hero-media">
        <img src="assets/hero-cliente.webp" alt="Sala com persianas e espelho instalados pela Tendências" fetchpriority="high" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 30%" }} />
      </div>
      <div className="hero-scrim"></div>
      <div className="wrap">
        <span className="label"><span style={{ color: "#D9B894", fontWeight: 700, textShadow: "0 1px 6px rgba(0,0,0,0.55)" }}>Cliente Final</span></span>
        <h1>Seu projeto, sem complicação.</h1>
        <p className="lead">Compra direta, com medição no local e instalação pela nossa própria equipe.</p>
      </div>
    </section>);

}

function ClienteIntro() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="intro-block reveal">
          <p className="lead">
            Aqui o atendimento é direto. Você apresenta sua necessidade, um técnico
            vai até o local, faz a medição, apresenta o orçamento e programa a instalação.
          </p>
        </div>
      </div>
    </section>);

}

function ClienteProducts() {
  return (
    <section className="section section-off" id="produtos" data-screen-label="Produtos">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label">Produtos e Serviços</span>
          <h2>O que você pode encomendar</h2>
          <hr className="rule" />
        </div>
        <div className="prod-grid">
          {PRODUCTS.map((p, i) =>
          <a key={p.id} href={p.page || WA_LINK} target={p.page ? undefined : "_blank"} rel={p.page ? undefined : "noopener"} style={{ textDecoration: "none", color: "inherit", display: "block" }}>
            <article className={"prod-card reveal" + (i % 3 === 1 ? " reveal-d1" : i % 3 === 2 ? " reveal-d2" : "")}>
              <div style={{ width: "100%", height: "200px", overflow: "hidden", flexShrink: 0 }}>
                <img src={p.img} alt={p.name} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", display: "block" }} />
              </div>
              <div className="prod-body">
                <h3>{p.name}</h3>
                <p>{p.desc}</p>
                {p.page
                  ? <span className="prod-link">Ver modelos</span>
                  : <span className="prod-link">Pedir orçamento</span>
                }
              </div>
            </article>
          </a>
          )}
        </div>
      </div>
    </section>);

}

function ClienteCta() {
  return (
    <section className="cta-band" data-screen-label="CTA">
      <div className="wrap">
        <span className="label" style={{ color: "#D9B894" }}>Orçamento sem compromisso</span>
        <h2>Fale Conosco</h2>
        <p>Especifique sua necessidade para podermos agendar uma visita sem compromisso</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();
    if (window.location.hash === "#produtos") {
      setTimeout(() => {
        const el = document.getElementById("produtos");
        if (el) {
          el.scrollIntoView({ behavior: "smooth", block: "start" });
        }
      }, 100);
    }
  }, []);
  return (
    <React.Fragment>
      <Navbar />
      <main>
        <ClienteHero />
        <ClienteIntro />
        <ClienteProducts />
        <ClienteCta />
      </main>
      <Footer />
      <WaFloat />
    </React.Fragment>);

}

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