/* global React */
function Footer() {
  const t = window.useCopy();
  return (
    <footer id="footer" style={{
      background: 'var(--bg-base)',
      borderTop: '1px solid var(--bg-card)',
      padding: '80px 40px 48px',
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 56,
      }} className="footer-grid">

        {/* LEFT */}
        <div>
          <a href="#hero" style={{ display: 'inline-flex', alignItems: 'center', gap: 12, textDecoration: 'none', marginBottom: 20 }}>
            <svg viewBox="0 0 96 96" width={32} height={32} style={{ flex:'none' }}>
              <path d="M68 18 L32 48 L68 78 L60 78 L24 48 L60 18 Z" style={{ fill: 'var(--text-primary)' }}/>
            </svg>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, color: 'var(--text-primary)', letterSpacing: '-0.015em' }}>BoldBrandz</span>
          </a>
          <p style={{
            margin: '0 0 24px', maxWidth: 320,
            fontFamily: 'var(--font-display)', fontSize: 18, lineHeight: 1.55,
            color: 'var(--text-muted)',
          }}>
            {t.footer.tagline}
          </p>
          <p style={{
            margin: 0,
            fontFamily: 'var(--font-mono)', fontSize: 14,
            color: 'var(--text-faint)', letterSpacing: '0.08em',
          }}>{t.footer.copyright}</p>
        </div>

        {/* CENTER */}
        <div>
          <h4 style={{
            margin: '0 0 20px',
            fontFamily: 'var(--font-mono)', fontSize: 14,
            color: 'var(--text-primary)', letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 600,
          }}>{t.footer.contact_label}</h4>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            <li>
              <a href="mailto:info@boldbrandz.com" style={{
                fontFamily: 'var(--font-display)', fontSize: 18, color: 'var(--text-secondary)', textDecoration: 'none',
                transition: 'color 180ms',
              }}
                onMouseEnter={(e) => e.currentTarget.style.color = '#0047ff'}
                onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-secondary)'}
              >info@boldbrandz.com</a>
            </li>
            <li>
              <a href="https://wa.me/972534200984" target="_blank" rel="noopener noreferrer"
                dir="ltr"
                style={{
                  fontFamily: 'var(--font-display)', fontSize: 18, color: 'var(--text-secondary)', textDecoration: 'none',
                  transition: 'color 180ms', unicodeBidi: 'isolate', display: 'inline-block',
                }}
                onMouseEnter={(e) => e.currentTarget.style.color = '#0047ff'}
                onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-secondary)'}
              >+972 53-420-0984</a>
            </li>
            <li style={{ fontFamily: 'var(--font-display)', fontSize: 18, color: 'var(--text-dim)' }}>{t.footer.location}</li>
          </ul>
        </div>

        {/* RIGHT */}
        <div>
          <h4 style={{
            margin: '0 0 20px',
            fontFamily: 'var(--font-mono)', fontSize: 14,
            color: 'var(--text-primary)', letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 600,
          }}>{t.footer.follow_label}</h4>
          <div style={{ display: 'flex', gap: 14 }} className="footer-social">
            {/* TODO: Walid to verify real social profile URLs before launch */}
            <a href="https://linkedin.com/company/boldbrandz" target="_blank" rel="noopener noreferrer"
              aria-label="BoldBrandz on LinkedIn"
              style={{ color: 'var(--text-dim)', transition: 'color 180ms', display: 'inline-flex' }}
              onMouseEnter={(e) => e.currentTarget.style.color = '#0047ff'}
              onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-dim)'}>
              <svg viewBox="0 0 24 24" width={20} height={20} fill="currentColor">
                <path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3v9zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66V19z"/>
              </svg>
            </a>
            <a href="https://instagram.com/bold.brandz" target="_blank" rel="noopener noreferrer"
              aria-label="BoldBrandz on Instagram"
              style={{ color: 'var(--text-dim)', transition: 'color 180ms', display: 'inline-flex' }}
              onMouseEnter={(e) => e.currentTarget.style.color = '#0047ff'}
              onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-dim)'}>
              <svg viewBox="0 0 24 24" width={20} height={20} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="2" y="2" width="20" height="20" rx="5"/>
                <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z"/>
                <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
              </svg>
            </a>
            <a href="https://wa.me/972534200984?text=Hi%20BoldBrandz%2C%20I%27d%20like%20to%20learn%20more" target="_blank" rel="noopener noreferrer"
              aria-label="Message BoldBrandz on WhatsApp"
              data-gtm-event="Lead_WhatsApp_FooterSocial"
              style={{ color: 'var(--text-dim)', transition: 'color 180ms', display: 'inline-flex' }}
              onMouseEnter={(e) => e.currentTarget.style.color = '#0047ff'}
              onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-dim)'}>
              <svg viewBox="0 0 24 24" width={20} height={20} fill="currentColor">
                <path d="M17.5 14.4c-.3-.1-1.7-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.5-.5c.2-.2.2-.3.3-.5 0-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .1.2 2 3 4.7 4.2 1.7.7 2.3.8 3.1.7.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.5-.2zM12 2C6.5 2 2 6.5 2 12c0 1.9.5 3.7 1.5 5.3L2 22l4.8-1.5c1.5.8 3.3 1.3 5.2 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      {/* Bottom strip */}
      <div style={{
        margin: '80px auto 0', maxWidth: 1280,
        paddingTop: 28, borderTop: '1px solid var(--bg-card)',
        textAlign: 'center',
        fontFamily: 'var(--font-mono)',
        fontSize: 'clamp(18px, 2.2vw, 28px)',
        fontWeight: 600,
        color: 'var(--border-strong)',
        letterSpacing: '0.2em', textTransform: 'uppercase',
      }}>
        {t.footer.strip_tagline}
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });