// locator-forge — Amira's locator console + ReadyToRent.app wizard
// Single Worker, D1-backed. Phone-first console at /console, public wizard at /

const ADMIN_PASSWORD = 'amira2026'; // simple gate v1, OTP later

const uid = () => crypto.randomUUID();
const json = (d, s = 200) => new Response(JSON.stringify(d), { status: s, headers: { 'content-type': 'application/json' } });
const html = (s) => new Response(s, { headers: { 'content-type': 'text/html; charset=utf-8' } });

const checkAuth = (req) => {
  const c = req.headers.get('cookie') || '';
  return c.includes(`lf_auth=${ADMIN_PASSWORD}`);
};

// ---------- Pre-qualification rules ----------
function qualify(p) {
  const flags = [];
  let red = 0, yellow = 0;

  const credit = p.credit_band; // '<500','500-559','560-619','620-699','700+'
  if (credit === '<500') { flags.push({ k: 'credit', s: 'red', m: 'Credit below 500 — most properties will deny' }); red++; }
  else if (credit === '500-559') { flags.push({ k: 'credit', s: 'yellow', m: 'Credit 500–559 — limited buildings (Parker, Yeti track)' }); yellow++; }
  else flags.push({ k: 'credit', s: 'green', m: 'Credit meets 560+ minimum' });

  const incomeRatio = p.budget_max > 0 ? (p.income_monthly / p.budget_max) : 0;
  if (incomeRatio < 2.5) { flags.push({ k: 'income', s: 'red', m: 'Income below 2.5x rent — likely denial' }); red++; }
  else if (incomeRatio < 3) { flags.push({ k: 'income', s: 'yellow', m: 'Income 2.5–3x rent — needs income-flexible building' }); yellow++; }
  else flags.push({ k: 'income', s: 'green', m: 'Income meets 3x rent rule' });

  if (!p.status_doc || p.status_doc === 'none') { flags.push({ k: 'status', s: 'red', m: 'No SSN, ITIN, or I-94 — cannot apply' }); red++; }
  else flags.push({ k: 'status', s: 'green', m: `${p.status_doc.toUpperCase()} on file` });

  if (p.has_past_debt) { flags.push({ k: 'debt', s: 'red', m: 'Debt to past property — must clear first' }); red++; }
  if (p.has_criminal) { flags.push({ k: 'criminal', s: 'red', m: 'Criminal record — most properties will deny' }); red++; }
  if (p.has_eviction) { flags.push({ k: 'eviction', s: 'red', m: 'Eviction history — limited options' }); red++; }

  if (p.lease_term_pref && p.lease_term_pref !== '12+') { flags.push({ k: 'lease', s: 'yellow', m: 'Wants <12mo lease — limited buildings' }); yellow++; }

  let score = 'green';
  if (red > 0) score = 'red';
  else if (yellow > 0) score = 'yellow';

  return { score, flags };
}

// ---------- API ----------
async function api(req, env, url) {
  const p = url.pathname;
  const m = req.method;

  // Auth
  if (p === '/api/login' && m === 'POST') {
    const { password } = await req.json();
    if (password === ADMIN_PASSWORD) {
      return new Response(JSON.stringify({ ok: true }), {
        headers: { 'content-type': 'application/json', 'set-cookie': `lf_auth=${ADMIN_PASSWORD}; Path=/; HttpOnly; SameSite=Lax; Max-Age=2592000` }
      });
    }
    return json({ ok: false }, 401);
  }

  // Public: pre-qual submission
  if (p === '/api/prequal' && m === 'POST') {
    const data = await req.json();
    const result = qualify(data);
    const id = uid();
    await env.DB.prepare(
      `INSERT INTO renter_profiles (id, full_name, phone, email, credit_band, income_monthly, household_size, employment_status, lease_term_pref, move_in_date, status_doc, has_past_debt, has_criminal, has_eviction, pets, budget_max, areas_json, qualification_score, qualification_flags_json, language)
       VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)`
    ).bind(
      id, data.full_name || null, data.phone || null, data.email || null,
      data.credit_band || null, data.income_monthly || 0, data.household_size || 1,
      data.employment_status || null, data.lease_term_pref || null, data.move_in_date || null,
      data.status_doc || null, data.has_past_debt ? 1 : 0, data.has_criminal ? 1 : 0, data.has_eviction ? 1 : 0,
      data.pets || null, data.budget_max || 0, JSON.stringify(data.areas || []),
      result.score, JSON.stringify(result.flags), data.language || 'en'
    ).run();

    // Auto-create lead if they want to be matched
    if (data.want_match && (data.phone || data.email)) {
      const leadId = uid();
      await env.DB.prepare(
        `INSERT INTO leads (id, full_name, phone, email, source, area_interest, status, language, profile_id)
         VALUES (?,?,?,?,?,?,?,?,?)`
      ).bind(leadId, data.full_name || null, data.phone || null, data.email || null,
        'readytorent', (data.areas || [])[0] || null, 'new', data.language || 'en', id).run();
    }

    return json({ ok: true, profile_id: id, ...result });
  }

  // Everything below requires auth
  if (!checkAuth(req)) return json({ error: 'auth' }, 401);

  // --- Properties ---
  if (p === '/api/properties' && m === 'GET') {
    const r = await env.DB.prepare('SELECT * FROM properties ORDER BY name').all();
    return json(r.results);
  }
  if (p === '/api/properties' && m === 'POST') {
    const d = await req.json();
    const id = d.id || uid();
    await env.DB.prepare(
      `INSERT INTO properties (id, name, area, zip, address, phone, leasing_email, pays_locators, accepts_low_credit, min_credit, notes)
       VALUES (?,?,?,?,?,?,?,?,?,?,?)`
    ).bind(id, d.name, d.area || null, d.zip || null, d.address || null, d.phone || null,
      d.leasing_email || null, d.pays_locators ? 1 : 0, d.accepts_low_credit ? 1 : 0, d.min_credit || 560, d.notes || null).run();
    return json({ ok: true, id });
  }

  // --- Canned messages ---
  if (p === '/api/canned' && m === 'GET') {
    const lang = url.searchParams.get('lang');
    const cat = url.searchParams.get('category');
    let q = 'SELECT * FROM canned_messages WHERE 1=1';
    const params = [];
    if (lang) { q += ' AND lang = ?'; params.push(lang); }
    if (cat) { q += ' AND category = ?'; params.push(cat); }
    q += ' ORDER BY category, lang, slug';
    const r = await env.DB.prepare(q).bind(...params).all();
    return json(r.results);
  }
  if (p === '/api/canned' && m === 'POST') {
    const d = await req.json();
    const id = d.id || uid();
    await env.DB.prepare(
      `INSERT INTO canned_messages (id, slug, lang, category, title, body) VALUES (?,?,?,?,?,?)`
    ).bind(id, d.slug, d.lang, d.category || null, d.title || null, d.body).run();
    return json({ ok: true, id });
  }
  if (p.startsWith('/api/canned/') && m === 'PATCH') {
    const id = p.split('/').pop();
    const d = await req.json();
    await env.DB.prepare('UPDATE canned_messages SET body = ?, title = ? WHERE id = ?')
      .bind(d.body, d.title || null, id).run();
    return json({ ok: true });
  }
  if (p.startsWith('/api/canned/') && m === 'DELETE') {
    const id = p.split('/').pop();
    await env.DB.prepare('DELETE FROM canned_messages WHERE id = ?').bind(id).run();
    return json({ ok: true });
  }

  // --- Leads ---
  if (p === '/api/leads' && m === 'GET') {
    const status = url.searchParams.get('status');
    let q = `SELECT l.*, p.name as property_name, rp.qualification_score, rp.qualification_flags_json
             FROM leads l
             LEFT JOIN properties p ON p.id = l.property_id
             LEFT JOIN renter_profiles rp ON rp.id = l.profile_id
             WHERE 1=1`;
    const params = [];
    if (status) { q += ' AND l.status = ?'; params.push(status); }
    q += ' ORDER BY l.updated_at DESC LIMIT 200';
    const r = await env.DB.prepare(q).bind(...params).all();
    return json(r.results);
  }
  if (p === '/api/leads' && m === 'POST') {
    const d = await req.json();
    const id = d.id || uid();
    await env.DB.prepare(
      `INSERT INTO leads (id, full_name, phone, email, source, property_id, zip_interest, area_interest, status, language, notes)
       VALUES (?,?,?,?,?,?,?,?,?,?,?)`
    ).bind(id, d.full_name || null, d.phone || null, d.email || null, d.source || 'marketplace',
      d.property_id || null, d.zip_interest || null, d.area_interest || null, d.status || 'new',
      d.language || 'es', d.notes || null).run();
    return json({ ok: true, id });
  }
  if (p.startsWith('/api/leads/') && m === 'PATCH') {
    const id = p.split('/').pop();
    const d = await req.json();
    const fields = [];
    const params = [];
    for (const k of ['full_name', 'phone', 'email', 'property_id', 'zip_interest', 'area_interest', 'status', 'language', 'notes']) {
      if (k in d) { fields.push(`${k} = ?`); params.push(d[k]); }
    }
    fields.push("updated_at = datetime('now')");
    params.push(id);
    await env.DB.prepare(`UPDATE leads SET ${fields.join(', ')} WHERE id = ?`).bind(...params).run();
    return json({ ok: true });
  }
  if (p.startsWith('/api/leads/') && p.endsWith('/profile') && m === 'GET') {
    const id = p.split('/')[3];
    const r = await env.DB.prepare(
      `SELECT rp.* FROM renter_profiles rp JOIN leads l ON l.profile_id = rp.id WHERE l.id = ?`
    ).bind(id).first();
    return json(r);
  }

  // --- Pipeline summary ---
  if (p === '/api/pipeline' && m === 'GET') {
    const r = await env.DB.prepare(
      `SELECT status, COUNT(*) as n FROM leads GROUP BY status`
    ).all();
    const byProp = await env.DB.prepare(
      `SELECT p.name, COUNT(l.id) as n FROM properties p LEFT JOIN leads l ON l.property_id = p.id GROUP BY p.id ORDER BY n DESC`
    ).all();
    return json({ status: r.results, by_property: byProp.results });
  }

  return json({ error: 'not found' }, 404);
}

// ---------- HTML ----------
const STYLE = `
:root{--bg:#FCFBF8;--ink:#0a0a0a;--ink2:#555;--accent:#E8380D;--line:#E8E5DD;--card:#FFFFFF}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:18px/1.5 'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-0.01em;margin:0 0 12px}
h1{font-size:42px;line-height:1.05}
h2{font-size:28px}
h3{font-size:22px}
.mono{font-family:'DM Mono',ui-monospace,monospace;font-size:14px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button,.btn{font:inherit;background:var(--ink);color:#fff;border:none;padding:14px 22px;border-radius:6px;cursor:pointer;font-weight:500}
button:hover,.btn:hover{background:var(--accent)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-accent{background:var(--accent)}
input,select,textarea{font:inherit;background:#fff;border:1px solid var(--line);padding:12px 14px;border-radius:6px;width:100%;color:var(--ink)}
textarea{min-height:120px;resize:vertical}
label{display:block;margin:14px 0 6px;font-size:14px;color:var(--ink2);text-transform:uppercase;letter-spacing:0.04em}
.wrap{max-width:760px;margin:0 auto;padding:24px 18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;margin:12px 0}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row > *{flex:1;min-width:0}
.pill{display:inline-block;padding:3px 10px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--ink2);background:#fff}
.pill.green{border-color:#3a8c3a;color:#3a8c3a}
.pill.yellow{border-color:#b88a00;color:#b88a00}
.pill.red{border-color:var(--accent);color:var(--accent)}
.pill.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 22px;border-radius:6px;font-size:15px;z-index:99}
hr{border:none;border-top:1px solid var(--line);margin:18px 0}
.tab{padding:10px 16px;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer;color:var(--ink)}
.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.muted{color:var(--ink2);font-size:14px}
.copy-btn{padding:8px 14px;font-size:14px}
.lang-toggle{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.lang-toggle button{padding:8px 14px;background:#fff;color:var(--ink);font-size:14px;border-radius:0}
.lang-toggle button.on{background:var(--ink);color:#fff}
.msg-body{white-space:pre-wrap;font-size:16px;color:var(--ink);background:#FAF9F5;padding:12px;border-radius:6px;border:1px solid var(--line);margin-top:8px}
.flag-line{padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.flag-line:last-child{border:none}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle}
.dot.green{background:#3a8c3a}.dot.yellow{background:#b88a00}.dot.red{background:var(--accent)}
.score-banner{padding:24px;border-radius:10px;margin:16px 0;font-family:'Instrument Serif',serif;font-size:32px}
.score-banner.green{background:#E8F4E8;color:#2a6a2a}
.score-banner.yellow{background:#FBF1D6;color:#8a6500}
.score-banner.red{background:#FCE6E0;color:#A52609}
@media (max-width:600px){h1{font-size:32px}.wrap{padding:16px 14px}}
`;

const FONTS = `<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&family=Instrument+Serif&display=swap" rel="stylesheet">`;

// ---------- Console UI ----------
const CONSOLE_HTML = `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Locator Console</title>${FONTS}<style>${STYLE}
.tabs{display:flex;gap:8px;margin:16px 0;overflow-x:auto;padding-bottom:4px}
.lead-row{padding:14px;border-bottom:1px solid var(--line);cursor:pointer}
.lead-row:hover{background:#FAF9F5}
.lead-row .name{font-weight:500;font-size:17px}
.lead-row .meta{color:var(--ink2);font-size:14px;margin-top:2px}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.s-new{background:#E8380D}.s-contacted{background:#b88a00}.s-toured{background:#3a8c3a}
.s-applied{background:#1a6a8c}.s-leased{background:#0a0a0a}.s-dead{background:#aaa}
</style></head>
<body><div class="wrap">
<h1>Locator Console</h1>
<div class="muted">Spirit Realty · Amira Priano</div>

<div class="tabs">
  <div class="tab on" data-tab="messages">Messages</div>
  <div class="tab" data-tab="leads">Leads</div>
  <div class="tab" data-tab="add">+ Lead</div>
  <div class="tab" data-tab="properties">Properties</div>
  <div class="tab" data-tab="pipeline">Pipeline</div>
</div>

<div id="view"></div>

<div id="toast" class="toast" style="display:none"></div>
</div>

<script>
const $ = s => document.querySelector(s);
const view = $('#view');
const toast = (m) => { const t = $('#toast'); t.textContent = m; t.style.display='block'; setTimeout(()=>t.style.display='none', 1800); };
let CURRENT_LANG = 'es';

document.querySelectorAll('.tab').forEach(t => t.onclick = () => {
  document.querySelectorAll('.tab').forEach(x => x.classList.remove('on'));
  t.classList.add('on');
  render(t.dataset.tab);
});

async function render(tab) {
  view.innerHTML = '<div class="muted">Loading...</div>';
  if (tab === 'messages') return renderMessages();
  if (tab === 'leads') return renderLeads();
  if (tab === 'add') return renderAddLead();
  if (tab === 'properties') return renderProperties();
  if (tab === 'pipeline') return renderPipeline();
}

async function renderMessages() {
  const all = await (await fetch('/api/canned')).json();
  const cats = [...new Set(all.map(m => m.category || 'misc'))];
  view.innerHTML = \`
    <div class="row" style="align-items:center;margin:8px 0 16px">
      <div class="muted" style="flex:0">Language</div>
      <div class="lang-toggle" style="flex:0">
        <button class="\${CURRENT_LANG==='es'?'on':''}" onclick="setLang('es')">Español</button>
        <button class="\${CURRENT_LANG==='en'?'on':''}" onclick="setLang('en')">English</button>
      </div>
    </div>
    \${cats.map(c => {
      const items = all.filter(m => (m.category || 'misc') === c && m.lang === CURRENT_LANG);
      if (!items.length) return '';
      return \`<h3 style="margin-top:24px;text-transform:capitalize">\${c}</h3>\${items.map(m => \`
        <div class="card">
          <div style="display:flex;justify-content:space-between;align-items:start;gap:8px">
            <div style="font-weight:500">\${m.title || m.slug}</div>
            <button class="copy-btn" onclick='copy(\${JSON.stringify(JSON.stringify(m.body))})'>Copy</button>
          </div>
          <div class="msg-body">\${m.body.replace(/</g,'&lt;')}</div>
        </div>\`).join('')}\`;
    }).join('')}
  \`;
}
function setLang(l) { CURRENT_LANG = l; renderMessages(); }
async function copy(text) {
  try { await navigator.clipboard.writeText(text); toast('Copied ✓'); }
  catch(e) { toast('Copy failed'); }
}

async function renderLeads() {
  const leads = await (await fetch('/api/leads')).json();
  view.innerHTML = leads.length ? leads.map(l => \`
    <div class="lead-row" onclick="openLead('\${l.id}')">
      <div class="name"><span class="status-dot s-\${l.status}"></span>\${l.full_name || '(no name)'}</div>
      <div class="meta">\${l.phone || ''} \${l.email ? '· '+l.email : ''}</div>
      <div class="meta">\${l.property_name || l.area_interest || l.zip_interest || '—'} · \${l.source} \${l.qualification_score ? '· <span class="pill '+l.qualification_score+'">'+l.qualification_score+'</span>' : ''}</div>
    </div>\`).join('') : '<div class="muted">No leads yet. Tap + Lead.</div>';
}

async function openLead(id) {
  const leads = await (await fetch('/api/leads')).json();
  const l = leads.find(x => x.id === id);
  if (!l) return;
  const props = await (await fetch('/api/properties')).json();
  view.innerHTML = \`
    <div class="card">
      <h3>\${l.full_name || '(no name)'}</h3>
      <div class="muted">\${l.phone || ''} · \${l.email || ''}</div>
      \${l.qualification_flags_json ? '<div style="margin-top:10px">' + JSON.parse(l.qualification_flags_json).map(f => \`<div class="flag-line"><span class="dot \${f.s}"></span>\${f.m}</div>\`).join('') + '</div>' : ''}
      <hr>
      <label>Status</label>
      <select id="ls">\${['new','contacted','toured','applied','leased','dead'].map(s=>\`<option value="\${s}" \${l.status===s?'selected':''}>\${s}</option>\`).join('')}</select>
      <label>Property</label>
      <select id="lp"><option value="">—</option>\${props.map(p=>\`<option value="\${p.id}" \${l.property_id===p.id?'selected':''}>\${p.name}</option>\`).join('')}</select>
      <label>Notes</label>
      <textarea id="ln">\${l.notes || ''}</textarea>
      <div class="row" style="margin-top:12px">
        <button onclick="saveLead('\${l.id}')">Save</button>
        <button class="btn-ghost" onclick="render('leads')">Back</button>
      </div>
    </div>\`;
}

async function saveLead(id) {
  await fetch('/api/leads/' + id, {
    method:'PATCH', headers:{'content-type':'application/json'},
    body: JSON.stringify({ status: $('#ls').value, property_id: $('#lp').value || null, notes: $('#ln').value })
  });
  toast('Saved ✓'); render('leads');
}

async function renderAddLead() {
  const props = await (await fetch('/api/properties')).json();
  view.innerHTML = \`<div class="card">
    <h3>Quick add lead</h3>
    <label>Name</label><input id="f-name">
    <label>Phone</label><input id="f-phone" inputmode="tel">
    <label>Email</label><input id="f-email" inputmode="email">
    <div class="row">
      <div><label>Property</label><select id="f-prop"><option value="">—</option>\${props.map(p=>\`<option value="\${p.id}">\${p.name}</option>\`).join('')}</select></div>
      <div><label>Zip / Area</label><input id="f-zip" placeholder="78704 or South Austin"></div>
    </div>
    <div class="row">
      <div><label>Source</label><select id="f-src"><option>marketplace</option><option>readytorent</option><option>referral</option><option>call</option></select></div>
      <div><label>Lang</label><select id="f-lang"><option value="es">Español</option><option value="en">English</option></select></div>
    </div>
    <label>Notes</label><textarea id="f-notes"></textarea>
    <button style="margin-top:14px" onclick="saveNew()">Save lead</button>
  </div>\`;
}

async function saveNew() {
  await fetch('/api/leads', {
    method:'POST', headers:{'content-type':'application/json'},
    body: JSON.stringify({
      full_name: $('#f-name').value, phone: $('#f-phone').value, email: $('#f-email').value,
      property_id: $('#f-prop').value || null, zip_interest: $('#f-zip').value,
      source: $('#f-src').value, language: $('#f-lang').value, notes: $('#f-notes').value
    })
  });
  toast('Lead added ✓');
  document.querySelector('[data-tab="leads"]').click();
}

async function renderProperties() {
  const props = await (await fetch('/api/properties')).json();
  view.innerHTML = props.map(p => \`
    <div class="card">
      <div style="display:flex;justify-content:space-between;align-items:start">
        <div>
          <div style="font-weight:500;font-size:18px">\${p.name}</div>
          <div class="muted">\${p.area || ''} \${p.zip ? '· '+p.zip : ''}</div>
        </div>
        <div>\${p.accepts_low_credit ? '<span class="pill yellow">credito bajo</span>' : ''}</div>
      </div>
      \${p.notes ? '<div class="muted" style="margin-top:6px">'+p.notes+'</div>' : ''}
    </div>\`).join('');
}

async function renderPipeline() {
  const r = await (await fetch('/api/pipeline')).json();
  const total = r.status.reduce((a,b)=>a+b.n,0);
  view.innerHTML = \`
    <h3>By status (\${total} total)</h3>
    \${r.status.map(s => \`<div class="card" style="display:flex;justify-content:space-between"><div>\${s.status}</div><div class="mono">\${s.n}</div></div>\`).join('')}
    <h3 style="margin-top:24px">By property</h3>
    \${r.by_property.map(p => \`<div class="card" style="display:flex;justify-content:space-between"><div>\${p.name}</div><div class="mono">\${p.n}</div></div>\`).join('')}\`;
}

render('messages');
</script></body></html>`;

// ---------- Login UI ----------
const LOGIN_HTML = `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Locator Console</title>${FONTS}<style>${STYLE}</style></head>
<body><div class="wrap" style="max-width:420px;margin-top:80px">
<h1>Locator Console</h1>
<div class="muted" style="margin-bottom:20px">Spirit Realty</div>
<div class="card">
<label>Password</label>
<input type="password" id="pw">
<button style="margin-top:14px;width:100%" onclick="login()">Sign in</button>
</div></div>
<script>
async function login() {
  const r = await fetch('/api/login', { method:'POST', headers:{'content-type':'application/json'}, body: JSON.stringify({password: document.getElementById('pw').value }) });
  if (r.ok) location.href = '/console'; else alert('Wrong password');
}
document.getElementById('pw').addEventListener('keydown', e => { if (e.key === 'Enter') login(); });
</script></body></html>`;

// ---------- ReadyToRent wizard ----------
const WIZARD_HTML = `<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>ReadyToRent · Are you ready to rent?</title>${FONTS}<style>${STYLE}
.step{display:none}.step.on{display:block}
.steps-bar{display:flex;gap:6px;margin:8px 0 24px}
.steps-bar div{flex:1;height:4px;background:var(--line);border-radius:2px}
.steps-bar div.on{background:var(--accent)}
.opt{display:block;padding:14px;border:1px solid var(--line);background:#fff;border-radius:6px;margin:8px 0;cursor:pointer;text-align:left;width:100%;color:var(--ink);font:inherit}
.opt:hover{border-color:var(--ink)}
.opt.sel{border-color:var(--accent);background:#FCE6E0}
</style></head>
<body><div class="wrap" style="max-width:560px">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
<h1 style="margin:0">ReadyToRent</h1>
<div class="lang-toggle">
<button id="lang-en" class="on" onclick="setLang('en')">EN</button>
<button id="lang-es" onclick="setLang('es')">ES</button>
</div>
</div>
<div class="muted" id="tagline">A 2-minute check to see which Austin apartments will approve you.</div>

<div class="steps-bar"><div class="on"></div><div></div><div></div><div></div><div></div><div></div></div>

<div id="s1" class="step on">
<h3 data-en="Your credit score" data-es="Tu puntaje de crédito">Your credit score</h3>
<div data-en="Most properties want 560+. Some accept lower." data-es="La mayoría pide 560+. Algunos aceptan menos." class="muted"></div>
<button class="opt" data-v="700+" onclick="pick('credit_band',this)">700+</button>
<button class="opt" data-v="620-699" onclick="pick('credit_band',this)">620–699</button>
<button class="opt" data-v="560-619" onclick="pick('credit_band',this)">560–619</button>
<button class="opt" data-v="500-559" onclick="pick('credit_band',this)">500–559 <span class="muted">(limited)</span></button>
<button class="opt" data-v="<500" onclick="pick('credit_band',this)" data-en="Below 500 / no credit" data-es="Menos de 500 / sin crédito">Below 500 / no credit</button>
</div>

<div id="s2" class="step">
<h3 data-en="Your monthly income & budget" data-es="Tu ingreso mensual y presupuesto">Your monthly income & budget</h3>
<div class="muted" data-en="Combined gross monthly income for everyone moving in." data-es="Ingreso bruto mensual combinado de todos los residentes."></div>
<label data-en="Gross income / month (USD)" data-es="Ingreso bruto / mes (USD)">Gross income / month (USD)</label>
<input id="i-income" inputmode="numeric" placeholder="5000">
<label data-en="Max rent you can afford" data-es="Renta máxima que puedes pagar">Max rent you can afford</label>
<input id="i-budget" inputmode="numeric" placeholder="1500">
<label data-en="People moving in" data-es="Personas que se mudan">People moving in</label>
<input id="i-house" inputmode="numeric" value="1">
<button style="margin-top:14px" onclick="next2()" data-en="Next" data-es="Siguiente">Next</button>
</div>

<div id="s3" class="step">
<h3 data-en="Identification & status" data-es="Identificación y estatus">Identification & status</h3>
<div class="muted" data-en="At least one resident needs one of these." data-es="Al menos un residente necesita uno de estos."></div>
<button class="opt" data-v="ssn" onclick="pick('status_doc',this)">Social Security Number (SSN)</button>
<button class="opt" data-v="itin" onclick="pick('status_doc',this)">ITIN</button>
<button class="opt" data-v="i94" onclick="pick('status_doc',this)">I-94</button>
<button class="opt" data-v="none" onclick="pick('status_doc',this)" data-en="None of these" data-es="Ninguno de estos">None of these</button>
</div>

<div id="s4" class="step">
<h3 data-en="Rental history" data-es="Historial de renta">Rental history</h3>
<label><input type="checkbox" id="c-debt"> <span data-en="I owe money to a previous property" data-es="Debo dinero a una propiedad anterior"></span></label>
<label><input type="checkbox" id="c-evict"> <span data-en="I have an eviction in the last 7 years" data-es="Tengo un desalojo en los últimos 7 años"></span></label>
<label><input type="checkbox" id="c-crim"> <span data-en="I have a criminal record" data-es="Tengo antecedentes penales"></span></label>
<button style="margin-top:14px" onclick="next4()" data-en="Next" data-es="Siguiente">Next</button>
</div>

<div id="s5" class="step">
<h3 data-en="Lease & timing" data-es="Contrato y fechas">Lease & timing</h3>
<label data-en="Lease length" data-es="Duración del contrato">Lease length</label>
<select id="i-lease">
<option value="12+" data-en="12 months or longer" data-es="12 meses o más">12 months or longer</option>
<option value="<12" data-en="Less than 12 months" data-es="Menos de 12 meses">Less than 12 months</option>
</select>
<label data-en="Move-in date" data-es="Fecha de mudanza">Move-in date</label>
<input id="i-move" type="date">
<label data-en="Areas you're considering" data-es="Áreas que consideras">Areas you're considering</label>
<input id="i-areas" placeholder="South Austin, North Austin, Domain...">
<button style="margin-top:14px" onclick="next5()" data-en="See my results" data-es="Ver mis resultados">See my results</button>
</div>

<div id="s6" class="step">
<div id="result"></div>
<hr>
<h3 data-en="Want a locator to match you?" data-es="¿Quieres que un locator te ayude?">Want a locator to match you?</h3>
<div class="muted" data-en="Free service — Spirit Realty / Amira Priano. We'll send you buildings that match your situation." data-es="Servicio gratis — Spirit Realty / Amira Priano. Te enviamos edificios que aceptan tu situación."></div>
<label>Name</label><input id="r-name">
<label>Phone</label><input id="r-phone" inputmode="tel">
<label>Email</label><input id="r-email" inputmode="email">
<button style="margin-top:14px" onclick="submitMatch()" data-en="Send my profile" data-es="Enviar mi perfil">Send my profile</button>
<div id="match-msg" style="margin-top:14px"></div>
</div>

<div id="toast" class="toast" style="display:none"></div>
</div>

<script>
const data = {};
let step = 1;
const $ = s => document.querySelector(s);
const toast = m => { const t=$('#toast'); t.textContent=m; t.style.display='block'; setTimeout(()=>t.style.display='none',1800); };

function setLang(l) {
  document.querySelectorAll('[data-en]').forEach(el => {
    const txt = el.dataset[l]; if (txt) el.textContent = txt;
  });
  $('#lang-en').classList.toggle('on', l==='en');
  $('#lang-es').classList.toggle('on', l==='es');
  data.language = l;
}

function pick(field, btn) {
  data[field] = btn.dataset.v;
  btn.parentElement.querySelectorAll('.opt').forEach(b => b.classList.remove('sel'));
  btn.classList.add('sel');
  setTimeout(() => goto(step + 1), 250);
}

function goto(n) {
  document.querySelectorAll('.step').forEach(s => s.classList.remove('on'));
  $('#s' + n).classList.add('on');
  document.querySelectorAll('.steps-bar div').forEach((d,i) => d.classList.toggle('on', i < n));
  step = n;
  window.scrollTo(0,0);
}

function next2() {
  data.income_monthly = parseInt($('#i-income').value) || 0;
  data.budget_max = parseInt($('#i-budget').value) || 0;
  data.household_size = parseInt($('#i-house').value) || 1;
  if (!data.income_monthly || !data.budget_max) return toast('Fill income and budget');
  goto(3);
}
function next4() {
  data.has_past_debt = $('#c-debt').checked;
  data.has_eviction = $('#c-evict').checked;
  data.has_criminal = $('#c-crim').checked;
  goto(5);
}
async function next5() {
  data.lease_term_pref = $('#i-lease').value;
  data.move_in_date = $('#i-move').value;
  data.areas = $('#i-areas').value.split(',').map(s=>s.trim()).filter(Boolean);
  goto(6);

  const r = await fetch('/api/prequal', {
    method:'POST', headers:{'content-type':'application/json'},
    body: JSON.stringify({ ...data, want_match: false })
  });
  const j = await r.json();
  data.profile_id = j.profile_id;
  const banner = { green: "You're ready to rent.", yellow: "You'll qualify at some buildings.", red: "Limited options — but we can still help." };
  $('#result').innerHTML = \`
    <div class="score-banner \${j.score}">\${banner[j.score]}</div>
    <div>\${j.flags.map(f => \`<div class="flag-line"><span class="dot \${f.s}"></span>\${f.m}</div>\`).join('')}</div>\`;
}

async function submitMatch() {
  const name = $('#r-name').value, phone = $('#r-phone').value, email = $('#r-email').value;
  if (!name || (!phone && !email)) return toast('Name and phone or email needed');
  const r = await fetch('/api/prequal', {
    method:'POST', headers:{'content-type':'application/json'},
    body: JSON.stringify({ ...data, full_name: name, phone, email, want_match: true })
  });
  if (r.ok) $('#match-msg').innerHTML = '<div class="score-banner green">Sent ✓ Amira will reach out shortly.</div>';
}

setLang('en');
</script></body></html>`;

// ---------- Router ----------
export default {
  async fetch(req, env) {
    const url = new URL(req.url);
    const p = url.pathname;

    if (p.startsWith('/api/')) return api(req, env, url);
    if (p === '/console' || p === '/console/') {
      if (!checkAuth(req)) return html(LOGIN_HTML);
      return html(CONSOLE_HTML);
    }
    if (p === '/login') return html(LOGIN_HTML);
    if (p === '/' || p === '/apply' || p === '/apply/') return html(WIZARD_HTML);

    return new Response('Not found', { status: 404 });
  }
};