// FastFund website — footer
function Footer() {
  const { Logo } = window.CapFrontDesignSystem_019e08;
  const { mobile } = window.useBreakpoint();
  const cols = [
    { h: 'Products', links: ['Term Loans', 'Lines of Credit', 'Revenue-Based Financing', 'SBA Loans', 'Equipment Financing', 'Real Estate Financing'] },
    { h: 'Company', links: ['Our Story', 'Customer stories', 'Careers', 'Contact Us'] },
    { h: 'Resources', links: ['Funding guides', 'HELOC', 'Invoice Factoring', 'Partner with us', 'Privacy Policy'] },
  ];
  const linkHref = (l) => ({
    'Term Loans': 'term-loans.html', 'Lines of Credit': 'lines-of-credit.html', 'Revenue-Based Financing': 'revenue-based-financing.html',
    'SBA Loans': 'product.html', 'Equipment Financing': 'equipment-financing.html', 'Real Estate Financing': 'real-estate-financing.html',
    'HELOC': 'heloc.html', 'Invoice Factoring': 'invoice-factoring.html', 'Ecommerce Funding': 'ecommerce-funding.html',
    'Partner with us': 'partners.html', 'Our Story': 'about.html', 'Contact Us': 'contact.html',
    'Customer stories': 'story.html', 'Funding guides': 'resources.html',
  })[l] || '#';
  return (
    <footer style={{ background: 'var(--ink-900)', color: 'var(--neutral-300)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: mobile ? '56px var(--gutter) 32px' : '72px var(--gutter) 40px', display: 'grid', gridTemplateColumns: mobile ? '1fr 1fr' : '1.4fr 1fr 1fr 1fr', gap: mobile ? 'var(--space-8) var(--space-6)' : 'var(--space-10)' }}>
        <div style={{ gridColumn: mobile ? '1 / -1' : 'auto' }}>
          <div style={{ marginBottom: 'var(--space-5)' }}><Logo variant="light" size={30} /></div>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6, color: 'var(--neutral-400)', maxWidth: 280, margin: '0 0 var(--space-5)' }}>
            One application. Competitive offers from a marketplace of lenders. A real partner in your corner.
          </p>
          <div style={{ display: 'flex', gap: 12 }}>
            {['facebook', 'linkedin', 'twitter', 'instagram'].map((s) => (
              <a key={s} href="#" style={{ width: 36, height: 36, borderRadius: 'var(--radius-md)', background: 'rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--neutral-300)' }}>
                <i data-lucide={s} style={{ width: 18, height: 18 }}></i>
              </a>
            ))}
          </div>
        </div>
        {cols.map((c) => (
          <div key={c.h}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: '#fff', marginBottom: 'var(--space-5)', letterSpacing: '0.02em' }}>{c.h}</div>
            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
              {c.links.map((l) => (
                <li key={l}><a href={linkHref(l)} style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--neutral-400)' }}>{l}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ borderTop: '1px solid rgba(255,255,255,0.10)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '20px var(--gutter)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--neutral-500)' }}>© 2026 FastFund. All rights reserved.</span>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--neutral-500)', maxWidth: 560, textAlign: mobile ? 'left' : 'right' }}>
            California: state lender licensing to be confirmed prior to launch. This is an experimental test site — not for consumer use.
          </span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;