// Recursive MLS — Consumer: saved-search alert email.
// The branded email a consumer receives from their agent. Listing cards link
// to the public portal (ConsumerPortal). Styled as a centered email column.
function ConsumerEmail({ go }) {
  const D = window.RC_DATA;
  const homes = D.searchResults.slice(0, 3);
  const agent = { name: "Alex Morgan", brokerage: "Recursive Realty", phone: "(305) 555-0148", initials: "AM" };
  const openPortal = () => go && go("consumer_portal");

  const Btn = ({ children, onClick, primary }) => (
    <button onClick={onClick} style={{ fontFamily: "inherit", fontSize: 13, fontWeight: 600, cursor: "pointer", borderRadius: 8, padding: "10px 16px",
      border: primary ? 0 : "1px solid #d7ddd9", background: primary ? "#006747" : "#fff", color: primary ? "#fff" : "#006747" }}>{children}</button>
  );

  return (
    <div style={{ minHeight: "100vh", background: "#e9e7e0", padding: "32px 16px", boxSizing: "border-box", fontFamily: "'Space Grotesk', -apple-system, system-ui, sans-serif" }}>
      {/* email client chrome hint */}
      <div style={{ maxWidth: 600, margin: "0 auto 12px", display: "flex", alignItems: "center", gap: 8, color: "#8a8e88", fontSize: 12.5 }}>
        <Icon name="mail" size={14} color="#8a8e88" />
        <span><b style={{ color: "#4a504a" }}>New homes for you</b> — from Alex Morgan · Recursive Realty</span>
      </div>

      <div style={{ maxWidth: 600, margin: "0 auto", background: "#fff", borderRadius: 14, overflow: "hidden", boxShadow: "0 10px 40px rgba(0,0,0,.12)" }}>
        {/* header — co-branded MLS + agent */}
        <div style={{ background: "#006747", padding: "20px 28px", color: "#fff" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
            <svg width="30" height="30" viewBox="0 0 100 100" style={{ flex: "none" }}>
              <rect x="13" y="13" width="74" height="74" rx="2" fill="none" stroke="#fff" strokeWidth="7" />
              <g transform="translate(50,50) scale(0.62) translate(-50,-52)"><path d="M18 80 A8 8 0 0 1 34 80 A8 8 0 0 1 50 80 A8 8 0 0 1 66 80 A8 8 0 0 1 82 80 M26 64 A8 8 0 0 1 42 64 A8 8 0 0 1 58 64 A8 8 0 0 1 74 64 M34 48 A8 8 0 0 1 50 48 A8 8 0 0 1 66 48 M42 32 A8 8 0 0 1 58 32" fill="none" stroke="#fff" strokeWidth="8" strokeLinecap="round" /></g>
            </svg>
            <span style={{ fontSize: 17, fontWeight: 600, letterSpacing: "-0.3px" }}>Recursive<span style={{ opacity: 0.7, fontWeight: 400 }}> Homes</span></span>
          </div>
        </div>

        {/* hero copy */}
        <div style={{ padding: "26px 28px 8px" }}>
          <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "1.2px", textTransform: "uppercase", color: "#006747" }}>Your saved search · Central Austin</div>
          <h1 style={{ margin: "8px 0 6px", fontSize: 24, fontWeight: 600, letterSpacing: "-0.6px", color: "#1d241f" }}>3 new homes match what you're looking for</h1>
          <p style={{ margin: 0, fontSize: 14, color: "#6b706a", lineHeight: 1.5 }}>3+ beds · under $950K · Single family. Here's what just hit the market — tap any home to explore it on your portal.</p>
        </div>

        {/* listing cards */}
        <div style={{ padding: "18px 28px 8px", display: "flex", flexDirection: "column", gap: 16 }}>
          {homes.map((h, i) => (
            <div key={h.id} onClick={openPortal} style={{ borderRadius: 12, overflow: "hidden", boxShadow: "inset 0 0 0 1px #ece9e0", cursor: "pointer" }}>
              <div style={{ position: "relative", height: 200, backgroundImage: `url(${h.photos[0]})`, backgroundSize: "cover", backgroundPosition: "center" }}>
                {i === 0 && <span style={{ position: "absolute", top: 12, left: 12, fontSize: 11, fontWeight: 700, color: "#fff", background: "#c0612f", borderRadius: 999, padding: "3px 10px", textTransform: "uppercase", letterSpacing: ".5px" }}>Just listed</span>}
                <span style={{ position: "absolute", top: 12, right: 12, width: 34, height: 34, borderRadius: "50%", background: "rgba(255,255,255,.9)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="heart" size={17} color="#c0612f" /></span>
              </div>
              <div style={{ padding: "14px 16px" }}>
                <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 10 }}>
                  <span style={{ fontFamily: "'Space Mono', monospace", fontSize: 20, fontWeight: 700, color: "#1d241f", letterSpacing: "-0.5px" }}>{D.usd(h.price)}</span>
                  <span style={{ fontSize: 12, color: "#8a8e88" }}>{h.status} · {h.dom}d</span>
                </div>
                <div style={{ fontSize: 14, fontWeight: 600, color: "#1d241f", marginTop: 5 }}>{h.addr}</div>
                <div style={{ fontSize: 12.5, color: "#8a8e88", marginTop: 2 }}>{h.city}</div>
                <div style={{ display: "flex", gap: 14, marginTop: 10, fontSize: 12.5, color: "#4a504a" }}>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><Icon name="bed-double" size={14} color="#8a8e88" /> {h.beds} bd</span>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><Icon name="bath" size={14} color="#8a8e88" /> {h.baths} ba</span>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><Icon name="ruler" size={14} color="#8a8e88" /> {h.sqft.toLocaleString()} sqft</span>
                </div>
                <div style={{ marginTop: 13 }}><Btn primary onClick={openPortal}>View this home →</Btn></div>
              </div>
            </div>
          ))}
        </div>

        {/* see all on portal */}
        <div style={{ padding: "10px 28px 22px", textAlign: "center" }}>
          <Btn onClick={openPortal}>See all matches on your home portal</Btn>
        </div>

        {/* agent card */}
        <div style={{ margin: "0 28px 26px", padding: "16px", borderRadius: 12, background: "#f7f6f1", display: "flex", alignItems: "center", gap: 13 }}>
          <span style={{ width: 46, height: 46, borderRadius: "50%", background: "#006747", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 600, fontSize: 16, flex: "none" }}>{agent.initials}</span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: "#1d241f" }}>{agent.name}</div>
            <div style={{ fontSize: 12.5, color: "#8a8e88" }}>{agent.brokerage} · {agent.phone}</div>
          </div>
          <Btn onClick={openPortal}>Message</Btn>
        </div>

        {/* footer */}
        <div style={{ padding: "18px 28px", background: "#faf9f5", borderTop: "1px solid #f1f0ea", textAlign: "center" }}>
          <div style={{ fontSize: 11.5, color: "#a8aca6", lineHeight: 1.6 }}>You're receiving this because Alex Morgan set up a saved search for you on Recursive Homes.<br />Manage alert frequency · Unsubscribe · © 2026 Recursive MLS</div>
        </div>
      </div>
    </div>
  );
}

window.ConsumerEmail = ConsumerEmail;