feat: Add professional 3D handles, glass patterns, and living room scene

✨ New Features:
- 6 procedural 3D handles (Beugelgreep, Hoekgreep, Maangreep, Ovaalgreep, Klink, U-greep)
- Glass pattern generator (Standard, DT9 rounded corners, DT10 U-shapes)
- Dynamic living room scene with adaptive doorway
- Enhanced camera controls (zoomed out, more freedom)
- Texture loading system (prepared for future enhancement)

🎨 Visual Improvements:
- Professional handle details (screws, mounting blocks, rosettes)
- Realistic materials (metalness 0.95, proper roughness)
- Living room context (wood floor, white walls, baseboards)
- Better lighting (sunlight simulation, fill lights)
- Apartment environment preset

🏗️ Technical:
- Parametric glass shapes with THREE.Shape
- Dynamic doorway sizing based on door dimensions
- Store updates for handle and glass pattern types
- UI components for all new options

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

components/offerte/step-options.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useConfiguratorStore, type Finish, type Handle } from "@/lib/store";
+import { glassPatternOptions, type GlassPattern } from "@/lib/glass-patterns";
 import { Check } from "lucide-react";
 
 const finishOptions: Array<{
@@ -22,17 +23,46 @@ const handleOptions: Array<{
   label: string;
   description: string;
 }> = [
+  {
+    value: "beugelgreep",
+    label: "Beugelgreep",
+    description: "Verticale staaf met montageblokken",
+  },
+  {
+    value: "hoekgreep",
+    label: "Hoekgreep",
+    description: "L-vormige minimalistisch design",
+  },
+  {
+    value: "maangreep",
+    label: "Maangreep",
+    description: "Gebogen half-maanvormige greep",
+  },
+  {
+    value: "ovaalgreep",
+    label: "Ovaalgreep",
+    description: "Moderne ovale trekgreep",
+  },
+  {
+    value: "klink",
+    label: "Deurklink",
+    description: "Klassieke deurklink met hendel",
+  },
   {
     value: "u-greep",
     label: "U-Greep",
-    description: "Verticale greep voor taatsdeur",
+    description: "Eenvoudige rechte staaf",
+  },
+  {
+    value: "geen",
+    label: "Geen greep",
+    description: "Voor vaste panelen",
   },
-  { value: "klink", label: "Klink", description: "Klassieke deurklink" },
-  { value: "geen", label: "Geen greep", description: "Voor vaste panelen" },
 ];
 
 export function StepOptions() {
-  const { finish, handle, setFinish, setHandle } = useConfiguratorStore();
+  const { finish, handle, glassPattern, setFinish, setHandle, setGlassPattern } =
+    useConfiguratorStore();
 
   return (
     <div className="space-y-8">
@@ -95,6 +125,51 @@ export function StepOptions() {
         </div>
       </div>
 
+      {/* Glass Pattern Selection */}
+      <div>
+        <h2 className="mb-2 text-lg font-bold text-[#1A2E2E]">Glaspatroon</h2>
+        <p className="mb-4 text-sm text-gray-600">
+          Kies het decoratieve patroon voor de glaspanelen.
+        </p>
+
+        <div className="grid gap-3">
+          {glassPatternOptions.map((option) => {
+            const selected = glassPattern === option.value;
+
+            return (
+              <button
+                key={option.value}
+                type="button"
+                onClick={() => setGlassPattern(option.value)}
+                className={`group relative rounded-xl border-2 p-4 text-left transition-all ${
+                  selected
+                    ? "border-[#C4D668] bg-[#1A2E2E] text-white"
+                    : "border-gray-200 bg-white text-gray-900 hover:border-[#1A2E2E]/30"
+                }`}
+              >
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <h3 className="font-bold">{option.label}</h3>
+                    <p
+                      className={`mt-1 text-sm ${
+                        selected ? "text-white/80" : "text-gray-500"
+                      }`}
+                    >
+                      {option.description}
+                    </p>
+                  </div>
+                  {selected && (
+                    <div className="flex size-6 items-center justify-center rounded-full bg-[#C4D668]">
+                      <Check className="size-4 text-[#1A2E2E]" />
+                    </div>
+                  )}
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
       {/* Handle Selection */}
       <div>
         <h2 className="mb-2 text-lg font-bold text-[#1A2E2E]">Greep</h2>