const { useState, useEffect } = React;

const WORK = [
  { num:'01', title:'Oracle Integration Cloud, pipeline work at Leviton', desc:'Built and debugged integration flows between Oracle Commerce, AEM, and internal Node.js services. Most of the work was on payload handling, auth flows, file processing, and making sure errors surfaced cleanly instead of failing silently.', tags:['OIC','Oracle Commerce','Node.js','REST APIs'], stat:'OIC', statLabel:'Integration layer' },
  { num:'02', title:'Cross-platform component system, hybrid mobile', desc:'Built a shared component library used across web, iOS, and Android. The goal was to stop rebuilding the same UI three times and give design and QA a single source of truth. React with IONIC, documented in Storybook.', tags:['React','IONIC','Storybook','a11y'], stat:'3x', statLabel:'Platforms, one codebase' },
  { num:'03', title:'AEM content and search pipeline', desc:'Worked across AEM, MongoDB, and Coveo to keep product content accurate and searchable at scale. Fixing indexing gaps, cleaning up content schemas, making sure the right products showed up in search.', tags:['AEM','Coveo','MongoDB','GraphQL'], stat:'AEM', statLabel:'Search + content' },
];

function WorkRow({ item, isMobile, isTablet }) {
  const [hovered, setHovered] = useState(false);
  const px = isMobile ? '20px' : isTablet ? '32px' : '32px';

  if (isMobile) {
    return React.createElement('div', {
      style: { padding:'28px 20px', borderBottom:'0.5px solid var(--faint)', background: hovered ? 'var(--bg2)' : 'transparent', transition:'background 0.2s', cursor:'pointer' },
      onMouseEnter: ()=>setHovered(true), onMouseLeave: ()=>setHovered(false),
    },
      React.createElement('div', { style:{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:10 } },
        React.createElement('span', { style:{ fontFamily:'var(--mono)', fontSize:10, color:'var(--faint)' } }, item.num),
        React.createElement('span', { style:{ fontFamily:'var(--serif)', fontSize:16, color:'var(--pine)' } }, item.stat)
      ),
      React.createElement('div', { style:{ fontFamily:'var(--serif)', fontSize:20, fontWeight:400, color:'var(--ink)', marginBottom:10, lineHeight:1.2 } }, item.title),
      React.createElement('div', { style:{ fontSize:13, fontWeight:300, color:'var(--mid)', lineHeight:1.8, marginBottom:14 } }, item.desc),
      React.createElement('div', { style:{ display:'flex', gap:6, flexWrap:'wrap' } },
        item.tags.map(t => React.createElement('span', { key:t, style:{ fontFamily:'var(--mono)', fontSize:10, color:'var(--pine)', background:'var(--pine3)', padding:'3px 8px', border:'0.5px solid var(--pine4)' } }, t))
      )
    );
  }

  return React.createElement('div', {
    onMouseEnter: ()=>setHovered(true), onMouseLeave: ()=>setHovered(false),
    style: { display:'grid', gridTemplateColumns: isTablet ? '40px 1fr 120px 44px' : '52px 1fr 170px 52px', alignItems:'stretch', borderBottom:'0.5px solid var(--faint)', cursor:'pointer', background: hovered ? 'var(--bg2)' : 'transparent', transition:'background 0.2s' },
  },
    React.createElement('div', { style:{ display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'var(--mono)', fontSize:11, color:'var(--faint)', borderRight:'0.5px solid var(--faint)' } }, item.num),
    React.createElement('div', { style:{ padding:`28px ${px}` } },
      React.createElement('div', { style:{ fontFamily:'var(--serif)', fontSize: isTablet ? 18 : 22, fontWeight:400, color:'var(--ink)', marginBottom:10, lineHeight:1.2 } }, item.title),
      React.createElement('div', { style:{ fontSize:14, fontWeight:300, color:'var(--mid)', lineHeight:1.85, marginBottom:14 } }, item.desc),
      React.createElement('div', { style:{ display:'flex', gap:6, flexWrap:'wrap' } },
        item.tags.map(t => React.createElement('span', { key:t, style:{ fontFamily:'var(--mono)', fontSize:10, color:'var(--pine)', background:'var(--pine3)', padding:'4px 10px', border:'0.5px solid var(--pine4)' } }, t))
      )
    ),
    React.createElement('div', { style:{ display:'flex', flexDirection:'column', justifyContent:'center', padding:'0 16px', borderLeft:'0.5px solid var(--faint)' } },
      React.createElement('div', { style:{ fontFamily:'var(--serif)', fontSize:22, color:'var(--pine)', lineHeight:1, marginBottom:4 } }, item.stat),
      React.createElement('div', { style:{ fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--dim)' } }, item.statLabel)
    ),
    React.createElement('div', { style:{ display:'flex', alignItems:'center', justifyContent:'center', borderLeft:'0.5px solid var(--faint)', fontSize:16, color: hovered ? 'var(--pine)' : 'var(--faint)', transform: hovered ? 'translate(2px,-2px)' : 'none', transition:'all 0.2s' } }, '↗')
  );
}

function Work() {
  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';

  return React.createElement('section', { id:'work', style:{ background:'var(--bg)' } },
    React.createElement('div', { style:{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:`18px ${px}`, borderBottom:'0.5px solid var(--faint)', borderTop:'0.5px solid var(--faint)' } },
      React.createElement('span', { style:{ fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--dim)' } }, 'Selected work'),
      React.createElement('span', { style:{ fontFamily:'var(--mono)', fontSize:11, color:'var(--pine)', cursor:'pointer' } }, 'All case studies')
    ),
    WORK.map(w => React.createElement(WorkRow, { key:w.num, item:w, isMobile, isTablet }))
  );
}