const { useState, useEffect } = React;

const SERVICES = [
  { name:'Integration work',      desc:'Connecting APIs, platforms, and data sources that were not built to work together.',                    badge:'Consulting' },
  { name:'Frontend architecture', desc:'React component systems and frontend code that teams can actually maintain as things grow.',            badge:'Build' },
  { name:'Automation',            desc:'Finding the repetitive steps in a workflow and replacing them with something that runs on its own.',    badge:'Strategy' },
  { name:'AI systems',            desc:'Early-stage work on AI tooling, agent workflows, and practical decision support.',                      badge:'Emerging' },
];

function ServiceRow({ item }) {
  const [hov, setHov] = useState(false);
  return React.createElement('div', {
    onMouseEnter:()=>setHov(true), onMouseLeave:()=>setHov(false),
    style:{ padding:'18px 0', borderBottom:'0.5px solid var(--faint)', borderBottomColor: hov?'var(--pine)':'var(--faint)', display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:12, cursor:'pointer', transition:'border-color 0.2s' },
  },
    React.createElement('div', null,
      React.createElement('div', { style:{ fontSize:16, fontWeight:500, color:'var(--ink)', marginBottom:5 } }, item.name),
      React.createElement('div', { style:{ fontSize:13, fontWeight:300, color:'var(--mid)', lineHeight:1.75 } }, item.desc)
    ),
    React.createElement('div', { style:{ fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--pine)', background:'var(--pine3)', padding:'4px 10px', border:'0.5px solid var(--pine4)', whiteSpace:'nowrap', flexShrink:0, marginTop:2 } }, item.badge)
  );
}

function AboutServices() {
  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';
  const pad = isMobile ? '36px 20px' : isTablet ? '40px 32px' : '52px';

  return React.createElement('div', { id:'services', style:{ display:'grid', gridTemplateColumns: isMobile || isTablet ? '1fr' : '1fr 1fr', borderTop:'0.5px solid var(--faint)', background:'var(--bg)' } },

    /* ABOUT */
    React.createElement('div', { style:{ padding:pad, borderRight: (!isMobile && !isTablet) ? '0.5px solid var(--faint)' : 'none', borderBottom: (isMobile || isTablet) ? '0.5px solid var(--faint)' : 'none' } },
      React.createElement('div', { style:{ fontFamily:'var(--serif)', fontSize: isMobile ? 24 : isTablet ? 26 : 28, fontWeight:400, color:'var(--ink)', lineHeight:1.25, letterSpacing:'-0.02em', marginBottom:20 } },
        'Most engineers stay in one lane.', React.createElement('br'),
        'I work in the ', React.createElement('em', { style:{ color:'var(--pine)', fontStyle:'italic' } }, 'messy middle.')
      ),
      React.createElement('p', { style:{ fontSize: isMobile ? 14 : 15, fontWeight:300, color:'var(--mid)', lineHeight:1.85, marginBottom:14 } }, 'Most of my time goes toward the parts of a system that do not have a clean owner. Integrations that half-work. Pipelines that fail quietly. Frontend code that grew past the original plan.'),
      React.createElement('p', { style:{ fontSize: isMobile ? 14 : 15, fontWeight:300, color:'var(--mid)', lineHeight:1.85, marginBottom:14 } },
        'At Leviton I work across AEM, Oracle Integration Cloud, Oracle Commerce, MongoDB, Node.js, React, and broader internal platform infrastructure. Before that I was a Senior Engineer at ',
        React.createElement('strong', { style:{ color:'var(--ink)', fontWeight:500 } }, 'Haven Life'),
        ' and an Engineer at ',
        React.createElement('strong', { style:{ color:'var(--ink)', fontWeight:500 } }, 'Credit Karma.')
      ),
      React.createElement('p', { style:{ fontSize: isMobile ? 14 : 15, fontWeight:300, color:'var(--mid)', lineHeight:1.85 } }, 'Zueta Media is where I document my engineering work, consulting direction, and long-term projects being built behind the scenes.'),
      React.createElement('div', { style:{ marginTop:24, fontFamily:'var(--mono)', fontSize:11, color:'var(--dim)', paddingTop:18, borderTop:'0.5px solid var(--faint)' } }, 'Del Manzueta / Staff Software Engineer / New York')
    ),

    /* SERVICES */
    React.createElement('div', { style:{ padding:pad } },
      React.createElement('span', { style:{ display:'block', fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--dim)', marginBottom:20 } }, 'What I take on'),
      SERVICES.map(s => React.createElement(ServiceRow, { key:s.name, item:s }))
    )
  );
}