// Services section
const Services = () => {
  const [hovered, setHovered] = React.useState(null);
  return (
    <Section
      id="services"
      label="01 / Services"
      kicker="What we make"
      title="Six things, done deliberately."
      subtitle="We don't try to be everything. Here's what we ship — at a level you can put in front of paying users tomorrow."
    >
      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(340px,1fr))',gap:1,background:'var(--line)',border:'1px solid var(--line)',borderRadius:'var(--radius)',overflow:'hidden'}}>
        {SERVICES.map(s => (
          <ServiceCard key={s.id} s={s} hovered={hovered===s.id} onEnter={()=>setHovered(s.id)} onLeave={()=>setHovered(null)}/>
        ))}
      </div>

      {/* Process strip */}
      <div style={{marginTop:80, padding:'32px 36px', border:'1px solid var(--line)', borderRadius:'var(--radius)', background:'var(--bg-2)'}}>
        <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:24}}>
          <span className="eyebrow"><span className="dot"/>How we work</span>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:0}}>
          {[
            {n:'01',t:'Discover',d:'Workshop, audit, define scope.'},
            {n:'02',t:'Design',d:'Mocks, prototype, sign-off.'},
            {n:'03',t:'Build',d:'2-week sprints, weekly demos.'},
            {n:'04',t:'Ship',d:'Launch, monitor, iterate.'},
          ].map((p,i,arr)=>(
            <div key={p.n} style={{paddingRight:24, borderRight: i<arr.length-1 ? '1px solid var(--line)' : 'none', paddingLeft: i>0 ? 24 : 0}}>
              <div className="mono" style={{fontSize:11,color:'var(--accent)',marginBottom:12,letterSpacing:'0.06em'}}>STEP {p.n}</div>
              <div style={{fontSize:18,fontWeight:500,marginBottom:6,letterSpacing:'-0.01em'}}>{p.t}</div>
              <div style={{fontSize:13,color:'var(--ink-3)',lineHeight:1.5}}>{p.d}</div>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
};

const ServiceCard = ({ s, hovered, onEnter, onLeave }) => (
  <div onMouseEnter={onEnter} onMouseLeave={onLeave} style={{
    padding:'32px 30px 30px',
    background: hovered ? '#131314' : 'var(--bg-2)',
    transition:'background .2s ease',
    display:'flex', flexDirection:'column', gap:20, minHeight:300, position:'relative', cursor:'pointer'
  }}>
    <div style={{display:'flex',alignItems:'flex-start',justifyContent:'space-between'}}>
      <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>{s.code}</span>
      <span style={{
        width:32,height:32,borderRadius:8,border:'1px solid var(--line-2)',
        display:'flex',alignItems:'center',justifyContent:'center',
        color: hovered ? '#0a0a0a' : 'var(--ink-2)',
        background: hovered ? 'var(--accent)' : 'transparent',
        borderColor: hovered ? 'var(--accent)' : 'var(--line-2)',
        transition:'all .2s ease'
      }}>{Icon.arrow()}</span>
    </div>
    <h3 style={{fontSize:24,letterSpacing:'-0.025em',fontWeight:500,lineHeight:1.1}}>{s.title}</h3>
    <p style={{color:'var(--ink-2)',fontSize:14,lineHeight:1.55,flex:1}}>{s.summary}</p>

    <div style={{display:'flex',flexWrap:'wrap',gap:6}}>
      {s.bullets.map(b => <Tag key={b}>{b}</Tag>)}
    </div>

    <div style={{display:'flex',justifyContent:'space-between',paddingTop:18,borderTop:'1px solid var(--line)'}}>
      <div>
        <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:3}}>STARTS AT</div>
        <div style={{fontSize:14,fontWeight:500}}>{s.starts}</div>
      </div>
      <div style={{textAlign:'right'}}>
        <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:3}}>TIMELINE</div>
        <div style={{fontSize:14,fontWeight:500}}>{s.timeline}</div>
      </div>
    </div>
  </div>
);

window.Services = Services;