/* global React */
// Footer — charcoal, continues the dark close.
function Footer() {
  const DS = window.ReconcileAIDesignSystem_c7572b;
  const { Logo } = DS;
  React.useEffect(() => { requestAnimationFrame(() => window.lucide && window.lucide.createIcons()); });

  const cols = [
    {
      title: 'Product',
      links: [
        { label: 'Why ReconcileAI', target: 'why-reconcileai' },
        { label: 'How it works', target: 'how-it-works' },
        { label: 'Impact', target: 'exceptions-queue' },
      ],
    },
  ];

  const scrollToSection = (target) => {
    if (!target) return;
    const el = document.getElementById(target);
    if (!el) return;
    const y = el.getBoundingClientRect().top + window.scrollY - 88;
    window.scrollTo({ top: y, behavior: 'smooth' });
  };

  return (
    <footer style={{ background: 'var(--ink-900)', borderTop: '1px solid rgba(255,255,255,0.08)' }}>
      <div style={{
        maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'clamp(3rem,6vw,4.5rem) var(--container-pad) 2rem',
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr repeat(3, 1fr)', gap: '40px' }} className="rai-foot-grid">
          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '30ch' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '9px' }}>
              <img src="../../assets/logo/reconcileai-mark-white.png" alt="" style={{ height: 24 }} />
              <Logo height={19} tone="inverse" />
            </div>
            <p style={{ fontSize: '14px', lineHeight: 1.6, color: 'var(--gray-400)', margin: 0 }}>
              The 5% reconciliation software misses out on — explained, resolved, and categorised by AI.
            </p>
          </div>
          {cols.map((c) => (
            <div key={c.title} style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
              <span style={{ fontFamily: 'var(--font-sans)', fontSize: '12px', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--gray-500)' }}>{c.title}</span>
              {c.links.map((l) => (
                <a key={l.label} href={`#${l.target}`} style={{ fontSize: '14px', color: 'var(--gray-300)', textDecoration: 'none' }}
                   onClick={(e) => { e.preventDefault(); scrollToSection(l.target); }}
                   onMouseEnter={(e)=>e.currentTarget.style.color='#fff'} onMouseLeave={(e)=>e.currentTarget.style.color='var(--gray-300)'}>{l.label}</a>
              ))}
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '20px', flexWrap: 'wrap', marginTop: '44px', paddingTop: '22px', borderTop: '1px solid rgba(255,255,255,0.08)' }}>
          <span style={{ fontSize: '13px', color: 'var(--gray-500)' }}>© 2026 ReconcileAI. All rights reserved.</span>
          <div style={{ display: 'flex', gap: '16px', color: 'var(--gray-400)' }}>
            <i data-lucide="mail" style={{ width: 18, height: 18 }}></i>
            <i data-lucide="globe" style={{ width: 18, height: 18 }}></i>
            <i data-lucide="rss" style={{ width: 18, height: 18 }}></i>
          </div>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;