/* URBANITY SALES SITE — Prisma + Números + Conceito (effects 2 & 3) */
(function () {
  const { DATA } = window.UK;
  const { StatCounter, SectionMarker, HairlineDouble, WhatsAppButton } = window.UK.DS;
  const A = DATA.asset;

  const words = (s) => s.split(" ").map((w, i) => <span className="w" key={i}>{w}&nbsp;</span>);

  function Prisma() {
    return (
      <section className="prisma" aria-label="Manifesto">
        <div className="prisma__pin">
          <div className="prisma__count"><b>02</b> — Manifesto</div>
          <div className="prisma__cube">
            <div className="prisma__face">Morar é um resort.</div>
            <div className="prisma__face">Não nos fins de semana.<br/>Todo dia.</div>
            <div className="prisma__face"><span className="accent">Em Rio Verde</span>, no endereço<br/>que você vai querer dar.</div>
          </div>
          <div className="prisma__sub">
            Um resort vertical pensado para quem não quer separar morar de viver bem.
            <div style={{ marginTop: "20px" }}>
              <WhatsAppButton num={DATA.wa} typology="generico" variant="ghost">Falar no WhatsApp</WhatsAppButton>
            </div>
          </div>
        </div>
      </section>
    );
  }

  function Numeros() {
    return (
      <section className="section darkband" style={{ position: "relative", overflow: "hidden" }}>
        <img src={A(DATA.img.aerea)} alt="" aria-hidden="true"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.20, filter: "var(--uk-img-filter)" }} />
        <div style={{ position: "absolute", inset: 0, background: "rgba(12,19,17,.58)" }} aria-hidden="true"></div>
        <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
          <div className="section-head">
            <SectionMarker num="03" label="Escala" onDark />
            <HairlineDouble tone="on-dark" />
            <h2 className="uk-display" style={{ fontSize: "var(--uk-step-3)", color: "var(--uk-paper-on-dark)" }}>A escala que você sente antes de entrar.</h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "28px 24px" }} data-reveal>
            {DATA.stats.map((s) => (
              <StatCounter key={s.label} value={s.value} prefix={s.prefix || ""} suffix={s.suffix || ""} label={s.label} onDark />
            ))}
          </div>
          <p style={{ marginTop: "var(--uk-space-6)", color: "var(--uk-ink-on-dark-soft)", fontSize: "var(--uk-step-0)", maxWidth: "52ch" }}>
            Uma torre, alas A e B · reconhecimento facial na fachada · vaga para carro elétrico.
          </p>
        </div>
      </section>
    );
  }

  function Conceito() {
    return (
      <section className="section manifesto">
        <img className="manifesto__bg" src={A(DATA.img.pool)} alt="" aria-hidden="true" />
        <div className="manifesto__veil" aria-hidden="true"></div>
        <div className="wrap manifesto__inner">
          <div className="section-head">
            <SectionMarker num="06" label="Conceito" onDark />
            <HairlineDouble tone="on-dark" />
          </div>
          <p className="manifesto__text">
            {words("Você não volta para casa.")}<br/>
            {words("Você volta para o resort.")}
          </p>
          <p style={{ color: "var(--uk-ink-on-dark-soft)", fontSize: "var(--uk-step-1)", marginTop: "var(--uk-space-6)", maxWidth: "40ch", lineHeight: 1.5 }}>
            Borda infinita com vista para o parque. Rooftop a 100 metros do chão. Um lobby de pé-direito duplo que recebe quem você ama.
          </p>
          <p className="manifesto__gold" style={{ fontFamily: "var(--font-display)", fontWeight: 500, letterSpacing: "-0.02em", fontSize: "var(--uk-step-2)", marginTop: "var(--uk-space-5)", maxWidth: "24ch", lineHeight: 1.1 }}>
            Tudo isso, a um elevador do seu apartamento.
          </p>
          <div style={{ marginTop: "var(--uk-space-6)" }}>
            <WhatsAppButton num={DATA.wa} typology="generico" variant="primary" size="lg" withIcon={false}>Quero ver isso de perto</WhatsAppButton>
          </div>
        </div>
      </section>
    );
  }

  window.UK.Prisma = Prisma;
  window.UK.Numeros = Numeros;
  window.UK.Conceito = Conceito;
})();