/* Footer + CTA section */
(function() {

function WebsiteFooter() {
  const ctaSection = {
    background: '#0D0F13',
    borderTop: '1px solid rgba(255,255,255,0.05)',
    padding: '120px 40px',
    textAlign: 'center',
    position: 'relative',
    overflow: 'hidden',
  };

  const glowStyle = {
    position: 'absolute', top: '50%', left: '50%',
    transform: 'translate(-50%, -50%)',
    width: '600px', height: '300px',
    background: 'radial-gradient(ellipse, rgba(46,143,255,0.07) 0%, transparent 70%)',
    pointerEvents: 'none',
  };

  const ctaInner = { position: 'relative', zIndex: 2, maxWidth: '640px', margin: '0 auto' };

  const overline = {
    fontFamily: 'Inter, sans-serif', fontSize: '11px', fontWeight: 600,
    letterSpacing: '0.14em', textTransform: 'uppercase', color: '#2E8FFF',
    display: 'block', marginBottom: '20px',
  };

  const heading = {
    fontFamily: 'DM Sans, sans-serif', fontWeight: 600,
    fontSize: 'clamp(32px, 4vw, 52px)', lineHeight: 1.08,
    letterSpacing: '-0.03em', color: '#F0F2F5', marginBottom: '20px',
  };

  const sub = {
    fontFamily: 'Inter, sans-serif', fontSize: '16px', lineHeight: 1.7,
    color: '#8A9BB0', marginBottom: '40px',
  };

  const btnPrimary = {
    fontFamily: 'Inter, sans-serif', fontSize: '14px', fontWeight: 500,
    color: '#fff', background: '#2E8FFF', border: 'none', borderRadius: '6px',
    padding: '13px 32px', cursor: 'pointer', transition: 'all 220ms',
    boxShadow: '0 0 28px rgba(46,143,255,0.35)',
  };

  const btnGhost = {
    fontFamily: 'Inter, sans-serif', fontSize: '14px', fontWeight: 500,
    color: '#8A9BB0', background: 'transparent',
    border: '1px solid rgba(255,255,255,0.08)', borderRadius: '6px',
    padding: '13px 28px', cursor: 'pointer', transition: 'all 220ms',
  };

  const trust = [
    'No setup fee for pilots',
    'Deployment support included',
    'On-premise or cloud deployment',
  ];

  const footerBase = {
    background: '#0A0B0D',
    borderTop: '1px solid rgba(255,255,255,0.05)',
    padding: '60px 40px 40px',
  };

  const footerGrid = {
    maxWidth: '1200px', margin: '0 auto',
    display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr',
    gap: '48px', marginBottom: '48px',
  };

  const colHead = {
    fontFamily: 'Inter, sans-serif', fontSize: '11px', fontWeight: 600,
    letterSpacing: '0.1em', textTransform: 'uppercase', color: '#4A5568',
    marginBottom: '16px',
  };

  const footLink = {
    fontFamily: 'Inter, sans-serif', fontSize: '13px', color: '#8A9BB0',
    display: 'block', marginBottom: '10px', textDecoration: 'none', cursor: 'pointer',
    transition: 'color 180ms',
  };

  const logoMark = { width: '22px', height: '22px', border: '1.5px solid #2E8FFF', borderRadius: '3px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginRight: '8px', verticalAlign: 'middle' };
  const logoInner = { width: '7px', height: '7px', background: '#2E8FFF', borderRadius: '1px' };

  return (
    <>
      {/* CTA */}
      <div id="contact" style={ctaSection}>
        <div style={glowStyle}></div>
        <div style={ctaInner}>
          <span className="reveal" style={overline}>Get Started</span>
          <h2 className="reveal reveal-delay-1" style={heading}>
            Ready to connect your operations?
          </h2>
          <p className="reveal reveal-delay-2" style={sub}>
            Book a 30-minute introduction or request a hands-on demo tailored to your industry and site configuration.
          </p>
          <div className="reveal reveal-delay-3" style={{ display: 'flex', gap: '12px', justifyContent: 'center', flexWrap: 'wrap', marginBottom: '32px' }}>
            <button style={btnPrimary}
              onMouseEnter={e => { e.target.style.filter = 'brightness(1.1)'; e.target.style.boxShadow = '0 0 40px rgba(46,143,255,0.5)'; }}
              onMouseLeave={e => { e.target.style.filter = ''; e.target.style.boxShadow = '0 0 28px rgba(46,143,255,0.35)'; }}>
              Request a Demo
            </button>
            <button style={btnGhost}
              onMouseEnter={e => { e.target.style.color = '#F0F2F5'; e.target.style.borderColor = 'rgba(255,255,255,0.15)'; }}
              onMouseLeave={e => { e.target.style.color = '#8A9BB0'; e.target.style.borderColor = 'rgba(255,255,255,0.08)'; }}>
              Book 30-min Introduction
            </button>
          </div>
          <div className="reveal reveal-delay-4" style={{ display: 'flex', gap: '32px', justifyContent: 'center', flexWrap: 'wrap' }}>
            {trust.map(t => (
              <span key={t} style={{ display: 'flex', alignItems: 'center', gap: '8px', fontFamily: 'Inter, sans-serif', fontSize: '12px', color: '#4A5568' }}>
                <span style={{ color: '#2E8FFF', fontSize: '10px' }}>✓</span> {t}
              </span>
            ))}
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer style={footerBase}>
        <div style={footerGrid}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
              <span style={logoMark}><span style={logoInner}></span></span>
              <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: '16px', fontWeight: 600, letterSpacing: '-0.025em', color: '#F0F2F5' }}>operasis</span>
            </div>
            <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '13px', color: '#4A5568', lineHeight: 1.7, maxWidth: '260px' }}>
              Enterprise operations platform for warehouse management, procurement, and field operations.
            </p>
          </div>
          <div>
            <div style={colHead}>Platform</div>
            {['Warehouse','Procurement','Operasis Suite','CO Pilot','Mobile Field'].map(l => (
              <a key={l} style={footLink}
                onMouseEnter={e => e.target.style.color = '#F0F2F5'}
                onMouseLeave={e => e.target.style.color = '#8A9BB0'}>{l}</a>
            ))}
          </div>
          <div>
            <div style={colHead}>Industries</div>
            {['Municipalities','Industrial','Utilities','Factories','Energy & Treatment'].map(l => (
              <a key={l} style={footLink}
                onMouseEnter={e => e.target.style.color = '#F0F2F5'}
                onMouseLeave={e => e.target.style.color = '#8A9BB0'}>{l}</a>
            ))}
          </div>
          <div>
            <div style={colHead}>Company</div>
            {['About','Contact','Privacy Policy','Terms of Service'].map(l => (
              <a key={l} style={footLink}
                onMouseEnter={e => e.target.style.color = '#F0F2F5'}
                onMouseLeave={e => e.target.style.color = '#8A9BB0'}>{l}</a>
            ))}
          </div>
        </div>
        <div style={{ maxWidth: '1200px', margin: '0 auto', paddingTop: '24px', borderTop: '1px solid rgba(255,255,255,0.05)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '12px', color: '#2A3346' }}>© 2024 Operasis. All rights reserved.</span>
          <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: '11px', color: '#2A3346' }}>v2.4.1</span>
        </div>
      </footer>
    </>
  );
}

Object.assign(window, { WebsiteFooter });
})();