// Footer — single-page, section-scroll links
window.Footer = function Footer() {
  const { audience } = React.useContext(window.AudienceContext);
  const scrollTo = (id) => {
    if (!id) { window.scrollTo({ top: 0, behavior: 'smooth' }); return; }
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth' });
  };
  // Bottom row of in-page anchor links — ordered to match the actual section
  // flow on the homepage (top to bottom). The "Join" link matches the CTA
  // pills: customers leave to the app's signup flow, venues scroll to #join.
  const flowLinks = [
    { label: 'How it works', id: 'how' },
    { label: 'LÜP locations', id: 'locations' },
    { label: 'Why LÜP', id: 'why' },
    { label: 'The bowls', id: 'bowls' },
    audience === 'customer'
      ? { label: 'Join', href: 'https://app.lupit.com.au/join' }
      : { label: 'Join', id: 'join' },
    { label: 'FAQs', id: 'faq' },
  ];

  const cols = [
    { title: 'Resources', links: [
      { label: 'FAQs', id: 'faq' },
      { label: 'Terms & Conditions', href: '#' },
      { label: 'Privacy Policy', href: '#' },
    ] },
    { title: 'Contact', links: [
      { label: 'contact@lupit.com.au', href: 'mailto:contact@lupit.com.au' },
    ] },
  ];

  return React.createElement('footer', {
    style: { background: 'var(--charcoal)', color: 'var(--ivory)', padding: '70px 24px 32px', position: 'relative', overflow: 'hidden' }
  },
    // Big logo watermark behind footer
    React.createElement('div', {
      style: { position: 'absolute', left: -60, bottom: -60, opacity: 0.08, pointerEvents: 'none' }
    }, React.createElement('img', {
      src: 'assets/lup-logo.svg?v=2', alt: '',
      style: { width: 320, height: 'auto', display: 'block' }
    })),
    React.createElement('div', { className: 'container', style: { position: 'relative', zIndex: 1 } },
      // Big wordmark band
      React.createElement('div', {
        className: 'footer-grid',
        style: {
          display: 'grid', gridTemplateColumns: '2fr 1fr 1fr',
          gap: 40, marginBottom: 60,
        }
      },
        React.createElement('div', { className: 'footer-brand' },
          React.createElement('img', {
            src: 'assets/lup-logo.svg?v=2', alt: 'LÜP',
            style: { height: 56, filter: 'brightness(0) invert(1)', marginBottom: 20, opacity: 0.95 }
          }),
          React.createElement('p', { style: { fontSize: 14, color: 'rgba(250,245,237,0.65)', lineHeight: 1.65, maxWidth: 280, marginBottom: 22 } },
            'The easy, sustainable way to serve takeaway. Reusable bowls for Australian restaurants and cafes.'
          ),
          React.createElement('div', { style: { fontSize: 12, color: 'rgba(250,245,237,0.5)', letterSpacing: '0.3px' } }, 'Proudly made for Australia'),
        ),
        ...cols.map(col => React.createElement('div', { key: col.title },
          React.createElement('div', { style: { fontSize: 11, fontWeight: 500, letterSpacing: '0.8px', textTransform: 'uppercase', color: 'rgba(250,245,237,0.55)', marginBottom: 16 } }, col.title),
          React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 11 } },
            col.links.map(l => React.createElement('a', {
              key: l.label, href: l.href || `#${l.id || ''}`,
              onClick: l.href ? undefined : (e => { e.preventDefault(); scrollTo(l.id); }),
              style: { fontSize: 14, color: 'rgba(250,245,237,0.85)', textDecoration: 'none', transition: 'color 0.15s' },
              onMouseEnter: e => e.target.style.color = 'var(--terracotta-soft)',
              onMouseLeave: e => e.target.style.color = 'rgba(250,245,237,0.85)',
            }, l.label)),
          ),
        )),
      ),
      // Bottom row
      React.createElement('div', {
        style: {
          borderTop: '1px solid rgba(250,245,237,0.12)', paddingTop: 24,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          flexWrap: 'wrap', gap: 18,
        }
      },
        React.createElement('div', { style: { fontSize: 13, color: 'rgba(250,245,237,0.5)' } }, '© 2026 LÜP Reuse Network. All rights reserved.'),
        React.createElement('div', { style: { display: 'flex', gap: 18, flexWrap: 'wrap' } },
          flowLinks.map(l => React.createElement('a', {
            key: l.label,
            href: l.href || `#${l.id}`,
            onClick: l.href ? undefined : (e => { e.preventDefault(); scrollTo(l.id); }),
            style: { fontSize: 13, color: 'rgba(250,245,237,0.5)', textDecoration: 'none', transition: 'color 0.15s' },
            onMouseEnter: e => e.target.style.color = 'rgba(250,245,237,0.85)',
            onMouseLeave: e => e.target.style.color = 'rgba(250,245,237,0.5)',
          }, l.label)),
        ),
      ),
    ),
  );
};

// NOTE: ImpactBand ("The problem" section) was merged into WhyLUP.jsx
// — it now renders as the first block inside <section id="why"> with
// id="problem" preserved on its wrapper div for anchor links and the
// scroll-tracker in index.html.