const { useState, useEffect } = React;

const CAREER = [
  { co:'Leviton',      role:'Staff Software Engineer',  period:'Current' },
  { co:'Haven Life',   role:'Senior Software Engineer', period:'Prior' },
  { co:'Credit Karma', role:'Software Engineer',        period:'Prior' },
  { co:'ISOtunes',     role:'Front-End Developer',      period:'Prior' },
];

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

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

  if (isMobile) {
    return React.createElement('div', { style:{ padding:`20px ${px}`, borderBottom:'0.5px solid var(--faint)', background:'rgba(47,93,80,0.04)' } },
      React.createElement('div', { style:{ fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--dim)', marginBottom:16 } }, 'Experience'),
      React.createElement('div', { style:{ display:'flex', flexDirection:'column', gap:16 } },
        CAREER.map(c => React.createElement('div', { key:c.co, style:{ display:'flex', justifyContent:'space-between', alignItems:'baseline', paddingBottom:12, borderBottom:'0.5px solid var(--faint2)' } },
          React.createElement('div', null,
            React.createElement('div', { style:{ fontFamily:'var(--mono)', fontSize:13, fontWeight:400, color:'var(--ink)' } }, c.co),
            React.createElement('div', { style:{ fontFamily:'var(--mono)', fontSize:10, color:'var(--mid)', marginTop:3 } }, c.role)
          ),
          React.createElement('div', { style:{ fontFamily:'var(--mono)', fontSize:10, color:'var(--pine)' } }, c.period)
        ))
      )
    );
  }

  return React.createElement('div', { style:{ padding:`20px ${px}`, borderBottom:'0.5px solid var(--faint)', background:'rgba(47,93,80,0.04)', display:'flex', alignItems:'center' } },
    React.createElement('span', { style:{ fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--dim)', marginRight:40, flexShrink:0 } }, 'Experience'),
    React.createElement('div', { style:{ display:'flex', flex:1, flexWrap: isTablet ? 'wrap' : 'nowrap', gap: isTablet ? '12px 0' : 0 } },
      CAREER.map((c,i) => React.createElement('div', { key:c.co, style:{ display:'flex', flexDirection:'column', padding: i===0 ? `0 ${isTablet?'20px':'28px'} 0 0` : `0 ${isTablet?'20px':'28px'}`, borderRight: i<CAREER.length-1 ? '0.5px solid var(--faint)' : 'none', minWidth: isTablet ? '45%' : 'auto' } },
        React.createElement('span', { style:{ fontFamily:'var(--mono)', fontSize: isTablet ? 12 : 13, fontWeight:400, color:'var(--ink)' } }, c.co),
        React.createElement('span', { style:{ fontFamily:'var(--mono)', fontSize:10, color:'var(--mid)', marginTop:3 } }, c.role),
        React.createElement('span', { style:{ fontFamily:'var(--mono)', fontSize:10, color:'var(--pine)', marginTop:2 } }, c.period)
      ))
    )
  );
}