From 55221b3214559387b0532573a26cd2fcb8ce0dbb Mon Sep 17 00:00:00 2001
From: admtracksteel <admtracksteel@gmail.com>
Date: Fri, 10 Jul 2026 00:50:44 +0000
Subject: [PATCH] feat: adicionar ilustracao de vento paralelo ao galpao

---
 app/src/components/WindFlowGrid2D.tsx | 38 ++++++++++++++++++++++-----
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/app/src/components/WindFlowGrid2D.tsx b/app/src/components/WindFlowGrid2D.tsx
index 676aee3..c13acc4 100644
--- a/app/src/components/WindFlowGrid2D.tsx
+++ b/app/src/components/WindFlowGrid2D.tsx
@@ -450,10 +450,10 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
 
       case 'warehouse':
         return (
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
             {/* Caso 1 */}
             <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
-              <span className="text-xs font-bold text-sky-400">Caso A: Pressões de Vento Externas</span>
+              <span className="text-xs font-bold text-sky-400">Caso A: Vento Perpendicular (90°)</span>
               <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
@@ -466,12 +466,36 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
                   <path d="M 110,130 L 110,85 L 150,55 L 190,85 L 190,130 Z" fill="#475569" stroke="#64748b" strokeWidth="2" />
                 </svg>
               </div>
-              <p className="text-[10px] text-muted-foreground leading-snug">O vento bate na parede esquerda (barlavento - pressão positiva) e decola no telhado de sotavento (sucção).</p>
+              <p className="text-[10px] text-muted-foreground leading-snug">Vento incide a 90° (perpendicular à cumeeira). Pressão positiva na fachada de barlavento e sucção no telhado e sotavento.</p>
             </div>
 
-            {/* Caso 2 */}
+            {/* Caso 2: Vento Paralelo */}
             <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
-              <span className="text-xs font-bold text-orange-400">Caso B: Efeito de Pressão Interna (+Cpi)</span>
+              <span className="text-xs font-bold text-emerald-400">Caso B: Vento Paralelo (0°)</span>
+              <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
+                <svg viewBox="0 0 300 150" className="w-full h-full">
+                  {styleBlock}
+                  <line x1="0" y1="130" x2="300" y2="130" stroke="#475569" strokeWidth="2" />
+                  
+                  {/* Galpão visto de lado (retângulo) */}
+                  <rect x="80" y="70" width="140" height="60" fill="#475569" stroke="#64748b" strokeWidth="2" />
+                  
+                  {/* Linhas de vento (escoamento sobre o teto reto) */}
+                  <path d="M -20,15 L 320,15" className="wind-line-slow" />
+                  <path d="M -20,40 Q 80,35 150,40 T 320,45" className="wind-line-fast" />
+                  <path d="M -20,85 L 80,85" className="wind-line" />
+                  
+                  {/* Esteira turbulenta no telhado e atrás */}
+                  <path d="M 80,70 Q 110,50 150,70" fill="none" stroke="#ef4444" strokeWidth="1.5" strokeDasharray="3 6" />
+                  <path d="M 220,70 Q 250,90 280,110" fill="none" stroke="#ef4444" strokeWidth="1.5" strokeDasharray="3 6" />
+                </svg>
+              </div>
+              <p className="text-[10px] text-muted-foreground leading-snug">Vento incide a 0° (paralelo à cumeeira). O fluxo contorna o oitão frontal, gerando forte sucção nas bordas longitudinais.</p>
+            </div>
+
+            {/* Caso 3 */}
+            <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
+              <span className="text-xs font-bold text-orange-400">Caso C: Pressão Interna (+Cpi)</span>
               <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}
@@ -488,9 +512,9 @@ export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
               <p className="text-[10px] text-muted-foreground leading-snug">Com abertura na parede de ataque, a pressão interna "infla" a estrutura, empurrando paredes e teto para fora.</p>
             </div>
 
-            {/* Caso 3 */}
+            {/* Caso 4 */}
             <div className="flex flex-col gap-2 bg-white dark:bg-slate-950 border border-border/60 p-3 rounded-lg">
-              <span className="text-xs font-bold text-blue-400">Caso C: Efeito de Sucção Interna (-Cpi)</span>
+              <span className="text-xs font-bold text-blue-400">Caso D: Sucção Interna (-Cpi)</span>
               <div className="relative aspect-video bg-slate-100 dark:bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                 <svg viewBox="0 0 300 150" className="w-full h-full">
                   {styleBlock}