// MobileFooter.jsx — mobile-optimized info footer
const MobileFooter = ({ onRoute, onShopLine, user }) => {
  const linkStyle = {
    display: 'block', fontSize: 12, color: '#B8B8B8', textDecoration: 'none',
    padding: '7px 0',
  };

  const Link = ({ children, onClick, href }) => {
    const inner = <><span style={{ color: '#00FF41', marginRight: 6 }}>{'>'}</span>{children}</>;
    if (href) return <a href={href} style={linkStyle}>{inner}</a>;
    return <div style={linkStyle} onClick={onClick}>{inner}</div>;
  };

  return (
    <footer style={{ borderTop: '1px solid rgba(255,255,255,0.15)', padding: '0 16px 16px', marginTop: 32 }}>

      {/* Brand block */}
      <div onClick={() => onRoute('home')} style={{ padding: '18px 0 14px', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 24, height: 24, border: '1px solid #00FF41', display: 'grid', placeItems: 'center', color: '#00FF41', fontWeight: 800, fontSize: 12 }}>#</div>
        <div>
          <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.16em' }}>OPERATOR BREWING CO.</div>
        </div>
      </div>

      {/* Two-column layout for shop + learn */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 16px' }}>
        <div>
          <div style={{ fontSize: 9, letterSpacing: '0.25em', color: '#00FF41', padding: '8px 0 4px' }}>// SHOP</div>
          <Link onClick={() => onShopLine('core')}>Core</Link>
          <Link onClick={() => onShopLine('advanced')}>Advanced</Link>
          <Link onClick={() => onShopLine('seasonal')}>Seasonal</Link>
          <Link onClick={() => onShopLine('experimental')}>Experimental</Link>
        </div>
        <div>
          <div style={{ fontSize: 9, letterSpacing: '0.25em', color: '#00FF41', padding: '8px 0 4px' }}>// LEARN</div>
          <Link onClick={() => onRoute('guide')}>Brew Guide</Link>
          <Link onClick={() => onRoute('manifesto')}>Manifesto</Link>
          <Link onClick={() => onRoute('origins')}>Origin Notes</Link>
        </div>
      </div>

      {/* Contact — compact */}
      <div style={{ fontSize: 9, letterSpacing: '0.25em', color: '#00FF41', padding: '12px 0 4px' }}>// CONTACT</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 16px' }}>
        <Link href="mailto:support@operator-brewing.co">support@</Link>
        <Link href="mailto:press@operator-brewing.co">press@</Link>
        <Link href="mailto:wholesale@operator-brewing.co">wholesale@</Link>
        <Link href="https://instagram.com/operator_brewing">@operator_brewing</Link>
      </div>

      {/* Legal */}
      <div style={{ marginTop: 16, paddingTop: 12, borderTop: '1px dashed rgba(255,255,255,0.12)', fontSize: 9, letterSpacing: '0.18em', color: '#6E6E6E', lineHeight: 1.8, textAlign: 'center' }}>
        <div>&copy; 2026 OPERATOR BREWING CO. · ALL ROOTS RESERVED.</div>
        <div style={{ color: '#8A8A8A', marginTop: 2 }}>// drink responsibly. pwn responsibly.</div>
      </div>
    </footer>
  );
};

window.MobileFooter = MobileFooter;