// Footer.jsx — Funny Farm Creations

const Footer = ({ onNavigate }) => {
  const isMobile = useIsMobile();
  return (
    <footer style={{
      background: 'var(--bg-footer)',
      borderTop: '2px dashed #e4beba',
      marginTop: 80,
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        padding: isMobile ? '28px 16px' : '36px 24px',
        display: 'flex', flexWrap: 'wrap',
        justifyContent: isMobile ? 'center' : 'space-between',
        alignItems: 'center', gap: isMobile ? 16 : 20,
        textAlign: isMobile ? 'center' : 'left',
      }}>
        <div style={{ width: isMobile ? '100%' : 'auto' }}>
          <div style={{
            fontFamily: "'Plus Jakarta Sans', sans-serif",
            fontSize: 18, fontWeight: 900, color: '#af101a', fontStyle: 'italic',
            marginBottom: 4,
          }}>Funny Farm Creations</div>
          <div style={{
            fontFamily: "'Plus Jakarta Sans', sans-serif",
            fontSize: 10, fontWeight: 600, letterSpacing: '0.1em',
            textTransform: 'uppercase', color: 'var(--text-muted)',
          }}>© 2026 Funny Farm Creations. Handmade with love.</div>
        </div>

        <div style={{ display: 'flex', gap: isMobile ? 16 : 24, flexWrap: 'wrap', justifyContent: 'center' }}>
          {['Privacy Policy', 'Shipping Info', 'Returns', 'FAQ'].map(link => (
            <a key={link} href="#" style={{
              fontFamily: "'Plus Jakarta Sans', sans-serif",
              fontSize: 10, fontWeight: 600, letterSpacing: '0.08em',
              textTransform: 'uppercase', color: 'var(--text-muted)',
              textDecoration: 'none',
              transition: 'color 150ms',
            }}
              onMouseEnter={e => { e.currentTarget.style.color = '#af101a'; e.currentTarget.style.textDecoration = 'underline'; e.currentTarget.style.textDecorationStyle = 'dashed'; }}
              onMouseLeave={e => { e.currentTarget.style.color = 'var(--text-muted)'; e.currentTarget.style.textDecoration = 'none'; }}
            >{link}</a>
          ))}
        </div>

        <div style={{ display: 'flex', gap: 10, justifyContent: 'center' }}>
          {['share', 'alternate_email', 'camera'].map(icon => (
            <button key={icon} style={{
              width: 36, height: 36, borderRadius: '50%',
              background: 'var(--bg-card)', border: 'none',
              color: '#af101a', cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 2px 8px rgba(119,87,77,0.10)',
              transition: 'transform 150ms',
            }}
              onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.12)'}
              onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
            >
              <span className="material-symbols-outlined" style={{ fontSize: 18 }}>{icon}</span>
            </button>
          ))}
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Footer });