const { useState, useEffect } = React;

const LIST_ITEMS = ['Legacy platform modernization','Disconnected systems and API integrations','Frontend rebuilds and component architecture','Workflow automation','Internal tooling problems'];

function Contact() {
  const [submitted, setSubmitted] = useState(false);
  const [focused, setFocused] = useState(null);
  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 ? '40px 20px' : isTablet ? '48px 32px' : '60px 52px';

  const inp = (name) => ({
    background:'#fff', border:`0.5px solid ${focused===name?'var(--pine)':'var(--faint)'}`,
    borderRadius:0, color:'var(--ink)', fontFamily:'var(--sans)', fontSize:14, fontWeight:300,
    padding:'12px 14px', outline:'none', width:'100%', transition:'border-color 0.2s',
  });

  const Field = ({ label, children }) =>
    React.createElement('div', { style:{ display:'flex', flexDirection:'column', gap:5 } },
      React.createElement('label', { style:{ fontFamily:'var(--mono)', fontSize:9, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--dim)' } }, label),
      children
    );

  return React.createElement('section', { id:'contact', style:{ padding:pad, borderTop:'0.5px solid var(--faint)', background:'rgba(47,93,80,0.04)' } },
    React.createElement('div', { style:{ display:'grid', gridTemplateColumns: (isMobile||isTablet) ? '1fr' : '1fr 1fr', gap: (isMobile||isTablet) ? 36 : 64, alignItems:'start' } },

      /* LEFT */
      React.createElement('div', null,
        React.createElement('div', { style:{ fontFamily:'var(--serif)', fontSize: isMobile ? 32 : isTablet ? 34 : 38, fontWeight:400, color:'var(--ink)', lineHeight:1.1, letterSpacing:'-0.025em', marginBottom:18 } },
          "Let's build", React.createElement('br'),
          'something ', React.createElement('em', { style:{ color:'var(--pine)', fontStyle:'italic' } }, 'cleaner.')
        ),
        React.createElement('p', { style:{ fontSize: isMobile ? 14 : 15, fontWeight:300, color:'var(--mid)', lineHeight:1.85, marginBottom:14 } }, 'If your team is dealing with fragile integrations, frontend problems that keep compounding, or internal tools that have outgrown their original design, I am open to the right conversations.'),
        React.createElement('p', { style:{ fontSize: isMobile ? 14 : 15, fontWeight:300, color:'var(--mid)', lineHeight:1.85, marginBottom:14 } }, 'I work with teams on:'),
        React.createElement('ul', { style:{ listStyle:'none', display:'flex', flexDirection:'column', gap:8 } },
          LIST_ITEMS.map(item => React.createElement('li', { key:item, style:{ fontSize: isMobile ? 13 : 14, fontWeight:300, color:'var(--mid)', paddingLeft:20, position:'relative', lineHeight:1.6 } },
            React.createElement('span', { style:{ position:'absolute', left:0, top:1, fontSize:11, color:'var(--pine)', lineHeight:1.6 } }, '◈'),
            item
          ))
        )
      ),

      /* RIGHT — FORM */
      React.createElement('div', null,
        submitted
          ? React.createElement('p', { style:{ fontFamily:'var(--mono)', fontSize:13, color:'var(--pine)', lineHeight:1.8, paddingTop:24, animation:'fadeIn 0.4s ease forwards' } }, 'Got it. I will be in touch shortly.')
          : React.createElement('form', { onSubmit: e=>{ e.preventDefault(); setSubmitted(true); }, style:{ display:'flex', flexDirection:'column', gap:13 } },
              React.createElement('div', { style:{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap:13 } },
                React.createElement(Field, { label:'Name' }, React.createElement('input', { type:'text', placeholder:'Your name', required:true, style:inp('name'), onFocus:()=>setFocused('name'), onBlur:()=>setFocused(null) })),
                React.createElement(Field, { label:'Company' }, React.createElement('input', { type:'text', placeholder:'Where you work', style:inp('company'), onFocus:()=>setFocused('company'), onBlur:()=>setFocused(null) }))
              ),
              React.createElement(Field, { label:'Email' }, React.createElement('input', { type:'email', placeholder:'your@email.com', required:true, style:inp('email'), onFocus:()=>setFocused('email'), onBlur:()=>setFocused(null) })),
              React.createElement(Field, { label:'Project or Challenge' }, React.createElement('textarea', { placeholder:'What are you dealing with?', required:true, style:{...inp('project'), resize:'none', height:90}, onFocus:()=>setFocused('project'), onBlur:()=>setFocused(null) })),
              React.createElement('div', { style:{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap:13 } },
                React.createElement(Field, { label:'Timeline' }, React.createElement('input', { type:'text', placeholder:'When do you need this?', style:inp('timeline'), onFocus:()=>setFocused('timeline'), onBlur:()=>setFocused(null) })),
                React.createElement(Field, { label:'Budget (optional)' }, React.createElement('input', { type:'text', placeholder:'Rough range is fine', style:inp('budget'), onFocus:()=>setFocused('budget'), onBlur:()=>setFocused(null) }))
              ),
              React.createElement('button', {
                type:'submit',
                style:{ fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.12em', textTransform:'uppercase', padding:'14px 28px', background:'var(--pine)', color:'var(--bg)', border:'none', borderRadius:0, cursor:'pointer', alignSelf:'flex-start', marginTop:4, transition:'background 0.2s', width: isMobile ? '100%' : 'auto' },
                onMouseEnter: e=>e.target.style.background='var(--pine2)',
                onMouseLeave: e=>e.target.style.background='var(--pine)',
              }, 'Start the conversation')
            )
      )
    )
  );
}