function WhyChoose() {
  const items = [
    { t: <>Elite <em>talent</em> network</>, d: "Access to highly selective professionals — practitioners, leaders, and operators who have shaped categories." },
    { t: <>Industry-expert <em>screening</em></>, d: "Candidates are reviewed by senior practitioners who actually understand the role and its demands." },
    { t: <>Reduced <em>hiring risk</em></>, d: "More informed decisions through deeper validation. Faster outcomes through better-curated introductions." },
  ];
  return (
    <section className="section section--paper-alt" id="why">
      <div className="container">
        <div className="section__head">
          <div className="eyebrow">Why Synvori</div>
          <h2 className="section__title">Built for organizations who <em>refuse to compromise.</em></h2>
          <p className="section__lede">The boutique alternative to traditional recruiting — dedicated attention, deeper validation, durable partnerships.</p>
        </div>
        <div className="why">
          {items.map((it, i) => (
            <div className="why__item" key={i}>
              <div className="n">0{i+1}</div>
              <h4>{it.t}</h4>
              <p>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseStudy() {
  return (
    <section className="section section--paper">
      <div className="container">
        <div className="section__head">
          <div className="eyebrow">Selected engagement</div>
          <h2 className="section__title">From Series B to <em>category leader.</em></h2>
        </div>
        <div className="case">
          <div className="case__visual">
            <span className="case__tag">Cloud Infrastructure · 2024 &#8211; 2026</span>
            <h3>Six executive hires. <em>Fourteen</em> months.</h3>
            <div className="case__meta">
              <span>SY-4821</span>
              <span>Retained · Confidential</span>
              <span>San Francisco · Remote</span>
            </div>
          </div>
          <div className="case__body">
            <div className="eyebrow">Outcome</div>
            <h4>A complete C-suite, assembled to ship a category-defining platform.</h4>
            <p>Synvori partnered with the founding team across 14 months to source, evaluate, and place six senior leaders — including CTO, VP Engineering, Head of Product, and Chief Revenue Officer. Every placement remains in role today.</p>
            <div className="case__stats">
              <div className="case__stat">
                <div className="v">6 / <em>6</em></div>
                <div className="k">Placements retained at 24mo</div>
              </div>
              <div className="case__stat">
                <div className="v"><em>14</em>wk</div>
                <div className="k">Median time-to-offer</div>
              </div>
            </div>
            <button className="btn btn--ink">Read the full study <span className="arrow">&#8594;</span></button>
          </div>
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ onConsult }) {
  return (
    <section className="final-cta">
      <div className="container">
        <h2>Stop sorting through hundreds of resumes.<br/>Meet <em>exceptional talent</em> instead.</h2>
        <p>Partner with Synvori Solutions to access industry-vetted professionals who are ready to create impact from day one.</p>
        <div className="btn-row">
          <button className="btn btn--blue" onClick={onConsult}>Schedule Your Talent Consultation <span className="arrow">&#8594;</span></button>
          <button className="btn btn--outline-light">Speak with a Partner</button>
        </div>
      </div>
    </section>
  );
}

window.WhyChoose = WhyChoose;
window.CaseStudy = CaseStudy;
window.FinalCTA = FinalCTA;