/* =====================================================================
   PUBLIC — Property detail (facts + sticky NDA gate)
   ===================================================================== */
function PropertyScreen({ slug }) {
  const s = useStore();
  const G = window.GLR;
  const l = s.listings.find((x) => x.slug === slug);
  const [tab, setTab] = useState("Overview");

  if (!l) return (
    <div><Nav cur="Properties" />
      <div className="wrap section" style={{ textAlign: "center" }}>
        <h2 className="h1">Listing not found</h2>
        <button className="btn ghost" style={{ marginTop: 20 }} onClick={() => navigate("/properties")}>Back to properties</button>
      </div><Footer /></div>
  );

  const similar = s.listings.filter((x) => x.id !== l.id && x.type === l.type).slice(0, 3);
  const tabs = ["Overview", "Specifications", "Location", "Financials", "Documents"];
  const requestTour = () => {
    const email = prompt("Your email for the broker follow-up");
    if (!email) return;
    const name = prompt("Your name") || email.split("@")[0];
    window.GLR.addInquiry({
      slug: l.slug,
      name,
      email,
      message: "Schedule a tour request for " + l.address,
      source: "property_page"
    });
    showToast("Tour request sent to the deal team");
  };
  const requestAccess = () => {
    window.GLR.track({ type: "access_cta", path: "/properties/" + l.slug, slug: l.slug });
    navigate("/access/" + l.slug);
  };

  return (
    <div className="fade-in">
      <Nav cur="Properties" />

      {/* breadcrumb */}
      <div className="wrap-wide" style={{ padding: "16px 32px" }}>
        <div className="row gap8 ac small muted">
          <a className="linklike" style={{ color: "var(--slate)" }} onClick={() => navigate("/properties")}>Properties</a>
          <Icon name="chevR" size={13} /> <span>{l.submarket}</span>
          <Icon name="chevR" size={13} /> <span style={{ color: "var(--ink)" }}>{l.address}</span>
        </div>
      </div>

      {/* gallery */}
      <div className="wrap-wide" style={{ padding: "0 32px" }}>
        <div className="m-stack m-fullh-auto" style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 12, height: 380 }}>
          <div className="card" style={{ overflow: "hidden", position: "relative" }}>
            <PhotoBox dataUrl={l.photo || (l.photos && l.photos[0])} type={l.type} h={380} />
            <div style={{ position: "absolute", top: 16, left: 16, display: "flex", gap: 8 }}>
              <StatusTag status={l.status} />
              {l.gated && <span className="tag gate"><Icon name="lock" size={11} /> NDA required</span>}
            </div>
          </div>
          <div className="col gap12 pd-thumbs">
            <div className="card" style={{ overflow: "hidden", flex: 1 }}><PhotoBox dataUrl={l.photos && l.photos[0]} type={l.type} h="100%" /></div>
            <div className="card" style={{ overflow: "hidden", flex: 1, position: "relative" }}>
              <PhotoBox dataUrl={l.photos && l.photos[1]} type={l.type} h="100%" />
              {l.photos && l.photos.length > 2 && <div style={{ position: "absolute", inset: 0, background: "rgba(16,42,67,0.55)", display: "grid", placeItems: "center", color: "#fff", fontWeight: 600 }}>+ {l.photos.length - 2} photos</div>}
            </div>
          </div>
        </div>
      </div>

      {/* body */}
      <div className="wrap-wide" style={{ padding: "32px 32px 0" }}>
        <div className="m-stack" style={{ display: "grid", gridTemplateColumns: "minmax(0,1.7fr) minmax(0,1fr)", gap: 48, alignItems: "start" }}>
          {/* left */}
          <div>
            <div className="row jb ac wrapf gap12">
              <div>
                <span className="tag outline">{l.type}</span>
                <h1 className="h1" style={{ marginTop: 12 }}>{l.address}</h1>
                <p className="lede" style={{ marginTop: 6 }}>{l.city}, IN {l.submarket && "· " + l.submarket} · Class {l.cls} {l.type}</p>
              </div>
            </div>

            <p className="lede" style={{ marginTop: 20, color: "var(--ink)" }}>{l.tagline}</p>

            {/* key facts */}
            <div className="card pad24" style={{ marginTop: 24 }}>
              <div className="m-stack2" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 20 }}>
                {Object.entries(l.specs).slice(0, 8).map(([k, v]) => <KV key={k} k={k} v={v} />)}
              </div>
            </div>

            {/* tabs */}
            <div className="pd-tabs" style={{ display: "flex", gap: 4, marginTop: 36, borderBottom: "1px solid var(--line)" }}>
              {tabs.map((t) => {
                const gated = (t === "Financials" || t === "Documents");
                return (
                  <button key={t} onClick={() => setTab(t)}
                    style={{ background: "none", border: "none", cursor: "pointer", padding: "12px 16px", fontSize: 14.5, fontWeight: tab === t ? 700 : 500, color: tab === t ? "var(--navy)" : "var(--slate)", borderBottom: tab === t ? "2px solid var(--navy)" : "2px solid transparent", display: "flex", alignItems: "center", gap: 7 }}>
                    {t}{gated && <Icon name="lock" size={12} style={{ color: "var(--brass)" }} />}
                  </button>
                );
              })}
            </div>

            <div style={{ padding: "28px 0", minHeight: 200 }}>
              {tab === "Overview" && (
                <div className="col gap20">
                  <p style={{ color: "var(--ink-2)", maxWidth: 640 }}>
                    {l.address} offers {G.fmtSF(l.sf)} of Class {l.cls} {l.type.toLowerCase()} space in the {l.submarket} submarket.
                    The asset is positioned for {l.deal === "Sale" ? "investors seeking durable income" : "occupiers seeking quality space on flexible terms"},
                    with strong access and a well-maintained physical plant.
                  </p>
                  <div>
                    <h3 className="h3">Highlights</h3>
                    <div className="m-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px 28px", marginTop: 14 }}>
                      {l.highlights.map((h, i) => (
                        <div key={i} className="row gap10 ac"><Icon name="check" size={16} style={{ color: "var(--avail)", flex: "none" }} /> <span className="small">{h}</span></div>
                      ))}
                    </div>
                  </div>
                </div>
              )}
              {tab === "Specifications" && (
                <div className="m-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 48px" }}>
                  {Object.entries(l.specs).map(([k, v]) => (
                    <div key={k} className="row jb" style={{ padding: "12px 0", borderBottom: "1px solid var(--line)" }}>
                      <span className="muted small">{k}</span><span className="b6 small tnum">{v}</span>
                    </div>
                  ))}
                </div>
              )}
              {tab === "Location" && (
                <div className="col gap16">
                  <div className="card" style={{ overflow: "hidden", height: 300 }}>
                    <LeafletMap listings={[l]} activeId={l.id} height={300} zoom={14} interactive={true} />
                  </div>
                  <div className="row gap8 wrapf">
                    {[["car", "I-65 · 4 min"], ["car", "Airport · 18 min"], ["building", "CBD · 6 min"]].map((x, i) => (
                      <span key={i} className="chip" style={{ cursor: "default" }}><Icon name={x[0]} size={14} /> {x[1]}</span>
                    ))}
                  </div>
                </div>
              )}
              {(tab === "Financials" || tab === "Documents") && (
                <div className="gate-band pad32" style={{ textAlign: "center" }}>
                  <Icon name="lock" size={28} style={{ color: "var(--brass)" }} />
                  <h3 className="h2" style={{ marginTop: 14, color: "var(--ink)" }}>{tab} are confidential</h3>
                  <p style={{ marginTop: 8, color: "var(--ink-2)", maxWidth: 460, margin: "8px auto 0" }}>
                    {tab === "Financials" ? "Rent roll, operating statements, and the underwriting model" : "The full offering memorandum, leases, title, and survey"} are released to qualified parties after a signed NDA.
                  </p>
                  <button className="btn brass" style={{ marginTop: 20 }} onClick={requestAccess}>
                    <Icon name="signature" size={16} /> Request access · sign NDA
                  </button>
                </div>
              )}
            </div>
          </div>

          {/* right sticky */}
          <div className="m-flat" style={{ position: "sticky", top: 92, display: "flex", flexDirection: "column", gap: 16 }}>
            <div className="card pad24">
              <div className="row jb ac">
                <div className="kv"><div className="k">{l.deal === "Sale" ? "Asking price" : "Lease rate"}</div><div className="v" style={{ fontSize: 24 }}>{l.price || l.rate}</div></div>
                {l.cap && <div className="kv" style={{ textAlign: "right" }}><div className="k">Cap rate</div><div className="v" style={{ fontSize: 24 }}>{l.cap}</div></div>}
              </div>
              <hr className="divider" style={{ margin: "18px 0" }} />
              <div className="row jb" style={{ marginBottom: 10 }}><span className="muted small">Available</span><span className="b6 small tnum">{G.fmtSF(l.sf)}</span></div>
              <div className="row jb" style={{ marginBottom: 10 }}><span className="muted small">Deal type</span><span className="b6 small">{l.deal}</span></div>
              <div className="row jb"><span className="muted small">Class</span><span className="b6 small">{l.cls}</span></div>
            </div>

            <div className="gate-band pad24">
              <div className="seal-est" style={{ justifyContent: "flex-start" }}>Confidential package</div>
              <p className="small" style={{ marginTop: 10, color: "var(--ink-2)" }}>Financials, rent roll, leases, title &amp; survey are available to qualified parties via the secure data room.</p>
              <button className="btn brass block" style={{ marginTop: 14 }} onClick={requestAccess}><Icon name="lock" size={15} /> Request access · sign NDA</button>
              <button className="linklike small" style={{ marginTop: 12, justifyContent: "center", width: "100%" }} onClick={() => openPortalSidecar()}>Already approved? Open war room <Icon name="arrow" size={14} /></button>
            </div>

            <div className="card pad20">
              <div className="row gap12 ac">
                <div style={{ width: 52, height: 52, borderRadius: "50%", background: "var(--navy)", color: "#fff", display: "grid", placeItems: "center", fontWeight: 700, flex: "none" }}>JM</div>
                <div><div className="b7">Jordan Mercer</div><div className="xsmall muted">Principal · Listing Broker</div></div>
              </div>
              <div className="col gap8" style={{ marginTop: 16 }}>
                <button className="btn ghost sm block"><Icon name="phone" size={14} /> 317.555.0140</button>
                <button className="btn ghost sm block" onClick={requestTour}><Icon name="cal" size={14} /> Schedule a tour</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* similar */}
      <section className="wrap-wide section-sm" style={{ marginTop: 40 }}>
        <h2 className="h2" style={{ marginBottom: 24 }}>Similar properties</h2>
        <div className="m-stack" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24 }}>
          {similar.map((x) => <ListingCard key={x.id} l={x} />)}
        </div>
      </section>

      <Footer />
    </div>
  );
}

Object.assign(window, { PropertyScreen });