/* URBANITY SALES SITE — Lazer (bento, effect 4) + Plantas (filtro + lightbox) */
(function () {
  const { DATA } = window.UK;
  const { BentoTile, SectionMarker, HairlineDouble, WhatsAppButton, Eyebrow, Button } = window.UK.DS;
  const A = DATA.asset;

  const spanStyle = (span) => ({
    big: { gridColumn: "span 2", gridRow: "span 2" },
    tall: { gridRow: "span 2" },
    wide: { gridColumn: "span 2" },
  }[span] || {});

  function Lazer() {
    return (
      <section className="section" id="lazer">
        <div className="wrap">
          <div className="section-head">
            <SectionMarker num="07" label="Lazer" />
            <HairlineDouble />
            <h2 className="uk-display" style={{ fontSize: "var(--uk-step-3)" }}>Da borda infinita ao rooftop gourmet — o lazer de um resort, dentro de casa.</h2>
            <p style={{ color: "var(--uk-ink-soft)", fontSize: "var(--uk-step-1)", maxWidth: "44ch", margin: 0 }}>+30 espaços. Seis formas de viver melhor sem pegar a estrada.</p>
          </div>

          <div className="bento">
            {DATA.amenities.map((a) => (
              <div className="bento__cell" style={spanStyle(a.span)} key={a.fam}>
                <BentoTile image={a.img ? A(a.img) : undefined} title={a.fam} label={a.label} style={{ minHeight: 0 }} />
              </div>
            ))}
            <div className="bento__cell">
              <BentoTile title="Mall" label="16 lojas no térreo" style={{ minHeight: 0 }} />
            </div>
            <div className="bento__cell">
              <BentoTile cta title="Conheça os 30 lazeres" ctaLabel="Falar no WhatsApp"
                href={`https://wa.me/${DATA.wa}?text=${encodeURIComponent("Olá! Quero conhecer os 30 espaços de lazer do URBANITY.")}`} />
            </div>
          </div>

          <div style={{ marginTop: "var(--uk-space-6)" }}>
            <WhatsAppButton num={DATA.wa} typology="generico" variant="primary" size="lg" withIcon={false}>Agendar visita</WhatsAppButton>
          </div>
        </div>
      </section>
    );
  }

  const FILTERS = [
    { v: "all", l: "Todas" }, { v: "1q", l: "1Q" }, { v: "2q", l: "2Q" },
    { v: "3q", l: "3Q" }, { v: "penthouse", l: "Penthouse" }, { v: "garden", l: "Garden" }, { v: "loja", l: "Lojas" },
  ];

  function Plantas() {
    const [filter, setFilter] = React.useState("all");
    const [box, setBox] = React.useState(null);
    const list = DATA.plantas.filter((p) => filter === "all" || p.f === filter);
    return (
      <section className="section" id="plantas" style={{ background: "var(--uk-paper-2)" }}>
        <div className="wrap">
          <div className="section-head">
            <SectionMarker num="08" label="Plantas" />
            <HairlineDouble />
            <h2 className="uk-display" style={{ fontSize: "var(--uk-step-3)" }}>A planta exata do seu próximo endereço.</h2>
          </div>

          <div className="chips" role="group" aria-label="Filtrar plantas">
            {FILTERS.map((f) => (
              <button key={f.v} className="chip" aria-pressed={filter === f.v} onClick={() => setFilter(f.v)}>{f.l}</button>
            ))}
          </div>

          <div className="plantas-grid">
            {list.map((p, i) => (
              <figure className="planta-card" key={i} onClick={() => setBox(p)} role="button" tabIndex={0}
                onKeyDown={(e) => { if (e.key === "Enter") setBox(p); }} style={{ margin: 0 }}>
                <img src={A(p.img)} alt={p.cap} loading="lazy" decoding="async" />
                <figcaption className="cap"><span>{p.cap}</span><span style={{ color: "var(--uk-teal)" }}>ampliar</span></figcaption>
              </figure>
            ))}
          </div>

          <p style={{ marginTop: "var(--uk-space-5)", color: "var(--uk-ink-faint)", fontSize: "var(--uk-step--1)" }}>Plantas ilustrativas conforme memorial.</p>
          <div style={{ marginTop: "var(--uk-space-4)" }}>
            <WhatsAppButton num={DATA.wa} typology="generico" variant="primary" size="md" withIcon={false}>Quero esta planta</WhatsAppButton>
          </div>
        </div>

        {box ? (
          <div className="lbx" onClick={() => setBox(null)}>
            <button className="lbx__close" aria-label="Fechar" onClick={() => setBox(null)}>✕</button>
            <img src={A(box.img)} alt={box.cap} onClick={(e) => e.stopPropagation()} />
            <div className="lbx__cta" onClick={(e) => e.stopPropagation()}>
              <WhatsAppButton num={DATA.wa} typology="generico" variant="primary" size="lg" withIcon={false}>Quero esta planta</WhatsAppButton>
            </div>
          </div>
        ) : null}
      </section>
    );
  }

  window.UK.Lazer = Lazer;
  window.UK.Plantas = Plantas;
})();