@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap');

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body, #root {
    font-family: 'DM Sans', sans-serif;
    background: #0a0c10;
    color: #e8e6e0;
    min-height: 100vh;
  }

  .app { display: flex; min-height: 100vh; }

  /* Sidebar */
  .sidebar {
    width: 240px;
    background: #0f1117;
    border-right: 1px solid #1e2230;
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 100;
  }
  .logo {
    padding: 0 20px 24px;
    border-bottom: 1px solid #1e2230;
  }
  .logo-img {
    width: 140px;
    height: auto;
    display: block;
    margin-bottom: 6px;
  }
  .logo-text {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: #c8a96e;
    letter-spacing: -0.5px;
  }
  .logo-sub { font-size: 11px; color: #555; margin-top: 2px; letter-spacing: 1.5px; text-transform: uppercase; }
  .nav { padding: 16px 12px; flex: 1; }
  .nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    color: #777;
    transition: all 0.2s;
    margin-bottom: 2px;
  }
  .nav-item:hover { background: #1a1e2a; color: #c8a96e; }
  .nav-item.active { background: #1a1e2a; color: #c8a96e; font-weight: 500; }
  .nav-item .icon { font-size: 16px; width: 20px; text-align: center; }
  .nav-badge {
    margin-left: auto;
    background: #c8a96e22;
    color: #c8a96e;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
  }

  /* Main */
  .main { margin-left: 240px; flex: 1; padding: 32px; }

  .page-header { margin-bottom: 32px; }
  .page-title {
    font-family: 'Syne', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #f0ede6;
    letter-spacing: -1px;
  }
  .page-subtitle { color: #666; font-size: 14px; margin-top: 4px; }

  /* Cards */
  .card {
    background: #0f1117;
    border: 1px solid #1e2230;
    border-radius: 12px;
    padding: 24px;
  }
  .card-title {
    font-family: 'Syne', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #c8a96e;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* Grid */
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

  /* Stats */
  .stat-card {
    background: #0f1117;
    border: 1px solid #1e2230;
    border-radius: 12px;
    padding: 20px;
  }
  .stat-value {
    font-family: 'Syne', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #c8a96e;
  }
  .stat-label { font-size: 12px; color: #555; margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; }
  .stat-delta { font-size: 12px; color: #4caf7a; margin-top: 8px; }

  /* Buttons */
  .btn {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    transition: all 0.2s;
  }
  .btn-primary { background: #c8a96e; color: #0a0c10; }
  .btn-primary:hover { background: #d4b87e; }
  .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
  .btn-ghost { background: transparent; border: 1px solid #2a2e3a; color: #aaa; }
  .btn-ghost:hover { border-color: #c8a96e; color: #c8a96e; }
  .btn-danger { background: #ff4444; color: white; }
  .btn-sm { padding: 6px 14px; font-size: 12px; }
  .btn-icon { padding: 8px; border-radius: 6px; background: transparent; border: 1px solid #2a2e3a; cursor: pointer; color: #aaa; transition: all 0.2s; font-size: 14px; }
  .btn-icon:hover { border-color: #c8a96e; color: #c8a96e; }

  /* Form */
  .form-group { margin-bottom: 16px; }
  .form-label { font-size: 12px; color: #777; margin-bottom: 6px; display: block; text-transform: uppercase; letter-spacing: 0.8px; }
  .form-input, .form-select, .form-textarea {
    width: 100%;
    background: #141720;
    border: 1px solid #2a2e3a;
    border-radius: 8px;
    padding: 10px 14px;
    color: #e8e6e0;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    transition: border-color 0.2s;
    outline: none;
  }
  .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: #c8a96e; }
  .form-textarea { resize: vertical; min-height: 100px; }
  .form-select option { background: #141720; }

  /* Table */
  .table-wrap { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; }
  th {
    text-align: left; padding: 12px 16px;
    font-size: 11px; font-weight: 600;
    color: #555; text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #1e2230;
  }
  td { padding: 14px 16px; font-size: 13.5px; border-bottom: 1px solid #13161e; vertical-align: middle; }
  tr:hover td { background: #12151f; }

  /* Badge */
  .badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .badge-green { background: #1a3a28; color: #4caf7a; }
  .badge-yellow { background: #3a2e10; color: #f0a500; }
  .badge-red { background: #3a1010; color: #ff6b6b; }
  .badge-blue { background: #102038; color: #5b9bd5; }
  .badge-purple { background: #251a3a; color: #9b72cf; }
  .badge-gray { background: #1e2230; color: #666; }

  /* Score ring */
  .score-ring {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Syne', sans-serif;
    font-size: 15px; font-weight: 800;
    border: 3px solid;
  }
  .score-high { border-color: #4caf7a; color: #4caf7a; }
  .score-mid { border-color: #f0a500; color: #f0a500; }
  .score-low { border-color: #ff6b6b; color: #ff6b6b; }

  /* Chat */
  .chat-wrap { height: 340px; overflow-y: auto; background: #0a0c10; border-radius: 8px; padding: 16px; border: 1px solid #1e2230; margin-bottom: 12px; }
  .chat-msg { margin-bottom: 14px; }
  .chat-msg.user .bubble { background: #c8a96e22; border: 1px solid #c8a96e44; margin-left: auto; max-width: 80%; }
  .chat-msg.ai .bubble { background: #1a1e2a; border: 1px solid #2a2e3a; max-width: 85%; }
  .bubble { padding: 10px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.5; }
  .msg-role { font-size: 10px; color: #555; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1px; }

  /* Progress */
  .progress-bar { height: 4px; background: #1e2230; border-radius: 2px; overflow: hidden; }
  .progress-fill { height: 100%; border-radius: 2px; transition: width 0.5s; }

  /* Tabs */
  .tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid #1e2230; padding-bottom: 1px; }
  .tab {
    padding: 8px 16px; font-size: 13px; cursor: pointer;
    border-bottom: 2px solid transparent; color: #555;
    transition: all 0.2s; margin-bottom: -1px;
    font-weight: 500;
  }
  .tab.active { border-bottom-color: #c8a96e; color: #c8a96e; }
  .tab:hover:not(.active) { color: #888; }

  /* Loader */
  .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #333; border-top-color: #c8a96e; border-radius: 50%; animation: spin 0.7s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Divider */
  .divider { border: none; border-top: 1px solid #1e2230; margin: 20px 0; }

  /* Flex utils */
  .flex { display: flex; }
  .flex-col { flex-direction: column; }
  .items-center { align-items: center; }
  .justify-between { justify-content: space-between; }
  .gap-8 { gap: 8px; }
  .gap-12 { gap: 12px; }
  .gap-16 { gap: 16px; }
  .gap-24 { gap: 24px; }
  .mb-8 { margin-bottom: 8px; }
  .mb-16 { margin-bottom: 16px; }
  .mb-24 { margin-bottom: 24px; }
  .mt-16 { margin-top: 16px; }
  .text-gold { color: #c8a96e; }
  .text-muted { color: #666; font-size: 13px; }
  .text-sm { font-size: 13px; }
  .text-xs { font-size: 11px; color: #555; }
  .font-syne { font-family: 'Syne', sans-serif; }
  .w-full { width: 100%; }
  .wrap-gap { display: flex; flex-wrap: wrap; gap: 8px; }

  /* Modal */
  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1000; display: flex; align-items: center; justify-content: center; }
  .modal { background: #0f1117; border: 1px solid #2a2e3a; border-radius: 16px; padding: 32px; width: 640px; max-width: 95vw; max-height: 90vh; overflow-y: auto; }
  .modal-title { font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 24px; color: #f0ede6; }
  .modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
`;

// ─── Mock Data ─────────────────────────────────────────────────────────────────
const INITIAL_LEADS = [{
  id: 1,
  address: "1847 Laurel Canyon Blvd, Los Angeles, CA 90046",
  owner: "Margaret Chen",
  ownerType: "Individual",
  estValue: 980000,
  estRent: 4200,
  daysVacant: 180,
  score: 87,
  status: "Hot Lead",
  source: "Tax Records",
  contacted: false,
  equity: "High",
  mlsStatus: "Off-Market",
  lastContact: null,
  notes: ""
}, {
  id: 2,
  address: "5523 Vineland Ave, North Hollywood, CA 91601",
  owner: "Westside Holdings LLC",
  ownerType: "Entity",
  estValue: 720000,
  estRent: 3100,
  daysVacant: 90,
  score: 72,
  status: "Warm",
  source: "Code Violations",
  contacted: true,
  equity: "Medium",
  mlsStatus: "Off-Market",
  lastContact: "2026-03-01",
  notes: "Owner is motivated — divorce situation"
}, {
  id: 3,
  address: "2201 Sunset Plaza Dr, West Hollywood, CA 90069",
  owner: "Robert & Linda Park",
  ownerType: "Individual",
  estValue: 1450000,
  estRent: 6800,
  daysVacant: 45,
  score: 61,
  status: "Warm",
  source: "Probate Court",
  contacted: false,
  equity: "High",
  mlsStatus: "Off-Market",
  lastContact: null,
  notes: ""
}, {
  id: 4,
  address: "9871 Sepulveda Blvd, Panorama City, CA 91402",
  owner: "Rosario Investments",
  ownerType: "Entity",
  estValue: 540000,
  estRent: 2600,
  daysVacant: 12,
  score: 44,
  status: "Cold",
  source: "MLS Expired",
  contacted: true,
  equity: "Low",
  mlsStatus: "Expired Listing",
  lastContact: "2026-02-15",
  notes: ""
}, {
  id: 5,
  address: "443 N Gardner St, Los Angeles, CA 90036",
  owner: "Estate of Howard Kim",
  ownerType: "Estate",
  estValue: 1120000,
  estRent: 5100,
  daysVacant: 230,
  score: 93,
  status: "Hot Lead",
  source: "Probate Court",
  contacted: false,
  equity: "High",
  mlsStatus: "Off-Market",
  lastContact: null,
  notes: ""
}];
const OUTREACH_TEMPLATES = {
  email_warm: {
    label: "Email – Friendly Intro",
    subject: "Quick Question About Your Property on {address}",
    body: "Hi {owner},\n\nMy name is [Your Name], and I'm a licensed California real estate agent working with a private investment group actively buying properties in your area.\n\nI noticed your property at {address} and wanted to reach out personally — we're looking for opportunities and prefer to work directly with owners rather than through the traditional listing process.\n\nIf you've ever considered selling, I'd love to have a quick conversation. We can often close in 14 days with no showings, no repairs, and no commissions on your end.\n\nWould you have 10 minutes for a call this week?\n\nBest,\n[Your Name]\n[Phone] | [Email]"
  },
  email_probate: {
    label: "Email – Probate/Estate",
    subject: "We Can Help Simplify the Estate Sale at {address}",
    body: "Dear {owner},\n\nI hope this message finds you well during what I know can be a difficult time.\n\nOur investment group specializes in working with estates and heirs to provide a simple, compassionate exit for inherited properties. If the estate at {address} is something you'd like to resolve quickly and without complexity, we can help.\n\nWe buy as-is, all cash, and can typically close on your timeline — whether that's 2 weeks or 3 months.\n\nNo obligation to chat — just a conversation.\n\nWarmly,\n[Your Name]"
  },
  text_short: {
    label: "SMS – Short Intro",
    subject: "",
    body: "Hi {owner} — this is [Name], a CA real estate investor. Interested in a cash offer for your property at {address}? No repairs, no fees, fast close. Happy to share more: [Phone]"
  }
};

// ─── Components ────────────────────────────────────────────────────────────────

const ScoreRing = ({
  score
}) => {
  const cls = score >= 80 ? "score-high" : score >= 60 ? "score-mid" : "score-low";
  return /*#__PURE__*/React.createElement("div", {
    className: `score-ring ${cls}`
  }, score);
};
const StatusBadge = ({
  status
}) => {
  const map = {
    "Hot Lead": "badge-red",
    "Warm": "badge-yellow",
    "Cold": "badge-blue",
    "Pursuing": "badge-green",
    "Passed": "badge-gray"
  };
  return /*#__PURE__*/React.createElement("span", {
    className: `badge ${map[status] || "badge-gray"}`
  }, status);
};
const SourceBadge = ({
  source
}) => {
  const map = {
    "Tax Records": "badge-purple",
    "Code Violations": "badge-red",
    "Probate Court": "badge-yellow",
    "MLS Expired": "badge-blue",
    "Driving for Dollars": "badge-green",
    "Skip Trace": "badge-gray"
  };
  return /*#__PURE__*/React.createElement("span", {
    className: `badge ${map[source] || "badge-gray"}`
  }, source);
};

// ─── PAGES ─────────────────────────────────────────────────────────────────────

// Dashboard
const Dashboard = ({
  leads,
  onNav
}) => {
  const hot = leads.filter(l => l.score >= 80).length;
  const contacted = leads.filter(l => l.contacted).length;
  const totalValue = leads.reduce((s, l) => s + l.estValue, 0);
  const avgScore = Math.round(leads.reduce((s, l) => s + l.score, 0) / leads.length);
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "page-header"
  }, /*#__PURE__*/React.createElement("div", {
    className: "page-title"
  }, "Command Center"), /*#__PURE__*/React.createElement("div", {
    className: "page-subtitle"
  }, "Off-Market Deal Pipeline \u2014 TDG Investment Group")), /*#__PURE__*/React.createElement("div", {
    className: "grid-4 mb-24"
  }, [{
    label: "Total Leads",
    value: leads.length,
    delta: "+3 this week"
  }, {
    label: "Hot Leads",
    value: hot,
    delta: "Score ≥ 80"
  }, {
    label: "Avg Score",
    value: avgScore,
    delta: "Out of 100"
  }, {
    label: "Portfolio Value",
    value: "$" + (totalValue / 1e6).toFixed(1) + "M",
    delta: "Est. Combined"
  }].map(s => /*#__PURE__*/React.createElement("div", {
    className: "stat-card",
    key: s.label
  }, /*#__PURE__*/React.createElement("div", {
    className: "stat-value"
  }, s.value), /*#__PURE__*/React.createElement("div", {
    className: "stat-label"
  }, s.label), /*#__PURE__*/React.createElement("div", {
    className: "stat-delta"
  }, s.delta)))), /*#__PURE__*/React.createElement("div", {
    className: "grid-2 gap-24"
  }, /*#__PURE__*/React.createElement("div", {
    className: "card"
  }, /*#__PURE__*/React.createElement("div", {
    className: "card-title"
  }, "\uD83D\uDD25 Hot Leads"), leads.filter(l => l.score >= 75).slice(0, 4).map(lead => /*#__PURE__*/React.createElement("div", {
    key: lead.id,
    style: {
      padding: "12px 0",
      borderBottom: "1px solid #1e2230",
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center"
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 13,
      color: "#e8e6e0",
      fontWeight: 500
    }
  }, lead.address.split(",")[0]), /*#__PURE__*/React.createElement("div", {
    className: "text-xs mt-1"
  }, lead.source, " \xB7 ", lead.daysVacant, "d vacant")), /*#__PURE__*/React.createElement(ScoreRing, {
    score: lead.score
  }))), /*#__PURE__*/React.createElement("button", {
    className: "btn btn-ghost btn-sm mt-16 w-full",
    onClick: () => onNav("leads")
  }, "View All Leads \u2192")), /*#__PURE__*/React.createElement("div", {
    className: "card"
  }, /*#__PURE__*/React.createElement("div", {
    className: "card-title"
  }, "\uD83D\uDCCB Pipeline Status"), [{
    label: "Hot Leads",
    count: leads.filter(l => l.status === "Hot Lead").length,
    color: "#ff6b6b"
  }, {
    label: "Warm",
    count: leads.filter(l => l.status === "Warm").length,
    color: "#f0a500"
  }, {
    label: "Contacted",
    count: contacted,
    color: "#c8a96e"
  }, {
    label: "Pursuing",
    count: leads.filter(l => l.status === "Pursuing").length,
    color: "#4caf7a"
  }, {
    label: "Cold",
    count: leads.filter(l => l.status === "Cold").length,
    color: "#555"
  }].map(item => /*#__PURE__*/React.createElement("div", {
    key: item.label,
    style: {
      marginBottom: 14
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "flex justify-between items-center mb-8"
  }, /*#__PURE__*/React.createElement("span", {
    className: "text-sm"
  }, item.label), /*#__PURE__*/React.createElement("span", {
    style: {
      color: item.color,
      fontWeight: 600
    }
  }, item.count)), /*#__PURE__*/React.createElement("div", {
    className: "progress-bar"
  }, /*#__PURE__*/React.createElement("div", {
    className: "progress-fill",
    style: {
      width: `${item.count / leads.length * 100}%`,
      background: item.color
    }
  }))))), /*#__PURE__*/React.createElement("div", {
    className: "card"
  }, /*#__PURE__*/React.createElement("div", {
    className: "card-title"
  }, "\uD83D\uDDC2 Source Breakdown"), ["Tax Records", "Probate Court", "Code Violations", "MLS Expired"].map(src => {
    const count = leads.filter(l => l.source === src).length;
    return /*#__PURE__*/React.createElement("div", {
      key: src,
      className: "flex justify-between items-center",
      style: {
        padding: "10px 0",
        borderBottom: "1px solid #1e2230"
      }
    }, /*#__PURE__*/React.createElement(SourceBadge, {
      source: src
    }), /*#__PURE__*/React.createElement("span", {
      style: {
        fontFamily: "Syne",
        fontWeight: 700,
        color: "#c8a96e"
      }
    }, count));
  })), /*#__PURE__*/React.createElement("div", {
    className: "card"
  }, /*#__PURE__*/React.createElement("div", {
    className: "card-title"
  }, "\u26A1 Quick Actions"), /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      flexDirection: "column",
      gap: 10
    }
  }, /*#__PURE__*/React.createElement("button", {
    className: "btn btn-primary w-full",
    onClick: () => onNav("discover")
  }, "\uD83D\uDD0D Find New Properties"), /*#__PURE__*/React.createElement("button", {
    className: "btn btn-ghost w-full",
    onClick: () => onNav("outreach")
  }, "\u2709\uFE0F Send Outreach Campaign"), /*#__PURE__*/React.createElement("button", {
    className: "btn btn-ghost w-full",
    onClick: () => onNav("assess")
  }, "\uD83D\uDCCA Assess a Property"), /*#__PURE__*/React.createElement("a", {
    href: "https://proforma.tdgrm.com/app.html",
    target: "_blank",
    rel: "noreferrer",
    className: "btn btn-ghost w-full",
    style: {
      textAlign: "center",
      display: "block"
    }
  }, "\uD83D\uDCC8 Open ProForma Pro \u2197")))));
};

// Leads Page
const LeadsPage = ({
  leads,
  setLeads
}) => {
  const [filter, setFilter] = useState("All");
  const [selected, setSelected] = useState(null);
  const [search, setSearch] = useState("");
  const filtered = leads.filter(l => {
    if (filter !== "All" && l.status !== filter) return false;
    if (search && !l.address.toLowerCase().includes(search.toLowerCase()) && !l.owner.toLowerCase().includes(search.toLowerCase())) return false;
    return true;
  });
  const updateLead = (id, changes) => setLeads(prev => prev.map(l => l.id === id ? {
    ...l,
    ...changes
  } : l));
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "page-header flex justify-between items-center"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "page-title"
  }, "Lead Pipeline"), /*#__PURE__*/React.createElement("div", {
    className: "page-subtitle"
  }, leads.length, " total leads tracked")), /*#__PURE__*/React.createElement("button", {
    className: "btn btn-primary",
    onClick: () => setSelected({
      id: Date.now(),
      address: "",
      owner: "",
      ownerType: "Individual",
      estValue: 0,
      estRent: 0,
      daysVacant: 0,
      score: 50,
      status: "Warm",
      source: "Tax Records",
      contacted: false,
      equity: "Medium",
      mlsStatus: "Off-Market",
      lastContact: null,
      notes: "",
      _new: true
    })
  }, "+ Add Lead")), /*#__PURE__*/React.createElement("div", {
    className: "flex gap-12 mb-16 items-center"
  }, /*#__PURE__*/React.createElement("input", {
    className: "form-input",
    style: {
      maxWidth: 280
    },
    placeholder: "Search address or owner...",
    value: search,
    onChange: e => setSearch(e.target.value)
  }), /*#__PURE__*/React.createElement("div", {
    className: "tabs",
    style: {
      marginBottom: 0,
      borderBottom: "none"
    }
  }, ["All", "Hot Lead", "Warm", "Cold", "Pursuing", "Passed"].map(s => /*#__PURE__*/React.createElement("div", {
    key: s,
    className: `tab ${filter === s ? "active" : ""}`,
    onClick: () => setFilter(s)
  }, s)))), /*#__PURE__*/React.createElement("div", {
    className: "card",
    style: {
      padding: 0
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "table-wrap"
  }, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Score"), /*#__PURE__*/React.createElement("th", null, "Address"), /*#__PURE__*/React.createElement("th", null, "Owner"), /*#__PURE__*/React.createElement("th", null, "Est. Value"), /*#__PURE__*/React.createElement("th", null, "Days Vacant"), /*#__PURE__*/React.createElement("th", null, "Source"), /*#__PURE__*/React.createElement("th", null, "Status"), /*#__PURE__*/React.createElement("th", null, "Contacted"), /*#__PURE__*/React.createElement("th", null))), /*#__PURE__*/React.createElement("tbody", null, filtered.map(lead => /*#__PURE__*/React.createElement("tr", {
    key: lead.id
  }, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(ScoreRing, {
    score: lead.score
  })), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
    style: {
      fontWeight: 500,
      fontSize: 13
    }
  }, lead.address.split(",")[0]), /*#__PURE__*/React.createElement("div", {
    className: "text-xs"
  }, lead.address.split(",").slice(1).join(",").trim())), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 13
    }
  }, lead.owner), /*#__PURE__*/React.createElement("div", {
    className: "text-xs"
  }, lead.ownerType)), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: "Syne",
      fontWeight: 700,
      color: "#c8a96e"
    }
  }, "$", (lead.estValue / 1000).toFixed(0), "k"), /*#__PURE__*/React.createElement("div", {
    className: "text-xs"
  }, "~$", lead.estRent.toLocaleString(), "/mo rent")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", {
    style: {
      color: lead.daysVacant > 120 ? "#ff6b6b" : "#aaa"
    }
  }, lead.daysVacant, "d")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(SourceBadge, {
    source: lead.source
  })), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(StatusBadge, {
    status: lead.status
  })), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", {
    className: `badge ${lead.contacted ? "badge-green" : "badge-gray"}`
  }, lead.contacted ? "Yes" : "No")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("button", {
    className: "btn-icon",
    onClick: () => setSelected(lead)
  }, "\u270F\uFE0F")))))))), selected && /*#__PURE__*/React.createElement(LeadModal, {
    lead: selected,
    onClose: () => setSelected(null),
    onSave: data => {
      if (data._new) {
        const {
          _new,
          ...clean
        } = data;
        setLeads(prev => [...prev, clean]);
      } else {
        updateLead(data.id, data);
      }
      setSelected(null);
    },
    onDelete: id => {
      setLeads(prev => prev.filter(l => l.id !== id));
      setSelected(null);
    }
  }));
};
const LeadModal = ({
  lead,
  onClose,
  onSave,
  onDelete
}) => {
  const [form, setForm] = useState({
    ...lead
  });
  const set = (k, v) => setForm(f => ({
    ...f,
    [k]: v
  }));
  return /*#__PURE__*/React.createElement("div", {
    className: "modal-overlay",
    onClick: onClose
  }, /*#__PURE__*/React.createElement("div", {
    className: "modal",
    onClick: e => e.stopPropagation()
  }, /*#__PURE__*/React.createElement("div", {
    className: "modal-title"
  }, lead._new ? "Add New Lead" : "Edit Lead"), /*#__PURE__*/React.createElement("div", {
    className: "grid-2 gap-16"
  }, /*#__PURE__*/React.createElement("div", {
    className: "form-group",
    style: {
      gridColumn: "1 / -1"
    }
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Full Address"), /*#__PURE__*/React.createElement("input", {
    className: "form-input",
    value: form.address,
    onChange: e => set("address", e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Owner Name"), /*#__PURE__*/React.createElement("input", {
    className: "form-input",
    value: form.owner,
    onChange: e => set("owner", e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Owner Type"), /*#__PURE__*/React.createElement("select", {
    className: "form-select",
    value: form.ownerType,
    onChange: e => set("ownerType", e.target.value)
  }, ["Individual", "Entity", "Estate", "Trust"].map(o => /*#__PURE__*/React.createElement("option", {
    key: o
  }, o)))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Est. Value ($)"), /*#__PURE__*/React.createElement("input", {
    className: "form-input",
    type: "number",
    value: form.estValue,
    onChange: e => set("estValue", +e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Est. Monthly Rent ($)"), /*#__PURE__*/React.createElement("input", {
    className: "form-input",
    type: "number",
    value: form.estRent,
    onChange: e => set("estRent", +e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Days Vacant"), /*#__PURE__*/React.createElement("input", {
    className: "form-input",
    type: "number",
    value: form.daysVacant,
    onChange: e => set("daysVacant", +e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Source"), /*#__PURE__*/React.createElement("select", {
    className: "form-select",
    value: form.source,
    onChange: e => set("source", e.target.value)
  }, ["Tax Records", "Code Violations", "Probate Court", "MLS Expired", "Driving for Dollars", "Skip Trace"].map(o => /*#__PURE__*/React.createElement("option", {
    key: o
  }, o)))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Status"), /*#__PURE__*/React.createElement("select", {
    className: "form-select",
    value: form.status,
    onChange: e => set("status", e.target.value)
  }, ["Hot Lead", "Warm", "Cold", "Pursuing", "Passed"].map(o => /*#__PURE__*/React.createElement("option", {
    key: o
  }, o)))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Equity Level"), /*#__PURE__*/React.createElement("select", {
    className: "form-select",
    value: form.equity,
    onChange: e => set("equity", e.target.value)
  }, ["High", "Medium", "Low"].map(o => /*#__PURE__*/React.createElement("option", {
    key: o
  }, o)))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Score (0-100)"), /*#__PURE__*/React.createElement("input", {
    className: "form-input",
    type: "number",
    min: "0",
    max: "100",
    value: form.score,
    onChange: e => set("score", +e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group",
    style: {
      gridColumn: "1 / -1"
    }
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Notes"), /*#__PURE__*/React.createElement("textarea", {
    className: "form-textarea",
    value: form.notes,
    onChange: e => set("notes", e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Contacted?"), /*#__PURE__*/React.createElement("select", {
    className: "form-select",
    value: form.contacted ? "yes" : "no",
    onChange: e => set("contacted", e.target.value === "yes")
  }, /*#__PURE__*/React.createElement("option", {
    value: "no"
  }, "No"), /*#__PURE__*/React.createElement("option", {
    value: "yes"
  }, "Yes")))), /*#__PURE__*/React.createElement("div", {
    className: "modal-footer"
  }, !lead._new && /*#__PURE__*/React.createElement("button", {
    className: "btn btn-danger btn-sm",
    onClick: () => onDelete(lead.id)
  }, "Delete"), /*#__PURE__*/React.createElement("button", {
    className: "btn btn-ghost",
    onClick: onClose
  }, "Cancel"), /*#__PURE__*/React.createElement("button", {
    className: "btn btn-primary",
    onClick: () => onSave(form)
  }, "Save Lead"))));
};

// Discover Page
const DiscoverPage = ({
  leads,
  setLeads
}) => {
  const [tab, setTab] = useState("criteria");
  const [loading, setLoading] = useState(false);
  const [results, setResults] = useState([]);
  const [form, setForm] = useState({
    city: "Los Angeles",
    state: "CA",
    priceMin: 400000,
    priceMax: 1200000,
    propType: "Single Family",
    sources: ["Tax Records", "Probate Court"],
    daysVacantMin: 60,
    equityMin: "Medium"
  });
  const set = (k, v) => setForm(f => ({
    ...f,
    [k]: v
  }));
  const toggleSource = src => set("sources", form.sources.includes(src) ? form.sources.filter(s => s !== src) : [...form.sources, src]);
  const runSearch = async () => {
    setLoading(true);
    setTab("results");
    try {
      const prompt = `You are a real estate data analyst. Generate 6 realistic off-market property leads for a California investor searching for:
- City: ${form.city}, ${form.state}
- Price range: $${form.priceMin.toLocaleString()} - $${form.priceMax.toLocaleString()}
- Property type: ${form.propType}
- Sources: ${form.sources.join(", ")}
- Minimum days vacant: ${form.daysVacantMin}
- Minimum equity: ${form.equityMin}

Return JSON array of 6 properties, each with these exact fields:
id (number), address (string), owner (string), ownerType ("Individual"|"Entity"|"Estate"|"Trust"),
estValue (number), estRent (number), daysVacant (number), score (50-95),
status ("Hot Lead"|"Warm"|"Cold"), source (one of the requested sources),
equity ("High"|"Medium"|"Low"), mlsStatus ("Off-Market"|"Expired Listing"),
contacted (false), lastContact (null), notes (string — brief insight about why this is interesting)`;
      const data = await callClaudeJSON("You are a real estate data API. Return only JSON arrays.", prompt, 1500);
      if (data && Array.isArray(data)) {
        setResults(data.map(d => ({
          ...d,
          id: Date.now() + Math.random()
        })));
      }
    } finally {
      setLoading(false);
    }
  };
  const addToLeads = prop => {
    setLeads(prev => [...prev, prop]);
  };
  const existingAddresses = new Set(leads.map(l => l.address));
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "page-header"
  }, /*#__PURE__*/React.createElement("div", {
    className: "page-title"
  }, "Discover Properties"), /*#__PURE__*/React.createElement("div", {
    className: "page-subtitle"
  }, "AI-assisted off-market property discovery from multiple data sources")), /*#__PURE__*/React.createElement("div", {
    className: "tabs"
  }, ["criteria", "results"].map(t => /*#__PURE__*/React.createElement("div", {
    key: t,
    className: `tab ${tab === t ? "active" : ""}`,
    onClick: () => setTab(t)
  }, t === "criteria" ? "🔍 Search Criteria" : `📦 Results ${results.length ? `(${results.length})` : ""}`))), tab === "criteria" && /*#__PURE__*/React.createElement("div", {
    className: "grid-2 gap-24"
  }, /*#__PURE__*/React.createElement("div", {
    className: "card"
  }, /*#__PURE__*/React.createElement("div", {
    className: "card-title"
  }, "\uD83D\uDCCD Location & Property"), /*#__PURE__*/React.createElement("div", {
    className: "grid-2 gap-16"
  }, /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "City"), /*#__PURE__*/React.createElement("input", {
    className: "form-input",
    value: form.city,
    onChange: e => set("city", e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "State"), /*#__PURE__*/React.createElement("input", {
    className: "form-input",
    value: form.state,
    onChange: e => set("state", e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Min Price ($)"), /*#__PURE__*/React.createElement("input", {
    className: "form-input",
    type: "number",
    value: form.priceMin,
    onChange: e => set("priceMin", +e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Max Price ($)"), /*#__PURE__*/React.createElement("input", {
    className: "form-input",
    type: "number",
    value: form.priceMax,
    onChange: e => set("priceMax", +e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Property Type"), /*#__PURE__*/React.createElement("select", {
    className: "form-select",
    value: form.propType,
    onChange: e => set("propType", e.target.value)
  }, ["Single Family", "Multi-Family", "Condo", "Commercial", "Any"].map(o => /*#__PURE__*/React.createElement("option", {
    key: o
  }, o)))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Min Days Vacant"), /*#__PURE__*/React.createElement("input", {
    className: "form-input",
    type: "number",
    value: form.daysVacantMin,
    onChange: e => set("daysVacantMin", +e.target.value)
  })))), /*#__PURE__*/React.createElement("div", {
    className: "card"
  }, /*#__PURE__*/React.createElement("div", {
    className: "card-title"
  }, "\uD83D\uDCE1 Data Sources"), /*#__PURE__*/React.createElement("div", {
    style: {
      marginBottom: 16
    }
  }, ["Tax Records", "Code Violations", "Probate Court", "MLS Expired", "Driving for Dollars", "Skip Trace"].map(src => /*#__PURE__*/React.createElement("div", {
    key: src,
    className: "flex items-center gap-12",
    style: {
      padding: "10px 0",
      borderBottom: "1px solid #1e2230",
      cursor: "pointer"
    },
    onClick: () => toggleSource(src)
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      width: 18,
      height: 18,
      borderRadius: 4,
      border: `2px solid ${form.sources.includes(src) ? "#c8a96e" : "#333"}`,
      background: form.sources.includes(src) ? "#c8a96e" : "transparent",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      fontSize: 11,
      color: "#0a0c10",
      fontWeight: 700
    }
  }, form.sources.includes(src) ? "✓" : ""), /*#__PURE__*/React.createElement("span", {
    style: {
      fontSize: 14
    }
  }, src)))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Minimum Equity"), /*#__PURE__*/React.createElement("select", {
    className: "form-select",
    value: form.equityMin,
    onChange: e => set("equityMin", e.target.value)
  }, ["Low", "Medium", "High"].map(o => /*#__PURE__*/React.createElement("option", {
    key: o
  }, o)))), /*#__PURE__*/React.createElement("button", {
    className: "btn btn-primary w-full mt-16",
    onClick: runSearch,
    disabled: loading
  }, loading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
    className: "spinner"
  }), " Searching...") : "🔍 Find Off-Market Properties")), /*#__PURE__*/React.createElement("div", {
    className: "card",
    style: {
      gridColumn: "1 / -1"
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "card-title"
  }, "\uD83D\uDCA1 Free Data Sources Guide"), /*#__PURE__*/React.createElement("div", {
    className: "grid-3 gap-16"
  }, [{
    name: "County Assessor",
    desc: "Owner names, equity estimates, absentee owners",
    url: "assessor.lacounty.gov"
  }, {
    name: "Probate Court",
    desc: "Estate sales, heir-held properties",
    url: "lacourt.org"
  }, {
    name: "PACER / Court Records",
    desc: "Pre-foreclosure, lis pendens",
    url: "pacer.gov"
  }, {
    name: "MLS (via your license)",
    desc: "Expired, cancelled, withdrawn listings",
    url: "crmls.org"
  }, {
    name: "Code Enforcement",
    desc: "Properties with violations = motivated sellers",
    url: "portal.311.lacity.gov"
  }, {
    name: "USPS Vacancy Data",
    desc: "Long-term vacant residential addresses",
    url: "usps.com"
  }].map(s => /*#__PURE__*/React.createElement("div", {
    key: s.name,
    style: {
      background: "#0a0c10",
      borderRadius: 8,
      padding: 14,
      border: "1px solid #1e2230"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: "Syne",
      fontSize: 13,
      fontWeight: 700,
      color: "#c8a96e",
      marginBottom: 4
    }
  }, s.name), /*#__PURE__*/React.createElement("div", {
    className: "text-xs",
    style: {
      marginBottom: 8
    }
  }, s.desc), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 11,
      color: "#c8a96e66"
    }
  }, s.url)))))), tab === "results" && /*#__PURE__*/React.createElement("div", null, loading && /*#__PURE__*/React.createElement("div", {
    className: "card",
    style: {
      textAlign: "center",
      padding: 48
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "spinner",
    style: {
      width: 32,
      height: 32,
      borderWidth: 3,
      margin: "0 auto 16px"
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      color: "#c8a96e",
      fontFamily: "Syne",
      fontSize: 16
    }
  }, "Searching data sources..."), /*#__PURE__*/React.createElement("div", {
    className: "text-muted mt-16"
  }, "Scanning tax records, probate filings, and MLS data")), !loading && results.length === 0 && /*#__PURE__*/React.createElement("div", {
    className: "card",
    style: {
      textAlign: "center",
      padding: 48
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 40,
      marginBottom: 12
    }
  }, "\uD83D\uDD0D"), /*#__PURE__*/React.createElement("div", {
    style: {
      color: "#666"
    }
  }, "Run a search to discover off-market leads")), !loading && results.length > 0 && /*#__PURE__*/React.createElement("div", {
    style: {
      display: "flex",
      flexDirection: "column",
      gap: 12
    }
  }, results.map(prop => {
    const alreadyAdded = existingAddresses.has(prop.address);
    return /*#__PURE__*/React.createElement("div", {
      className: "card",
      key: prop.id,
      style: {
        display: "flex",
        justifyContent: "space-between",
        alignItems: "flex-start",
        gap: 24
      }
    }, /*#__PURE__*/React.createElement("div", {
      className: "flex gap-16 items-center"
    }, /*#__PURE__*/React.createElement(ScoreRing, {
      score: prop.score
    }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      style: {
        fontWeight: 600,
        fontSize: 15
      }
    }, prop.address), /*#__PURE__*/React.createElement("div", {
      className: "text-xs",
      style: {
        margin: "4px 0"
      }
    }, prop.owner, " \xB7 ", prop.ownerType), /*#__PURE__*/React.createElement("div", {
      className: "wrap-gap"
    }, /*#__PURE__*/React.createElement(SourceBadge, {
      source: prop.source
    }), /*#__PURE__*/React.createElement(StatusBadge, {
      status: prop.status
    }), /*#__PURE__*/React.createElement("span", {
      className: "badge badge-purple"
    }, prop.daysVacant, "d vacant")), prop.notes && /*#__PURE__*/React.createElement("div", {
      style: {
        marginTop: 8,
        fontSize: 12,
        color: "#888",
        fontStyle: "italic"
      }
    }, "\"", prop.notes, "\""))), /*#__PURE__*/React.createElement("div", {
      style: {
        textAlign: "right",
        minWidth: 160
      }
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        fontFamily: "Syne",
        fontSize: 22,
        fontWeight: 800,
        color: "#c8a96e"
      }
    }, "$", (prop.estValue / 1000).toFixed(0), "k"), /*#__PURE__*/React.createElement("div", {
      className: "text-xs"
    }, "$", prop.estRent.toLocaleString(), "/mo est. rent"), /*#__PURE__*/React.createElement("div", {
      style: {
        marginTop: 12
      }
    }, alreadyAdded ? /*#__PURE__*/React.createElement("span", {
      className: "badge badge-green"
    }, "Added \u2713") : /*#__PURE__*/React.createElement("button", {
      className: "btn btn-primary btn-sm",
      onClick: () => addToLeads(prop)
    }, "+ Add to Pipeline"))));
  }))));
};

// Outreach Page
const OutreachPage = ({
  leads,
  setLeads
}) => {
  const [selectedLead, setSelectedLead] = useState(leads[0]);
  const [template, setTemplate] = useState("email_warm");
  const [channel, setChannel] = useState("email");
  const [customMsg, setCustomMsg] = useState("");
  const [recipientEmail, setRecipientEmail] = useState("");
  const [loading, setLoading] = useState(false);
  const [sending, setSending] = useState(false);
  const [generated, setGenerated] = useState("");
  const [generatedSubject, setGeneratedSubject] = useState("");
  const [sent, setSent] = useState([]);
  const [sendStatus, setSendStatus] = useState(null); // {type: "success"|"error", msg: string}

  const hotLeads = leads.filter(l => !l.contacted);
  const fillTemplate = (tmpl, lead) => {
    return tmpl.replace(/{address}/g, lead.address.split(",")[0]).replace(/{owner}/g, lead.owner.split(" ")[0]);
  };
  const generatePersonalized = async () => {
    if (!selectedLead) return;
    setLoading(true);
    setSendStatus(null);
    try {
      const prompt = `Write a personalized ${channel === "text" ? "SMS" : "email"} to reach out about purchasing the property at ${selectedLead.address}.

Property details:
- Owner: ${selectedLead.owner} (${selectedLead.ownerType})
- Est. Value: $${selectedLead.estValue.toLocaleString()}
- Days Vacant: ${selectedLead.daysVacant}
- Source of lead: ${selectedLead.source}
- Notes: ${selectedLead.notes || "None"}

The sender is Bernard Dillard, Sr., a California licensed real estate agent at Coldwell Banker Exclusive representing a private investment group (TDG Investment Group).
Tone: professional but warm, not pushy.
${channel === "text" ? "Keep it under 160 characters if possible." : "Include subject line on FIRST LINE prefixed exactly with 'SUBJECT: ' then a blank line, then the email body. Do NOT include a signature — it will be added automatically."}
${customMsg ? `Additional context from agent: ${customMsg}` : ""}`;
      const text = await callClaude("You write compelling real estate outreach messages. Be genuine and concise.", prompt, 600);
      if (channel === "email") {
        const lines = text.split("\n");
        const subjectLine = lines.find(l => l.startsWith("SUBJECT:"));
        const subject = subjectLine ? subjectLine.replace("SUBJECT:", "").trim() : `Regarding your property at ${selectedLead.address.split(",")[0]}`;
        const body = lines.filter(l => !l.startsWith("SUBJECT:")).join("\n").trim();
        setGeneratedSubject(subject);
        setGenerated(body);
      } else {
        setGenerated(text);
        setGeneratedSubject("");
      }
    } finally {
      setLoading(false);
    }
  };
  const handleSendEmail = async () => {
    if (!selectedLead || !generated) return;
    if (!recipientEmail || !recipientEmail.includes("@")) {
      setSendStatus({
        type: "error",
        msg: "Please enter a valid recipient email address."
      });
      return;
    }
    // API key secured server-side
    setSending(true);
    setSendStatus(null);
    try {
      await sendEmail({
        toEmail: recipientEmail,
        toName: selectedLead.owner,
        subject: generatedSubject || `Regarding your property at ${selectedLead.address.split(",")[0]}`,
        body: generated
      });
      setSendStatus({
        type: "success",
        msg: `✅ Email sent successfully to ${recipientEmail}`
      });
      setSent(prev => [...prev, {
        lead: selectedLead,
        channel: "email",
        to: recipientEmail,
        subject: generatedSubject,
        time: new Date().toLocaleTimeString(),
        status: "Delivered"
      }]);
      // Mark lead as contacted
      setLeads(prev => prev.map(l => l.id === selectedLead.id ? {
        ...l,
        contacted: true,
        lastContact: new Date().toISOString().split("T")[0]
      } : l));
    } catch (err) {
      setSendStatus({
        type: "error",
        msg: `❌ Failed to send: ${err.message}`
      });
    } finally {
      setSending(false);
    }
  };
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "page-header"
  }, /*#__PURE__*/React.createElement("div", {
    className: "page-title"
  }, "Outreach Center"), /*#__PURE__*/React.createElement("div", {
    className: "page-subtitle"
  }, "Send real emails via SendGrid \xB7 From: ", AGENT.email)), /*#__PURE__*/React.createElement("div", {
    className: "grid-2 gap-24"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "card mb-16"
  }, /*#__PURE__*/React.createElement("div", {
    className: "card-title"
  }, "\uD83C\uDFAF Select Lead"), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Property / Owner"), /*#__PURE__*/React.createElement("select", {
    className: "form-select",
    onChange: e => {
      setSelectedLead(leads.find(l => l.id === +e.target.value));
      setGenerated("");
      setSendStatus(null);
    }
  }, hotLeads.map(l => /*#__PURE__*/React.createElement("option", {
    key: l.id,
    value: l.id
  }, l.address.split(",")[0], " \u2014 ", l.owner)))), selectedLead && /*#__PURE__*/React.createElement("div", {
    style: {
      background: "#0a0c10",
      borderRadius: 8,
      padding: 14,
      border: "1px solid #1e2230"
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "flex justify-between items-center mb-8"
  }, /*#__PURE__*/React.createElement(StatusBadge, {
    status: selectedLead.status
  }), /*#__PURE__*/React.createElement(ScoreRing, {
    score: selectedLead.score
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 13,
      marginBottom: 4
    }
  }, selectedLead.owner, " \xB7 ", selectedLead.ownerType), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 12,
      color: "#666"
    }
  }, "Source: ", selectedLead.source, " \xB7 ", selectedLead.daysVacant, " days vacant"), selectedLead.notes && /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 6,
      fontSize: 12,
      color: "#888",
      fontStyle: "italic"
    }
  }, "\"", selectedLead.notes, "\""))), /*#__PURE__*/React.createElement("div", {
    className: "card"
  }, /*#__PURE__*/React.createElement("div", {
    className: "card-title"
  }, "\uD83D\uDCEC Message Settings"), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Channel"), /*#__PURE__*/React.createElement("div", {
    className: "flex gap-12"
  }, [{
    v: "email",
    label: "✉️ Email"
  }, {
    v: "text",
    label: "📱 SMS"
  }].map(c => /*#__PURE__*/React.createElement("button", {
    key: c.v,
    className: `btn ${channel === c.v ? "btn-primary" : "btn-ghost"} w-full`,
    onClick: () => {
      setChannel(c.v);
      setGenerated("");
      setSendStatus(null);
    }
  }, c.label)))), channel === "email" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Template Style"), /*#__PURE__*/React.createElement("select", {
    className: "form-select",
    value: template,
    onChange: e => setTemplate(e.target.value)
  }, Object.entries(OUTREACH_TEMPLATES).filter(([k]) => !k.startsWith("text")).map(([k, v]) => /*#__PURE__*/React.createElement("option", {
    key: k,
    value: k
  }, v.label)))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Recipient Email Address *"), /*#__PURE__*/React.createElement("input", {
    className: "form-input",
    type: "email",
    placeholder: "owner@email.com",
    value: recipientEmail,
    onChange: e => setRecipientEmail(e.target.value)
  }))), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Additional Context (optional)"), /*#__PURE__*/React.createElement("textarea", {
    className: "form-textarea",
    style: {
      minHeight: 70
    },
    placeholder: "E.g. 'Owner recently listed it as rental \u2014 mention flexibility'",
    value: customMsg,
    onChange: e => setCustomMsg(e.target.value)
  })), /*#__PURE__*/React.createElement("button", {
    className: "btn btn-primary w-full",
    onClick: generatePersonalized,
    disabled: loading || !selectedLead
  }, loading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
    className: "spinner"
  }), " Generating...") : "✨ Generate AI Message"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "card mb-16"
  }, /*#__PURE__*/React.createElement("div", {
    className: "card-title"
  }, "\uD83D\uDCDD Message Preview"), !generated && !loading && /*#__PURE__*/React.createElement("div", {
    style: {
      textAlign: "center",
      padding: "32px 0"
    }
  }, channel === "email" ? /*#__PURE__*/React.createElement("div", {
    style: {
      whiteSpace: "pre-wrap",
      fontSize: 13,
      lineHeight: 1.6,
      color: "#555"
    }
  }, fillTemplate(OUTREACH_TEMPLATES[template].body, selectedLead || leads[0])) : /*#__PURE__*/React.createElement("div", {
    style: {
      color: "#555"
    }
  }, "Click \"Generate AI Message\" for a personalized SMS")), loading && /*#__PURE__*/React.createElement("div", {
    style: {
      textAlign: "center",
      padding: 32
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "spinner",
    style: {
      width: 24,
      height: 24,
      margin: "0 auto 8px"
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "text-muted"
  }, "Personalizing message...")), generated && !loading && /*#__PURE__*/React.createElement("div", null, generatedSubject && /*#__PURE__*/React.createElement("div", {
    style: {
      background: "#141720",
      borderRadius: "8px 8px 0 0",
      padding: "10px 16px",
      borderBottom: "1px solid #2a2e3a",
      fontSize: 12,
      color: "#c8a96e"
    }
  }, /*#__PURE__*/React.createElement("strong", null, "Subject:"), " ", generatedSubject), /*#__PURE__*/React.createElement("div", {
    style: {
      whiteSpace: "pre-wrap",
      fontSize: 13,
      lineHeight: 1.7,
      color: "#e0ddd6",
      background: "#0a0c10",
      borderRadius: generatedSubject ? "0 0 8px 8px" : 8,
      padding: 16,
      border: "1px solid #1e2230"
    }
  }, generated), /*#__PURE__*/React.createElement("div", {
    style: {
      marginTop: 8,
      padding: "10px 12px",
      background: "#141720",
      borderRadius: 8,
      border: "1px solid #1e2230",
      fontSize: 11,
      color: "#666"
    }
  }, "\u270D\uFE0F Signature auto-appended: ", AGENT.name, " \xB7 ", AGENT.brokerage, " \xB7 ", AGENT.phone))), sendStatus && /*#__PURE__*/React.createElement("div", {
    style: {
      padding: "12px 16px",
      borderRadius: 8,
      marginBottom: 12,
      background: sendStatus.type === "success" ? "#1a3a28" : "#3a1010",
      border: `1px solid ${sendStatus.type === "success" ? "#4caf7a" : "#ff6b6b"}`,
      color: sendStatus.type === "success" ? "#4caf7a" : "#ff6b6b",
      fontSize: 13
    }
  }, sendStatus.msg), /*#__PURE__*/React.createElement("div", {
    className: "flex gap-12 mb-24"
  }, channel === "email" ? /*#__PURE__*/React.createElement("button", {
    className: "btn btn-primary w-full",
    disabled: !selectedLead || !generated || sending,
    onClick: handleSendEmail
  }, sending ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
    className: "spinner"
  }), " Sending via SendGrid...") : "✉️ Send via SendGrid") : /*#__PURE__*/React.createElement("button", {
    className: "btn btn-primary w-full",
    disabled: !selectedLead,
    onClick: () => setSendStatus({
      type: "success",
      msg: "📱 SMS copied — paste into your messaging app"
    })
  }, "\uD83D\uDCF1 Copy SMS"), /*#__PURE__*/React.createElement("button", {
    className: "btn btn-ghost",
    onClick: () => {
      navigator.clipboard.writeText(generated || fillTemplate(OUTREACH_TEMPLATES[template].body, selectedLead || leads[0]));
      setSendStatus({
        type: "success",
        msg: "📋 Copied to clipboard"
      });
    }
  }, "\uD83D\uDCCB Copy")), sent.length > 0 && /*#__PURE__*/React.createElement("div", {
    className: "card"
  }, /*#__PURE__*/React.createElement("div", {
    className: "card-title"
  }, "\uD83D\uDCE4 Sent Log"), sent.slice(-8).reverse().map((s, i) => /*#__PURE__*/React.createElement("div", {
    key: i,
    style: {
      padding: "10px 0",
      borderBottom: "1px solid #1e2230",
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center"
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 13,
      fontWeight: 500
    }
  }, s.lead.address.split(",")[0]), /*#__PURE__*/React.createElement("div", {
    className: "text-xs"
  }, s.lead.owner, " \xB7 ", s.to), s.subject && /*#__PURE__*/React.createElement("div", {
    className: "text-xs",
    style: {
      color: "#c8a96e66"
    }
  }, "\"", s.subject, "\"")), /*#__PURE__*/React.createElement("div", {
    style: {
      textAlign: "right"
    }
  }, /*#__PURE__*/React.createElement("span", {
    className: "badge badge-green"
  }, s.status), /*#__PURE__*/React.createElement("div", {
    className: "text-xs",
    style: {
      marginTop: 4
    }
  }, s.time))))))));
};

// Assess Page
const AssessPage = ({
  leads
}) => {
  const [address, setAddress] = useState("");
  const [quickPick, setQuickPick] = useState("");
  const [loading, setLoading] = useState(false);
  const [report, setReport] = useState(null);
  const [chatMsgs, setChatMsgs] = useState([]);
  const [chatInput, setChatInput] = useState("");
  const [chatLoading, setChatLoading] = useState(false);
  const chatRef = useRef(null);
  const runAssessment = async () => {
    const addr = address || quickPick;
    if (!addr) return;
    setLoading(true);
    setReport(null);
    setChatMsgs([]);
    try {
      const lead = leads.find(l => l.address.includes(addr.split(",")[0]));
      const prompt = `Perform a detailed investment property assessment for: ${addr}
${lead ? `Known data: Est. Value $${lead.estValue.toLocaleString()}, Est. Rent $${lead.estRent}/mo, Equity: ${lead.equity}, Days Vacant: ${lead.daysVacant}, Source: ${lead.source}` : ""}

Return JSON with these exact fields:
- address (string)
- investmentScore (0-100)
- recommendation ("Pursue"|"Watch"|"Pass")
- estimatedValue (number)
- arv (number — after repair value)
- estimatedRent (number per month)
- capRate (number — percentage)
- cashOnCash (number — percentage at 25% down)
- grossYield (number — percentage)
- rehabEstimate (number — estimated renovation cost)
- maxOffer (number — 70% rule max offer)
- marketTrend ("Rising"|"Stable"|"Declining")
- vacancyRate (number — local area percentage)
- pros (array of 3-4 strings)
- cons (array of 2-3 strings)
- redFlags (array of 0-2 strings, empty if none)
- summary (string — 2-3 sentence investment narrative)
- exitStrategies (array of strings: Buy & Hold, BRRRR, Fix & Flip, etc)`;
      const data = await callClaudeJSON("You are a senior California real estate investment analyst. Return only JSON.", prompt, 1200);
      setReport(data);
      setChatMsgs([{
        role: "ai",
        text: `I've analyzed ${addr}. Investment score: ${data?.investmentScore}/100 — ${data?.recommendation}. Ask me anything about this deal!`
      }]);
    } finally {
      setLoading(false);
    }
  };
  const sendChat = async () => {
    if (!chatInput.trim() || !report) return;
    const userMsg = chatInput;
    setChatInput("");
    setChatMsgs(prev => [...prev, {
      role: "user",
      text: userMsg
    }]);
    setChatLoading(true);
    try {
      const context = `Property: ${report.address}. Score: ${report.investmentScore}. ARV: $${report.arv?.toLocaleString()}. Max Offer: $${report.maxOffer?.toLocaleString()}. Cap Rate: ${report.capRate}%. Summary: ${report.summary}`;
      const reply = await callClaude(`You are a real estate investment advisor. Property context: ${context}. Be concise and direct.`, userMsg, 400);
      setChatMsgs(prev => [...prev, {
        role: "ai",
        text: reply
      }]);
    } finally {
      setChatLoading(false);
      setTimeout(() => chatRef.current?.scrollTo(0, 99999), 100);
    }
  };
  const fmtDollar = n => n ? `$${Number(n).toLocaleString()}` : "N/A";
  const fmtPct = n => n ? `${Number(n).toFixed(1)}%` : "N/A";
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "page-header"
  }, /*#__PURE__*/React.createElement("div", {
    className: "page-title"
  }, "Property Assessment"), /*#__PURE__*/React.createElement("div", {
    className: "page-subtitle"
  }, "AI-powered deal analysis and investment scoring")), /*#__PURE__*/React.createElement("div", {
    className: "card mb-24"
  }, /*#__PURE__*/React.createElement("div", {
    className: "card-title"
  }, "\uD83C\uDFE0 Select or Enter Property"), /*#__PURE__*/React.createElement("div", {
    className: "grid-2 gap-16"
  }, /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Enter Address Manually"), /*#__PURE__*/React.createElement("input", {
    className: "form-input",
    placeholder: "123 Main St, Los Angeles, CA 90001",
    value: address,
    onChange: e => setAddress(e.target.value)
  })), /*#__PURE__*/React.createElement("div", {
    className: "form-group"
  }, /*#__PURE__*/React.createElement("label", {
    className: "form-label"
  }, "Or Pick from Pipeline"), /*#__PURE__*/React.createElement("select", {
    className: "form-select",
    value: quickPick,
    onChange: e => {
      setQuickPick(e.target.value);
      setAddress("");
    }
  }, /*#__PURE__*/React.createElement("option", {
    value: ""
  }, "\u2014 Select a lead \u2014"), leads.map(l => /*#__PURE__*/React.createElement("option", {
    key: l.id,
    value: l.address
  }, l.address.split(",")[0], " (Score: ", l.score, ")"))))), /*#__PURE__*/React.createElement("div", {
    className: "flex gap-12"
  }, /*#__PURE__*/React.createElement("button", {
    className: "btn btn-primary",
    onClick: runAssessment,
    disabled: loading || !address && !quickPick
  }, loading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
    className: "spinner"
  }), " Analyzing...") : "📊 Run Assessment"), report && /*#__PURE__*/React.createElement("a", {
    href: `https://proforma.tdgrm.com/app.html`,
    target: "_blank",
    rel: "noreferrer",
    className: "btn btn-ghost"
  }, "Open in ProForma Pro \u2197"))), loading && /*#__PURE__*/React.createElement("div", {
    className: "card",
    style: {
      textAlign: "center",
      padding: 48
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "spinner",
    style: {
      width: 40,
      height: 40,
      borderWidth: 4,
      margin: "0 auto 16px"
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: "Syne",
      fontSize: 18,
      color: "#c8a96e"
    }
  }, "Running Full Investment Analysis..."), /*#__PURE__*/React.createElement("div", {
    className: "text-muted mt-16"
  }, "Pulling comps, estimating rents, calculating returns")), report && !loading && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "card mb-16",
    style: {
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center"
    }
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: "Syne",
      fontSize: 20,
      fontWeight: 800,
      color: "#f0ede6"
    }
  }, report.address), /*#__PURE__*/React.createElement("div", {
    className: "wrap-gap mt-16"
  }, /*#__PURE__*/React.createElement("span", {
    className: `badge ${report.recommendation === "Pursue" ? "badge-green" : report.recommendation === "Watch" ? "badge-yellow" : "badge-red"}`
  }, report.recommendation), /*#__PURE__*/React.createElement("span", {
    className: `badge ${report.marketTrend === "Rising" ? "badge-green" : report.marketTrend === "Stable" ? "badge-blue" : "badge-red"}`
  }, "Market: ", report.marketTrend), (report.exitStrategies || []).map(e => /*#__PURE__*/React.createElement("span", {
    key: e,
    className: "badge badge-purple"
  }, e)))), /*#__PURE__*/React.createElement("div", {
    style: {
      textAlign: "right"
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontFamily: "Syne",
      fontSize: 52,
      fontWeight: 900,
      color: report.investmentScore >= 80 ? "#4caf7a" : report.investmentScore >= 60 ? "#f0a500" : "#ff6b6b",
      lineHeight: 1
    }
  }, report.investmentScore), /*#__PURE__*/React.createElement("div", {
    className: "text-xs"
  }, "Investment Score"))), /*#__PURE__*/React.createElement("div", {
    className: "grid-4 gap-16 mb-16"
  }, [{
    label: "Est. Value",
    value: fmtDollar(report.estimatedValue)
  }, {
    label: "ARV",
    value: fmtDollar(report.arv)
  }, {
    label: "Max Offer (70%)",
    value: fmtDollar(report.maxOffer)
  }, {
    label: "Rehab Est.",
    value: fmtDollar(report.rehabEstimate)
  }, {
    label: "Monthly Rent",
    value: fmtDollar(report.estimatedRent)
  }, {
    label: "Cap Rate",
    value: fmtPct(report.capRate)
  }, {
    label: "Cash-on-Cash",
    value: fmtPct(report.cashOnCash)
  }, {
    label: "Gross Yield",
    value: fmtPct(report.grossYield)
  }].map(m => /*#__PURE__*/React.createElement("div", {
    className: "stat-card",
    key: m.label
  }, /*#__PURE__*/React.createElement("div", {
    className: "stat-value",
    style: {
      fontSize: 22
    }
  }, m.value), /*#__PURE__*/React.createElement("div", {
    className: "stat-label"
  }, m.label)))), /*#__PURE__*/React.createElement("div", {
    className: "grid-2 gap-16 mb-16"
  }, /*#__PURE__*/React.createElement("div", {
    className: "card"
  }, /*#__PURE__*/React.createElement("div", {
    className: "card-title",
    style: {
      color: "#4caf7a"
    }
  }, "\u2705 Pros"), (report.pros || []).map((p, i) => /*#__PURE__*/React.createElement("div", {
    key: i,
    style: {
      padding: "8px 0",
      borderBottom: "1px solid #1e2230",
      fontSize: 13
    }
  }, "+ ", p))), /*#__PURE__*/React.createElement("div", {
    className: "card"
  }, /*#__PURE__*/React.createElement("div", {
    className: "card-title",
    style: {
      color: "#ff6b6b"
    }
  }, "\u274C Cons & Red Flags"), (report.cons || []).map((c, i) => /*#__PURE__*/React.createElement("div", {
    key: i,
    style: {
      padding: "8px 0",
      borderBottom: "1px solid #1e2230",
      fontSize: 13,
      color: "#ccc"
    }
  }, "\u2212 ", c)), (report.redFlags || []).map((r, i) => /*#__PURE__*/React.createElement("div", {
    key: i,
    style: {
      padding: "8px 0",
      borderBottom: "1px solid #1e2230",
      fontSize: 13,
      color: "#ff6b6b",
      fontWeight: 600
    }
  }, "\u26A0\uFE0F ", r)))), report.summary && /*#__PURE__*/React.createElement("div", {
    className: "card mb-16"
  }, /*#__PURE__*/React.createElement("div", {
    className: "card-title"
  }, "\uD83D\uDCCB Summary"), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: 14,
      lineHeight: 1.7,
      color: "#ccc"
    }
  }, report.summary)), /*#__PURE__*/React.createElement("div", {
    className: "card"
  }, /*#__PURE__*/React.createElement("div", {
    className: "card-title"
  }, "\uD83E\uDD16 Ask AI About This Deal"), /*#__PURE__*/React.createElement("div", {
    className: "chat-wrap",
    ref: chatRef
  }, chatMsgs.map((m, i) => /*#__PURE__*/React.createElement("div", {
    key: i,
    className: `chat-msg ${m.role}`
  }, /*#__PURE__*/React.createElement("div", {
    className: "msg-role"
  }, m.role === "ai" ? "Deal Advisor" : "You"), /*#__PURE__*/React.createElement("div", {
    className: "bubble"
  }, m.text))), chatLoading && /*#__PURE__*/React.createElement("div", {
    className: "chat-msg ai"
  }, /*#__PURE__*/React.createElement("div", {
    className: "bubble"
  }, /*#__PURE__*/React.createElement("span", {
    className: "spinner"
  })))), /*#__PURE__*/React.createElement("div", {
    className: "flex gap-12"
  }, /*#__PURE__*/React.createElement("input", {
    className: "form-input",
    placeholder: "Ask about ROI, financing, rehab scope, exit strategy...",
    value: chatInput,
    onChange: e => setChatInput(e.target.value),
    onKeyDown: e => e.key === "Enter" && sendChat()
  }), /*#__PURE__*/React.createElement("button", {
    className: "btn btn-primary",
    onClick: sendChat,
    disabled: chatLoading
  }, "Send")))));
};

// Settings Page
const SettingsPage = () => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
  className: "page-header"
}, /*#__PURE__*/React.createElement("div", {
  className: "page-title"
}, "Settings & Integrations"), /*#__PURE__*/React.createElement("div", {
  className: "page-subtitle"
}, "Configure your off-market hunting pipeline")), /*#__PURE__*/React.createElement("div", {
  className: "grid-2 gap-24"
}, /*#__PURE__*/React.createElement("div", {
  className: "card"
}, /*#__PURE__*/React.createElement("div", {
  className: "card-title"
}, "\uD83D\uDC64 Agent Profile"), ["Your Name", "License Number", "Brokerage", "Email", "Phone"].map(f => /*#__PURE__*/React.createElement("div", {
  className: "form-group",
  key: f
}, /*#__PURE__*/React.createElement("label", {
  className: "form-label"
}, f), /*#__PURE__*/React.createElement("input", {
  className: "form-input",
  placeholder: `Enter ${f.toLowerCase()}`
}))), /*#__PURE__*/React.createElement("button", {
  className: "btn btn-primary"
}, "Save Profile")), /*#__PURE__*/React.createElement("div", {
  className: "card"
}, /*#__PURE__*/React.createElement("div", {
  className: "card-title"
}, "\uD83D\uDD0C Integrations"), [{
  name: "CRMLS / MLS Access",
  status: "Connect",
  note: "Pull expired & cancelled listings"
}, {
  name: "SendGrid Email",
  status: "Connect",
  note: "Send outreach emails in bulk"
}, {
  name: "Twilio SMS",
  status: "Connect",
  note: "Send text outreach"
}, {
  name: "TDG ProForma Pro",
  status: "Connected ✓",
  note: "Deal analysis platform",
  url: "https://proforma.tdgrm.com"
}, {
  name: "Skip Tracing API",
  status: "Connect",
  note: "Find owner contact info"
}, {
  name: "PropStream / BatchLeads",
  status: "Connect",
  note: "Premium property data"
}].map(i => /*#__PURE__*/React.createElement("div", {
  key: i.name,
  className: "flex justify-between items-center",
  style: {
    padding: "12px 0",
    borderBottom: "1px solid #1e2230"
  }
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
  style: {
    fontSize: 14,
    fontWeight: 500
  }
}, i.name), /*#__PURE__*/React.createElement("div", {
  className: "text-xs"
}, i.note)), i.url ? /*#__PURE__*/React.createElement("a", {
  href: i.url,
  target: "_blank",
  rel: "noreferrer",
  className: "btn btn-primary btn-sm"
}, i.status) : /*#__PURE__*/React.createElement("button", {
  className: "btn btn-ghost btn-sm"
}, i.status))))));

// ─── App Shell ─────────────────────────────────────────────────────────────────
function App() {
  const [page, setPage] = useState("dashboard");
  const [leads, setLeads] = useState(INITIAL_LEADS);
  const nav = [{
    id: "dashboard",
    icon: "⚡",
    label: "Dashboard"
  }, {
    id: "discover",
    icon: "🔍",
    label: "Discover"
  }, {
    id: "leads",
    icon: "📋",
    label: "Pipeline",
    badge: leads.filter(l => l.score >= 80).length
  }, {
    id: "outreach",
    icon: "✉️",
    label: "Outreach"
  }, {
    id: "assess",
    icon: "📊",
    label: "Assess"
  }, {
    id: "settings",
    icon: "⚙️",
    label: "Settings"
  }];
  const pages = {
    dashboard: /*#__PURE__*/React.createElement(Dashboard, {
      leads: leads,
      onNav: setPage
    }),
    discover: /*#__PURE__*/React.createElement(DiscoverPage, {
      leads: leads,
      setLeads: setLeads
    }),
    leads: /*#__PURE__*/React.createElement(LeadsPage, {
      leads: leads,
      setLeads: setLeads
    }),
    outreach: /*#__PURE__*/React.createElement(OutreachPage, {
      leads: leads
    }),
    assess: /*#__PURE__*/React.createElement(AssessPage, {
      leads: leads
    }),
    settings: /*#__PURE__*/React.createElement(SettingsPage, null)
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, styles), /*#__PURE__*/React.createElement("div", {
    className: "app"
  }, /*#__PURE__*/React.createElement("div", {
    className: "sidebar"
  }, /*#__PURE__*/React.createElement("div", {
    className: "logo"
  }, /*#__PURE__*/React.createElement("div", {
    className: "logo-text"
  }, "TDG OffMarket"), /*#__PURE__*/React.createElement("div", {
    className: "logo-sub"
  }, "Deal Hunter Pro")), /*#__PURE__*/React.createElement("nav", {
    className: "nav"
  }, nav.map(n => /*#__PURE__*/React.createElement("div", {
    key: n.id,
    className: `nav-item ${page === n.id ? "active" : ""}`,
    onClick: () => setPage(n.id)
  }, /*#__PURE__*/React.createElement("span", {
    className: "icon"
  }, n.icon), n.label, n.badge ? /*#__PURE__*/React.createElement("span", {
    className: "nav-badge"
  }, n.badge) : null))), /*#__PURE__*/React.createElement("div", {
    style: {
      padding: "16px 20px",
      borderTop: "1px solid #1e2230"
    }
  }, /*#__PURE__*/React.createElement("a", {
    href: "https://proforma.tdgrm.com/app.html",
    target: "_blank",
    rel: "noreferrer",
    style: {
      display: "block",
      textAlign: "center",
      padding: "10px",
      background: "#c8a96e22",
      border: "1px solid #c8a96e44",
      borderRadius: 8,
      color: "#c8a96e",
      fontSize: 12,
      fontWeight: 600,
      textDecoration: "none"
    }
  }, "\uD83D\uDCC8 ProForma Pro \u2197"))), /*#__PURE__*/React.createElement("main", {
    className: "main"
  }, pages[page])));
}
ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));  </script>
</body>
</html>

  /* ─── Logo ──────────────────────────────────────────────────────────────────── */
  .logo-img {
    width: 140px;
    height: auto;
    display: block;
    margin-bottom: 6px;
    object-fit: contain;
  }

  /* ─── Mobile header & nav ────────────────────────────────────────────────────── */
  .mobile-header {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: #0f1117;
    border-bottom: 1px solid #1e2230;
    align-items: center;
    padding: 0 16px;
    gap: 10px;
    z-index: 200;
  }
  .mobile-header-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
  }
  .mobile-header-title {
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #c8a96e;
  }
  .mobile-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #0f1117;
    border-top: 1px solid #1e2230;
    z-index: 200;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-nav-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 56px;
  }
  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: #666;
    cursor: pointer;
    padding: 6px 12px;
    position: relative;
  }
  .mobile-nav-item.active { color: #c8a96e; }
  .mobile-nav-item .icon { font-size: 18px; }
  .mobile-nav-badge {
    position: absolute;
    top: 2px; right: 6px;
    background: #c8a96e;
    color: #0a0c10;
    font-size: 9px;
    font-weight: 700;
    width: 16px; height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media (max-width: 768px) {
    .sidebar { display: none; }
    .mobile-header { display: flex; }
    .mobile-nav { display: block; }
    .main { margin-left: 0; padding: 72px 16px 72px; }
  }