"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 { 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"; const stepLabels = ["Product", "Afmetingen", "Opties", "Contact", "Overzicht"]; const stepComponents = [ StepProduct, StepDimensions, StepOptions, StepContact, StepSummary, ]; function StepIndicator() { const { currentStep, totalSteps } = useFormContext(); return (
{stepLabels.map((label, i) => (
{i + 1}
{label}
{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 */}

Offerte Aanvragen

Configureer uw product in een paar stappen.

{/* Split Screen Layout */}
{/* Left Column: Visual Preview (Desktop Only) */}
Product preview
Live Voorbeeld
{/* Right Column: Controls */}

Configureer jouw product

); }