// DebtLift client portal — institutional style, settlement program view
const DPIC = ({ d, size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{ __html: d }} />
);
const DPICONS = {
  program: '<path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/>',
  pay: '<circle cx="12" cy="12" r="9"/><path d="M12 7v10M15.5 9.5c0-1.4-1.6-2.5-3.5-2.5s-3.5 1.1-3.5 2.5 1.3 2.1 3.5 2.5 3.5 1.1 3.5 2.5-1.6 2.5-3.5 2.5-3.5-1.1-3.5-2.5"/>',
  more: '<path d="M4 7h16M4 12h16M4 17h16"/>',
  bell: '<path d="M18 8a6 6 0 1 0-12 0c0 7-3 8-3 8h18s-3-1-3-8"/><path d="M10.3 21a2 2 0 0 0 3.4 0"/>',
  user: '<circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5"/>',
  lock: '<rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/>',
  check: '<path d="M20 6 9 17l-5-5"/>',
  doc: '<path d="M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7z"/><path d="M14 2v5h5"/>',
  chat: '<path d="M21 12a8 8 0 0 1-8 8H4l2-3.2A8 8 0 1 1 21 12z"/>',
};

const DPWordmark = ({ light, size = 19 }) => (
  <span style={{ fontSize: size, fontWeight: 800, letterSpacing: '.2px', lineHeight: 1 }}>
    <span style={{ color: light ? '#fff' : '#2356CC' }}>debt</span>
    <span style={{ color: light ? '#9fc0f2' : '#7AAEE8' }}>lift</span>
  </span>
);

const dpfmt = n => '$' + n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

const POSITIONS = [
  { lender: 'Rapid Capital Group', enrolled: 34200, status: 'Negotiating', tone: 'amber', agreed: null },
  { lender: 'Everest Advance', enrolled: 28000, status: 'Offer received', tone: 'blue', agreed: 16800 },
  { lender: 'BlueBridge Funding', enrolled: 22000, status: 'Settled', tone: 'green', agreed: 12100 },
];
const DL_PAYMENTS = [
  { date: 'Jul 1, 2026', desc: 'Program payment', amount: 2500, status: 'Posted' },
  { date: 'Jun 1, 2026', desc: 'Program payment', amount: 2500, status: 'Posted' },
  { date: 'May 1, 2026', desc: 'Program payment', amount: 2500, status: 'Posted' },
  { date: 'Apr 1, 2026', desc: 'Program payment', amount: 2500, status: 'Posted' },
];

function DPLogin({ onDone }) {
  return (
    <div style={{ minHeight: '100vh', background: 'linear-gradient(180deg, var(--inst-navy) 0%, var(--inst-navy-deep) 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} data-screen-label="DebtLift Portal — Sign in">
      <div style={{ width: '100%', maxWidth: 400 }}>
        <div style={{ textAlign: 'center', marginBottom: 22 }}><DPWordmark light size={28} /></div>
        <div style={{ background: '#fff', borderRadius: 8, padding: '28px 26px' }}>
          <div style={{ textAlign: 'center', marginBottom: 16 }}>
            <img src="../assets/debtlift-logo.jpg" alt="debtlift" style={{ height: 30 }} />
          </div>
          <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--inst-ink)', marginBottom: 4 }}>Client portal sign in</div>
          <div style={{ fontSize: 12, color: 'var(--inst-ink-3)', marginBottom: 16 }}>Track your settlements, savings and payments.</div>
          <div style={{ display: 'grid', gap: 12 }}>
            <div className="inst-field"><label>Email</label><input className="inst-input" placeholder="you@business.com" /></div>
            <div className="inst-field"><label>Password</label><input className="inst-input" type="password" placeholder="Password" /></div>
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--inst-ink-2)' }}>
              <input type="checkbox" defaultChecked /> Remember me
            </label>
            <button className="inst-btn primary" style={{ width: '100%', padding: '11px 18px' }} onClick={onDone}>Sign in</button>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 16 }}>
            <a className="inst-link" style={{ fontSize: 12 }}>Forgot password?</a>
            <a className="inst-link" style={{ fontSize: 12 }} href="../">Not enrolled? Get a plan</a>
          </div>
        </div>
        <div style={{ textAlign: 'center', marginTop: 16, fontSize: 11, color: 'rgba(255,255,255,.7)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
          <DPIC d={DPICONS.lock} size={12} /> Secure sign-in · DebtLift, sister company of ExpressFund
        </div>
      </div>
    </div>
  );
}

function DPProgram({ go }) {
  const enrolled = POSITIONS.reduce((s, p) => s + p.enrolled, 0);
  const settledSavings = POSITIONS.filter(p => p.status === 'Settled').reduce((s, p) => s + p.enrolled - p.agreed, 0);
  return (
    <div className="inst-page" style={{ maxWidth: 760 }}>
      <div className="inst-card" style={{ marginBottom: 20 }}>
        <div className="inst-section-bar">Welcome back, Smith Enterprises!</div>
        <div className="inst-card-body" style={{ fontSize: 13, color: 'var(--inst-ink-2)' }}>
          Here's where your settlement program stands.
        </div>
      </div>

      <div className="inst-stack">
        <div className="inst-card">
          <div className="inst-section-bar">Settlement program (…1042)</div>
          <div className="inst-acct-row">
            <div>
              <div className="inst-acct-name">Debt enrolled</div>
              <div className="inst-acct-sub">{POSITIONS.length} positions</div>
            </div>
            <div><div className="inst-amount lg">{dpfmt(enrolled)}</div><div className="inst-amount-cap">Original balances</div></div>
          </div>
          <div className="inst-acct-row">
            <div>
              <div className="inst-acct-name">Saved so far</div>
              <div className="inst-acct-sub">1 of {POSITIONS.length} positions settled</div>
            </div>
            <div><div className="inst-amount" style={{ color: 'var(--inst-pos)' }}>{dpfmt(settledSavings)}</div><div className="inst-amount-cap">Off your balances</div></div>
          </div>
          <div className="inst-acct-row">
            <div>
              <div className="inst-acct-name">Next program payment</div>
              <div className="inst-acct-sub">Aug 1, 2026 · automatic</div>
            </div>
            <div><div className="inst-amount" style={{ fontSize: 22 }}>{dpfmt(2500)}</div><div className="inst-amount-cap">Scheduled</div></div>
          </div>
        </div>

        <div className="inst-card">
          <div className="inst-section-bar">Your positions ({POSITIONS.length})</div>
          {POSITIONS.map(p => (
            <div key={p.lender} className="inst-acct-row">
              <div>
                <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--inst-ink)' }}>{p.lender}</div>
                <div className="inst-acct-sub" style={{ marginTop: 5 }}>
                  <span className={`inst-chip ${p.tone}`}><span className="dot"></span>{p.status}</span>
                </div>
              </div>
              <div>
                <div className="inst-amount" style={{ fontSize: 20 }}>{p.agreed ? dpfmt(p.agreed) : '—'}</div>
                <div className="inst-amount-cap">{p.agreed ? 'settled from ' + dpfmt(p.enrolled) : 'enrolled ' + dpfmt(p.enrolled)}</div>
              </div>
            </div>
          ))}
          <div className="inst-card-foot">
            <span style={{ fontSize: 12, color: 'var(--inst-ink-2)' }}>Your specialist: <b>Dana Reyes</b> · <a className="inst-link" style={{ fontSize: 12 }}>Send a message</a></span>
          </div>
        </div>

        <div className="inst-notice">
          <span className="bulb"><DPIC d={DPICONS.check} size={16} /></span>
          <span>Need working capital while you settle? Our sister company <b>ExpressFund</b> funds merchants in settlement programs. <a className="inst-link" href="https://express.fund/">See if you qualify ›</a></span>
        </div>
      </div>
    </div>
  );
}

function DPPay() {
  return (
    <div className="inst-page" style={{ maxWidth: 760 }}>
      <div className="inst-greeting" style={{ fontSize: 22, marginBottom: 16 }}>Payments</div>
      <div className="inst-stack">
        <div className="inst-card">
          <div className="inst-section-bar">Program payment</div>
          <div className="inst-acct-row">
            <div>
              <div className="inst-acct-name">Next payment</div>
              <div className="inst-acct-sub">Aug 1, 2026 · monthly · automatic</div>
            </div>
            <div><div className="inst-amount lg">{dpfmt(2500)}</div><div className="inst-amount-cap">Scheduled</div></div>
          </div>
        </div>
        <div className="inst-card">
          <div className="inst-section-bar">Payment history</div>
          <div className="inst-table-wrap">
            <table className="inst-table">
              <thead><tr><th>Date</th><th>Description</th><th style={{ textAlign: 'right' }}>Amount</th><th>Status</th></tr></thead>
              <tbody>
                {DL_PAYMENTS.map((p, i) => (
                  <tr key={i}>
                    <td>{p.date}</td>
                    <td>{p.desc}</td>
                    <td className="inst-td-num inst-td-strong">{dpfmt(p.amount)}</td>
                    <td><span className="inst-chip green"><span className="dot"></span>{p.status}</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

function DPMore({ onSignOut }) {
  const rows = [
    { icon: DPICONS.user, label: 'Profile & settings', sub: 'Contact info, password, 2-step verification' },
    { icon: DPICONS.doc, label: 'Documents', sub: 'Settlement agreements, program contract' },
    { icon: DPICONS.bell, label: 'Alerts', sub: 'Settlement updates and payment reminders' },
    { icon: DPICONS.chat, label: 'Your specialist', sub: 'Dana Reyes · (800) 555-0188' },
  ];
  return (
    <div className="inst-page" style={{ maxWidth: 760 }}>
      <div className="inst-greeting" style={{ fontSize: 22, marginBottom: 16 }}>More</div>
      <div className="inst-card">
        {rows.map(r => (
          <div key={r.label} className="inst-acct-row" style={{ cursor: 'pointer' }}>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <span style={{ color: 'var(--inst-link)' }}><DPIC d={r.icon} size={20} /></span>
              <div>
                <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--inst-ink)' }}>{r.label}</div>
                <div className="inst-acct-sub">{r.sub}</div>
              </div>
            </div>
            <span style={{ color: 'var(--inst-ink-3)', fontWeight: 700 }}>›</span>
          </div>
        ))}
      </div>
      <button className="inst-btn outline" style={{ width: '100%', marginTop: 16 }} onClick={onSignOut}>Sign out</button>
    </div>
  );
}

function DLPortalApp() {
  const [authed, setAuthed] = React.useState(false);
  const [tab, setTab] = React.useState('Program');
  if (!authed) return <DPLogin onDone={() => setAuthed(true)} />;

  const TABS = [
    { label: 'Program', icon: DPICONS.program },
    { label: 'Payments', icon: DPICONS.pay },
    { label: 'More', icon: DPICONS.more },
  ];
  const go = t => { setTab(t); window.scrollTo(0, 0); };

  return (
    <div style={{ minHeight: '100vh', background: 'var(--inst-canvas)' }} data-screen-label={'DebtLift Portal — ' + tab}>
      <header className="inst-topbar">
        <DPWordmark light />
        <span className="spacer"></span>
        <button title="Alerts" style={{ background: 'none', border: 'none', color: '#fff', cursor: 'pointer', padding: 6 }}><DPIC d={DPICONS.bell} /></button>
        <button title="Profile" style={{ background: 'none', border: 'none', color: '#fff', cursor: 'pointer', padding: 6 }} onClick={() => go('More')}><DPIC d={DPICONS.user} /></button>
        <a className="inst-link" style={{ color: '#fff', fontSize: 12 }} onClick={() => setAuthed(false)}>Sign out</a>
      </header>
      <nav className="inst-nav">
        {TABS.map(t => (
          <a key={t.label} className={tab === t.label ? 'active' : ''} onClick={() => go(t.label)}>{t.label}</a>
        ))}
      </nav>

      {tab === 'Program' ? <DPProgram go={go} /> : null}
      {tab === 'Payments' ? <DPPay /> : null}
      {tab === 'More' ? <DPMore onSignOut={() => setAuthed(false)} /> : null}

      <nav className="inst-tabbar">
        {TABS.map(t => (
          <button key={t.label} className={tab === t.label ? 'active' : ''} onClick={() => go(t.label)}>
            <DPIC d={t.icon} size={20} />
            {t.label}
          </button>
        ))}
      </nav>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<DLPortalApp></DLPortalApp>);