// Footer.jsx — fully wired links
const Footer = ({ onRoute, onShopLine, onMerchLine, 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: window.OBC_FLAGS && window.OBC_FLAGS.merch_enabled ? '1.4fr 1fr 1fr 1fr 1fr' : '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 — dynamic from active lines */}
          <div>
            <div style={{ fontSize: 10, letterSpacing: '0.25em', color: '#00FF41', marginBottom: 10 }}>// SHOP</div>
            <FooterShopLinks onShopLine={onShopLine} />
            <Item onClick={() => onRoute(user ? 'account' : 'login')}>subscribe</Item>
          </div>

          {/* MERCH — conditional on flag */}
          {window.OBC_FLAGS && window.OBC_FLAGS.merch_enabled && (
            <div>
              <div style={{ fontSize: 10, letterSpacing: '0.25em', color: '#00FF41', marginBottom: 10 }}>// MERCH</div>
              {window.OBC_MERCH_CATEGORY_ORDER && window.OBC_MERCH_CATEGORY_ORDER.map((catId) => {
                var meta = window.OBC_MERCH_CATEGORIES[catId];
                return (
                  <span key={catId} style={{
                    fontSize: 12, color: '#B8B8B8', marginBottom: 6, cursor: 'pointer',
                    display: 'block', transition: 'color 80ms',
                  }}
                  onClick={() => onMerchLine && onMerchLine(catId)}
                  onMouseEnter={(e) => e.currentTarget.style.color = meta.color}
                  onMouseLeave={(e) => e.currentTarget.style.color = '#B8B8B8'}
                  >{'> '}{meta.label.toLowerCase()}</span>
                );
              })}
            </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>
            <Item onClick={() => onRoute('operators')}>master operators</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 onClick={() => onRoute('privacy')} style={{ color: '#6E6E6E', cursor: 'pointer' }}>PRIVACY POLICY</span>
          <span style={{ color: '#6E6E6E' }}>// drink responsibly. pwn responsibly.</span>
        </div>
      </div>
    </footer>
  );
};

const FooterShopLinks = ({ onShopLine }) => {
  const [lines, setLines] = React.useState([]);
  React.useEffect(() => {
    window.OBC_API.getAllProducts().then((products) => {
      setLines(window.OBC_GET_LINES(products));
    });
  }, []);
  return lines.map((l) => (
    <span key={l.id} style={{
      fontSize: 12, color: '#B8B8B8', marginBottom: 6, cursor: 'pointer',
      display: 'block', transition: 'color 80ms',
    }}
    onClick={() => onShopLine(l.id)}
    onMouseEnter={(e) => e.currentTarget.style.color = '#00FF41'}
    onMouseLeave={(e) => e.currentTarget.style.color = '#B8B8B8'}
    >{'> '}{l.label.toLowerCase()}</span>
  ));
};

window.Footer = Footer;