const { useState, useEffect } = React;

function Footer() {
  const [isMobile, setIsMobile] = useState(window.innerWidth < 640);
  useEffect(() => {
    const fn = () => setIsMobile(window.innerWidth < 640);
    window.addEventListener('resize', fn);
    return () => window.removeEventListener('resize', fn);
  }, []);

  const px = isMobile ? '20px' : '52px';

  return React.createElement('footer', { style:{ background:'var(--coffee)', padding:`24px ${px}`, display:'flex', flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'flex-start' : 'center', justifyContent:'space-between', gap: isMobile ? 16 : 0 } },
    React.createElement('span', { style:{ fontFamily:'var(--mono)', fontSize:11, color:'rgba(243,248,242,0.35)', letterSpacing:'0.06em' } }, '2026 Zueta Media'),
    React.createElement('span', { style:{ fontFamily:'var(--serif)', fontSize:14, color:'rgba(243,248,242,0.5)', fontStyle:'italic' } }, 'Building Alysion'),
    React.createElement('div', { style:{ display:'flex', gap:20, flexWrap:'wrap' } },
      [{ label:'Get in touch', hi:true },{ label:'GitHub' },{ label:'LinkedIn' },{ label:'Writing' }].map(({ label, hi }) =>
        React.createElement('a', {
          key:label, href:'#',
          style:{ fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.06em', color: hi ? '#A8D4C8' : 'rgba(243,248,242,0.4)', transition:'color 0.2s' },
          onMouseEnter: e=>e.target.style.color='#A8D4C8',
          onMouseLeave: e=>e.target.style.color= hi ? '#A8D4C8' : 'rgba(243,248,242,0.4)',
        }, label)
      )
    )
  );
}