// Footer Component
const Footer = ({ setCurrentPage, inventoryCount = 1 }) => {
  const handleNav = (id) => {
    setCurrentPage(id);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <footer style={{
      background: '#0F1D33',
      color: 'rgba(255,255,255,0.7)',
      fontFamily: 'Inter, sans-serif',
      paddingTop: '56px',
    }}>
      <div style={{
        maxWidth: '1200px', margin: '0 auto', padding: '0 32px',
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
        gap: '40px', paddingBottom: '48px',
      }}>
        {/* Brand col */}
        <div>
          <img src="uploads/logo-7179fe62.png" alt="Sea Steel Storage"
            style={{ height: '44px', marginBottom: '16px', display: 'block', objectFit: 'contain' }} />
          <p style={{ fontSize: '14px', lineHeight: '1.7', color: 'rgba(255,255,255,0.55)', maxWidth: '260px' }}>
            Washington-owned shipping container sales and rentals. Serving WA, OR, and ID with national wholesale options.
          </p>
          <div style={{ marginTop: '20px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
            <a href="tel:2532719238" style={{ color: '#4A9FD4', fontSize: '14px', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '8px' }}>
              <span style={{ fontSize: '16px' }}>📞</span> (253) 271-9238
            </a>
            <a href="mailto:Sales@seasteelstorage.com" style={{ color: '#4A9FD4', fontSize: '14px', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '8px' }}>
              <span style={{ fontSize: '16px' }}>✉</span> Sales@seasteelstorage.com
            </a>
            <a href="https://www.facebook.com/share/18JwPrXa16/?mibextid=wwXIfr" target="_blank" rel="noreferrer" style={{ color: '#4A9FD4', fontSize: '14px', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '8px' }}>
              <span style={{ fontSize: '16px' }}>🔵</span> Follow us on Facebook
            </a>
          </div>
        </div>

        {/* Navigation */}
        <div>
          <h4 style={{ color: '#fff', fontSize: '13px', fontWeight: '700', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: '16px', margin: '0 0 16px 0' }}>
            Navigation
          </h4>
          {[
            { id: 'home', label: 'Home' },
            { id: 'sales', label: 'Container Sales' },
            { id: 'rentals', label: 'Container Rentals' },
            ...(inventoryCount > 0 ? [{ id: 'inventory', label: 'Current Inventory' }] : []),
            { id: 'delivery', label: 'Delivery' },
            { id: 'estimator', label: 'Price Estimator' },
            { id: 'contact', label: 'Contact / Quote' },
          ].map(item => (
            <button key={item.id} onClick={() => handleNav(item.id)} style={{
              display: 'block', background: 'none', border: 'none', cursor: 'pointer',
              color: 'rgba(255,255,255,0.6)', fontSize: '14px', padding: '5px 0',
              fontFamily: 'Inter, sans-serif', textAlign: 'left',
              transition: 'color 0.2s',
            }}
            onMouseEnter={e => e.target.style.color = '#4A9FD4'}
            onMouseLeave={e => e.target.style.color = 'rgba(255,255,255,0.6)'}
            >
              {item.label}
            </button>
          ))}
        </div>

        {/* Service Area */}
        <div>
          <h4 style={{ color: '#fff', fontSize: '13px', fontWeight: '700', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: '16px', margin: '0 0 16px 0' }}>
            Service Area
          </h4>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
            {['Washington (WA)', 'Oregon (OR)', 'Idaho (ID)', 'National Wholesale Available'].map(s => (
              <div key={s} style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px', color: 'rgba(255,255,255,0.6)' }}>
                <span style={{ color: '#4A9FD4', fontWeight: 'bold' }}>→</span> {s}
              </div>
            ))}
          </div>
          <div style={{ marginTop: '24px' }}>
            <h4 style={{ color: '#fff', fontSize: '13px', fontWeight: '700', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: '12px', margin: '0 0 12px 0' }}>
              Container Types
            </h4>
            {["20' Standard", "40' High Cube", 'Specialty Containers', 'Sales & Rentals'].map(s => (
              <div key={s} style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px', color: 'rgba(255,255,255,0.6)', padding: '4px 0' }}>
                <span style={{ color: '#4A9FD4', fontWeight: 'bold' }}>→</span> {s}
              </div>
            ))}
          </div>
        </div>

        {/* CTA */}
        <div>
          <h4 style={{ color: '#fff', fontSize: '13px', fontWeight: '700', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: '16px', margin: '0 0 16px 0' }}>
            Get a Quote
          </h4>
          <p style={{ fontSize: '14px', color: 'rgba(255,255,255,0.55)', lineHeight: '1.6', marginBottom: '20px' }}>
            Ready to price your container? Tell us what you need and we'll get back to you fast.
          </p>
          <button onClick={() => handleNav('contact')} style={{
            display: 'block', width: '100%', background: '#4A9FD4',
            color: '#fff', border: 'none', cursor: 'pointer',
            fontFamily: 'Inter, sans-serif', fontSize: '14px', fontWeight: '600',
            padding: '13px 20px', borderRadius: '6px', textAlign: 'center',
            marginBottom: '10px', transition: 'background 0.2s',
          }}
          onMouseEnter={e => e.target.style.background = '#3a8fc4'}
          onMouseLeave={e => e.target.style.background = '#4A9FD4'}
          >
            Get a Free Quote
          </button>
          <a href="tel:2532719238" style={{
            display: 'block', width: '100%', background: 'transparent',
            color: '#fff', border: '1px solid rgba(255,255,255,0.2)', cursor: 'pointer',
            fontFamily: 'Inter, sans-serif', fontSize: '14px', fontWeight: '600',
            padding: '13px 20px', borderRadius: '6px', textAlign: 'center',
            textDecoration: 'none', boxSizing: 'border-box',
          }}>
            Call (253) 271-9238
          </a>
        </div>
      </div>

      {/* Bottom bar */}
      <div style={{
        borderTop: '1px solid rgba(255,255,255,0.08)',
        padding: '20px 32px',
        maxWidth: '1200px', margin: '0 auto',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        flexWrap: 'wrap', gap: '12px',
      }}>
        <p style={{ fontSize: '13px', color: 'rgba(255,255,255,0.35)', margin: 0 }}>
          © {new Date().getFullYear()} Sea Steel Storage. All rights reserved. Washington-owned and operated.
        </p>
        <p style={{ fontSize: '13px', color: 'rgba(255,255,255,0.35)', margin: 0 }}>
          Serving WA • OR • ID
        </p>
      </div>
    </footer>
  );
};

Object.assign(window, { Footer });