/* URBANITY SALES SITE — Localização + Configurador + Prova/Corretor + CTA final + Footer */
(function () {
  const { DATA } = window.UK;
  const { SectionMarker, HairlineDouble, Eyebrow, Badge, Button, WhatsAppButton, PriceTag, LeadForm } = window.UK.DS;
  const A = DATA.asset;

  function Localizacao() {
    return (
      <section className="section" id="local">
        <div className="wrap">
          <div className="section-head">
            <SectionMarker num="09" label="Localização" />
            <HairlineDouble />
            <h2 className="uk-display" style={{ fontSize: "var(--uk-step-3)" }}>No coração do Interlagos.</h2>
          </div>
          <div style={{
            position: "relative", borderRadius: "var(--uk-radius-lg)", overflow: "hidden",
            border: "1px solid var(--uk-hairline)", minHeight: "300px",
            background: "var(--uk-mist)",
            backgroundImage: "linear-gradient(var(--uk-hairline) 1px, transparent 1px), linear-gradient(90deg, var(--uk-hairline) 1px, transparent 1px)",
            backgroundSize: "44px 44px",
          }}>
            <div style={{ position: "absolute", left: "50%", top: "44%", transform: "translate(-50%,-50%)", textAlign: "center" }}>
              <div style={{ width: "20px", height: "20px", borderRadius: "999px", background: "var(--uk-teal)", margin: "0 auto", boxShadow: "0 0 0 8px rgba(15,92,82,.18)" }}></div>
            </div>
            <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "var(--uk-space-5)", background: "linear-gradient(to top, rgba(246,243,236,.96), transparent)" }}>
              <p style={{ fontFamily: "var(--font-text)", fontSize: "var(--uk-step-0)", color: "var(--uk-ink)", margin: "0 0 14px", maxWidth: "44ch" }}>
                {DATA.address}. Vista para o parque.
              </p>
              <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
                <Button variant="ghost" size="md" href={DATA.mapsHref} target="_blank" rel="noopener">Como chegar</Button>
                <WhatsAppButton num={DATA.wa} typology="generico" variant="primary" size="md" withIcon={false}>Agendar visita</WhatsAppButton>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  function Configurador() {
    const [sel, setSel] = React.useState(DATA.tipologias[1]);
    const seg = DATA.tipologias;
    return (
      <section className="section darkband" id="condicoes">
        <div className="wrap">
          <div className="section-head">
            <SectionMarker num="10" label="Condições" onDark />
            <HairlineDouble tone="on-dark" />
            <h2 className="uk-display" style={{ fontSize: "var(--uk-step-3)", color: "var(--uk-paper-on-dark)" }}>Tabela direta da incorporadora — sem banco no meio.</h2>
          </div>

          <div className="cfg">
            <Eyebrow tone="on-dark">Escolha a tipologia</Eyebrow>
            <div className="cfg__seg">
              {seg.map((t) => (
                <button key={t.key} className="chip" aria-pressed={sel.key === t.key}
                  onClick={() => setSel(t)}
                  style={sel.key === t.key
                    ? { background: "var(--uk-gold)", color: "var(--uk-night)", borderColor: "var(--uk-gold)" }
                    : { color: "var(--uk-paper-on-dark)", borderColor: "var(--uk-hairline-dark)" }}>
                  {t.title}
                </button>
              ))}
            </div>

            <PriceTag anchor={sel.price ? "a partir de" : ""} value={sel.price || "Sob consulta"} range={sel.range} onDark size="lg" />
            <p style={{ color: "var(--uk-ink-on-dark-soft)", fontSize: "var(--uk-step--1)", marginTop: "6px" }}>{sel.title} · {sel.area}</p>

            <ul className="cfg__struct" style={{ listStyle: "none", padding: 0 }}>
              {["Sinal no ato", "Entrada em 30 / 60 / 90 dias", "Parcelas mensais + semestrais", "Parcela única na entrega"].map((s) => (
                <li key={s}><span className="dot"></span>{s}</li>
              ))}
            </ul>

            <p style={{ color: "var(--uk-ink-on-dark-soft)", fontSize: "var(--uk-step--1)", lineHeight: 1.6, borderTop: "1px solid var(--uk-hairline-dark)", paddingTop: "16px" }}>
              Condomínio médio ~R$ 484/mês. {DATA.correcao}
            </p>

            <div style={{ marginTop: "var(--uk-space-5)" }}>
              <WhatsAppButton num={DATA.wa} typology="tabela" variant="primary" size="lg" fullWidth withIcon={false}>Quero minha condição personalizada</WhatsAppButton>
            </div>
            <p style={{ color: "var(--uk-ink-on-dark-soft)", fontSize: "11px", marginTop: "12px", textAlign: "center" }}>Estrutura ilustrativa da tabela direta; condição final sob análise.</p>
          </div>
        </div>
      </section>
    );
  }

  function Prova() {
    return (
      <section className="section" id="prova">
        <div className="wrap">
          <div className="section-head">
            <SectionMarker num="11" label="Quem entrega" />
            <HairlineDouble />
            <h2 className="uk-display" style={{ fontSize: "var(--uk-step-3)" }}>Assinado por quem entrega.</h2>
          </div>

          <div style={{ background: "var(--uk-night)", borderRadius: "var(--uk-radius-lg)", padding: "var(--uk-space-6)", marginBottom: "var(--uk-space-6)", textAlign: "center" }}>
            <Eyebrow tone="on-dark">Incorporação · Construção · Participação</Eyebrow>
            <img src={A("logo/incorporadoras-navy.png")} alt="SOMOS, Porto Belo, trinus" style={{ width: "min(100%, 480px)", marginTop: "14px" }} />
          </div>

          <div className="corretor" data-reveal>
            <div className="corretor__photo">Foto do<br/>corretor</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "var(--uk-step-1)", color: "var(--uk-ink)" }}>{"{{CORRETOR_NOME}}"}</div>
              <div style={{ fontFamily: "var(--font-text)", fontSize: "var(--uk-step--1)", color: "var(--uk-ink-faint)", margin: "3px 0 10px" }}>CRECI {"{{CRECI}}"} · Responde no mesmo dia</div>
              <WhatsAppButton num={DATA.wa} typology="generico" variant="primary" size="sm" withIcon={false}>Falar agora com o corretor</WhatsAppButton>
            </div>
          </div>

          <div style={{ display: "flex", gap: "8px", flexWrap: "wrap", marginTop: "var(--uk-space-5)" }}>
            <Badge tone="neutral">Decorado físico 2 e 3 quartos aberto para visita</Badge>
            <Badge tone="neutral">1 clique para o WhatsApp · não pedimos seu e-mail</Badge>
          </div>

          {/* Secondary lead capture — does not compete with WhatsApp */}
          <div style={{ display: "grid", gap: "var(--uk-space-6)", gridTemplateColumns: "1fr", marginTop: "var(--uk-space-8)", alignItems: "start" }}>
            <div style={{ borderTop: "1px solid var(--uk-hairline)", paddingTop: "var(--uk-space-6)" }}>
              <Eyebrow tone="muted">Prefere receber por aqui?</Eyebrow>
              <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 500, letterSpacing: "-0.02em", fontSize: "var(--uk-step-2)", color: "var(--uk-ink)", margin: "8px 0 18px" }}>Pegue a tabela + book no seu WhatsApp.</h3>
              <div style={{ maxWidth: "440px" }}>
                <LeadForm num={DATA.wa} />
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  function CTAFinal() {
    return (
      <section className="section darkband" id="agendar" style={{ position: "relative", overflow: "hidden" }}>
        <img src={A(DATA.img.hero)} alt="" aria-hidden="true" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "50% 40%", opacity: 0.28, filter: "var(--uk-img-filter)" }} />
        <div style={{ position: "absolute", inset: 0, background: "rgba(12,19,17,.62)" }}></div>
        <div className="wrap" style={{ position: "relative", zIndex: 2, textAlign: "center" }}>
          <Eyebrow tone="on-dark">O resort já existe. Falta você.</Eyebrow>
          <h2 className="uk-display" style={{ fontSize: "var(--uk-step-3)", color: "var(--uk-paper-on-dark)", margin: "16px auto 18px", maxWidth: "18ch" }}>Agende sua visita ao decorado físico.</h2>
          <p style={{ color: "var(--uk-ink-on-dark-soft)", fontSize: "var(--uk-step-1)", maxWidth: "40ch", margin: "0 auto var(--uk-space-6)" }}>Veja a borda infinita, o rooftop e o decorado de verdade. Sem compromisso.</p>
          <div style={{ display: "flex", gap: "12px", justifyContent: "center", flexWrap: "wrap" }}>
            <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 agora no WhatsApp</WhatsAppButton>
          </div>
          <p style={{ color: "var(--uk-gold-soft)", fontSize: "var(--uk-step--1)", marginTop: "var(--uk-space-5)", letterSpacing: ".04em" }}>Decorado físico aberto para visita · resposta no mesmo dia</p>
        </div>
      </section>
    );
  }

  function Footer() {
    return (
      <footer className="ftr">
        <div className="wrap" style={{ display: "grid", gap: "var(--uk-space-6)" }}>
          <img src={A("logo/urbanity-horizontal-cream.png")} alt="URBANITY Kasa Resort" style={{ height: "46px", width: "auto", justifySelf: "start" }} />
          <HairlineDouble tone="on-dark" />
          <div style={{ display: "grid", gap: "6px", fontFamily: "var(--font-text)", fontSize: "var(--uk-step--1)", color: "var(--uk-paper-on-dark)" }}>
            <span>Incorporação SOMOS · Porto Belo · trinus</span>
            <span>{DATA.address}</span>
            <span>SPE QD TRÊS RIO VERDE — CNPJ 44.613.415/0001-06 · CRECI {"{{CRECI}}"}</span>
          </div>
          <div style={{ display: "flex", gap: "18px", flexWrap: "wrap", fontFamily: "var(--font-text)", fontSize: "var(--uk-step--1)" }}>
            <a href="#">Política de Privacidade</a><a href="#">Termos</a>
          </div>
          <p className="ftr__legal">
            Imagens ilustrativas. Tabela válida até junho/26. {DATA.correcao} Condomínio médio ~R$ 484/mês. Sujeito a alteração sem aviso.
          </p>
          <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
            <WhatsAppButton num={DATA.wa} typology="generico" variant="primary" size="md" withIcon={false}>Agendar visita</WhatsAppButton>
            <WhatsAppButton num={DATA.wa} typology="generico" variant="ghost-dark" size="md">WhatsApp</WhatsAppButton>
          </div>
        </div>
      </footer>
    );
  }

  window.UK.Localizacao = Localizacao;
  window.UK.Configurador = Configurador;
  window.UK.Prova = Prova;
  window.UK.CTAFinal = CTAFinal;
  window.UK.Footer = Footer;
})();