docs: show multiple service patterns with tabs

Instead of prescribing one pattern over another, this change presents all three
approaches for grouping service functions (plain object, namespace, abstract class)
using tabs, letting developers choose based on their background and preferences.

Changes:
- Add Tab component to best-practice.md for service pattern examples
- Update main service.ts example to use plain object (simplest approach)
- Keep all three patterns as valid options in the Service section
- Revert controller examples to original (abstract class)
- Remove Function Containers section from typescript.md (rationale belongs in PR)

Author: Braden Wong

docs/essential/best-practice.md

@@ -14,6 +14,10 @@ head:
         content: Elysia is a pattern agnostic framework, we leave the decision up to you and your team for coding patterns to use. However, we found that there are several who are using MVC pattern (Model-View-Controller) on Elysia, and found it's hard to decouple and handle types. This page is a guide to use Elysia with MVC pattern.
 ---
 
+<script setup>
+import Tab from '../components/fern/tab.vue'
+</script>
+
 # Best Practice
 
 Elysia is a pattern-agnostic framework, leaving the decision of which coding patterns to use up to you and your team.
@@ -85,10 +89,9 @@ import { status } from 'elysia'
 
 import type { AuthModel } from './model'
 
-// If the class doesn't need to store a property,
-// you may use `abstract class` to avoid class allocation
-export abstract class Auth {
-	static async signIn({ username, password }: AuthModel.signInBody) {
+// Group related functions - see Service section for alternative patterns
+export const Auth = {
+	async signIn({ username, password }: AuthModel.signInBody) {
 		const user = await sql`
 			SELECT password
 			FROM users
@@ -280,16 +283,72 @@ There are 2 types of service in Elysia:
 
 We recommend abstracting a service class/function away from Elysia.
 
-If the service or function isn't tied to an HTTP request or doesn't access a `Context`, it's recommended to implement it as a static class or function.
+If the service or function isn't tied to an HTTP request or doesn't access a `Context`, you can group related functions using several patterns depending on your preference:
+
+<Tab
+	id="service-pattern"
+	:names="['Plain Object', 'Namespace', 'Abstract Class']"
+	:tabs="['object', 'namespace', 'class']"
+>
+
+<template v-slot:object>
+
+The simplest approach is using a plain object. This is idiomatic JavaScript and easy to understand:
+
+```typescript
+import { Elysia, t } from 'elysia'
+
+const Service = {
+    fibo(number: number): number {
+        if (number < 2) return number
+        return Service.fibo(number - 1) + Service.fibo(number - 2)
+    }
+}
+
+new Elysia()
+    .get('/fibo', ({ body }) => {
+        return Service.fibo(body)
+    }, {
+        body: t.Numeric()
+    })
+```
+
+</template>
+
+<template v-slot:namespace>
+
+TypeScript namespaces can hold both values and types with the same name, which is useful if you want to co-locate types with your service:
+
+```typescript
+import { Elysia, t } from 'elysia'
+
+namespace Service {
+    export function fibo(number: number): number {
+        if (number < 2) return number
+        return Service.fibo(number - 1) + Service.fibo(number - 2)
+    }
+}
+
+new Elysia()
+    .get('/fibo', ({ body }) => {
+        return Service.fibo(body)
+    }, {
+        body: t.Numeric()
+    })
+```
+
+</template>
+
+<template v-slot:class>
+
+If you're coming from Java or C#, you may prefer using an abstract class with static methods:
 
 ```typescript
 import { Elysia, t } from 'elysia'
 
 abstract class Service {
     static fibo(number: number): number {
-        if(number < 2)
-            return number
-
+        if (number < 2) return number
         return Service.fibo(number - 1) + Service.fibo(number - 2)
     }
 }
@@ -302,7 +361,11 @@ new Elysia()
     })
 ```
 
-If your service doesn't need to store a property, you may use `abstract class` and `static` instead to avoid allocating class instance.
+</template>
+
+</Tab>
+
+All three patterns produce the same runtime behavior. Choose based on your team's familiarity and whether you need to co-locate types.
 
 ### 2. Request dependent service as Elysia instance