/* URBANITY SALES SITE — Header + Hero (effect 1: "Fachada Respira") */
(function () {
  const { DATA } = window.UK;
  const { WhatsAppButton, Eyebrow } = window.UK.DS;
  const A = DATA.asset;

  function Header() {
    return (
      <header className="hdr">
        <a className="hdr__brand" href="#topo">
          <img src={A("logo/urbanity-emblem-teal.png")} alt="" className="hdr__logo" />
          <span className="hdr__word">URBANITY</span>
        </a>
        <div className="hdr__cta">
          <WhatsAppButton num={DATA.wa} typology="generico" variant="primary" size="sm">Agendar visita</WhatsAppButton>
        </div>
      </header>
    );
  }

  function Hero() {
    const M = DATA.heroMosaic;
    return (
      <section className="hero" id="topo" data-screen-label="Hero">
        <div className="hero__wordmark" aria-hidden="true">URBANITY</div>
        <div className="hero__mosaic">
          {M.map((s, i) => (
            <div key={i} className={"hero__strip" + (s.center ? " hero__strip--center" : "")}>
              <img className="hero__strip-img" src={A(s.img)} alt={s.alt} style={{ objectPosition: s.pos }}
                {...(s.center
                  ? { fetchpriority: "high", decoding: "async" }
                  : { loading: "lazy", "aria-hidden": "true", decoding: "async" })} />
            </div>
          ))}
        </div>
        <div className="hero__scrim" aria-hidden="true"></div>
        <div className="hero__copy">
          <Eyebrow tone="on-dark">Rio Verde · GO · Tabela válida até junho/26</Eyebrow>
          <p className="hero__sub">URBANITY Kasa Resort — onde a cidade encontra o resort, todo dia.</p>
          <p className="hero__auth">Incorporação SOMOS · Porto Belo · trinus</p>
          <div className="hero__actions">
            <WhatsAppButton num={DATA.wa} typology="generico" variant="primary" size="lg" withIcon={false}>Agendar visita ao decorado</WhatsAppButton>
            <WhatsAppButton num={DATA.wa} typology="generico" variant="ghost-dark" size="lg">Falar no WhatsApp</WhatsAppButton>
          </div>
          <p className="hero__proof">Resposta no mesmo dia · Corretor CRECI · Decorado físico 2 e 3 quartos para visita</p>
        </div>
        <div className="hero__cue" aria-hidden="true"><span>role</span><i></i></div>
      </section>
    );
  }

  window.UK.Header = Header;
  window.UK.Hero = Hero;
})();