// Recursive MLS — Consumer: single-property detail page (OneHome-style).
// Gallery, key facts, map, mortgage estimate, favorite, and "Request a tour"
// that ties back to the agent's Showings flow. Consumer-facing, no agent chrome.
function ConsumerProperty({ home, onBack, fav, onFav }) {
  const D = window.RC_DATA;
  const h = home || D.searchResults[0];
  const agent = { name: "Alex Morgan", brokerage: "Recursive Realty", phone: "(305) 555-0148", initials: "AM" };
  const [shot, setShot] = useState(0);
  const [tourOpen, setTourOpen] = useState(false);
  const [tourSent, setTourSent] = useState(false);

  // mortgage estimate
  const down = 0.2, rate = 0.0675, yrs = 30;
  const loan = h.price * (1 - down);
  const mRate = rate / 12, n = yrs * 12;
  const pi = Math.round(loan * (mRate * Math.pow(1 + mRate, n)) / (Math.pow(1 + mRate, n) - 1));
  const tax = Math.round(h.price * 0.018 / 12), ins = Math.round(h.price * 0.004 / 12);
  const monthly = pi + tax + ins;

  const facts = [
    ["Bedrooms", h.beds], ["Bathrooms", h.baths], ["Square feet", h.sqft.toLocaleString()],
    ["$/sqft", "$" + Math.round(h.price / h.sqft)], ["Type", h.type], ["Days on market", h.dom],
    ["Status", h.status], ["Year built", "2019"], ["Lot", "0.21 ac"],
  ];
  const slots = ["Tomorrow 4:00 PM", "Sat 11:00 AM", "Sat 2:30 PM", "Sun 1:00 PM"];
  const [slot, setSlot] = useState(slots[0]);

  return (
    <div style={{ minHeight: "100vh", background: "#faf9f5", fontFamily: "'Space Grotesk', -apple-system, system-ui, sans-serif" }}>
      {/* top bar */}
      <div style={{ position: "sticky", top: 0, zIndex: 10, background: "#fff", borderBottom: "1px solid #ece9e0", display: "flex", alignItems: "center", gap: 14, padding: "0 28px", height: 62 }}>
        <button onClick={onBack} style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "inherit", fontSize: 13.5, fontWeight: 600, color: "#006747", background: "none", border: 0, cursor: "pointer" }}><Icon name="arrow-left" size={16} color="#006747" /> Back to homes</button>
        <div style={{ flex: 1 }} />
        <button onClick={onFav} style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "inherit", fontSize: 13, fontWeight: 600, color: fav ? "#c0612f" : "#6b706a", background: "none", border: 0, cursor: "pointer" }}><Icon name="heart" size={16} color={fav ? "#c0612f" : "#6b706a"} style={fav ? { fill: "#c0612f" } : {}} /> {fav ? "Saved" : "Save"}</button>
        <button style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "inherit", fontSize: 13, fontWeight: 600, color: "#6b706a", background: "none", border: 0, cursor: "pointer" }}><Icon name="share-2" size={16} color="#6b706a" /> Share</button>
      </div>

      {/* gallery */}
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "20px 28px 0" }}>
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 10, height: 420 }}>
          <div style={{ borderRadius: 12, backgroundImage: `url(${h.photos[shot]})`, backgroundSize: "cover", backgroundPosition: "center", boxShadow: "inset 0 0 0 1px rgba(0,0,0,.06)" }} />
          <div style={{ display: "grid", gridTemplateRows: "1fr 1fr", gap: 10, minHeight: 0 }}>
            {[1, 2].map((k) => (
              <div key={k} style={{ borderRadius: 12, backgroundImage: `url(${h.photos[k % h.photos.length]})`, backgroundSize: "cover", backgroundPosition: "center", boxShadow: "inset 0 0 0 1px rgba(0,0,0,.06)" }} />
            ))}
          </div>
        </div>
        <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
          {h.photos.map((p, i) => (
            <button key={i} onClick={() => setShot(i)} style={{ width: 64, height: 46, borderRadius: 7, border: i === shot ? "2px solid #006747" : "2px solid transparent", padding: 0, cursor: "pointer", backgroundImage: `url(${p})`, backgroundSize: "cover", backgroundPosition: "center" }} />
          ))}
        </div>
      </div>

      {/* main */}
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "24px 28px 60px", display: "grid", gridTemplateColumns: "1fr 320px", gap: 28, alignItems: "start" }}>
        <div>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
            <div>
              <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 30, fontWeight: 700, color: "#1d241f", letterSpacing: "-1px" }}>{D.usd(h.price)}</div>
              <div style={{ fontSize: 16, fontWeight: 600, color: "#1d241f", marginTop: 5 }}>{h.addr}</div>
              <div style={{ fontSize: 13.5, color: "#8a8e88", marginTop: 2 }}>{h.city}</div>
            </div>
            <div style={{ display: "flex", gap: 18, fontSize: 14, color: "#4a504a" }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="bed-double" size={17} color="#8a8e88" /> {h.beds} bd</span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="bath" size={17} color="#8a8e88" /> {h.baths} ba</span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="ruler" size={17} color="#8a8e88" /> {h.sqft.toLocaleString()} sqft</span>
            </div>
          </div>

          <div style={{ display: "flex", gap: 8, marginTop: 16 }}>
            <span style={{ fontSize: 12, fontWeight: 600, color: "#006747", background: "#eef4f1", borderRadius: 999, padding: "5px 12px", display: "inline-flex", alignItems: "center", gap: 5 }}><Icon name="sparkles" size={12} color="#006747" /> 98% match to your search</span>
            <span style={{ fontSize: 12, fontWeight: 600, color: "#9a6a12", background: "#fbf2dc", borderRadius: 999, padding: "5px 12px" }}>{h.status} · {h.dom}d on market</span>
          </div>

          <h2 style={{ margin: "26px 0 10px", fontSize: 17, fontWeight: 600, color: "#1d241f" }}>About this home</h2>
          <p style={{ margin: 0, fontSize: 14, color: "#4a504a", lineHeight: 1.6 }}>Light-filled {h.beds}-bedroom {h.type.toLowerCase()} in {h.city.split(",")[0]}, with an open kitchen, hardwood floors throughout, and a private backyard. Walkable to parks and dining, with quick access to downtown. Recently updated systems and a finished two-car garage.</p>

          <h2 style={{ margin: "26px 0 12px", fontSize: 17, fontWeight: 600, color: "#1d241f" }}>Facts &amp; features</h2>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 1, background: "#ece9e0", borderRadius: 10, overflow: "hidden", boxShadow: "inset 0 0 0 1px #ece9e0" }}>
            {facts.map(([k, v]) => (
              <div key={k} style={{ background: "#fff", padding: "13px 15px" }}>
                <div style={{ fontSize: 11, color: "#8a8e88", textTransform: "uppercase", letterSpacing: ".5px" }}>{k}</div>
                <div style={{ fontSize: 14, fontWeight: 600, color: "#1d241f", marginTop: 3 }}>{v}</div>
              </div>
            ))}
          </div>

          <h2 style={{ margin: "26px 0 12px", fontSize: 17, fontWeight: 600, color: "#1d241f" }}>Location</h2>
          <ConsumerPropMap h={h} />

          {/* mortgage estimate */}
          <h2 style={{ margin: "26px 0 12px", fontSize: 17, fontWeight: 600, color: "#1d241f" }}>Monthly payment estimate</h2>
          <div style={{ background: "#fff", borderRadius: 12, boxShadow: "inset 0 0 0 1px rgba(0,0,0,.07)", padding: 18 }}>
            <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 14 }}>
              <span style={{ fontFamily: "'Space Mono', monospace", fontSize: 26, fontWeight: 700, color: "#006747", letterSpacing: "-0.5px" }}>{D.usd(monthly)}</span>
              <span style={{ fontSize: 13, color: "#8a8e88" }}>/mo · est. 20% down, {(rate * 100).toFixed(2)}% / {yrs}yr</span>
            </div>
            <div style={{ display: "flex", height: 10, borderRadius: 999, overflow: "hidden", marginBottom: 12 }}>
              <div style={{ width: `${pi / monthly * 100}%`, background: "#006747" }} />
              <div style={{ width: `${tax / monthly * 100}%`, background: "#9a6a12" }} />
              <div style={{ width: `${ins / monthly * 100}%`, background: "#2a6f8a" }} />
            </div>
            <div style={{ display: "flex", gap: 18, flexWrap: "wrap" }}>
              {[["Principal & interest", pi, "#006747"], ["Property tax", tax, "#9a6a12"], ["Insurance", ins, "#2a6f8a"]].map(([k, v, c]) => (
                <div key={k} style={{ display: "flex", alignItems: "center", gap: 7 }}>
                  <span style={{ width: 10, height: 10, borderRadius: 3, background: c }} />
                  <span style={{ fontSize: 12.5, color: "#6b706a" }}>{k} <b style={{ color: "#1d241f", fontFamily: "'Space Mono', monospace" }}>{D.usd(v)}</b></span>
                </div>
              ))}
            </div>
            <div style={{ fontSize: 11, color: "#a8aca6", marginTop: 12 }}>Estimate only. Connect with your agent for financing options.</div>
          </div>
        </div>

        {/* sticky tour / agent rail */}
        <div style={{ position: "sticky", top: 78, display: "flex", flexDirection: "column", gap: 16 }}>
          <div style={{ background: "#fff", borderRadius: 12, boxShadow: "0 4px 16px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.06)", padding: 18 }}>
            {tourSent ? (
              <div style={{ textAlign: "center", padding: "8px 0" }}>
                <span style={{ width: 46, height: 46, borderRadius: "50%", background: "#e8f4ee", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 10 }}><Icon name="check" size={22} color="#1f8a5b" /></span>
                <div style={{ fontSize: 15, fontWeight: 600, color: "#1d241f" }}>Tour requested</div>
                <div style={{ fontSize: 12.5, color: "#8a8e88", marginTop: 4, lineHeight: 1.5 }}>{agent.name} will confirm <b>{slot}</b> and add it to your showings.</div>
              </div>
            ) : (
              <React.Fragment>
                <div style={{ fontSize: 15, fontWeight: 600, color: "#1d241f", marginBottom: 3 }}>Tour this home</div>
                <div style={{ fontSize: 12.5, color: "#8a8e88", marginBottom: 12 }}>With {agent.name}, in person or video.</div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 7, marginBottom: 12 }}>
                  {slots.map((s) => (
                    <button key={s} onClick={() => setSlot(s)} style={{ fontFamily: "inherit", fontSize: 12, fontWeight: 600, cursor: "pointer", borderRadius: 8, padding: "9px 6px", border: slot === s ? "1px solid #006747" : "1px solid #e2e0d8", background: slot === s ? "#eef4f1" : "#fff", color: slot === s ? "#006747" : "#4a504a" }}>{s}</button>
                  ))}
                </div>
                <button onClick={() => setTourSent(true)} style={{ width: "100%", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 7, fontFamily: "inherit", fontSize: 14, fontWeight: 600, cursor: "pointer", borderRadius: 9, padding: "11px", border: 0, background: "#006747", color: "#fff" }}><Icon name="calendar-check" size={16} color="#fff" /> Request this time</button>
                <button style={{ width: "100%", marginTop: 8, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 7, fontFamily: "inherit", fontSize: 13.5, fontWeight: 600, cursor: "pointer", borderRadius: 9, padding: "10px", border: "1px solid #d7ddd9", background: "#fff", color: "#006747" }}><Icon name="message-circle" size={15} color="#006747" /> Ask a question</button>
              </React.Fragment>
            )}
          </div>

          {/* agent */}
          <div style={{ background: "#fff", borderRadius: 12, boxShadow: "inset 0 0 0 1px rgba(0,0,0,.07)", padding: 16, display: "flex", alignItems: "center", gap: 12 }}>
            <span style={{ width: 44, height: 44, borderRadius: "50%", background: "#006747", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 600, fontSize: 15, flex: "none" }}>{agent.initials}</span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 11, color: "#8a8e88" }}>Your agent</div>
              <div style={{ fontSize: 14, fontWeight: 600, color: "#1d241f" }}>{agent.name}</div>
              <div style={{ fontSize: 12, color: "#8a8e88" }}>{agent.brokerage}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ConsumerPropMap({ h }) {
  // Default Recursive map system — Local Logic local-content, branded green, with
  // neighborhood scores on for buyers and a house marker on the property.
  const c = (h && h.geo) || { lat: 30.29, lng: -97.74 };
  return (
    <div style={{ height: 460, borderRadius: 12, overflow: "hidden", boxShadow: "inset 0 0 0 1px rgba(0,0,0,.1)", background: "#eef1ee" }}>
      <LocalLogicMap lat={c.lat} lng={c.lng} zoom={15} scores={true} marker={{ lat: c.lat, lng: c.lng, icon: "house" }} />
    </div>
  );
}

window.ConsumerProperty = ConsumerProperty;