/* Mesh website — footer */

function Footer({ onContact }) {
  // Columns mirror the header nav: Product · FAQs · Policy & Legal
  const cols = [
    ['Product', [
      { label: 'Overview', href: '/product-overview' },
      { label: 'Automated data collection', href: '/product-overview#feat-unified' },
      { label: 'Policy-driven accruals', href: '/product-overview#feat-policy' },
      { label: 'Full audit trail', href: '/product-overview#feat-audit' },
      { label: 'Posts to your ERP', href: '/product-overview#feat-erp' },
      { label: 'Variance analysis', href: '/product-overview#feat-variance' },
    ]],
    ['Policy & Legal', [
      { label: 'Privacy Policy', href: 'https://app.usemesh.com/privacy-policy' },
      { label: 'Trust Center', href: 'https://app.vanta.com/usemesh.com/trust/vq2hu8ytsbds77psfmtry' },
    ]],
    ['Blog', [
      // { label: 'ROI Calculator', href: '/roi-calculator' }, // hidden for now
      { label: 'Accrual Automation Guide', href: '/article-accrual-automation-month-end-close' },
      { label: 'Best AI Tools for Accruals', href: '/article-best-ai-tools-accruals' },
      { label: 'Unbilled Accruals Guide', href: '/article-unbilled-accruals-guide' },
      { label: 'Prepaid Amortization Guide', href: '/article-prepaid-expense-amortization' },
      { label: 'Mesh vs Gappify', href: '/mesh-vs-gappify' },
      { label: 'Mesh vs FinQuery', href: '/mesh-vs-finquery' },
      { label: 'Mesh vs Ramp', href: '/mesh-vs-ramp' },
      { label: 'Mesh vs FloQast', href: '/mesh-vs-floqast' },
      { label: 'Mesh vs Claude', href: '/mesh-vs-claude' },
      // { label: 'About us', href: '/about' }, // hidden for now
    ]],
  ];
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <img className="footer-logo" src={window.__assets("mesh-logo-blue.png")} alt="Mesh" />
            <p className="footer-tag">Auditable accruals, automatically. Built for accountants and the CPAs who review them.</p>
          </div>
          {cols.map(([h, items]) => (
            <div key={h}>
              <h5>{h}</h5>
              <ul>{items.map(it => (
                <li key={it.label}>
                  {it.action === 'contact'
                    ? <a href="#" onClick={(e) => { e.preventDefault(); onContact && onContact(); }}>{it.label}</a>
                    : <a href={it.href || '#'}>{it.label}</a>}
                </li>
              ))}</ul>
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <div className="footer-bottom-left">
            <img className="footer-aicpa" src={window.__assets("aicpa-soc.png")} alt="AICPA SOC for Service Organizations" />
            <span className="small">2026 Mesh</span>
          </div>
          <div className="footer-soc">
            <a href="https://www.linkedin.com/company/usemesh" target="_blank" rel="noopener" aria-label="LinkedIn">
              <Icon name="linkedin" className="ic" /><span>LinkedIn</span>
            </a>
            <a href="mailto:product@usemesh.com" aria-label="Email">
              <Icon name="mail" className="ic" /><span>Email</span>
            </a>
            <a href="https://www.ycombinator.com/companies/mesh-2" target="_blank" rel="noopener" aria-label="Y Combinator" className="footer-yc">
              <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
                <rect x="1" y="1" width="22" height="22" rx="4" fill="#F26625" />
                <text x="12" y="16.5" textAnchor="middle" fontSize="13" fontWeight="700" fontFamily="Arial, sans-serif" fill="#fff">Y</text>
              </svg>
              <span>Y Combinator</span>
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });