/* URBANITY SALES SITE — Tipologias (commercial spine) + Galeria Decorados (effect 5) */
(function () {
  const { DATA } = window.UK;
  const { TypologyCard, Badge, SectionMarker, HairlineDouble, Eyebrow, PriceTag, WhatsAppButton, Button, WA_MESSAGES } = window.UK.DS;
  const A = DATA.asset;
  const waHref = (key) => `https://wa.me/${DATA.wa}?text=${encodeURIComponent(WA_MESSAGES[key] || WA_MESSAGES.generico)}`;

  function Tipologias() {
    return (
      <section className="section" id="tipologias">
        <div className="wrap">
          <div className="section-head">
            <SectionMarker num="04" label="Tipologias" />
            <HairlineDouble tone="gold" />
            <Badge tone="gold">Unidades limitadas por tipologia · Tabela válida até junho/26</Badge>
            <h2 className="uk-display" style={{ fontSize: "var(--uk-step-3)" }}>Do studio inteligente à cobertura com rooftop.</h2>
            <p style={{ color: "var(--uk-ink-soft)", fontSize: "var(--uk-step-1)", maxWidth: "40ch", margin: 0 }}>
              A partir de <span className="uk-tnum" style={{ color: "var(--uk-gold)", fontWeight: 600 }}>R$ 584.733</span>, com entrada facilitada até a entrega.
            </p>
          </div>

          <div className="tipos" data-reveal>
            {DATA.tipologias.map((t) => (
              <TypologyCard key={t.key}
                image={A(t.img)} imageAlt={`Planta ${t.title}`}
                title={t.title} tagline={t.tagline} area={t.area}
                price={t.price} priceRange={t.range}
                parcela={DATA.parcela}
                ctaLabel={t.cta} ctaHref={waHref(t.key)} />
            ))}
          </div>

          <p style={{ marginTop: "var(--uk-space-6)", color: "var(--uk-ink-faint)", fontSize: "var(--uk-step--1)", maxWidth: "70ch", lineHeight: 1.6 }}>
            Condição da tabela direta da incorporadora (sinal no ato + entrada 30/60/90 + mensais + semestrais + parcela única na entrega) — não é financiamento bancário. Valores sujeitos à análise.
          </p>
        </div>
      </section>
    );
  }

  function Galeria() {
    return (
      <section className="section" id="decorados" style={{ background: "var(--uk-paper-2)" }}>
        <div className="wrap">
          <div className="section-head">
            <SectionMarker num="05" label="Decorados" />
            <HairlineDouble />
            <h2 className="uk-display" style={{ fontSize: "var(--uk-step-3)" }}>Veja onde sua próxima história começa.</h2>
          </div>
        </div>

        <div className="stack wrap">
          {DATA.livings.map((l, i) => (
            <div className="stack__card" key={i} style={{ zIndex: i + 1 }}>
              <div className="stack__inner">
                <img className="stack__img" src={A(l.img)} alt={`Ambiente decorado — ${l.tip}`} loading="lazy" decoding="async" />
                <div className="stack__body">
                  <Eyebrow tone="gold">{l.tip}</Eyebrow>
                  {l.price ? (
                    <PriceTag value={l.price} parcela={DATA.parcela} size="md" />
                  ) : (
                    <p style={{ fontFamily: "var(--font-display)", fontWeight: 500, letterSpacing: "-0.02em", fontSize: "var(--uk-step-2)", color: "var(--uk-ink)", margin: 0, lineHeight: 1.05 }}>
                      Acabamento de resort, no seu dia a dia.
                    </p>
                  )}
                  <WhatsAppButton num={DATA.wa} typology={l.key} variant="primary" size="md" fullWidth withIcon={false}>{l.price ? "Quero esta tipologia" : "Quero conhecer de perto"}</WhatsAppButton>
                </div>
              </div>
            </div>
          ))}
          <div className="stack__card" style={{ zIndex: 99 }}>
            <div className="stack__inner" style={{ display: "block", textAlign: "center", padding: "var(--uk-space-8) var(--uk-space-5)", background: "var(--uk-night)" }}>
              <Eyebrow tone="on-dark">Decorado físico 2 e 3 quartos</Eyebrow>
              <p style={{ fontFamily: "var(--font-display)", fontWeight: 500, letterSpacing: "-0.02em", fontSize: "var(--uk-step-2)", color: "var(--uk-paper-on-dark)", margin: "12px 0 22px", lineHeight: 1.1 }}>
                Aberto para visita presencial.
              </p>
              <WhatsAppButton num={DATA.wa} typology="2q" variant="primary" size="lg" withIcon={false}>Agende sua visita ao decorado físico</WhatsAppButton>
            </div>
          </div>
        </div>

        <div className="wrap">
          <p style={{ marginTop: "var(--uk-space-7)", color: "var(--uk-ink-faint)", fontSize: "var(--uk-step--1)", maxWidth: "70ch", lineHeight: 1.6 }}>
            Renders dos ambientes. Acabamentos: porcelanato · granito White Rose (cozinha) · mármore bege bahia (banheiros) · esquadrias pretas · persiana integrada · fechadura eletrônica · tomadas USB · previsão de split.
          </p>
        </div>
      </section>
    );
  }

  window.UK.Tipologias = Tipologias;
  window.UK.Galeria = Galeria;
})();