/* =====================================================================
   PUBLIC — Home (search-first)
   ===================================================================== */
function HeroSearch() {
  const cats = useStore().categories;
  const [type, setType] = useState("");
  const [deal, setDeal] = useState("");
  const go = () => navigate("/properties");
  return (
    <div className="card pad24" style={{ boxShadow: "var(--shadow-lg)", borderRadius: "var(--r-lg)" }}>
      <div className="hero-search">
        <div className="field" style={{ minWidth: 0 }}>
          <label>Property type</label>
          <select className="select" value={type} onChange={(e) => setType(e.target.value)}>
            <option value="">All types</option>
            {cats.types.map((t) => <option key={t}>{t}</option>)}
          </select>
        </div>
        <div className="field" style={{ minWidth: 0 }}>
          <label>Submarket</label>
          <input className="input" placeholder="Downtown, Carmel, Fishers…" />
        </div>
        <div className="field" style={{ minWidth: 0 }}>
          <label>Deal</label>
          <select className="select" value={deal} onChange={(e) => setDeal(e.target.value)}>
            <option value="">Lease &amp; Sale</option>
            <option>Lease</option><option>Sale</option>
          </select>
        </div>
        <div className="field" style={{ minWidth: 0 }}>
          <label>Size (SF)</label>
          <input className="input" placeholder="Min – Max" />
        </div>
        <button className="btn lg hs-btn" onClick={go}><Icon name="search" size={18} /> Search</button>
      </div>
    </div>);

}

function HomeScreen() {
  const s = useStore();
  const mobile = useIsMobile();
  const featured = s.listings.filter((l) => l.featured).slice(0, 3);
  const hero = s.media.find((m) => m.slot === "hero");
  return (
    <div className="fade-in">
      <Nav cur="" />

      {/* HERO */}
      <section style={{ position: "relative", background: "var(--navy)", color: "#fff" }}>
        <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, opacity: hero && hero.dataUrl ? 0.34 : 0.16 }}>
          {hero && hero.dataUrl ?
            <img src={hero.dataUrl} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} /> :
            <div style={{ width: "100%", height: "100%", backgroundImage: "linear-gradient(rgba(255,255,255,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.06) 1px,transparent 1px)", backgroundSize: "40px 40px" }} />}
        </div>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(16,42,67,0.4), rgba(16,42,67,0.85))" }} />
        </div>
        <div className="wrap-wide" style={{ ...{ position: "relative", padding: mobile ? "52px 18px 36px" : "92px 32px 120px" }, padding: "80px 32px 10px" }}>
          <div className="seal-est rise" style={{ color: "var(--brass)" }}>{s.branding.city} · Est. {s.branding.est}</div>
          <h1 className="display rise" style={{ maxWidth: 880, marginTop: 20, animationDelay: ".08s" }}>Commercial real estate, brokered with discipline.</h1>
          <p className="lede rise" style={{ color: "#c8d6e5", maxWidth: 620, marginTop: 18, animationDelay: ".16s" }}>
            Tenant and landlord representation, investment sales, and capital markets advisory across Indianapolis and the Great Lakes region.
          </p>
        </div>
        {/* search docked at bottom */}
        <div className="wrap-wide" style={{ position: "relative", zIndex: 5, transform: mobile ? "none" : "translateY(50%)", marginTop: mobile ? 0 : -1, paddingBottom: mobile ? 36 : 0 }}>
          <HeroSearch />
        </div>
      </section>

      {/* spacer for the docked search */}
      <div style={{ height: mobile ? 0 : 92 }} />

      {/* TRUST STRIP */}
      <section className="wrap-wide" style={{ paddingBottom: 8 }}>
        <div className="row jb wrapf gap32" style={{ alignItems: "center", padding: "28px 0", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
          {[["$1.4B", "transacted since 2017"], ["6.2M SF", "leased & sold"], ["340+", "closed deals"], ["9", "Great Lakes markets"]].map((x, i) =>
          <React.Fragment key={i}>
              <Stat n={x[0]} l={x[1]} />
              {i < 3 && <div className="vrule m-hide" style={{ height: 44 }} />}
            </React.Fragment>
          )}
        </div>
      </section>

      {/* FEATURED */}
      <section className="wrap-wide section-sm">
        <div className="row jb ac wrapf gap12" style={{ marginBottom: 28 }}>
          <div>
            <div className="eyebrow">Current availabilities</div>
            <h2 className="h1" style={{ marginTop: 8 }}>Properties on the market</h2>
          </div>
          <button className="btn ghost" onClick={() => navigate("/properties")}>View all listings <Icon name="arrow" size={16} /></button>
        </div>
        <div className="m-stack" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24 }}>
          {featured.map((l) => <ListingCard key={l.id} l={l} />)}
        </div>
      </section>

      {/* SERVICES TEASER */}
      <section className="surface">
        <div className="wrap-wide section" style={{ padding: "70px 0px" }}>
          <div className="m-stack" style={{ display: "grid", gridTemplateColumns: "0.9fr 1.4fr", gap: 56, alignItems: "start" }}>
            <div>
              <div className="eyebrow">What we do</div>
              <h2 className="h1" style={{ marginTop: 10 }}>Full-service representation, senior brokers only.</h2>
              <p className="lede" style={{ marginTop: 16 }}>Every engagement runs through a principal — no hand-offs to juniors. We show our work, source every number, and close on time.</p>
              <button className="btn" style={{ marginTop: 24 }} onClick={() => navigate("/services")}>Explore services <Icon name="arrow" size={16} /></button>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, background: "var(--line)", border: "1px solid var(--line)", borderRadius: "var(--r-lg)", overflow: "hidden" }}>
              {[["building", "Tenant & Landlord Rep", "Lease the right space, on the right terms."],
              ["dash", "Investment Sales", "Disposition and acquisition advisory."],
              ["shield", "Capital Markets", "Debt placement and structured financing."],
              ["doc", "Valuation & Advisory", "Opinions of value and market studies."]].map((c, i) =>
              <div key={i} style={{ background: "var(--paper)", padding: 28 }}>
                  <Icon name={c[0]} size={24} style={{ color: "var(--navy)" }} />
                  <h3 className="h3" style={{ marginTop: 16 }}>{c[1]}</h3>
                  <p className="muted small" style={{ marginTop: 8 }}>{c[2]}</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* CONFIDENTIAL CTA */}
      <section className="wrap-wide section-sm" style={{ padding: "30px 0px" }}>
        <div className="gate-band pad32 m-stack" style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 32, alignItems: "center" }}>
          <div>
            <div className="seal-est">Confidential offerings</div>
            <h2 className="h2" style={{ marginTop: 12, color: "var(--ink)" }}>Some of our best deals never hit the open market.</h2>
            <p style={{ marginTop: 10, color: "var(--ink-2)", maxWidth: 540 }}>Qualified principals can request access to confidential listings, financials, and secure data rooms after signing a standard NDA.</p>
          </div>
          <div className="row je m-col"><button className="btn brass lg" onClick={() => openPortalSidecar()}><Icon name="lock" size={16} /> Access the client portal</button></div>
        </div>
      </section>

      <Footer />
    </div>);

}

/* shared listing card (used on home + listings) */
function ListingCard({ l, onHover, active }) {
  const G = window.GLR;
  return (
    <div className={"card hover" + (active ? " active" : "")} onClick={() => navigate("/properties/" + l.slug)}
    onMouseEnter={() => onHover && onHover(l.id)} onMouseLeave={() => onHover && onHover(null)}
    style={{ overflow: "hidden", borderColor: active ? "var(--navy)" : undefined, boxShadow: active ? "var(--shadow)" : undefined }}>
      <div style={{ position: "relative" }}>
        <PhotoBox dataUrl={l.photo} type={l.type} h={184} />
        <div style={{ position: "absolute", top: 12, left: 12, display: "flex", gap: 8 }}>
          <StatusTag status={l.status} />
        </div>
        {l.gated && <div style={{ position: "absolute", top: 12, right: 12 }}><span className="tag gate"><Icon name="lock" size={11} /> NDA</span></div>}
      </div>
      <div className="pad20">
        <div className="row jb ac">
          <span className="tag outline">{l.type}</span>
          <span className="small muted nowrap">{l.submarket}</span>
        </div>
        <h3 className="h3" style={{ marginTop: 12 }}>{l.address}</h3>
        <p className="small muted" style={{ marginTop: 4 }}>{l.city}, IN · Class {l.cls}</p>
        <hr className="divider" style={{ margin: "16px 0" }} />
        <div className="row jb ac">
          <div className="kv"><div className="k">Size</div><div className="v tnum">{G.fmtSF(l.sf)}</div></div>
          <div className="kv" style={{ textAlign: "right" }}><div className="k">{l.deal === "Sale" ? "Price" : "Rate"}</div><div className="v">{l.price || l.rate}</div></div>
        </div>
      </div>
    </div>);

}

Object.assign(window, { HomeScreen, ListingCard });