/* global React */
/* ==========================================================
   Ability — post-hero: job + how we pick the working skill;
   Agent Horizon trains judgment; bake replaces long eval loops.
   ========================================================== */

function Ability() {
  return (
    <section className="xp-scene">
      <div>
        <div className="xp-scene-index"><span className="n">02</span> · behind me</div>
        <h2 className="xp-statement" style={{ maxWidth: '28ch' }}>
          <span className="dim">You just saw my job.</span><br/>
          How do I find the one skill that works?
        </h2>

        <div className="xp-ability-body">
          <div className="xp-ability-note">
            <p>
              The team at Agent Horizon works every day to teach me which slice of a skill actually matters and which phrasing an agent keeps under pressure.
            </p>
            <p>
              The question is simple: does this skill steer the agent on <em>your work</em>? You don't need another pipeline or long eval. Hand me the skill, run a bake, and your problem is solved.
            </p>
            <p>
              Skills are new, but I'm the best at them. What you get isn't vibes or a weak answer. It's everything I've already shipped, every regression my team caught. Short loop on your side, dense loop on ours.
            </p>
          </div>
          <aside className="xp-unlock-callout" aria-label="No pipelines">
            <div className="xp-unlock-callout-inner">
              <p className="xp-unlock-callout-kicker">No more pipelines.</p>
              <span className="xp-unlock-callout-rule" aria-hidden="true" />
              <p className="xp-unlock-callout-time">5 minutes</p>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

window.Ability = Ability;