// Obras Corporativas — página persuasiva para quem especifica
function ObrasHero() {
  return (
    <section className="subhero" data-screen-label="Obras Corporativas — Hero">
      <div className="hero-media">
        <img src="assets/hero-obras.webp" alt="Sala de reunião com persianas corporativas instaladas pela Tendências" fetchpriority="high" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center" }} />
      </div>
      <div className="hero-scrim"></div>
      <div className="wrap">
        <span className="label">Obras Corporativas</span>
        <h1>Para quem cria, especifica e define o projeto</h1>
        <p className="lead">Arquitetos, construtoras e designers de interiores: um fornecedor de vidro e persiana que entra no projeto antes da obra, e continua presente depois dela.


        </p>
        <div className="hero-ctas">
          <a className="btn btn-primary" href={WA_TEC} target="_blank" rel="noopener">Falar com o time técnico</a>
        </div>
      </div>
    </section>);

}

function ObrasIntro() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="intro-block reveal">
          <p className="lead" style={{ maxWidth: "765px" }}>Para a especificação e acompanhamento técnico do seu projeto, este é o canal. Não importa o tamanho ou complexidade, estamos aptos a atendê-lo com excelência.




          </p>
          <p>Aqui o objetivo não é navegar produtos, e sim conversar. Quanto antes entramos no detalhamento, menos retrabalho na obra, e mais previsível fica o cronograma para você e para o seu cliente.



          </p>
        </div>
      </div>
    </section>);

}

function ObrasAudience() {
  const aud = ["Arquitetos", "Construtoras", "Designers de interiores"];

  return (
    <section className="section section-dark" id="quem-atendemos" data-screen-label="Quem atendemos">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label">Quem atendemos</span>
          <h2 style={{ color: "var(--offwhite)" }}>Você certamente se encaixa aqui</h2>
          <hr className="rule" />
        </div>
        <div className="aud-grid">
          {aud.map((t, i) =>
          <div className={"aud-card reveal" + (i ? " reveal-d" + Math.min(i, 2) : "")} key={t}>
              <span className="ix" aria-hidden="true">◆</span>
              <h3>{t}</h3>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function ObrasValue() {
  const items = [
  ["Apoio na especificação", "Catálogos técnicos, medidas e detalhamento do projeto"],
  ["Equipe própria", "Sem terceirização: o mesmo time que orça acompanha a obra e executa a instalação."],
  ["Respeito aos prazos", "O prazo combinado é o prazo cumprido."],
  ["Pós-obra de verdade", "Estamos sempre disponíveis para resolver qualquer questão."]];

  return (
    <section className="section" id="por-que-tendencias" data-screen-label="Proposta de valor">
      <div className="wrap">
        <div className="about-grid">
          <div className="reveal about-col-fill">
            <span className="label">Por que a Tendências</span>
            <h2 style={{ marginTop: "14px" }}>Um parceiro, não apenas um fornecedor</h2>
            <hr className="rule" />
            <div className="reveal reveal-d1 about-img-fill" style={{ marginTop: "28px" }}>
              <span className="label">Parceiros oficiais</span>
              <img src="assets/painel-parceiros2.png" alt="Marcas parceiras oficiais da Tendências: Blindex, Amorim, Guardian, SKF, Divinal, Bonneville e Cebrace" loading="lazy" style={{ width: "100%", height: "auto", display: "block", marginTop: "12px" }} />
            </div>
          </div>
          <div className="b2b-list reveal reveal-d1">
            {items.map(([t, d], i) =>
            <div className="b2b-item" key={i} style={{ borderColor: "var(--cinza)" }}>
                <span className="b2b-num">0{i + 1}</span>
                <div>
                  <h3 style={{ color: "var(--grafite)" }}>{t}</h3>
                  <p style={{ color: "#555" }}>{d}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

function ObrasCta() {
  return (
    <section className="cta-band" data-screen-label="CTA">
      <div className="wrap">
        <span className="label" style={{ color: "#D9B894" }}>Vamos conversar</span>
        <h2>Traga o seu projeto, vamos iniciar uma excelente parceria!</h2>
        <p>Fale direto com o nosso time técnico. Avaliaremos os projetos e auxiliaremos na especificação.</p>
        <div className="hero-ctas">
          <a className="btn btn-primary" href={WA_TEC} target="_blank" rel="noopener">Falar com o time técnico</a>
          <a className="btn btn-outline-light" href={HOME + "#contato"}>Entre em Contato</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>
        <ObrasHero />
        <ObrasIntro />
        <ObrasAudience />
        <ObrasValue />
        <ObrasCta />
      </main>
      <Footer />
      <WaFloat />
    </React.Fragment>);

}

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