// Footer. No customer.service references. Two directors + headquarters.
(function () {
  const { Icons, Link } = window.GR;
  const { Mail, Phone, Pin } = Icons;

  const NAV_GROUPS = [
    {
      label: 'Company',
      links: [
        ['About Us', '/about'],
        ['Mission & Vision', '/mission'],
        ['Competitive Advantages', '/advantages'],
        ['Contact', '/contact'],
      ],
    },
    {
      label: 'Operations',
      links: [
        ['Industrial Chemicals', '/chemicals'],
        ['Commodities Trading', '/commodities'],
        ['Industries Served', '/industries'],
        ['Logistics & Distribution', '/logistics'],
      ],
    },
  ];

  function Footer() {
    return (
      <footer
        style={{
          background: 'var(--color-navy-dark)', color: '#fff',
          borderTop: '1px solid var(--color-green)',
          padding: '72px 0 28px',
        }}
      >
        <div className="gr-container-wide">
          <div
            className="gr-grid-2-split"
            style={{
              display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr',
              gap: 48, paddingBottom: 48,
              borderBottom: '1px solid rgba(255,255,255,0.12)',
            }}
          >
            <div>
              <img src="assets/mark-white-on-navy.png" alt="GR Unity Trading"
                style={{ height: 40, marginBottom: 20 }} />
              <div style={{
                fontFamily: 'var(--font-display)', fontSize: 22,
                letterSpacing: '0.04em', color: '#fff',
                marginBottom: 12, lineHeight: 1.05,
              }}>
                GR Unity Trading LLC
              </div>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 10,
                letterSpacing: '0.22em', textTransform: 'uppercase',
                color: 'var(--color-green)', lineHeight: 1.7, maxWidth: 320,
              }}>
                Industrial Chemicals, Commodities<br />
                &amp; LATAM Distribution
              </div>
              <div style={{
                marginTop: 24, display: 'flex', alignItems: 'center', gap: 8,
                fontFamily: 'var(--font-body)', fontSize: 13, color: 'rgba(255,255,255,0.78)',
              }}>
                <Pin size={14} />
                <span>Florida, United States</span>
              </div>
            </div>

            <div>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em',
                textTransform: 'uppercase', color: 'var(--color-green)', marginBottom: 16,
              }}>Directorship</div>

              <div style={{ marginBottom: 20 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, letterSpacing: '0.04em', color: '#fff', marginBottom: 4 }}>
                  Oscar Ganem
                </div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em',
                  color: 'rgba(255,255,255,0.55)', textTransform: 'uppercase', marginBottom: 10,
                }}>
                  Director
                </div>
                <a href="mailto:oscar.ganem@grunitytrading.com" style={{
                  display: 'flex', alignItems: 'center', gap: 8,
                  fontFamily: 'var(--font-body)', fontSize: 13,
                  color: 'rgba(255,255,255,0.85)', marginBottom: 6,
                }}>
                  <Mail size={13} /> oscar.ganem@grunitytrading.com
                </a>
                <a href="tel:+19542745399" style={{
                  display: 'flex', alignItems: 'center', gap: 8,
                  fontFamily: 'var(--font-body)', fontSize: 13,
                  color: 'rgba(255,255,255,0.85)',
                }}>
                  <Phone size={13} /> +1 (954) 274-5399
                </a>
              </div>

              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, letterSpacing: '0.04em', color: '#fff', marginBottom: 4 }}>
                  Oskar Ganem
                </div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em',
                  color: 'rgba(255,255,255,0.55)', textTransform: 'uppercase', marginBottom: 10,
                }}>
                  Director of Technology
                </div>
                <a href="mailto:oskar.technology@grunitytrading.com" style={{
                  display: 'flex', alignItems: 'center', gap: 8,
                  fontFamily: 'var(--font-body)', fontSize: 13, color: 'rgba(255,255,255,0.85)',
                }}>
                  <Mail size={13} /> oskar.technology@grunitytrading.com
                </a>
              </div>
            </div>

            {NAV_GROUPS.map((group) => (
              <div key={group.label}>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em',
                  textTransform: 'uppercase', color: 'var(--color-green)', marginBottom: 16,
                }}>
                  {group.label}
                </div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {group.links.map(([label, path]) => (
                    <li key={path}>
                      <Link to={path} style={{
                        fontFamily: 'var(--font-body)', fontSize: 13,
                        color: 'rgba(255,255,255,0.78)',
                        transition: 'color 0.2s var(--ease-out)',
                      }}
                        onMouseEnter={(e) => (e.currentTarget.style.color = '#fff')}
                        onMouseLeave={(e) => (e.currentTarget.style.color = 'rgba(255,255,255,0.78)')}
                      >
                        {label}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

          <div style={{
            paddingTop: 24, display: 'flex', flexWrap: 'wrap',
            justifyContent: 'space-between', alignItems: 'center', gap: 12,
            fontFamily: 'var(--font-mono)', fontSize: 10,
            letterSpacing: '0.16em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.55)',
          }}>
            <div>© {new Date().getFullYear()} GR Unity Trading LLC — Florida, United States</div>
            <div style={{ display: 'flex', gap: 22, flexWrap: 'wrap' }}>
              <Link to="/" style={{ color: 'inherit' }}>Home</Link>
              <Link to="/about" style={{ color: 'inherit' }}>About</Link>
              <Link to="/chemicals" style={{ color: 'inherit' }}>Chemicals</Link>
              <Link to="/commodities" style={{ color: 'inherit' }}>Commodities</Link>
              <Link to="/contact" style={{ color: 'inherit' }}>Contact</Link>
            </div>
          </div>
        </div>
      </footer>
    );
  }

  window.GR = Object.assign(window.GR || {}, { Footer });
})();