// Tendências — HOME: Hero (foto), Stats, Portal, Materiais
function Hero() {
  const content =
  <div className="hero-content reveal">
      <h1>Qualidade que o tempo comprova</h1>
      <p className="lead">Desde 2003, a Tendências projeta, fornece e instala persianas, boxes e espelhos com equipe própria.


    </p>
      <div className="hero-ctas">
        <SectionLink id="produtos-home" className="btn btn-primary">Veja os nossos produtos</SectionLink>
      </div>
    </div>;


  return (
    <section className="hero-photo" id="topo" data-screen-label="Hero">
      <div className="hero-media">
        <img className="hero-bg-img" src="assets/hero-bg.webp" alt="Sala ampla com persianas instaladas pela Tendências" fetchpriority="high" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
      </div>
      <div className="hero-scrim"></div>
      <div className="wrap" style={{ fontFamily: "Lora" }}>{content}</div>
    </section>);

}

function useCounter(target, runId, dur = 1400) {
  const [val, setVal] = React.useState(target);
  React.useEffect(() => {
    if (!runId) {setVal(target);return;}
    let raf, start;
    setVal(0);
    const tick = (t) => {
      if (!start) start = t;
      const p = Math.min(1, (t - start) / dur);
      setVal(Math.round(target * (1 - Math.pow(1 - p, 3))));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, runId]);
  return val;
}

function Stats({ animate }) {
  const ref = React.useRef(null);
  const [runId, setRunId] = React.useState(0);
  React.useEffect(() => {
    if (!animate || !ref.current) {setRunId(0);return;}
    const obs = new IntersectionObserver(
      ([e]) => {if (e.isIntersecting) setRunId((n) => n + 1);},
      { threshold: 0.45 }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [animate]);
  const trig = animate ? runId : 0;
  const anos = useCounter(23, trig);
  const pedidos = useCounter(17000, trig);
  const marcas = useCounter(7, trig);
  return (
    <section className="stats" ref={ref} data-screen-label="Números">
      <div className="wrap">
        <div className="stats-grid">
          <div className="stat">
            <div className="num">{anos}</div>
            <div className="desc">anos de mercado</div>
          </div>
          <div className="stat">
            <div className="num"><em>+</em>{pedidos.toLocaleString("pt-BR")}</div>
            <div className="desc">pedidos realizados</div>
          </div>
          <div className="stat">
            <div className="num">{marcas}</div>
            <div className="desc">marcas parceiras oficiais</div>
          </div>
        </div>
      </div>
    </section>);

}

function Portal() {
  return (
    <section className="section" id="produtos" data-screen-label="Portal de atendimento">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label">Como podemos atendê-lo</span>
          <h2>Dois caminhos, o mesmo cuidado em cada detalhe</h2>
          <hr className="rule" />
          <p style={{ maxWidth: "740px" }}>Escolha o atendimento que combina com o seu momento, seja uma compra direta para o seu espaço, ou um projeto que pede especificação e acompanhamento técnico.</p>
        </div>
        <div className="portal-grid">
          <a className="portal-card reveal reveal-d1" href={PAGE_CLIENTE}>
            <div className="pc-media">
              <img src="assets/portal-cliente.webp" alt="Banheiro com box de vidro instalado pela Tendências" loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", transition: "transform 0.7s cubic-bezier(.2,.6,.2,1)" }} />
            </div>
            <div className="pc-scrim"></div>
            <div className="pc-body">
              <h3 className="pc-title-lg">Cliente Final</h3>
              <p>Não importa o tamanho do seu projeto, entre em contato com a Tendências, faremos um orçamento sem compromisso</p>
              <span className="pc-link is-red"><span style={{ color: "#f5f0eb" }}>Ver produtos</span> <span className="arw"><span style={{ color: "#f5f0eb" }}>→</span></span></span>
            </div>
          </a>
          <a className="portal-card reveal reveal-d2" href={PAGE_OBRAS}>
            <div className="pc-media">
              <img src="assets/portal-obras.webp" alt="Sala de reunião com persianas corporativas instaladas pela Tendências" loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", transition: "transform 0.7s cubic-bezier(.2,.6,.2,1)" }} />
            </div>
            <div className="pc-scrim"></div>
            <div className="pc-body">
              <h3 className="pc-title-lg">Obras Corporativas</h3>
              <p>Projetos que pedem especificação, escala e acompanhamento técnico. Fale direto com o nosso time.</p>
              <span className="pc-link">Falar com o time técnico <span className="arw">→</span></span>
            </div>
          </a>
        </div>
      </div>
    </section>);

}

function ProductsShowcase() {
  return (
    <section className="section" id="produtos-home" data-screen-label="Vitrine de Produtos">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="label">Produtos e Serviços</span>
          <h2>Tudo o que fazemos, em um só lugar</h2>
          <hr className="rule" />
          <p>De um espelho na sala à troca completa dos boxes da casa, veja o que a Tendências oferece. Com medição no local e instalação feita por equipe própria.</p>
        </div>
        <div className="prod-grid">
          {PRODUCTS.map((p, i) =>
          <a key={p.id} href={p.page || (PAGE_CLIENTE + "#produtos")} 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>
                <span className="prod-link">Ver mais</span>
              </div>
            </article>
          </a>
          )}
        </div>
      </div>
    </section>);
}

Object.assign(window, { Hero, Stats, Portal, ProductsShowcase });