// Footer.jsx — fully wired links
const Footer = ({ onRoute, onShopLine, user }) => {
  const Item = ({ children, onClick, href }) => {
    const content = (<>{'> '}{children}</>);
    const style = {
      fontSize: 12, color: '#B8B8B8', marginBottom: 6, cursor: 'pointer',
      display: 'block', textDecoration: 'none',
      transition: 'color 80ms',
    };
    if (href) return <a href={href} style={style} onMouseEnter={(e) => e.currentTarget.style.color = '#00FF41'} onMouseLeave={(e) => e.currentTarget.style.color = '#B8B8B8'}>{content}</a>;
    return <span style={style} onClick={onClick} onMouseEnter={(e) => e.currentTarget.style.color = '#00FF41'} onMouseLeave={(e) => e.currentTarget.style.color = '#B8B8B8'}>{content}</span>;
  };

  return (
    <footer style={{ borderTop: '1px solid rgba(255,255,255,0.1)', padding: '48px 24px 32px', marginTop: 80 }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 32 }}>
          <div>
            <div onClick={() => onRoute('home')} style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}>
              <div style={{ width: 28, height: 28, border: '1px solid #00FF41', display: 'grid', placeItems: 'center', color: '#00FF41', fontWeight: 800 }}>#</div>
              <span style={{ fontSize: 14, fontWeight: 800, letterSpacing: '0.16em' }}>OPERATOR BREWING CO.</span>
            </div>
            <p style={{ marginTop: 14, color: '#6E6E6E', fontSize: 12, lineHeight: 1.7, maxWidth: 320 }}>
              roasted for operators. high quality beans. ethically sourced. small batch. no fillers. no shortcuts.
            </p>
          </div>

          {/* SHOP */}
          <div>
            <div style={{ fontSize: 10, letterSpacing: '0.25em', color: '#00FF41', marginBottom: 10 }}>// SHOP</div>
            <Item onClick={() => onShopLine('core')}>core line</Item>
            <Item onClick={() => onShopLine('advanced')}>advanced</Item>
            <Item onClick={() => onShopLine('seasonal')}>seasonal</Item>
            <Item onClick={() => onShopLine('experimental')}>experimental</Item>
            <Item onClick={() => onRoute(user ? 'account' : 'login')}>subscribe</Item>
          </div>

          {/* LEARN */}
          <div>
            <div style={{ fontSize: 10, letterSpacing: '0.25em', color: '#00FF41', marginBottom: 10 }}>// LEARN</div>
            <Item onClick={() => onRoute('guide')}>brew guide</Item>
            <Item onClick={() => onRoute('manifesto')}>manifesto</Item>
            <Item onClick={() => onRoute('origins')}>origin notes</Item>
          </div>

          {/* CONTACT */}
          <div>
            <div style={{ fontSize: 10, letterSpacing: '0.25em', color: '#00FF41', marginBottom: 10 }}>// CONTACT</div>
            <Item href="mailto:support@operator-brewing.co">support@</Item>
            <Item href="mailto:press@operator-brewing.co">press@</Item>
            <Item href="mailto:wholesale@operator-brewing.co">wholesale@</Item>
            <Item href="https://instagram.com/operator_brewing" >@operator_brewing</Item>
          </div>
        </div>

        <div style={{ marginTop: 40, paddingTop: 18, borderTop: '1px dashed rgba(255,255,255,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 10, letterSpacing: '0.2em', color: '#3A3A3A' }}>
          <span>© 2026 OPERATOR BREWING CO. ALL ROOTS RESERVED.</span>
          <span style={{ color: '#6E6E6E' }}>// drink responsibly. pwn responsibly.</span>
          <span>v 4.0.4</span>
        </div>
      </div>
    </footer>
  );
};

window.Footer = Footer;