function Services() {
  const items = [
    { ico: 'leader', title: 'Executive Search', body: 'C-suite, VP, and board placements via retained engagement.' },
    { ico: 'talent', title: 'Permanent Placement', body: 'Individual contributor through senior leadership hires.' },
    { ico: 'advisory', title: 'Workforce Advisory', body: 'Org design, talent strategy, and market intelligence.' },
    { ico: 'shield', title: 'Specialized & Contract', body: 'Vetted talent for high-stakes initiatives, on demand.' },
  ];
  return (
    <section className="section section--paper-alt" id="solutions">
      <div className="container">
        <div className="section__head">
          <div className="eyebrow">For Employers</div>
          <h2 className="section__title">Solutions for every stage of <em>building the team.</em></h2>
          <p className="section__lede">From a single critical hire to multi-year workforce planning, we operate on one principle: quality over volume.</p>
        </div>
        <div className="services">
          {items.map((s, i) => (
            <div className="service" key={i}>
              <div className="service__ico"><Icon name={s.ico} size={24}/></div>
              <h4>{s.title}</h4>
              <p>{s.body}</p>
              <span className="service__more">Learn more <Icon name="arrowRight" size={14}/></span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TalentAreas() {
  const [active, setActive] = React.useState(null);
  const specialized = [
    'Artificial Intelligence & ML', 'ServiceNow & Enterprise Platforms', 'Software Engineering',
    'Cloud & Infrastructure', 'Cybersecurity', 'Data & Analytics',
    'Product & Program Management', 'Digital Transformation', 'Technology Leadership', 'Executive Search'
  ];
  const broader = [
    'Finance & Accounting', 'Healthcare', 'Manufacturing', 'Operations',
    'Sales & Marketing', 'Human Resources', 'Legal & Compliance', 'Customer Success',
    'Supply Chain', 'Business Operations', 'Executive Leadership', 'Emerging Industries'
  ];
  return (
    <section className="section section--paper" id="talent">
      <div className="container">
        <div className="section__head">
          <div className="eyebrow">Talent areas</div>
          <h2 className="section__title">Deep where it matters. <em>Broad</em> where you need it.</h2>
          <p className="section__lede">Synvori operates ten signature practice areas and supports hiring across every major business function.</p>
        </div>
        <div className="talent">
          <div className="talent__col">
            <h4>Signature practices</h4>
            <div className="talent__chips">
              {specialized.map(c => (
                <button key={c} onClick={() => setActive(active === c ? null : c)}
                  className={"talent__chip spec " + (active && active !== c ? "dim" : "") + (active === c ? " active" : "")}>
                  {c}
                </button>
              ))}
            </div>
          </div>
          <div className="talent__col">
            <h4>Broader coverage</h4>
            <div className="talent__chips">
              {broader.map(c => (
                <button key={c} onClick={() => setActive(active === c ? null : c)}
                  className={"talent__chip " + (active && active !== c ? "dim" : "") + (active === c ? " active" : "")}>
                  {c}
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Services = Services;
window.TalentAreas = TalentAreas;