// Capabilities page entry — reuses Skills, Compare, RoleTabs, HowItWorks, PoweredBand.

function CapabilitiesHero() {
  return (
    <section className="page-hero">
      <div className="container page-hero-body">
        <div className="eyebrow">Capabilities</div>
        <h1>
          One coworker.<br/>
          <em>Every kind of work.</em>
        </h1>
        <p className="page-hero-sub">
          Whatever you mention in chat — voice notes, photos, panicked midnight pings — Octodus picks
          it up. The list below is the most-used capabilities today. New ones ship weekly, posted to
          the public changelog.
        </p>
      </div>
    </section>
  );
}

function CapabilitiesApp() {
  return (
    <>
      <SiteEffects />
      <SiteNav active="capabilities" />
      <CapabilitiesHero />
      <Skills />
      <Compare />
      <RoleTabs />
      <PoweredBand />
      <HowItWorks />
      <FinalCTA
        heading={<>Try one capability.<br/><em>Get hooked on the rest.</em></>}
        sub="Add the bot to a chat, send a voice note, and see which of these capabilities Octodus reaches for first."
        ctaLabel="Try in Telegram"
      />
      <SiteFooter />
      <SiteTweaks />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<CapabilitiesApp />);