# DRE Portal Mockups — Session July 7, 2026

## Debt Recovery Intake Form (ScrapingAnt-inspired split-screen)

File: `debt-recovery.html`

Two-panel layout inspired by scrapingant.com/signup:

**Left panel (desktop only):**
- Dark gradient background: `linear-gradient(135deg, #0f172a 0%, #1e3a5f 40%, #b45309 100%)`
- Logo + tagline: "Recover what's yours. Without the headache."
- Feature icons with descriptions (AI analysis, tiered recovery, security)
- Footer note: "Trusted by contractors and owner-operators across Texas"
- Abstract SVG circle pattern overlay at 10% opacity

**Right panel (white, amber accent #amber-500 / #f59e0b):**
- Form sections in order: Your Information → Debtor Information → Claim Details → Document Upload → Terms → Turnstile → Submit
- Your Information: Full name, Business name, Email, Phone
- Debtor Information: Business name, Contact person, Email, Phone, Address
- Claim Details: Amount, Description, State (default Texas), Debt type dropdown
- Document upload: empty drop zone (no placeholder files), files appear after upload
- Cloudflare Turnstile invisible anti-bot (script from challenges.cloudflare.com, site key 0x4AAAAAADxaB0Bik1bqx_CA)
- Terms checkboxes: agree to TOS + confirm accuracy
- Responsive: collapses to single column on mobile, logo shifts inline

**Color palette:** Deep navy left gradient, white right panel, amber accent throughout.

## AI Chatbot — Lead Capture + Logged-In Experience

File: `dre-client-dashboard.html`

The chat widget (bottom-right amber bubble, fixed position) has three states:

### State 1: New Visitor (Lead Capture)
- 4-field form: Full name (req), Company, Email (req), Phone
- "Start Chat" button validates name + email required
- Data stored in window._lead object (in production: sends to CRM/email)
- Chat unlock blocked until lead submitted

### State 2: Logged-In Client
- Skips lead capture entirely
- Personalized greeting: "Welcome back, {Company}! Your claim against {Debtor} is in {Tier N}. I'm Agent D.R.E."
- Case-specific quick buttons: My Case Status, Next Steps, Upload Docs
- Flagged by `window._isLoggedIn = true` (set by backend on auth)

### State 3: Chat Conversation
- Shows after lead capture (new visitor) or immediately (logged in)
- FAQ quick-buttons: Fee structure, Required docs, Timeline
- Free-text input with Send button
- Case-specific answers for logged-in users (tier, status, timeline, upload docs)
- PII verification: asking for claim number triggers "please verify your identity" response
- Footer: "Responses from public DRE information. Not legal advice."

### Answer routing logic (mockup getAnswer function):
1. Case-specific keywords first (tier, status, next steps, upload): returns personalized answer with claim context
2. Claim number / specific / case details: triggers PII verification
3. General FAQ (fee, cost, timeline, LPOA, payment): returns public knowledge answer with engaging question
4. Greeting: returns proactive engagement question
5. Fallback: invites to submit claim or learn more

All responses should: acknowledge the user's concern, answer clearly (no promises), and ask a leading question to continue the conversation.

## Fee Calculator (dre-fee-calculator.html)

- Single input field for claim amount (default $15,000)
- Four side-by-side cards (Tier 1-4) with color-coded borders (green/blue/amber/red)
- Each card shows: tier name, you receive (bold amount), DRE fee, timeline
- Live calculation on input change — no submit button
- Responsive: 4-col desktop, stacked mobile

## Debtor Payment Page (dre-pay.html)

- Minimal, no navigation, centered on payment
- Fields: Claim/Invoice Number, Full Name, Amount ($)
- Cloudflare Turnstile protection
- Continue to Payment button → Stripe checkout
- Trust signals: Secure Payment · ACH & Card Accepted · Receipt Emailed
- Phone support link for help

## Case Aging Dashboard (dre-case-aging.html)

Dark-themed internal dashboard monitoring stalled cases:
- Summary: active cases, avg time in tier, on-track rate
- Table: claim, debtor, amount, current tier, age in tier, target, status
- Color-coded: green (on track), amber/⚠ (approaching limit), red/🔴 (stalled)
- Stalled case alert banner: "DRE-YYYY-NNNN has been in Tier N for X days — Y days past target"
- SMS notification indicator: "SMS Notifications Active — Twilio Connected"