`public/panels/browse-abandon.html`

92 lines
<div id="ba-banner"></div>

<div class="card">
  <div class="row" style="justify-content:space-between;align-items:baseline;gap:12px">
    <div>
      <h2>Browse Abandonment</h2>
      <div class="muted" style="font-size:12px">
        A designer views a product but never asks for a memo sample. The drip stages a follow-up:
        <b>Day 1 storytelling</b> → <b>Day 14 room-setting</b> → <b>Day 30 suppress</b>.
        <b>PLANNING ONLY</b> — nothing here triggers a live send.
      </div>
    </div>
    <div class="row" style="gap:8px;align-items:center">
      <span class="pill" id="ba-summary-pill">— browse events</span>
    </div>
  </div>
</div>

<div class="grid" style="grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px">
  <div class="card" style="margin:0;padding:14px 16px">
    <div class="muted" style="font-size:11px;text-transform:uppercase;letter-spacing:.6px">Total events</div>
    <div id="ba-stat-total" style="font:600 22px/1.2 'Cormorant Garamond',Georgia,serif;margin-top:4px">—</div>
  </div>
  <div class="card" style="margin:0;padding:14px 16px">
    <div class="muted" style="font-size:11px;text-transform:uppercase;letter-spacing:.6px">Cooling window</div>
    <div id="ba-stat-cooling" style="font:600 22px/1.2 'Cormorant Garamond',Georgia,serif;margin-top:4px">—</div>
  </div>
  <div class="card" style="margin:0;padding:14px 16px">
    <div class="muted" style="font-size:11px;text-transform:uppercase;letter-spacing:.6px">In drip</div>
    <div id="ba-stat-indrip" style="font:600 22px/1.2 'Cormorant Garamond',Georgia,serif;margin-top:4px;color:var(--gold)">—</div>
  </div>
  <div class="card" style="margin:0;padding:14px 16px">
    <div class="muted" style="font-size:11px;text-transform:uppercase;letter-spacing:.6px">Would fire today</div>
    <div id="ba-stat-today" style="font:600 22px/1.2 'Cormorant Garamond',Georgia,serif;margin-top:4px;color:var(--accent)">—</div>
  </div>
  <div class="card" style="margin:0;padding:14px 16px">
    <div class="muted" style="font-size:11px;text-transform:uppercase;letter-spacing:.6px">Suppressed / sampled</div>
    <div id="ba-stat-out" style="font:600 22px/1.2 'Cormorant Garamond',Georgia,serif;margin-top:4px;color:var(--sage)">—</div>
  </div>
</div>

<div class="grid" style="grid-template-columns:1fr 1fr;align-items:start">

  <!-- Left: drip config editor -->
  <div class="card">
    <div class="row" style="justify-content:space-between;align-items:baseline">
      <h2 style="margin:0">Drip configuration</h2>
      <span class="pill" style="background:#fff0e6;color:var(--accent)">staged · planning only</span>
    </div>
    <div id="ba-config" class="loading" style="margin-top:10px">Loading…</div>
  </div>

  <!-- Right: 7-day schedule projection -->
  <div class="card">
    <div class="row" style="justify-content:space-between;align-items:baseline">
      <h2 style="margin:0">Next 7 days — what WOULD fire</h2>
      <span class="pill" style="background:var(--cream)">dry-run</span>
    </div>
    <div id="ba-schedule" class="loading" style="margin-top:10px">Loading…</div>
  </div>

</div>

<div class="card">
  <div class="row" style="justify-content:space-between;align-items:baseline;gap:12px">
    <div>
      <h2 style="margin:0">Browse events</h2>
      <div class="muted" style="font-size:12px">Mock browse activity. Click an event to preview what the next-due step would render.</div>
    </div>
    <div class="row" style="gap:8px">
      <select id="ba-filter" style="width:auto;min-width:160px">
        <option value="all">All stages</option>
        <option value="in-drip">In drip</option>
        <option value="cooling">Cooling window</option>
        <option value="suppressed">Suppressed</option>
        <option value="sample-requested">Sample requested</option>
        <option value="would-fire">Would fire today</option>
      </select>
      <button class="btn ghost" id="ba-reseed" style="padding:7px 12px;font-size:12.5px">↻ Reseed mock events</button>
    </div>
  </div>
  <div id="ba-events" class="loading" style="margin-top:10px">Loading…</div>
</div>

<div class="card" id="ba-preview-card" style="display:none">
  <div class="row" style="justify-content:space-between;align-items:baseline">
    <h2 style="margin:0">Dry-run preview</h2>
    <span class="pill" style="background:#fff0e6;color:var(--accent)">NOT sent</span>
  </div>
  <div id="ba-preview" style="margin-top:10px"></div>
</div>