function Hero({ onConsult }) {
  const [mode, setMode] = React.useState('employers');
  const ledeForEmployers = "Synvori helps organizations hire exceptional professionals through a rigorous, expert-led evaluation process that identifies capability, leadership potential, and long-term fit — before candidates are introduced.";
  const ledeForCandidates = "Join a selective community of industry-vetted professionals. Confidential representation, direct introductions to hiring leadership, and a long-term partnership with practitioners who understand your craft.";
  return (
    <section className="hero" id="top">
      <img className="hero__watermark" src="/assets/mark-on-navy.png" alt=""/>
      <div className="container">
        <div className="hero__eyebrow">Talent Advisory · Executive Search · Workforce Solutions</div>

        <h1 className="hero__title">
          Connecting companies with the top <em>0.9%</em> of talent.
        </h1>

        <p className="hero__lede">{mode === 'employers' ? ledeForEmployers : ledeForCandidates}</p>

        <div className="hero__toggle" role="tablist">
          <button className={mode === 'employers' ? 'active' : ''} onClick={() => setMode('employers')}>For Employers</button>
          <button className={mode === 'candidates' ? 'active' : ''} onClick={() => setMode('candidates')}>For Candidates</button>
        </div>

        <div className="hero__cta">
          <button className="btn btn--blue" onClick={onConsult}>
            {mode === 'employers' ? 'Schedule a Consultation' : 'Join the Network'}
            <span className="arrow">&#8594;</span>
          </button>
          <button className="btn btn--outline-light">
            {mode === 'employers' ? 'View Specializations' : 'Explore Opportunities'}
          </button>
        </div>

        <div className="hero__meta">
          <div className="hero__meta-item">
            <span className="k">Engagement model</span>
            <span className="v">Retained · Boutique</span>
          </div>
          <div className="hero__meta-item">
            <span className="k">Reach</span>
            <span className="v">Nationwide · Global</span>
          </div>
          <div className="hero__meta-item">
            <span className="k">Founded on</span>
            <span className="v"><em style={{fontStyle:'italic', fontWeight: 300, color:'var(--blue-400)', letterSpacing:'-0.03em'}}>Quality</em> over volume</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;