function Services() {
  const [active, setActive] = useState(0);
  const services = [
    {
      title: "Regulatory & Legislative Change",
      blurb: "Navigate complex regulatory landscapes with confidence. We help organisations adapt to new compliance requirements while maintaining operational excellence and competitive advantage.",
      tags: ["Compliance", "Governance", "Operating model"],
    },
    {
      title: "Cost Optimisation & Revenue Growth",
      blurb: "Streamline operations and unlock new revenue streams. Our data-driven approach identifies inefficiencies and opportunities for sustainable financial performance improvement.",
      tags: ["P&L restructuring", "Analytics", "Commercial"],
    },
    {
      title: "Rapid Growth Management",
      blurb: "Scale your success sustainably. We help fast-growing companies build robust processes and governance structures that support continued expansion without sacrificing quality.",
      tags: ["Scaling", "Process design", "People"],
    },
    {
      title: "M&A Integration & Rationalisation",
      blurb: "Maximise deal value through seamless integration. From cultural alignment to systems consolidation, we ensure mergers and acquisitions deliver on their strategic promise.",
      tags: ["Integration", "Cultural alignment", "Systems"],
    },
    {
      title: "EPMO & Strategic Advisory",
      blurb: "Elevate your project management office across all levels. We provide executive and board-level guidance that transforms project delivery into strategic advantage.",
      tags: ["PMO", "Portfolio", "Delivery"],
    },
    {
      title: "Executive & Board Advisory",
      blurb: "Trusted advisor services for senior leadership. We provide strategic guidance, risk assessment and transformation roadmaps that enable confident decision-making.",
      tags: ["Board readiness", "Risk", "Strategy"],
    },
  ];

  return (
    <section id="services" className="section" style={{background:'var(--ivory)'}}>
      <div className="wrap">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:40, alignItems:'end', marginBottom:56}} className="grid-2">
          <div>
            <Eyebrow>Management Consulting</Eyebrow>
            <h2 style={{marginTop:20, fontWeight:300}}>
              <span className="italic">Strategic transformation</span><br/>at every level of the organisation.
            </h2>
          </div>
          <p style={{color:'var(--muted)', fontSize:17, lineHeight:1.7, maxWidth:480, justifySelf:'end'}}>
            We partner with organisations navigating complex transformation journeys — from regulatory compliance to merger integration — with a trusted advisor approach that delivers results at every level.
          </p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'.9fr 1.1fr', gap:'clamp(24px, 4vw, 64px)'}} className="grid-2">
          {/* Left: index list */}
          <div style={{borderTop:'1px solid var(--rule)'}}>
            {services.map((s, i) => (
              <button
                key={s.title}
                onClick={() => setActive(i)}
                onMouseEnter={() => setActive(i)}
                style={{
                  width:'100%', textAlign:'left',
                  background: active === i ? 'var(--paper)' : 'transparent',
                  border:0, borderBottom:'1px solid var(--rule)',
                  padding:'24px 0', cursor:'pointer',
                  display:'grid', gridTemplateColumns:'40px 1fr 24px', alignItems:'center', gap:16,
                  fontFamily:'inherit', transition:'background .2s ease',
                }}>
                <span style={{fontSize:12, letterSpacing:'.14em', color: active === i ? 'var(--rose-deep)' : 'var(--muted)'}}>0{i+1}</span>
                <span style={{fontFamily:'var(--heading-font)', fontSize:'clamp(20px,2vw,26px)', fontStyle: active === i ? 'italic' : 'normal', color:'var(--charcoal)', transition:'all .2s ease'}}>
                  {s.title}
                </span>
                <span style={{color: active === i ? 'var(--rose-deep)' : 'var(--muted)', transition:'all .2s ease', transform: active === i ? 'translateX(2px)' : 'none'}}>→</span>
              </button>
            ))}
          </div>
          {/* Right: detail */}
          <div style={{position:'sticky', top:120, alignSelf:'start'}}>
            <div style={{background:'var(--paper)', border:'1px solid var(--rule)', padding:'clamp(28px, 4vw, 48px)'}}>
              <ImgPh label={services[active].title.toLowerCase()} aspect="16 / 10" style={{marginBottom:28}} />
              <h3 style={{fontStyle:'italic', fontWeight:400, marginBottom:16}}>{services[active].title}</h3>
              <p style={{color:'var(--ink)', fontSize:16, lineHeight:1.7}}>{services[active].blurb}</p>
              <div style={{display:'flex', gap:8, flexWrap:'wrap', marginTop:20}}>
                {services[active].tags.map(t => <span key={t} className="chip">{t}</span>)}
              </div>
              <div style={{marginTop:28, display:'flex', gap:12, alignItems:'center'}}>
                <a href="#contact" className="btn btn-primary">Discuss this engagement <span>→</span></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Services });