// DebtLift marketing site — institutional style, calculator feeds the CRM lead funnel
const DIC = ({ 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 DICONS = {
  zap: '<path d="M13 2 4 14h6l-1 8 9-12h-6l1-8z"/>',
  check: '<path d="M20 6 9 17l-5-5"/>',
  lock: '<rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/>',
  bulb: '<path d="M9 18h6M10 21h4"/><path d="M12 3a6 6 0 0 0-3.5 10.9c.8.6 1.5 1.9 1.5 2.6h4c0-.7.7-2 1.5-2.6A6 6 0 0 0 12 3z"/>',
};

const DLWordmark = ({ light, size = 20 }) => (
  <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 dfmt = n => '$' + Math.round(n).toLocaleString('en-US');

// The settlement calculator lives on its own page (../debtlift_calculator/) —
// better on mobile and where affiliate ?ref= links point. The hero links to it.

function DLSite() {
  return (
    <div style={{ background: 'var(--inst-canvas)', minHeight: '100vh' }} data-screen-label="DebtLift — Marketing Site">
      <header className="inst-topbar">
        <DLWordmark light />
        <span className="spacer"></span>
        <a href="portal/"><button className="inst-btn ghost-white sm">Client sign in</button></a>
      </header>

      <section style={{ background: 'linear-gradient(180deg, var(--inst-navy) 0%, var(--inst-navy-deep) 100%)', color: '#fff', padding: '52px 20px 56px' }}>
        <div style={{ maxWidth: 1080, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 40 }}>
          <div style={{ maxWidth: 720 }}>
            <div style={{ display: 'inline-block', fontSize: 11, fontWeight: 800, letterSpacing: '1px', textTransform: 'uppercase', background: 'rgba(255,255,255,.14)', padding: '4px 12px', borderRadius: 3, marginBottom: 18 }}>MCA Debt Settlement</div>
            <h1 style={{ fontSize: 40, fontWeight: 800, lineHeight: 1.12, margin: '0 0 16px' }}>Drowning in daily payments? Settle for less.</h1>
            <p style={{ fontSize: 16, lineHeight: 1.65, opacity: .88, maxWidth: 460, margin: '0 0 22px' }}>DebtLift negotiates directly with your MCA lenders to cut what you owe — typically 40–50% — and replaces stacked daily debits with one payment you can afford.</p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', fontSize: 13, fontWeight: 600 }}>
              {['No upfront fees', 'Negotiations start in 48 hours', 'One affordable payment'].map(t => (
                <span key={t} style={{ display: 'flex', alignItems: 'center', gap: 7, opacity: .92 }}><DIC d={DICONS.check} size={14} /> {t}</span>
              ))}
            </div>
          </div>
          <div className="inst-card" style={{ width: '100%', maxWidth: 560 }}>
            <div className="inst-section-bar">Settlement calculator</div>
            <div className="inst-card-body" style={{ display: 'grid', gap: 14 }}>
              <div style={{ fontSize: 14, color: 'var(--inst-ink-2)', lineHeight: 1.6 }}>List each lender and what you pay — we'll show you <b>three lower-payment plans</b> in about two minutes.</div>
              <a href="calculator/" style={{ textDecoration: 'none' }}>
                <button className="inst-btn primary" style={{ width: '100%', padding: '13px 18px', fontSize: 14 }}>Start the calculator ›</button>
              </a>
              <div style={{ fontSize: 11, color: 'var(--inst-ink-3)', textAlign: 'center' }}>Free · No credit impact · No upfront fees</div>
            </div>
          </div>
        </div>
      </section>

      <section style={{ maxWidth: 1080, margin: '0 auto', padding: '44px 20px' }}>
        <h2 style={{ fontSize: 22, fontWeight: 800, color: 'var(--inst-ink)', margin: '0 0 18px' }}>How it works</h2>
        <div className="inst-grid-3">
          {[['1', 'Free case review', 'Tell us your total MCA debt and positions. A specialist maps every lender, balance and daily debit.'],
            ['2', 'We negotiate', 'DebtLift contacts each lender and negotiates settlements — you stop juggling stacked daily payments.'],
            ['3', 'One payment, done', 'You make one scheduled program payment while we execute settlements. Track everything in your client portal.']].map(([num, t, d]) => (
            <div key={num} className="inst-card">
              <div className="inst-card-body">
                <div style={{ width: 30, height: 30, borderRadius: '50%', background: 'var(--inst-navy)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 13, marginBottom: 12 }}>{num}</div>
                <div style={{ fontSize: 15, fontWeight: 800, color: 'var(--inst-ink)', marginBottom: 6 }}>{t}</div>
                <div style={{ fontSize: 13, color: 'var(--inst-ink-2)', lineHeight: 1.6 }}>{d}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ maxWidth: 1080, margin: '0 auto', padding: '0 20px 44px' }}>
        <div className="inst-card">
          <div className="inst-section-bar">Typical outcomes</div>
          <div className="inst-grid-3" style={{ padding: 14, gap: 10 }}>
            <div className="inst-stat"><div className="lbl">Average reduction</div><div className="val">40–50%</div><div className="sub">of enrolled balances</div></div>
            <div className="inst-stat"><div className="lbl">First settlement</div><div className="val">30–60 days</div><div className="sub">from enrollment</div></div>
            <div className="inst-stat"><div className="lbl">Daily debits replaced by</div><div className="val">1 payment</div><div className="sub">weekly or monthly</div></div>
          </div>
        </div>
      </section>

      <footer style={{ background: '#fff', borderTop: '1px solid var(--inst-rule)', padding: '22px 20px' }}>
        <div style={{ maxWidth: 1080, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
          <img src="assets/debtlift-logo.jpg" alt="debtlift" style={{ height: 24 }} />
          <div style={{ fontSize: 12, color: 'var(--inst-ink-3)', display: 'flex', alignItems: 'center', gap: 14 }}>
            <a className="inst-link" style={{ fontSize: 12 }} href="portal/">Client portal</a>
            <a className="inst-link" style={{ fontSize: 12 }} href="mailto:hello@debtlift.co">hello@debtlift.co</a>
            <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}><DIC d={DICONS.lock} size={12} /> Secure</span>
          </div>
        </div>
      </footer>
    </div>
  );
}

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