From 4e377ad5b7a25fcf1a814aa4b4b74478fb984565 Mon Sep 17 00:00:00 2001
From: Marcos <m.reifonas@gmail.com>
Date: Fri, 10 Jul 2026 15:11:11 +0000
Subject: [PATCH] feat: add didactical InfoParamModal for V0, S1, S2, S3 with
 NBR 6123 references

---
 .../components/GlobalWindSettingsModal.tsx    | 20 +++--
 app/src/components/InfoParamModal.tsx         | 86 +++++++++++++++++++
 2 files changed, 101 insertions(+), 5 deletions(-)
 create mode 100644 app/src/components/InfoParamModal.tsx

diff --git a/app/src/components/GlobalWindSettingsModal.tsx b/app/src/components/GlobalWindSettingsModal.tsx
index fcac353..a7d2c11 100644
--- a/app/src/components/GlobalWindSettingsModal.tsx
+++ b/app/src/components/GlobalWindSettingsModal.tsx
@@ -18,6 +18,7 @@ import { Settings2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { IsopletasModal } from '@/components/IsopletasModal';
 import { InfoV0Modal } from '@/components/InfoV0Modal';
+import { InfoParamModal } from '@/components/InfoParamModal';
 
 export function GlobalWindSettingsModal() {
   const {
@@ -73,9 +74,9 @@ export function GlobalWindSettingsModal() {
           <TabsContent value="norma" className="space-y-4 min-w-0">
             <div className="space-y-2">
               <div className="flex justify-between items-center">
-                <div className="flex items-center gap-1">
+                <div className="flex items-center gap-1.5">
                   <label className="text-xs font-medium text-foreground">Velocidade Básica (V₀)</label>
-                  <InfoV0Modal variant="icon" />
+                  <InfoParamModal type="v0" />
                 </div>
                 <span className="text-xs text-muted-foreground font-mono">{v0} m/s</span>
               </div>
@@ -83,7 +84,10 @@ export function GlobalWindSettingsModal() {
             </div>
 
             <div className="space-y-1">
-              <label className="text-xs font-medium text-foreground">Fator Topográfico (S₁)</label>
+              <div className="flex items-center gap-1.5 mb-1">
+                <label className="text-xs font-medium text-foreground">Fator Topográfico (S₁)</label>
+                <InfoParamModal type="s1" />
+              </div>
               <Select value={s1.toString()} onValueChange={(val) => setS1(Number(val))}>
                 <SelectTrigger className="w-full text-xs h-8"><SelectValue placeholder="S₁" /></SelectTrigger>
                 <SelectContent>
@@ -96,7 +100,10 @@ export function GlobalWindSettingsModal() {
             </div>
 
             <div className="space-y-1">
-              <label className="text-xs font-medium text-foreground">Categoria do Terreno (S₂)</label>
+              <div className="flex items-center gap-1.5 mb-1">
+                <label className="text-xs font-medium text-foreground">Categoria do Terreno (S₂)</label>
+                <InfoParamModal type="s2" />
+              </div>
               <Select value={terrainCategory} onValueChange={(val) => setTerrainCategory(val as typeof terrainCategory)}>
                 <SelectTrigger className="w-full text-xs h-8"><SelectValue placeholder="Categoria" /></SelectTrigger>
                 <SelectContent>
@@ -117,7 +124,10 @@ export function GlobalWindSettingsModal() {
             </div>
 
             <div className="space-y-1">
-              <label className="text-xs font-medium text-foreground">Grupo Estatístico (S₃)</label>
+              <div className="flex items-center gap-1.5 mb-1">
+                <label className="text-xs font-medium text-foreground">Grupo Estatístico (S₃)</label>
+                <InfoParamModal type="s3" />
+              </div>
               <Select value={s3Group.toString()} onValueChange={(val) => setS3Group(Number(val) as 1 | 2 | 3 | 4 | 5)}>
                 <SelectTrigger className="w-full text-xs h-8"><SelectValue placeholder="Grupo" /></SelectTrigger>
                 <SelectContent>
diff --git a/app/src/components/InfoParamModal.tsx b/app/src/components/InfoParamModal.tsx
new file mode 100644
index 0000000..8097e73
--- /dev/null
+++ b/app/src/components/InfoParamModal.tsx
@@ -0,0 +1,86 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Info, HelpCircle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+type ParamType = 'v0' | 's1' | 's2' | 's3';
+
+interface InfoParamModalProps {
+  type: ParamType;
+  className?: string;
+}
+
+const PARAM_INFO = {
+  v0: {
+    title: 'Velocidade Básica do Vento (V₀)',
+    section: 'NBR 6123 — Item 5.1 e Anexo C',
+    description: 'A velocidade básica (V₀) é a velocidade de uma rajada de vento de 3 segundos, excedida em média uma vez em 50 anos (período de recorrência), a 10 metros de altura sobre um terreno plano e aberto.',
+    guidance: 'Para projetos reais, localize o município no mapa de isopletas (Figura 1) ou utilize os dados reais das estações de medição do Anexo C. Em áreas de transição de isopletas, adote sempre o maior valor para garantir o conservadorismo de segurança.',
+  },
+  s1: {
+    title: 'Fator Topográfico (S₁)',
+    section: 'NBR 6123 — Item 5.2 e Anexo A',
+    description: 'O fator S₁ ajusta a velocidade do vento conforme as características do relevo e topografia do terreno ao redor da construção, contabilizando acelerações ou reduções de velocidade.',
+    guidance: '• Terreno plano ou levemente ondulado: S₁ = 1,0.\n• Vales protegidos (onde o vento é atenuado): S₁ = 0,9.\n• Topo de morros e cristas de taludes: S₁ varia de 1,0 a 1,2 dependendo da inclinação (efeito de aceleração do escoamento).',
+  },
+  s2: {
+    title: 'Rugosidade e Dimensões (S₂)',
+    section: 'NBR 6123 — Item 5.3 e Tabela 3',
+    description: 'O fator S₂ ajusta a velocidade conforme a rugosidade do terreno (categorias I a V) e a altura da edificação (z), associado à classe geométrica da estrutura (A, B ou C baseadas na maior dimensão vertical/horizontal).',
+    guidance: '• Categorias I/II: Áreas litorâneas e campos abertos (ventos mais intensos próximos ao solo).\n• Categoria III/IV: Zonas residenciais, suburbanas ou florestas com obstáculos esparsos.\n• Categoria V: Zonas urbanas com grandes edificações (ventos atenuados no solo, mas aumentam rapidamente com a altura).',
+  },
+  s3: {
+    title: 'Fator Estatístico (S₃)',
+    section: 'NBR 6123 — Item 5.4 e Tabela 4',
+    description: 'O fator S₃ é baseado em conceitos de probabilidade e risco aceitável, ajustando o projeto à vida útil de utilização da estrutura e ao risco de danos humanos ou socioeconômicos em caso de colapso.',
+    guidance: '• Grupo 1 (S₃ = 1,11): Edifícios vitais cujos serviços devem continuar após tempestades (hospitais, quartéis, telefonia).\n• Grupo 2 (S₃ = 1,06): Residências, escritórios, hotéis e comércios comuns.\n• Grupo 3 (S₃ = 1,00): Depósitos industriais ou comerciais comuns de menor risco.\n• Grupo 4 (S₃ = 0,95): Edificações agrícolas, silos e galpões temporários.',
+  },
+};
+
+export function InfoParamModal({ type, className = '' }: InfoParamModalProps) {
+  const info = PARAM_INFO[type];
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className={`h-4 w-4 text-muted-foreground/80 hover:text-primary rounded-full p-0 shrink-0 transition-colors cursor-pointer ${className}`}
+          title={`Como determinar o ${type.toUpperCase()}`}
+        >
+          <HelpCircle className="h-3.5 w-3.5" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[460px] max-w-[95vw] p-5 bg-background border border-border shadow-2xl rounded-lg">
+        <DialogHeader className="border-b pb-2.5">
+          <DialogTitle className="text-sm font-semibold flex items-center gap-1.5 text-primary">
+            <Info className="h-4.5 w-4.5" />
+            {info.title}
+          </DialogTitle>
+          <DialogDescription className="text-[10px] font-mono text-muted-foreground/80 mt-0.5">
+            {info.section}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-3.5 text-xs mt-3.5 text-muted-foreground leading-relaxed">
+          <div className="space-y-1 bg-muted/40 p-3 rounded-md border border-border/40">
+            <h5 className="font-semibold text-foreground text-[11px]">Conceito Físico:</h5>
+            <p className="text-muted-foreground">{info.description}</p>
+          </div>
+
+          <div className="space-y-1">
+            <h5 className="font-semibold text-foreground text-[11px]">Como especificar no projeto:</h5>
+            <p className="whitespace-pre-line text-muted-foreground">{info.guidance}</p>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}