feat: Latest production version with interior scene and glass

Includes room interior with floor, walls, glass you can see through,
and all uncommitted production changes that were running live.

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

components/offerte/step-extras.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useConfiguratorStore } from "@/lib/store";
+import { Check, Ruler, Wrench, MessageCircle, Truck } from "lucide-react";
+
+const extraOptionsList = [
+  {
+    id: "Meetservice",
+    label: "Meetservice",
+    description: "Wij komen bij u langs om de exacte maten op te nemen.",
+    icon: Ruler,
+  },
+  {
+    id: "Montage",
+    label: "Montage",
+    description: "Professionele plaatsing door onze vakmensen.",
+    icon: Wrench,
+  },
+  {
+    id: "Adviesgesprek",
+    label: "Adviesgesprek",
+    description: "Vrijblijvend advies over mogelijkheden en materialen.",
+    icon: MessageCircle,
+  },
+  {
+    id: "Bezorging",
+    label: "Bezorging",
+    description: "Bezorging aan huis, of afhalen op locatie.",
+    icon: Truck,
+  },
+];
+
+export function StepExtras() {
+  const { extraOptions, toggleExtraOption } = useConfiguratorStore();
+
+  return (
+    <div>
+      <h2 className="mb-2 text-lg font-bold text-[#1A2E2E]">Extra opties</h2>
+      <p className="mb-6 text-sm text-gray-600">
+        Selecteer eventuele extra services bij uw stalen deur.
+      </p>
+
+      <div className="grid gap-3">
+        {extraOptionsList.map((option) => {
+          const selected = extraOptions.includes(option.id);
+          const Icon = option.icon;
+
+          return (
+            <button
+              key={option.id}
+              type="button"
+              onClick={() => toggleExtraOption(option.id)}
+              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 gap-4">
+                <div
+                  className={`flex size-10 shrink-0 items-center justify-center rounded-lg ${
+                    selected ? "bg-[#C4D668]/20" : "bg-gray-100"
+                  }`}
+                >
+                  <Icon className={`size-5 ${selected ? "text-[#C4D668]" : "text-[#1A2E2E]"}`} />
+                </div>
+                <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>
+                <div
+                  className={`flex size-6 shrink-0 items-center justify-center rounded-md border-2 transition-all ${
+                    selected
+                      ? "border-[#C4D668] bg-[#C4D668]"
+                      : "border-gray-300 bg-white"
+                  }`}
+                >
+                  {selected && <Check className="size-4 text-[#1A2E2E]" />}
+                </div>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}