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>

app/offerte/page.tsx

@@ -4,35 +4,43 @@ import { FormProvider, useFormContext } from "@/components/offerte/form-context"
 import { StepProduct } from "@/components/offerte/step-product";
 import { StepDimensions } from "@/components/offerte/step-dimensions";
 import { StepOptions } from "@/components/offerte/step-options";
+import { StepExtras } from "@/components/offerte/step-extras";
 import { StepContact } from "@/components/offerte/step-contact";
 import { StepSummary } from "@/components/offerte/step-summary";
 import { Button } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DoorVisualizer } from "@/components/configurator/door-visualizer";
 
-const stepLabels = ["Product", "Afmetingen", "Opties", "Contact", "Overzicht"];
+const stepLabels = ["Product", "Afmetingen", "Opties", "Extra", "Contact", "Overzicht"];
 
 const stepComponents = [
   StepProduct,
   StepDimensions,
   StepOptions,
+  StepExtras,
   StepContact,
   StepSummary,
 ];
 
 function StepIndicator() {
-  const { currentStep, totalSteps } = useFormContext();
+  const { currentStep, totalSteps, goToStep } = useFormContext();
 
   return (
-    <div className="mb-8 flex items-center gap-2">
+    <div className="mb-8 flex items-center gap-1.5">
       {stepLabels.map((label, i) => (
-        <div key={label} className="flex items-center gap-2">
-          <div className="flex flex-col items-center gap-1">
+        <div key={label} className="flex items-center gap-1.5">
+          <button
+            type="button"
+            onClick={() => i < currentStep && goToStep(i)}
+            className="flex flex-col items-center gap-1"
+            disabled={i > currentStep}
+          >
             <div
               className={`flex size-8 items-center justify-center rounded-full text-sm font-semibold transition-colors ${
                 i <= currentStep
                   ? "bg-[#1A2E2E] text-white"
                   : "bg-gray-200 text-gray-500"
-              }`}
+              } ${i < currentStep ? "cursor-pointer hover:bg-[#1A2E2E]/80" : ""}`}
             >
               {i + 1}
             </div>
@@ -43,10 +51,10 @@ function StepIndicator() {
             >
               {label}
             </span>
-          </div>
+          </button>
           {i < totalSteps - 1 && (
             <div
-              className={`h-px w-4 transition-colors lg:w-6 ${
+              className={`h-px w-3 transition-colors lg:w-4 ${
                 i < currentStep ? "bg-[#1A2E2E]" : "bg-gray-300"
               }`}
             />
@@ -69,7 +77,7 @@ function WizardContent() {
         <CurrentStepComponent />
       </div>
 
-      {/* Navigation — hidden on step 1 (auto-advances) and summary (has its own button) */}
+      {/* Navigation -- hidden on step 1 (auto-advances) and summary (has its own button) */}
       {!isFirstStep && !isLastStep && (
         <div className="mt-6 flex justify-between gap-4">
           <Button
@@ -103,8 +111,6 @@ function WizardContent() {
   );
 }
 
-import { DoorVisualizer } from "@/components/configurator/door-visualizer";
-
 export default function OffertePage() {
   return (
     <FormProvider>