setF((s) => ({ ...s, isBuyer: v }))} label="Buyer" /> setF((s) => ({ ...s, isSeller: v }))} label="Seller" />

setF((s) => ({ ...s, masked: v }))} label="Mask sensitive fields (private)" />

</Field>
        </div>
      </Section>
    </Modal>
  );
}
window.ContactForm = ContactForm;

/* ============================================================
   TASK — add / edit
   ============================================================ */
function TaskForm({ idx }) {
  const D = window.PT_DATA;
  const existing = idx != null ? D.tasks[idx] : null;
  const [f, setF] = useState(() => ({
    title: existing?.title || "", property: existing?.property || D.properties[0].address,
    assignee: existing?.assignee ?? D.user.name, due: existing?.dueISO || "", dueLabel: existing?.due || "", desc: existing?.desc || "",
  }));
  const set = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value }));
  function fmt(d) { if (!d) return "—"; return new Date(d + "T00:00:00").toLocaleDateString("en-US", { month: "short", day: "2-digit" }); }
  function save() {
    const rec = { title: f.title, property: f.property, assignee: f.assignee, due: f.due ? fmt(f.due) : (f.dueLabel || "—"), dueISO: f.due, desc: f.desc, done: existing?.done || false, overdue: existing?.overdue || false };
    if (existing) { Object.assign(existing, rec); pushToast({ tone: "success", title: "Task updated", body: f.title }); }
    else { D.tasks.unshift(rec); pushToast({ tone: "success", title: "Task created", body: f.title }); }
    PTStore.bump();
    closeOverlay("/tasks");
  }
  return (
    <Modal width={520} icon={existing ? "pencil" : "plus"} title={existing ? "Edit task" : "New task"} onClose={() => closeOverlay("/tasks")}
      footer={<>
        <Button variant="secondary" onClick={() => closeOverlay("/tasks")}>Cancel</Button>
        <Button variant="primary" icon="check" onClick={save} disabled={!f.title}>{existing ? "Save changes" : "Create task"}</Button>
      </>}>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        <Field label="Title" required><Input placeholder="e.g. Order title search" value={f.title} onChange={set("title")} /></Field>
        <Field label="Related property"><Select value={f.property} onChange={set("property")}>{D.properties.map((p) => <option key={p.id}>{p.address}</option>)}</Select></Field>
        <Grid cols={2}>
          <Field label="Assign to">
            <Select value={f.assignee} onChange={set("assignee")}>
              <option value="">Unassigned</option>
              <optgroup label="Team">{D.team.map((u) => <option key={u} value={u}>{u}</option>)}</optgroup>
              <optgroup label="Task labels">{D.taskLabels.map((t) => <option key={t} value={t}>{t}</option>)}</optgroup>
            </Select>
          </Field>
          <Field label="Due date"><Input type="date" icon="calendar" value={f.due} onChange={set("due")} /></Field>
        </Grid>
        <Field label="Description"><Textarea rows={3} value={f.desc} onChange={set("desc")} /></Field>
      </div>
    </Modal>
  );
}
window.TaskForm = TaskForm;

/* ============================================================
   PAGE — add / edit (Site & branding)
   ============================================================ */
function PageForm({ idx }) {
  const D = window.PT_DATA;
  const existing = idx != null ? D.site.pages[idx] : null;
  const [f, setF] = useState(() => ({ title: existing?.title || "", path: existing?.path || "", status: existing?.status || "Draft", menu: existing?.menu ?? true, meta: existing?.meta || "" }));
  const set = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value }));
  function slugify(t) { return "/" + t.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, ""); }
  function save() {
    const rec = { title: f.title, path: f.path || slugify(f.title), status: f.status, menu: f.menu, meta: f.meta, updated: "Just now" };
    if (existing) { Object.assign(existing, rec); pushToast({ tone: "success", title: "Page saved", body: f.title }); }
    else { D.site.pages.push(rec); pushToast({ tone: "success", title: "Page created", body: f.title }); }
    PTStore.bump();
    closeOverlay("/website/site");
  }
  return (
    <Modal width={520} icon={existing ? "pencil" : "file-text"} title={existing ? "Edit page" : "New page"} onClose={() => closeOverlay("/website/site")}
      footer={<>
        <Button variant="secondary" onClick={() => closeOverlay("/website/site")}>Cancel</Button>
        <Button variant="primary" icon="check" onClick={save} disabled={!f.title}>{existing ? "Save page" : "Create page"}</Button>
      </>}>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        <Field label="Page title" required><Input placeholder="About us" value={f.title} onChange={set("title")} /></Field>
        <Grid cols={2}>
          <Field label="URL path" hint="Auto from title if blank."><Input icon="link" placeholder={f.title ? slugify(f.title) : "/about-us"} value={f.path} onChange={set("path")} /></Field>
          <Field label="Status"><Select value={f.status} onChange={set("status")}><option>Draft</option><option>Published</option></Select></Field>
        </Grid>
        <Field label="Meta description" hint="Shown in search results."><Textarea rows={2} value={f.meta} onChange={set("meta")} /></Field>
        <Toggle checked={f.menu} onChange={(v) => setF((s) => ({ ...s, menu: v }))} label="Show in site navigation" />
      </div>
    </Modal>
  );
}
window.PageForm = PageForm;

/* ============================================================
   BLOG POST — write / edit
   ============================================================ */
function PostForm({ idx }) {
  const D = window.PT_DATA;
  const existing = idx != null ? D.blogPosts[idx] : null;
  const cats = ["Selling", "Market", "Guides", "Company"];
  const [f, setF] = useState(() => ({ title: existing?.title || "", cat: existing?.cat || "Selling", author: existing?.author || D.user.name, status: existing?.status || "Draft", date: existing?.date || "—", excerpt: existing?.excerpt || "", body: existing?.body || "" }));
  const set = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value }));
  function save() {
    const rec = { title: f.title, cat: f.cat, author: f.author, status: f.status, date: f.status === "Published" ? "Jun 19, 2026" : f.date, views: existing?.views || 0, excerpt: f.excerpt, body: f.body };
    if (existing) { Object.assign(existing, rec); pushToast({ tone: "success", title: "Post saved", body: f.title }); }
    else { D.blogPosts.unshift(rec); pushToast({ tone: "success", title: f.status === "Published" ? "Post published" : "Draft saved", body: f.title }); }
    PTStore.bump();
    closeOverlay("/website/blog");
  }
  return (
    <Modal width={640} icon={existing ? "pencil" : "newspaper"} title={existing ? "Edit post" : "Write post"} onClose={() => closeOverlay("/website/blog")}
      footer={<>
        <Button variant="secondary" onClick={() => closeOverlay("/website/blog")}>Cancel</Button>
        <Button variant="primary" icon="check" onClick={save} disabled={!f.title}>{existing ? "Save post" : "Save post"}</Button>
      </>}>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        <Field label="Title" required><Input placeholder="5 signs it's time to sell as-is" value={f.title} onChange={set("title")} /></Field>
        <Grid cols={3}>
          <Field label="Category"><Select value={f.cat} onChange={set("cat")}>{cats.map((c) => <option key={c}>{c}</option>)}</Select></Field>
          <Field label="Author"><Select value={f.author} onChange={set("author")}>{D.team.map((u) => <option key={u}>{u}</option>)}</Select></Field>
          <Field label="Status"><Select value={f.status} onChange={set("status")}><option>Draft</option><option>Scheduled</option><option>Published</option></Select></Field>
        </Grid>
        {f.status === "Scheduled" && <Field label="Publish date"><Input type="date" icon="calendar" value={f.dateISO || ""} onChange={(e) => setF((s) => ({ ...s, dateISO: e.target.value, date: new Date(e.target.value + "T00:00:00").toLocaleDateString("en-US", { month: "short", day: "2-digit", year: "numeric" }) }))} /></Field>}
        <Field label="Excerpt" hint="Shown on the blog index."><Textarea rows={2} value={f.excerpt} onChange={set("excerpt")} /></Field>
        <Field label="Body"><Textarea rows={6} placeholder="Write your post…" value={f.body} onChange={set("body")} /></Field>
      </div>
    </Modal>
  );
}
window.PostForm = PostForm;

/* ============================================================
   NEW LEAD — view & convert (Dashboard alert click)
   ============================================================ */
function LeadModal({ idx }) {
  const D = window.PT_DATA;
  const lead = D.leads[idx];
  if (!lead) { closeOverlay("/dashboard"); return null; }
  const hasProperty = lead.address && lead.address !== "—";

return (
    <Modal width={520} icon="bell" iconTone="info" title="New lead" subtitle={lead.time} onClose={() => closeOverlay("/dashboard")}
      footer={<>
        <Button variant="secondary" onClick={() => closeOverlay("/dashboard")}>Close</Button>
        <Button variant="primary" icon={hasProperty ? "building-2" : "user-plus"} onClick={convert}>{hasProperty ? "Create property & contact" : "Add as contact"}</Button>
      </>}>
      <div style={{ display: "flex", gap: 13, alignItems: "center", marginBottom: 16 }}>
        <Avatar name={lead.name} size="lg" />
        <div>
          <div style={{ fontSize: "var(--text-lg)", fontWeight: 700, color: "var(--text-strong)" }}>{lead.name}</div>
          <div style={{ marginTop: 3 }}><Badge tone="brand" size="sm" icon="clipboard-list">{lead.source}</Badge></div>
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 16 }}>
        <div><div style={{ fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "var(--tracking-caps)", color: "var(--text-subtle)", fontWeight: 700 }}>Phone</div><div className="tnum" style={{ fontSize: "var(--text-base)", color: "var(--text-strong)" }}>{lead.phone}</div></div>
        <div><div style={{ fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "var(--tracking-caps)", color: "var(--text-subtle)", fontWeight: 700 }}>Property</div><div style={{ fontSize: "var(--text-base)", color: "var(--text-strong)" }}>{hasProperty ? lead.address : "No property submitted"}</div></div>
      </div>
      <Banner tone="info" title="What happens when you convert">
        We create a contact{hasProperty ? " and a property lead, attach the submitter to it," : ","} and notify the assigned owner — exactly what a real webform submission triggers (Fix #1 / #11).
      </Banner>
    </Modal>
  );
}
window.LeadModal = LeadModal;

/* ============================================================
   Routed wrappers for existing modals (Note editor, property Contact card)
   ============================================================ */
function NoteEditorRouted({ property }) {
  const base = "/properties/" + property.id;
  return (
    <NoteEditor property={property} open={true} onClose={() => closeOverlay(base)}
      onSaved={(res) => {
        property.notes = property.notes || [];
        property.notes.unshift({ author: window.PT_DATA.user.name, time: "Just now", subject: res.subject || "Note", body: res.body || "", emailed: res.emailed || 0, follow: res.follow || "—", assignee: res.assignee || "Unassigned" });
        PTStore.bump();
        pushToast({ tone: "success", title: "Note saved", body: res.emailed ? res.emailed + " contacts emailed." : "No contacts emailed." });
        closeOverlay(base);
      }} />
  );
}
window.NoteEditorRouted = NoteEditorRouted;

{title}