/* =====================================================================
   PUBLIC — Track Record, Services, About, Contact
   ===================================================================== */

function TrackRecordScreen() {
  const s = useStore();
  const G = window.GLR;
  const [f, setF] = useState("All");
  const types = ["All", "Office", "Industrial", "Retail", "Mixed-Use", "Flex"];
  const rows = s.closed.filter((r) => f === "All" || r.type === f);
  return (
    <div className="fade-in">
      <Nav cur="Properties" />
      <section className="surface-navy">
        <div className="wrap-wide" style={{ padding: "64px 32px" }}>
          <div className="eyebrow brass">Track record</div>
          <h1 className="display" style={{ marginTop: 14, maxWidth: 760 }}>Proof, not adjectives.</h1>
          <div className="row gap40 wrapf" style={{ marginTop: 40 }}>
            {[["$1.4B", "total volume"], ["6.2M SF", "transacted"], ["340+", "deals closed"], ["2017", "founded"]].map((x, i) =>
            <Stat key={i} n={x[0]} l={x[1]} />
            )}
          </div>
        </div>
      </section>

      <section className="wrap-wide section-sm">
        <div className="row jb ac wrapf gap12" style={{ marginBottom: 20 }}>
          <h2 className="h2">Selected closed transactions</h2>
          <div className="row gap8 wrapf">
            {types.map((t) => <button key={t} className={"chip" + (f === t ? " on" : "")} onClick={() => setF(t)}>{t}</button>)}
          </div>
        </div>
        <div className="card m-tablewrap" style={{ overflow: "hidden" }}>
          <table className="ledger">
            <thead><tr><th>Property</th><th>Submarket</th><th>Type</th><th>Role</th><th className="num">Size</th><th className="num">Value</th><th className="num">Closed</th></tr></thead>
            <tbody>
              {rows.map((r, i) =>
              <tr key={i}>
                  <td className="b6">{r.name}</td>
                  <td className="muted">{r.submarket}</td>
                  <td><span className="tag outline">{r.type}</span></td>
                  <td className="muted small">{r.role}</td>
                  <td className="num tnum">{G.fmtSF(r.sf)}</td>
                  <td className="num b7">{r.value}</td>
                  <td className="num tnum">{r.year}</td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
        <p className="xsmall muted" style={{ marginTop: 14, textAlign: "center" }}>Selected transactions shown. Certain deals omitted at client request. Information deemed reliable but not guaranteed.</p>
      </section>
      <Footer />
    </div>);

}

function ServicesScreen() {
  const svc = [
  ["building", "Tenant Representation", "We represent occupiers end to end — site search, financial analysis, negotiation, and lease execution — aligned solely to your interests."],
  ["users", "Landlord Representation", "Marketing, tenant qualification, and lease-up strategy that protects asset value and shortens downtime."],
  ["dash", "Investment Sales", "Disposition and acquisition of income-producing and value-add assets, with disciplined underwriting and a qualified buyer pool."],
  ["shield", "Capital Markets", "Debt placement, recapitalization, and structured financing introductions through our lender relationships."],
  ["doc", "Valuation & Advisory", "Broker opinions of value, market studies, and portfolio strategy grounded in current comps."],
  ["settings", "Asset & Property Services", "Ongoing management coordination and lease administration to keep assets performing."]];

  return (
    <div className="fade-in">
      <Nav cur="Services" />
      <section className="wrap-wide" style={{ padding: "72px 32px 40px" }}>
        <div className="eyebrow">What we do</div>
        <h1 className="display" style={{ marginTop: 14, maxWidth: 720 }}>Plainly stated service lines.</h1>
        <p className="lede" style={{ marginTop: 16, maxWidth: 560 }}>Six disciplines. Every engagement runs through a senior broker — no hand-offs to juniors.</p>
      </section>
      <section className="wrap-wide section-sm" style={{ paddingTop: 0 }}>
        <div className="m-stack" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 1, background: "var(--line)", border: "1px solid var(--line)", borderRadius: "var(--r-lg)", overflow: "hidden" }}>
          {svc.map((c, i) =>
          <div key={i} style={{ background: "var(--paper)", padding: 32 }}>
              <div className="row jb ac"><Icon name={c[0]} size={26} style={{ color: "var(--navy)" }} /><span className="eyebrow">0{i + 1}</span></div>
              <h3 className="h3" style={{ marginTop: 20 }}>{c[1]}</h3>
              <p className="muted small" style={{ marginTop: 10 }}>{c[2]}</p>
            </div>
          )}
        </div>
      </section>
      <section className="surface"><div className="wrap-wide section">
        <div className="eyebrow">How an engagement runs</div>
        <h2 className="h1" style={{ marginTop: 10, marginBottom: 40 }}>A disciplined system behind the handshake.</h2>
        <div className="row" style={{ gap: 0 }}>
          {["Intake & mandate", "Market analysis", "Tour / underwrite", "Negotiate", "Close & report"].map((p, i) =>
            <div key={i} className="grow" style={{ position: "relative", paddingRight: 16 }}>
              <div className="row ac gap12" style={{ marginBottom: 12 }}>
                <div style={{ width: 34, height: 34, borderRadius: "50%", border: "1.5px solid var(--navy)", color: "var(--navy)", display: "grid", placeItems: "center", fontWeight: 700, fontSize: 14, background: "var(--paper)" }}>{i + 1}</div>
                {i < 4 && <div style={{ flex: 1, height: 1, background: "var(--line-2)" }} />}
              </div>
              <div className="b6 small">{p}</div>
            </div>
            )}
        </div>
      </div></section>
      <Footer />
    </div>);

}

function AboutScreen() {
  const s = useStore();
  const about = s.media.find((m) => m.slot === "about");
  const region = [
  { lat: 39.79, lng: -86.16, n: "Indianapolis" }, { lat: 41.88, lng: -87.63, n: "Chicago" },
  { lat: 42.33, lng: -83.05, n: "Detroit" }, { lat: 41.50, lng: -81.69, n: "Cleveland" },
  { lat: 39.10, lng: -84.51, n: "Cincinnati" }, { lat: 43.04, lng: -87.91, n: "Milwaukee" },
  { lat: 39.96, lng: -82.99, n: "Columbus" }].
  map((p, i) => ({ id: "r" + i, lat: p.lat, lng: p.lng, submarket: p.n }));
  return (
    <div className="fade-in">
      <Nav cur="About" />
      <section className="wrap-wide" style={{ padding: "0" }}>
        <div className="m-stack m-fullh-auto" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", minHeight: 420, alignItems: "stretch" }}>
          <div className="m-pad-sm" style={{ padding: "72px 56px 72px 32px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <div className="seal-est" style={{ justifyContent: "flex-start" }}>Est. {s.branding.est} · {s.branding.city}</div>
            <h1 className="display" style={{ marginTop: 18 }}>A regional firm that behaves like an institution.</h1>
            <p className="lede" style={{ marginTop: 20, maxWidth: 520 }}>
              Great Lakes Realty was founded in {s.branding.est} on a simple premise: institutional-grade rigor, delivered with the responsiveness of a boutique. We represent owners, occupiers, and investors across the region's core markets.
            </p>
          </div>
          <div className="card about-img" style={{ overflow: "hidden", borderRadius: 0, borderTop: 0, borderRight: 0, borderBottom: 0 }}>
            <PhotoBox dataUrl={about && about.dataUrl} type="Office" h="100%" label="Partners" />
          </div>
        </div>
      </section>

      <section className="surface"><div className="wrap-wide section" style={{ padding: "50px 0px" }}>
        <div className="m-stack" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 40 }}>
          {[["Discretion", "Confidential by default. Sensitive deal files are gated behind NDAs and a secure data room."],
            ["Diligence", "Every number is sourced. We show our work and underwrite conservatively."],
            ["Durability", "Relationships measured in decades, not quarters. Most of our business is repeat."]].map((v, i) =>
            <div key={i}>
              <div style={{ width: 40, height: 2, background: "var(--brass)", marginBottom: 18 }} />
              <h3 className="h2">{v[0]}</h3>
              <p className="muted" style={{ marginTop: 10 }}>{v[1]}</p>
            </div>
            )}
        </div>
      </div></section>

      <section className="wrap-wide section" style={{ padding: "7px 0px 84px" }}>
        <div className="m-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center" }}>
          <div>
            <div className="eyebrow">Coverage</div>
            <h2 className="h1" style={{ marginTop: 10 }}>Rooted in Indianapolis. Active across the Great Lakes.</h2>
            <p className="lede" style={{ marginTop: 16 }}>From our Monument Circle office we cover the region's primary industrial, office, and retail corridors.</p>
            <div className="row gap8 wrapf" style={{ marginTop: 20 }}>
              {region.map((r) => <span key={r.id} className="chip" style={{ cursor: "default" }}><Icon name="pin" size={14} /> {r.submarket}</span>)}
            </div>
          </div>
          <div className="card" style={{ overflow: "hidden", height: 360 }}>
            <LeafletMap listings={region} height={360} center={[41.2, -85.3]} zoom={6} interactive={true} />
          </div>
        </div>
      </section>

      <section className="surface"><div className="wrap-wide section-sm">
        <div className="eyebrow">The team</div>
        <h2 className="h1" style={{ marginTop: 10, marginBottom: 32 }}>Senior brokers, every deal.</h2>
        <div className="m-stack2" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 24 }}>
          {[["Jordan Mercer", "Managing Principal"], ["Alex Whitfield", "Principal, Industrial"], ["Sam Okafor", "Principal, Office"], ["Riley Donovan", "Principal, Capital Markets"]].map((p, i) =>
            <div key={i}>
              <div className="card" style={{ overflow: "hidden", height: 220 }}><PhotoBox dataUrl={null} type="Office" h="100%" /></div>
              <h3 className="h3" style={{ marginTop: 14, fontSize: 16.5 }}>{p[0]}</h3>
              <p className="xsmall muted" style={{ marginTop: 2 }}>{p[1]}</p>
            </div>
            )}
        </div>
      </div></section>
      <Footer />
    </div>);

}

function ContactScreen() {
  const s = useStore();
  const b = s.branding;
  const office = s.media.find((m) => m.slot === "office");
  const [sent, setSent] = useState(false);
  const [topic, setTopic] = useState("Leasing space");
  const [f, setF] = useState({ name: "", email: "", phone: "", company: "", message: "" });
  const upd = (k, v) => setF((p) => ({ ...p, [k]: v }));
  const submit = () => {
    if (!f.name || !f.email || !f.message) return;
    window.GLR.addInquiry({ ...f, message: topic + " — " + f.message, source: "contact_page" });
    setSent(true);
    showToast("Inquiry sent — a broker will be in touch.");
  };
  return (
    <div className="fade-in">
      <Nav cur="Contact" />
      <div className="m-stack m-fullh-auto" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", minHeight: "calc(100vh - 72px)" }}>
        <div className="m-pad-sm" style={{ padding: "64px 56px", maxWidth: 620, justifySelf: "end", width: "100%" }}>
          <div className="eyebrow">Contact</div>
          <h1 className="h1" style={{ marginTop: 12 }}>Start a conversation.</h1>
          <p className="lede" style={{ marginTop: 12 }}>Tell us about the property or mandate. Your inquiry routes directly to the relevant senior broker.</p>
          <div className="col gap16" style={{ marginTop: 28 }}>
            <div className="field"><label>Name</label><input className="input" value={f.name} onChange={(e) => upd("name", e.target.value)} placeholder="Full name" /></div>
            <div className="row gap16">
              <div className="field grow"><label>Email</label><input className="input" value={f.email} onChange={(e) => upd("email", e.target.value)} placeholder="you@company.com" /></div>
              <div className="field grow"><label>Phone</label><input className="input" value={f.phone} onChange={(e) => upd("phone", e.target.value)} placeholder="(000) 000-0000" /></div>
            </div>
            <div className="field"><label>Company</label><input className="input" value={f.company} onChange={(e) => upd("company", e.target.value)} placeholder="Organization" /></div>
            <div className="field"><label>I'm interested in</label>
              <div className="row gap8 wrapf">{["Leasing space", "Selling", "Buying / investing", "Advisory"].map((c) => <button key={c} className={"chip" + (topic === c ? " on" : "")} onClick={() => setTopic(c)}>{c}</button>)}</div>
            </div>
            <div className="field"><label>Message</label><textarea className="textarea" value={f.message} onChange={(e) => upd("message", e.target.value)} placeholder="Tell us about the property or mandate…" /></div>
            <button className="btn lg" disabled={!f.name || !f.email || !f.message} onClick={submit}>{sent ? "Sent ✓" : "Send inquiry"}</button>
            <p className="xsmall muted">Routed directly to the relevant senior broker.</p>
          </div>
        </div>
        <div className="col" style={{ background: "var(--paper-2)", borderLeft: "1px solid var(--line)" }}>
          <div style={{ height: 320 }}><LeafletMap listings={[{ id: "o", lat: 39.7684, lng: -86.1581, submarket: "Office" }]} activeId="o" height={320} zoom={15} interactive={true} /></div>
          <div style={{ padding: "40px 56px" }}>
            <Logo size="lg" />
            <div className="col gap24" style={{ marginTop: 28 }}>
              <KV k="Office" v={<span style={{ whiteSpace: "pre-line", fontWeight: 600 }}>{b.address}</span>} />
              <div className="row gap40">
                <KV k="Call" v={b.phone} /><KV k="Email" v={b.email} />
              </div>
              <KV k="Hours" v="Mon – Fri · 8:00 – 6:00 ET" />
            </div>
          </div>
        </div>
      </div>
      <Footer />
    </div>);

}

Object.assign(window, { TrackRecordScreen, ServicesScreen, AboutScreen, ContactScreen });