// Recursive MLS — real feature pages that replace earlier placeholders:
// Saved & Alerts, agent Compliance, Follow-ups (tasks), Tours, Settings.
// Depends on Chrome.jsx globals (Icon, Pill).
const { useState: _uS } = React;

function PageHead({ icon, eyebrow, title, lead, right }) {
  return (
    <div style={{ display: "flex", alignItems: "flex-start", gap: 16, marginBottom: 22 }}>
      <span style={{ width: 46, height: 46, borderRadius: 12, background: "#1C1C1C", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name={icon} size={23} color="#fff" /></span>
      <div style={{ flex: 1, minWidth: 0 }}>
        {eyebrow && <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: "1.5px", textTransform: "uppercase", color: "#a8aca6", marginBottom: 3 }}>{eyebrow}</div>}
        <h1 style={{ margin: 0, fontSize: 25, fontWeight: 600, letterSpacing: "-0.6px", color: "#1d241f" }}>{title}</h1>
        <p style={{ margin: "6px 0 0", fontSize: 14.5, color: "#6b706a", maxWidth: 640, lineHeight: 1.55 }}>{lead}</p>
      </div>
      {right}
    </div>
  );
}
const CARD = { background: "#fff", borderRadius: 3, boxShadow: "inset 0 0 0 1px rgba(0,0,0,.06)" };
const WRAP = { padding: "26px 30px 40px", maxWidth: 1080, margin: "0 auto" };
const sevTone = { high: { bg: "#faece3", fg: "#c0612f" }, medium: { bg: "#fbf2dc", fg: "#9a6a12" }, low: { bg: "#eef2f0", fg: "#5b6b62" } };

// ---------- Saved & Alerts ----------
function SavedAlerts({ go }) {
  const [rows, setRows] = _uS([
    { name: "Stone Oak · 4bd · pool", crit: "$650K–$900K · 4+ bd · 3+ ba · Pool", matches: 12, fresh: 3, cadence: "Instant", clients: ["Maria Sol", "The Reyes"], run: "2h ago" },
    { name: "Downtown condos w/ parking", crit: "$300K–$550K · Condo · Deeded parking", matches: 21, fresh: 5, cadence: "Instant", clients: ["Jordan Kim", "A. Patel"], run: "14m ago" },
    { name: "Alamo Heights under $1M", crit: "≤ $1,000,000 · 3+ bd · 78209", matches: 7, fresh: 1, cadence: "Daily", clients: ["Devin Walsh"], run: "Today 7:00am" },
    { name: "Waterfront lots", crit: "Land · Waterfront · Any price", matches: 4, fresh: 0, cadence: "Weekly", clients: [], run: "Mon 8:00am" },
  ]);
  const setCad = (i, c) => setRows((r) => r.map((x, j) => j === i ? { ...x, cadence: c } : x));
  const totalFresh = rows.reduce((s, r) => s + r.fresh, 0);
  return (
    <div style={WRAP}>
      <PageHead icon="heart" eyebrow="CRM" title="Saved & Alerts"
        lead="Saved searches and the alerts that keep your buyers in the loop — new matches route to you and, when linked, straight to your clients."
        right={<button style={{ border: 0, background: "#006747", color: "#fff", borderRadius: 8, padding: "10px 16px", fontFamily: "inherit", fontSize: 13, fontWeight: 600, cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 7, flex: "none" }}><Icon name="plus" size={16} color="#fff" /> New saved search</button>} />

      <div style={{ display: "flex", gap: 14, marginBottom: 20 }}>
        {[["Saved searches", rows.length, "search"], ["New matches today", totalFresh, "sparkles"], ["Clients on alerts", 4, "users"]].map(([l, v, ic]) => (
          <div key={l} style={{ ...CARD, flex: 1, padding: "15px 17px", display: "flex", alignItems: "center", gap: 13 }}>
            <span style={{ width: 38, height: 38, borderRadius: 10, background: "#eef4f1", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name={ic} size={18} color="#006747" /></span>
            <div><div style={{ fontSize: 22, fontWeight: 700, color: "#1d241f", letterSpacing: "-0.5px" }}>{v}</div><div style={{ fontSize: 12, color: "#8a8e88" }}>{l}</div></div>
          </div>
        ))}
      </div>

      <div style={{ ...CARD, overflow: "hidden" }}>
        <div style={{ padding: "14px 18px", borderBottom: "1px solid #f0efe9", fontSize: 14.5, fontWeight: 600, color: "#1d241f" }}>Your saved searches</div>
        {rows.map((r, i) => (
          <div key={i} className="rc-row" style={{ display: "flex", alignItems: "center", gap: 16, padding: "15px 18px", borderBottom: i < rows.length - 1 ? "1px solid #f4f3ee" : "none" }}>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
                <span style={{ fontSize: 14.5, fontWeight: 600, color: "#1d241f" }}>{r.name}</span>
                {r.fresh > 0 && <Pill tone="new" style={{ fontSize: 10 }}>{r.fresh} NEW</Pill>}
              </div>
              <div style={{ fontSize: 12.5, color: "#8a8e88", marginTop: 3 }}>{r.crit}</div>
              <div style={{ fontSize: 11.5, color: "#a8aca6", marginTop: 5, display: "flex", gap: 12 }}>
                <span>{r.matches} matches</span><span>·</span><span>Last run {r.run}</span>
                {r.clients.length > 0 && <React.Fragment><span>·</span><span>Alerts: {r.clients.join(", ")}</span></React.Fragment>}
                {r.clients.length === 0 && <React.Fragment><span>·</span><span style={{ color: "#c0985a" }}>No clients linked</span></React.Fragment>}
              </div>
            </div>
            <div style={{ display: "flex", background: "#f4f3ee", borderRadius: 8, padding: 3, flex: "none" }}>
              {["Instant", "Daily", "Weekly"].map((c) => (
                <button key={c} onClick={() => setCad(i, c)} style={{ border: 0, cursor: "pointer", fontFamily: "inherit", fontSize: 11.5, fontWeight: 600, borderRadius: 6, padding: "6px 11px", background: r.cadence === c ? "#fff" : "transparent", color: r.cadence === c ? "#006747" : "#8a8e88", boxShadow: r.cadence === c ? "0 1px 2px rgba(0,0,0,.08)" : "none" }}>{c}</button>
              ))}
            </div>
            <button onClick={() => go("search")} style={{ border: "1px solid #e0ded6", background: "#fff", borderRadius: 8, padding: "8px 13px", fontFamily: "inherit", fontSize: 12.5, fontWeight: 600, color: "#4a504a", cursor: "pointer", flex: "none" }}>Open</button>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- Agent Compliance (read-only issues + fixes, no fines) ----------
function AgentCompliance({ go }) {
  const listings = [
    { addr: "1408 Westover Rd", area: "Austin · Active", issues: [{ sev: "medium", text: "Missing flood-zone disclosure", fix: "Add the flood-zone field in Add/Edit → Disclosures." }] },
    { addr: "88 Coral Way", area: "Coral Gables · Active", issues: [{ sev: "high", text: "Square footage unverified", fix: "Run sqft verification or upload an appraisal to certify." }, { sev: "low", text: "Only 6 photos (8+ recommended)", fix: "Add 2 more photos in the media manager." }] },
    { addr: "2210 Quarry Lake Dr", area: "Austin · Pending", issues: [] },
    { addr: "77 Bay Harbor Dr", area: "Bay Harbor · Active", issues: [] },
  ];
  const open = listings.reduce((s, l) => s + l.issues.length, 0);
  const clean = listings.filter((l) => !l.issues.length).length;
  const score = Math.round((clean / listings.length) * 100);
  return (
    <div style={WRAP}>
      <PageHead icon="shield-check" eyebrow="Properties" title="Compliance"
        lead="Your listings' compliance status — issues and one-click fixes as you go. This is your read-only view; the MLS handles any fines." />
      <div style={{ display: "flex", gap: 14, marginBottom: 20 }}>
        {[["Compliance score", score + "%", "#006747"], ["Open issues", String(open), "#c0612f"], ["Compliant listings", clean + " of " + listings.length, "#1f8a5b"]].map(([l, v, c]) => (
          <div key={l} style={{ ...CARD, flex: 1, padding: "16px 18px" }}>
            <div style={{ fontSize: 26, fontWeight: 700, color: c, letterSpacing: "-0.5px" }}>{v}</div>
            <div style={{ fontSize: 12.5, color: "#6b706a", marginTop: 3 }}>{l}</div>
          </div>
        ))}
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {listings.map((l, i) => (
          <div key={i} style={{ ...CARD, overflow: "hidden" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "14px 18px", borderBottom: l.issues.length ? "1px solid #f0efe9" : "none" }}>
              <span style={{ width: 34, height: 34, borderRadius: 9, background: l.issues.length ? "#faece3" : "#e8f4ee", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name={l.issues.length ? "triangle-alert" : "check"} size={16} color={l.issues.length ? "#c0612f" : "#1f8a5b"} /></span>
              <div style={{ flex: 1 }}><div style={{ fontSize: 14.5, fontWeight: 600, color: "#1d241f" }}>{l.addr}</div><div style={{ fontSize: 12, color: "#8a8e88" }}>{l.area}</div></div>
              {l.issues.length ? <Pill tone="drop" style={{ fontSize: 10 }}>{l.issues.length} ISSUE{l.issues.length > 1 ? "S" : ""}</Pill> : <Pill tone="active" style={{ fontSize: 10 }}>COMPLIANT</Pill>}
              <button onClick={() => go("mylistings")} style={{ border: "1px solid #e0ded6", background: "#fff", borderRadius: 8, padding: "7px 12px", fontFamily: "inherit", fontSize: 12.5, fontWeight: 600, color: "#4a504a", cursor: "pointer" }}>Edit listing</button>
            </div>
            {l.issues.map((is, j) => (
              <div key={j} style={{ display: "flex", gap: 12, padding: "13px 18px 13px 20px", borderTop: j ? "1px solid #f4f3ee" : "none" }}>
                <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: ".4px", padding: "3px 8px", borderRadius: 999, height: "fit-content", background: sevTone[is.sev].bg, color: sevTone[is.sev].fg }}>{is.sev.toUpperCase()}</span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600, color: "#1d241f" }}>{is.text}</div>
                  <div style={{ fontSize: 12.5, color: "#6b706a", marginTop: 3, display: "flex", gap: 7 }}><Icon name="wrench" size={14} color="#8a8e88" style={{ marginTop: 1 }} /> {is.fix}</div>
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- Follow-ups (tasks) ----------
function FollowUps({ go }) {
  const init = [
    { id: 1, grp: "Overdue", t: "Call Devin Walsh about the counter-offer", client: "Devin Walsh", due: "Yesterday · 5:00pm", type: "phone", done: false },
    { id: 2, grp: "Today", t: "Send updated comps to Maria Sol", client: "Maria Sol", due: "2:00pm", type: "mail", done: false },
    { id: 3, grp: "Today", t: "Confirm Saturday showing time", client: "The Reyes", due: "4:30pm", type: "message-square", done: false },
    { id: 4, grp: "Today", t: "Prep CMA for the Alvarez listing", client: "Luis Alvarez", due: "6:00pm", type: "file-text", done: true },
    { id: 5, grp: "Upcoming", t: "Follow up on open-house leads", client: "3 new leads", due: "Fri", type: "users", done: false },
    { id: 6, grp: "Upcoming", t: "Quarterly check-in call", client: "Jordan Kim", due: "Jun 24", type: "phone", done: false },
  ];
  const [tasks, setTasks] = _uS(init);
  const toggle = (id) => setTasks((t) => t.map((x) => x.id === id ? { ...x, done: !x.done } : x));
  const groups = ["Overdue", "Today", "Upcoming"];
  const gTone = { Overdue: "#c0612f", Today: "#006747", Upcoming: "#8a8e88" };
  const openCount = tasks.filter((t) => !t.done).length;
  return (
    <div style={WRAP}>
      <PageHead icon="list-checks" eyebrow="Leads & Contacts" title="Follow-ups"
        lead="Your task list across every client and deal — calls, emails and reminders, each linked back to the person it's about."
        right={<button style={{ border: 0, background: "#006747", color: "#fff", borderRadius: 8, padding: "10px 16px", fontFamily: "inherit", fontSize: 13, fontWeight: 600, cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 7, flex: "none" }}><Icon name="plus" size={16} color="#fff" /> Add task</button>} />
      <div style={{ fontSize: 13, color: "#6b706a", marginBottom: 16 }}><b style={{ color: "#1d241f" }}>{openCount}</b> open · {tasks.length - openCount} done today</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
        {groups.map((g) => {
          const gt = tasks.filter((t) => t.grp === g);
          if (!gt.length) return null;
          return (
            <div key={g}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: gTone[g] }} />
                <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: "1px", textTransform: "uppercase", color: "#6b706a" }}>{g}</span>
                <span style={{ fontSize: 11.5, color: "#a8aca6" }}>{gt.filter((t) => !t.done).length}</span>
              </div>
              <div style={{ ...CARD, overflow: "hidden" }}>
                {gt.map((t, i) => (
                  <div key={t.id} className="rc-row" style={{ display: "flex", alignItems: "center", gap: 13, padding: "13px 16px", borderBottom: i < gt.length - 1 ? "1px solid #f4f3ee" : "none" }}>
                    <button onClick={() => toggle(t.id)} style={{ width: 22, height: 22, borderRadius: "50%", flex: "none", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", background: t.done ? "#006747" : "#fff", border: t.done ? "0" : "1.5px solid #cfcdc3", padding: 0 }}>{t.done && <Icon name="check" size={13} color="#fff" />}</button>
                    <span style={{ width: 30, height: 30, borderRadius: 8, background: "#f4f3ee", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name={t.type} size={15} color="#6b706a" /></span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13.5, color: t.done ? "#a8aca6" : "#1d241f", textDecoration: t.done ? "line-through" : "none" }}>{t.t}</div>
                      <div style={{ fontSize: 11.5, color: "#a8aca6", marginTop: 2 }}>{t.client}</div>
                    </div>
                    <span style={{ fontSize: 12, fontWeight: 600, color: t.grp === "Overdue" && !t.done ? "#c0612f" : "#8a8e88", flex: "none" }}>{t.due}</span>
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ---------- Tours ----------
function Tours({ go }) {
  const tours = [
    { client: "The Reyes", when: "Sat, Jun 21 · 10:00am", status: "confirmed", drive: "22 min drive", homes: ["1408 Westover Rd", "88 Coral Way", "2210 Quarry Lake Dr"] },
    { client: "Jordan Kim", when: "Sun, Jun 22 · 1:00pm", status: "pending", drive: "15 min drive", homes: ["4821 Palm Bay Ct", "77 Bay Harbor Dr"] },
    { client: "Luis & Ana Alvarez", when: "Tue, Jun 24 · 5:30pm", status: "confirmed", drive: "9 min drive", homes: ["310 Grove St", "512 Oak Bend"] },
  ];
  const st = { confirmed: "active", pending: "pending" };
  return (
    <div style={WRAP}>
      <PageHead icon="route" eyebrow="Leads & Contacts" title="Tours"
        lead="Plan and run buyer tours — group homes into a route, sync everyone's calendars, and capture feedback on the go."
        right={<button style={{ border: 0, background: "#006747", color: "#fff", borderRadius: 8, padding: "10px 16px", fontFamily: "inherit", fontSize: 13, fontWeight: 600, cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 7, flex: "none" }}><Icon name="plus" size={16} color="#fff" /> Plan a tour</button>} />
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {tours.map((t, i) => (
          <div key={i} style={{ ...CARD, overflow: "hidden" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "15px 18px", borderBottom: "1px solid #f0efe9" }}>
              <span style={{ width: 38, height: 38, borderRadius: 10, background: "#eef4f1", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name="map" size={18} color="#006747" /></span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 15, fontWeight: 600, color: "#1d241f" }}>{t.client}</div>
                <div style={{ fontSize: 12.5, color: "#8a8e88" }}>{t.when} · {t.homes.length} stops · {t.drive}</div>
              </div>
              <Pill tone={st[t.status]} style={{ fontSize: 10 }}>{t.status.toUpperCase()}</Pill>
              <button style={{ border: "1px solid #e0ded6", background: "#fff", borderRadius: 8, padding: "8px 13px", fontFamily: "inherit", fontSize: 12.5, fontWeight: 600, color: "#4a504a", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="navigation" size={14} color="#8a8e88" /> Route</button>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "12px 18px", flexWrap: "wrap" }}>
              {t.homes.map((h, j) => (
                <React.Fragment key={j}>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 7, background: "#f6f5f1", borderRadius: 8, padding: "7px 11px", fontSize: 12.5, color: "#1d241f" }}>
                    <span style={{ width: 18, height: 18, borderRadius: "50%", background: "#006747", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 10, fontWeight: 700 }}>{j + 1}</span>{h}
                  </span>
                  {j < t.homes.length - 1 && <Icon name="chevron-right" size={14} color="#c4c2b8" />}
                </React.Fragment>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- Settings (role-aware) ----------
function SettingsScreen({ role, go }) {
  const isAdmin = ["admin", "staff", "super"].includes(String(role || "").toLowerCase());
  const personal = [
    ["user-round", "Profile", "Photo, bio, license & office details"],
    ["bell", "Notifications", "Email, push and alert preferences"],
    ["palette", "Personal branding", "Colors, logo and email signature"],
    ["plug", "Connected tools", "Calendar, e-sign and data-feed connections"],
    ["shield", "Security & sign-in", "Password, 2-factor and active sessions"],
  ];
  const org = [
    ["building-2", "MLS configuration", "Rules, fields and market-wide defaults"],
    ["users-round", "Roles & permissions", "Define roles and scope every permission"],
    ["credit-card", "Billing & subscription", "Modules, seats and invoices"],
    ["database", "Data feeds & API", "IDX/VOW feeds, API clients and keys"],
    ["scroll-text", "Audit log", "Track configuration and access changes"],
  ];
  const Section = ({ title, sub, items }) => (
    <div style={{ marginBottom: 24 }}>
      <div style={{ marginBottom: 12 }}>
        <div style={{ fontSize: 15, fontWeight: 600, color: "#1d241f" }}>{title}</div>
        <div style={{ fontSize: 12.5, color: "#8a8e88", marginTop: 2 }}>{sub}</div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12 }}>
        {items.map((it, i) => (
          <div key={i} className="rc-nav-item" style={{ ...CARD, display: "flex", alignItems: "center", gap: 13, padding: "15px 16px", cursor: "pointer" }}>
            <span style={{ width: 38, height: 38, borderRadius: 10, background: "#eef4f1", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name={it[0]} size={18} color="#006747" /></span>
            <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontSize: 13.5, fontWeight: 600, color: "#1d241f" }}>{it[1]}</div><div style={{ fontSize: 11.5, color: "#a8aca6" }}>{it[2]}</div></div>
            <Icon name="chevron-right" size={16} color="#c4c2b8" />
          </div>
        ))}
      </div>
    </div>
  );
  return (
    <div style={WRAP}>
      <PageHead icon="settings" title="Settings"
        lead={isAdmin ? "Manage your personal account and MLS-wide configuration." : "Manage your personal account, notifications and connected tools."}
        right={<Pill tone="neutral" style={{ fontSize: 10 }}>{isAdmin ? "ADMIN ACCESS" : "AGENT"}</Pill>} />
      <Section title="Your settings" sub="Personal preferences for your account." items={personal} />
      {isAdmin && <Section title="MLS administration" sub="Organization-wide settings — visible to staff, admins and super users." items={org} />}
      {!isAdmin && (
        <div style={{ ...CARD, display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", background: "#faf9f5" }}>
          <Icon name="lock" size={16} color="#a8aca6" />
          <span style={{ fontSize: 12.5, color: "#8a8e88" }}>MLS-wide configuration is managed by your MLS administrators.</span>
        </div>
      )}
    </div>
  );
}

// ---------- Create forms (opened from command-palette Quick actions) ----------
function Field({ label, children, full }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 6, gridColumn: full ? "1 / -1" : "auto" }}>
      <span style={{ fontSize: 12, fontWeight: 600, color: "#4a504a" }}>{label}</span>
      {children}
    </label>
  );
}
const inp = { border: "1px solid #e2e0d8", borderRadius: 8, padding: "10px 12px", fontFamily: "inherit", fontSize: 13.5, color: "#1d241f", outline: 0, background: "#fff", width: "100%", boxSizing: "border-box" };
function Seg({ options, value, onChange }) {
  return (
    <div style={{ display: "inline-flex", background: "#f4f3ee", borderRadius: 8, padding: 3, gap: 2, width: "fit-content" }}>
      {options.map((o) => (
        <button key={o} type="button" onClick={() => onChange(o)} style={{ border: 0, cursor: "pointer", fontFamily: "inherit", fontSize: 12.5, fontWeight: 600, borderRadius: 6, padding: "7px 13px", background: value === o ? "#fff" : "transparent", color: value === o ? "#006747" : "#8a8e88", boxShadow: value === o ? "0 1px 2px rgba(0,0,0,.08)" : "none" }}>{o}</button>
      ))}
    </div>
  );
}
function FormShell({ icon, eyebrow, title, lead, children, onCancel, submit }) {
  return (
    <div style={{ padding: "26px 30px 40px", maxWidth: 760, margin: "0 auto" }}>
      <PageHead icon={icon} eyebrow={eyebrow} title={title} lead={lead} />
      <div style={{ ...CARD, padding: 22 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>{children}</div>
        <div style={{ display: "flex", justifyContent: "flex-end", gap: 10, marginTop: 22, paddingTop: 18, borderTop: "1px solid #f0efe9" }}>
          <button onClick={onCancel} style={{ border: "1px solid #e0ded6", background: "#fff", borderRadius: 8, padding: "10px 18px", fontFamily: "inherit", fontSize: 13, fontWeight: 600, color: "#4a504a", cursor: "pointer" }}>Cancel</button>
          <button onClick={onCancel} style={{ border: 0, background: "#006747", color: "#fff", borderRadius: 8, padding: "10px 20px", fontFamily: "inherit", fontSize: 13, fontWeight: 600, cursor: "pointer" }}>{submit}</button>
        </div>
      </div>
    </div>
  );
}
function NewClient({ go }) {
  const [type, setType] = _uS("Buyer");
  const [stage, setStage] = _uS("New lead");
  return (
    <FormShell icon="user-plus" eyebrow="CRM · Leads & Clients" title="Add a client" lead="Create a new contact record. You can link households, tags and saved searches after saving." onCancel={() => go("clients")} submit="Create client">
      <Field label="First name"><input style={inp} placeholder="Jordan" /></Field>
      <Field label="Last name"><input style={inp} placeholder="Kim" /></Field>
      <Field label="Email"><input style={inp} placeholder="jordan@email.com" /></Field>
      <Field label="Phone"><input style={inp} placeholder="(305) 555-0142" /></Field>
      <Field label="Client type" full><Seg options={["Buyer", "Seller", "Both"]} value={type} onChange={setType} /></Field>
      <Field label="Stage" full><Seg options={["New lead", "Active", "Under contract"]} value={stage} onChange={setStage} /></Field>
      <Field label="Source"><input style={inp} placeholder="Open house, referral…" /></Field>
      <Field label="Assigned agent"><input style={inp} defaultValue="Alex Morgan" /></Field>
      <Field label="Notes" full><textarea rows={3} style={{ ...inp, resize: "vertical" }} placeholder="What are they looking for?" /></Field>
    </FormShell>
  );
}
function ScheduleShowing({ go }) {
  const [mode, setMode] = _uS("In-person");
  return (
    <FormShell icon="calendar-plus" eyebrow="Properties · Showings" title="Schedule a showing" lead="Set up a showing or buyer tour. Calendar sync finds mutual availability once the parties are added." onCancel={() => go("showings")} submit="Schedule showing">
      <Field label="Property" full><input style={inp} placeholder="Search by address or MLS #…" /></Field>
      <Field label="Client"><input style={inp} placeholder="Select a client" /></Field>
      <Field label="Showing type"><Seg options={["In-person", "Virtual"]} value={mode} onChange={setMode} /></Field>
      <Field label="Date"><input type="date" style={inp} /></Field>
      <Field label="Time window"><input style={inp} placeholder="e.g. 2:00–2:30pm" /></Field>
      <Field label="Notes" full><textarea rows={3} style={{ ...inp, resize: "vertical" }} placeholder="Access details, lockbox, instructions…" /></Field>
    </FormShell>
  );
}

Object.assign(window, { SavedAlerts, AgentCompliance, FollowUps, Tours, SettingsScreen, NewClient, ScheduleShowing });