feat: split step-3 into independent left/right grid columns with sticky local stepper

shop/components/wizard/step-software.tsx

@@ -11,7 +11,6 @@ import { Badge } from '@/components/ui/badge'
 import { ShoppingCart, Check, AlertCircle } from 'lucide-react'
 import * as Icons from 'lucide-react'
 import { Category, Product, CategorySelection } from '@/lib/types'
-import { SummarySidebar } from './summary-sidebar'
 
 interface StepSoftwareProps {
   visibleCategories: Category[]
@@ -26,30 +25,6 @@ interface StepSoftwareProps {
   selectedBillingInterval: 'one_time' | 'monthly'
   billingLabel: (interval: string) => string
   billingBadgeClass: (interval: string) => string
-  
-  // Sidebar props
-  oneTimeTotal: number
-  monthlyTotal: number
-  oneTimeNet: number
-  oneTimeTax: number
-  oneTimeGross: number
-  monthlyNet: number
-  monthlyTax: number
-  monthlyGross: number
-  updatePriceModifier: { label?: string }
-  allCategoriesFilled: boolean
-  productValidationErrors: string[]
-  basketItems: any[]
-  editingIdx: number | null
-  editBasketItem: (idx: number) => void
-  deleteBasketItem: (idx: number) => void
-  deviceName: string
-  setDeviceName: (name: string) => void
-  addToBasket: () => void
-  isNextStepDisabled: boolean
-  hasActiveSelection: boolean
-  nextStep: () => void
-  prevStep: () => void
 }
 
 function CategoryIcon({ icon, className }: { icon?: string | null; className?: string }) {
@@ -71,44 +46,19 @@ export function StepSoftware({
   selectedBillingInterval,
   billingLabel,
   billingBadgeClass,
-  oneTimeTotal,
-  monthlyTotal,
-  oneTimeNet,
-  oneTimeTax,
-  oneTimeGross,
-  monthlyNet,
-  monthlyTax,
-  monthlyGross,
-  updatePriceModifier,
-  allCategoriesFilled,
-  productValidationErrors,
-  basketItems,
-  editingIdx,
-  editBasketItem,
-  deleteBasketItem,
-  deviceName,
-  setDeviceName,
-  addToBasket,
-  isNextStepDisabled,
-  hasActiveSelection,
-  nextStep,
-  prevStep,
 }: StepSoftwareProps) {
   return (
-    <div className="grid md:grid-cols-3 gap-6">
-      {/* Left: Category sections */}
-      <div className="md:col-span-2 space-y-8">
-        <Card className="glass-dark border-white/10">
-          <CardHeader>
-            <CardTitle className="text-2xl flex items-center gap-2 text-white">
-              <ShoppingCart className="w-6 h-6 text-primary" />
-              Software wählen
-            </CardTitle>
-            <CardDescription className="text-slate-300">
-              Wählen Sie pro Kategorie mindestens einen Artikel aus.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-8">
+    <Card className="glass-dark border-white/10">
+      <CardHeader>
+        <CardTitle className="text-2xl flex items-center gap-2 text-white">
+          <ShoppingCart className="w-6 h-6 text-blue-400" />
+          Software wählen
+        </CardTitle>
+        <CardDescription className="text-slate-300">
+          Wählen Sie pro Kategorie mindestens einen Artikel aus.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-8">
             {visibleCategories.map((cat, idx) => {
               const catProducts = products.filter(p => {
                 if (p.category_id !== cat.id) return false
@@ -339,40 +289,7 @@ export function StepSoftware({
                 </div>
               )
             })}
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Right: Summary sidebar */}
-      <SummarySidebar
-        visibleCategories={visibleCategories}
-        selections={selections}
-        products={products}
-        moduleQuantities={moduleQuantities}
-        billingLabel={billingLabel}
-        oneTimeTotal={oneTimeTotal}
-        monthlyTotal={monthlyTotal}
-        oneTimeNet={oneTimeNet}
-        oneTimeTax={oneTimeTax}
-        oneTimeGross={oneTimeGross}
-        monthlyNet={monthlyNet}
-        monthlyTax={monthlyTax}
-        monthlyGross={monthlyGross}
-        updatePriceModifier={updatePriceModifier}
-        allCategoriesFilled={allCategoriesFilled}
-        productValidationErrors={productValidationErrors}
-        basketItems={basketItems}
-        editingIdx={editingIdx}
-        editBasketItem={editBasketItem}
-        deleteBasketItem={deleteBasketItem}
-        deviceName={deviceName}
-        setDeviceName={setDeviceName}
-        addToBasket={addToBasket}
-        isNextStepDisabled={isNextStepDisabled}
-        hasActiveSelection={hasActiveSelection}
-        nextStep={nextStep}
-        prevStep={prevStep}
-      />
-    </div>
+      </CardContent>
+    </Card>
   )
 }