design: redesign product demo UI

src/App.tsx

@@ -1,24 +1,30 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import Header from './components/Header';
 import HeroSection from './components/HeroSection';
 import ProductDemoSection from './components/ProductDemoSection';
+import StorylineStepper from './components/StorylineStepper';
 import ScenarioCards from './components/ScenarioCards';
 import CriteriaCards from './components/CriteriaCards';
-import EngineeringDetails from './components/EngineeringDetails';
+import EngineeringDetails, { type EngineeringDetailsHandle } from './components/EngineeringDetails';
 import { DEMO_STEPS } from './data/demoSteps';
 import { SCENARIOS } from './data/scenarios';
-import { createSimulation, setRunning, stepSimulationToNextState } from './domain/simulation';
+import { createSimulation, stepSimulationToNextState } from './domain/simulation';
 import type { ScenarioId, SimulationState } from './domain/types';
 
+function scrollToId(id: string) {
+  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+}
+
 export default function App() {
   const [activeScenarioId, setActiveScenarioId] = useState<ScenarioId>('normal_flow');
   const [demoStepIndex, setDemoStepIndex] = useState(0);
-  
+  const engineeringRef = useRef<EngineeringDetailsHandle>(null);
+
   const activeScenario = useMemo(
-    () => SCENARIOS.find((s) => s.id === activeScenarioId) ?? SCENARIOS[0],
+    () => SCENARIOS.find((scenario) => scenario.id === activeScenarioId) ?? SCENARIOS[0],
     [activeScenarioId],
   );
-  
+
   const currentDemoStep = DEMO_STEPS[demoStepIndex];
   const [simulation, setSimulation] = useState<SimulationState>(() => createSimulation(activeScenario));
 
@@ -26,28 +32,30 @@ export default function App() {
     setSimulation(createSimulation(activeScenario));
   }, [activeScenario]);
 
-  // We are not using automatic interval in the new product demo by default to keep it step-by-step
-  // but if the user wants it to run automatically, we can preserve it if needed. 
-  // Let's use handleNext to just step through.
-  
   const handleStartDemo = () => {
-    document.getElementById('demo')?.scrollIntoView({ behavior: 'smooth' });
-    if (!simulation.currentItem && demoStepIndex === 0) {
-      setSimulation(stepSimulationToNextState(simulation));
-    }
+    scrollToId('demo');
+    setSimulation((current) => {
+      if (current.machineState === 'IDLE' && !current.currentItem) {
+        return stepSimulationToNextState(current);
+      }
+      return current;
+    });
   };
 
   const handleNext = () => {
-    // If simulation is finished or errored, we might need to reset or move to next scenario
-    const isFinished = simulation.machineState === 'RETURN_HOME' || simulation.machineState === 'FAULT' || simulation.machineState === 'EMERGENCY_STOP';
-    
-    if (isFinished) {
+    const finished =
+      simulation.machineState === 'RETURN_HOME' ||
+      simulation.machineState === 'FAULT' ||
+      simulation.machineState === 'EMERGENCY_STOP';
+
+    if (finished) {
       const nextIndex = (demoStepIndex + 1) % DEMO_STEPS.length;
       setDemoStepIndex(nextIndex);
       setActiveScenarioId(DEMO_STEPS[nextIndex].scenarioId);
-    } else {
-      setSimulation((current) => stepSimulationToNextState(current));
+      return;
     }
+
+    setSimulation((current) => stepSimulationToNextState(current));
   };
 
   const handleReset = () => {
@@ -56,39 +64,66 @@ export default function App() {
 
   const handleScenarioChange = (scenarioId: ScenarioId) => {
     setActiveScenarioId(scenarioId);
-    // Find first step that matches this scenario
-    const stepIdx = DEMO_STEPS.findIndex(s => s.scenarioId === scenarioId);
-    if (stepIdx >= 0) setDemoStepIndex(stepIdx);
-    document.getElementById('demo')?.scrollIntoView({ behavior: 'smooth' });
+    const stepIdx = DEMO_STEPS.findIndex((step) => step.scenarioId === scenarioId);
+    if (stepIdx >= 0) {
+      setDemoStepIndex(stepIdx);
+    }
+    scrollToId('demo');
+  };
+
+  const handleOpenEngineering = () => {
+    engineeringRef.current?.open();
+  };
+
+  const handleShowScenarios = () => {
+    scrollToId('scenarios');
   };
 
   return (
     <div className="product-page">
-      <Header simulation={simulation} />
-      
+      <Header
+        simulation={simulation}
+        onReset={handleReset}
+        onOpenDemo={() => scrollToId('demo')}
+        onOpenScenarios={handleShowScenarios}
+        onOpenEngineering={handleOpenEngineering}
+      />
+
       <main className="product-main">
-        <HeroSection onStartDemo={handleStartDemo} />
-        
-        <ProductDemoSection 
-          simulation={simulation} 
-          onNext={handleNext} 
-          onReset={handleReset}
-          demoStepTitle={currentDemoStep.title}
+        <HeroSection
+          onStartDemo={handleStartDemo}
+          onShowScenarios={handleShowScenarios}
+          onOpenEngineering={handleOpenEngineering}
         />
-        
-        <ScenarioCards 
-          scenarios={SCENARIOS} 
+
+        <ProductDemoSection
+          simulation={simulation}
+          demoStepTitle={currentDemoStep.title}
+          onStartDemo={handleStartDemo}
+          onNext={handleNext}
+          onReset={handleReset}
+          onOpenEngineering={handleOpenEngineering}
+        />
+
+        <StorylineStepper simulation={simulation} />
+
+        <ScenarioCards
+          scenarios={SCENARIOS}
           activeScenarioId={activeScenarioId}
           onScenarioChange={handleScenarioChange}
         />
-        
-        <CriteriaCards />
-        
-        <EngineeringDetails simulation={simulation} />
+
+        <CriteriaCards onLinkedScenario={handleScenarioChange} />
+
+        <EngineeringDetails
+          ref={engineeringRef}
+          simulation={simulation}
+          onScenarioChange={handleScenarioChange}
+        />
       </main>
-      
+
       <footer className="site-footer">
-        <p>OZON Tech Hackathon 2026. Sorter Simulation.</p>
+        <p>OZON Tech Hackathon 2026 · Sorter Simulation · Product Demo</p>
       </footer>
     </div>
   );