"use client"; 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", "Extra", "Contact", "Overzicht"]; const stepComponents = [ StepProduct, StepDimensions, StepOptions, StepExtras, StepContact, StepSummary, ]; function StepIndicator() { const { currentStep, totalSteps, goToStep } = useFormContext(); return (
{stepLabels.map((label, i) => (
{i < totalSteps - 1 && (
)}
))}
); } function WizardContent() { const { currentStep, nextStep, prevStep, totalSteps } = useFormContext(); const CurrentStepComponent = stepComponents[currentStep]; const isLastStep = currentStep === totalSteps - 1; const isFirstStep = currentStep === 0; return (
{/* Navigation -- hidden on step 1 (auto-advances) and summary (has its own button) */} {!isFirstStep && !isLastStep && (
)} {/* Summary: only show back button */} {isLastStep && (
)}
); } export default function OffertePage() { return ( {/* Mobile Header */}

Configureer uw deur

Ontwerp uw stalen deur in realtime.

{/* Split Screen Layout */}
{/* Left Column: Live Visualizer (Desktop Only) */}
{/* Right Column: Controls */}

Configureer uw deur

); }