interface WindFlowGrid2DProps {
  type: string;
  params?: Record<string, any>;
}

export function WindFlowGrid2D({ type }: WindFlowGrid2DProps) {
  // Estilos de animação e keyframes para os SVGs
  const styleBlock = (
    <style>{`
      @keyframes windFlow {
        0% { stroke-dashoffset: 36; }
        100% { stroke-dashoffset: 0; }
      }
      @keyframes vortexRotate {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      @keyframes vibration {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-6px); }
      }
      .wind-line {
        stroke: #3b82f6;
        stroke-width: 1.8;
        stroke-dasharray: 8 16;
        animation: windFlow 1.8s linear infinite;
        fill: none;
        opacity: 0.85;
      }
      .wind-line-fast {
        stroke: #0ea5e9;
        stroke-width: 2.2;
        stroke-dasharray: 6 12;
        animation: windFlow 0.9s linear infinite;
        fill: none;
      }
      .wind-line-slow {
        stroke: #93c5fd;
        stroke-width: 1.5;
        stroke-dasharray: 10 20;
        animation: windFlow 3s linear infinite;
        fill: none;
        opacity: 0.5;
      }
      .vortex-line {
        stroke: #ef4444;
        stroke-width: 1.5;
        stroke-dasharray: 4 8;
        animation: windFlow 2.5s linear infinite;
        fill: none;
        opacity: 0.85;
      }
      .vortex-spin-cw {
        transform-origin: center;
        animation: vortexRotate 2.5s linear infinite;
      }
      .vortex-spin-ccw {
        transform-origin: center;
        animation: vortexRotate 2.5s linear infinite reverse;
      }
      .vibe-cyl {
        animation: vibration 1.2s ease-in-out infinite;
      }
      .cpi-arrow-pos {
        stroke: #f97316;
        stroke-width: 2;
        fill: none;
      }
      .cpi-arrow-neg {
        stroke: #3b82f6;
        stroke-width: 2;
        fill: none;
      }
    `}</style>
  );

  // Define quais itens de legenda devem ser exibidos para cada tipo de módulo
  const getVisibleLegendItems = () => {
    const hasCpi = ['warehouse', 'vault', 'dome', 'cylinder'].includes(type);
    const hasVortex = ['cylinder', 'dynamics', 'sign', 'tower'].includes(type);
    const hasLift = ['bridge', 'isolated-roof'].includes(type);

    return {
      wind: true,
      fast: true,
      vortex: hasVortex,
      vortexSpin: ['cylinder', 'dynamics', 'sign'].includes(type),
      cpiPos: hasCpi,
      cpiNeg: hasCpi,
      lift: hasLift,
    };
  };

  const getViewLabel = () => {
    switch (type) {
      case 'bridge':
      case 'isolated-roof':
      case 'vault':
      case 'dome':
      case 'warehouse':
        return 'Vista Lateral (Corte Transversal)';
      case 'cylinder':
      case 'sign':
      case 'bar':
      case 'dynamics':
      case 'tower':
        return 'Vista Superior (Planta) / Aérea';
      default:
        return 'Vista Esquemática';
    }
  };

  // Renderizador do grid didático de cenários
  const renderScenarios = () => {
    const legendDef = (
      <defs>
        <marker id="arrow-green" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 0 L 10 5 L 0 10 z" fill="#10b981" />
        </marker>
        <marker id="arrow-red" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 0 L 10 5 L 0 10 z" fill="#ef4444" />
        </marker>
        <marker id="cpi-pos" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto">
          <path d="M 0 0 L 10 5 L 0 10 z" fill="#f97316" />
        </marker>
        <marker id="cpi-neg" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5" orient="auto">
          <path d="M 0 0 L 10 5 L 0 10 z" fill="#3b82f6" />
        </marker>
      </defs>
    );

    switch (type) {
      case 'bridge':
        return (
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {/* Caso 1 */}
            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
              <span className="text-xs font-bold text-sky-400">Caso A: Vento Frontal Horizontal (0°)</span>
              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                <svg viewBox="0 0 300 150" className="w-full h-full">
                  {styleBlock}
                  <path d="M -20,20 L 320,20" className="wind-line-slow" />
                  <path d="M -20,50 Q 110,40 150,40 Q 190,40 320,50" className="wind-line-fast" />
                  <rect x="110" y="65" width="80" height="20" rx="2" fill="#475569" stroke="#64748b" strokeWidth="1.5" />
                  <path d="M -20,100 Q 110,110 150,110 Q 190,110 320,100" className="wind-line-fast" />
                  <path d="M -20,130 L 320,130" className="wind-line-slow" />
                </svg>
              </div>
              <p className="text-[10px] text-muted-foreground leading-snug">Escoamento simétrico ao redor do tabuleiro. Arrasto máximo horizontal, sustentação nula.</p>
            </div>

            {/* Caso 2 */}
            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
              <span className="text-xs font-bold text-emerald-400">Caso B: Vento Ascendente (+5°)</span>
              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                <svg viewBox="0 0 300 150" className="w-full h-full">
                  {styleBlock}
                  {legendDef}
                  <g transform="rotate(15, 150, 75)">
                    <path d="M -20,15 L 320,15" className="wind-line-slow" />
                    <path d="M -20,45 Q 150,30 320,45" className="wind-line-fast" />
                    <path d="M -20,105 Q 150,120 320,105" className="wind-line-fast" />
                    <path d="M -20,135 L 320,135" className="wind-line-slow" />
                  </g>
                  <rect x="110" y="65" width="80" height="20" rx="2" fill="#475569" stroke="#64748b" strokeWidth="1.5" />
                  {/* Força de sustentação positiva */}
                  <path d="M 150,55 L 150,20" stroke="#10b981" strokeWidth="2.5" fill="none" markerEnd="url(#arrow-green)" />
                  <text x="160" y="30" fill="#10b981" className="text-[9px] font-bold font-mono">+Fz (Lift)</text>
                </svg>
              </div>
              <p className="text-[10px] text-muted-foreground leading-snug">O vento atinge o tabuleiro de baixo para cima, defletindo o fluxo e gerando força de sustentação vertical positiva.</p>
            </div>

            {/* Caso 3 */}
            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
              <span className="text-xs font-bold text-rose-400">Caso C: Vento Descendente (-5°)</span>
              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                <svg viewBox="0 0 300 150" className="w-full h-full">
                  {styleBlock}
                  {legendDef}
                  <g transform="rotate(-15, 150, 75)">
                    <path d="M -20,15 L 320,15" className="wind-line-slow" />
                    <path d="M -20,45 Q 150,30 320,45" className="wind-line-fast" />
                    <path d="M -20,105 Q 150,120 320,105" className="wind-line-fast" />
                    <path d="M -20,135 L 320,135" className="wind-line-slow" />
                  </g>
                  <rect x="110" y="65" width="80" height="20" rx="2" fill="#475569" stroke="#64748b" strokeWidth="1.5" />
                  {/* Força de sustentação negativa */}
                  <path d="M 150,95 L 150,130" stroke="#ef4444" strokeWidth="2.5" fill="none" markerEnd="url(#arrow-red)" />
                  <text x="160" y="125" fill="#ef4444" className="text-[9px] font-bold font-mono">-Fz (Downforce)</text>
                </svg>
              </div>
              <p className="text-[10px] text-muted-foreground leading-snug">Vento de cima para baixo empurra o tabuleiro para baixo, aumentando a carga vertical sobre as vigas principais.</p>
            </div>
          </div>
        );

      case 'isolated-roof':
        return (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Caso 1 */}
            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
              <span className="text-xs font-bold text-sky-400">Caso A: Escoamento Livre por Baixo</span>
              <div className="relative aspect-video 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" />
                  <line x1="120" y1="65" x2="120" y2="130" stroke="#64748b" strokeWidth="2" />
                  <line x1="180" y1="65" x2="180" y2="130" stroke="#64748b" strokeWidth="2" />
                  {/* Telhado inclinado */}
                  <line x1="90" y1="55" x2="210" y2="65" stroke="#f43f5e" strokeWidth="4" strokeLinecap="round" />
                  
                  {/* Linhas de vento desviando suavemente */}
                  <path d="M -20,20 Q 150,15 320,25" className="wind-line-slow" />
                  <path d="M -20,45 C 100,45 120,35 150,35 C 180,35 200,50 320,55" className="wind-line-fast" />
                  <path d="M -20,80 Q 150,85 320,80" className="wind-line" />
                  <path d="M -20,110 L 320,110" className="wind-line-slow" />
                </svg>
              </div>
              <p className="text-[10px] text-muted-foreground leading-snug">Como a estrutura não possui paredes, o ar flui sob a cobertura, gerando sucções menores no intradorso.</p>
            </div>

            {/* Caso 2 */}
            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
              <span className="text-xs font-bold text-rose-400">Caso B: Efeito de Sucção no Bordo de Ataque</span>
              <div className="relative aspect-video 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" />
                  <line x1="120" y1="65" x2="120" y2="130" stroke="#64748b" strokeWidth="2" />
                  <line x1="180" y1="65" x2="180" y2="130" stroke="#64748b" strokeWidth="2" />
                  <line x1="90" y1="50" x2="210" y2="70" stroke="#f43f5e" strokeWidth="4" strokeLinecap="round" />
                  
                  {/* Vento inclinado batendo na borda de ataque superior */}
                  <g transform="rotate(10, 150, 60)">
                    <path d="M -20,20 Q 120,5 320,25" className="wind-line-fast" />
                    <path d="M -20,50 Q 100,20 150,20 C 190,20 220,55 320,60" className="vortex-line" />
                    <path d="M -20,95 Q 150,95 320,95" className="wind-line" />
                  </g>
                  {/* Pequena zona vermelha de turbulência no início do telhado */}
                  <path d="M 95,35 Q 125,15 155,30" fill="none" stroke="#ef4444" strokeWidth="1.5" strokeDasharray="3 6" />
                </svg>
              </div>
              <p className="text-[10px] text-muted-foreground leading-snug">Vento inclinado gera descolamento brusco na borda esquerda elevada. Isso gera um pico severo de sucção (arrancamento).</p>
            </div>
          </div>
        );

      case 'bar':
        return (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Caso 1 */}
            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
              <span className="text-xs font-bold text-sky-400">Caso A: Fluxo Frontal (0°)</span>
              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                <svg viewBox="0 0 300 150" className="w-full h-full">
                  {styleBlock}
                  <path d="M -20,20 L 320,20" className="wind-line-slow" />
                  <path d="M -20,45 C 100,40 120,25 150,25 C 180,25 200,40 320,45" className="wind-line" />
                  <path d="M -20,105 C 100,110 120,125 150,125 C 180,125 200,110 320,105" className="wind-line" />
                  <path d="M -20,130 L 320,130" className="wind-line-slow" />
                  <path d="M 160,50 Q 230,45 320,65" className="vortex-line" />
                  <path d="M 160,100 Q 230,105 320,85" className="vortex-line" />

                  {/* Perfil L frontal */}
                  <g transform="translate(135, 55)">
                    <path d="M 0,0 L 10,0 L 10,25 L 30,25 L 30,35 L 0,35 Z" fill="#475569" stroke="#64748b" strokeWidth="1.5" />
                  </g>
                </svg>
              </div>
              <p className="text-[10px] text-muted-foreground leading-snug">Vento atinge perpendicularmente a face. O ar acumula no interior da cantoneira, gerando altíssimo arrasto ($C_a \approx 2.0$).</p>
            </div>

            {/* Caso 2 */}
            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
              <span className="text-xs font-bold text-rose-400">Caso B: Escoamento Oblíquo (45°)</span>
              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                <svg viewBox="0 0 300 150" className="w-full h-full">
                  {styleBlock}
                  <path d="M -20,20 L 320,20" className="wind-line-slow" />
                  <path d="M -20,45 C 100,35 120,20 160,20 C 200,20 220,50 320,60" className="wind-line-fast" />
                  <path d="M -20,105 C 100,105 130,110 160,110 C 190,110 210,125 320,120" className="wind-line" />
                  <path d="M -20,130 L 320,130" className="wind-line-slow" />
                  <path d="M 175,70 Q 240,65 320,90" className="vortex-line" />

                  {/* Perfil L rotacionado */}
                  <g transform="translate(150, 75) rotate(45)">
                    <path d="M -15,-17 L -5,-17 L -5,8 L 15,8 L 15,18 L -15,18 Z" fill="#475569" stroke="#64748b" strokeWidth="1.5" />
                  </g>
                </svg>
              </div>
              <p className="text-[10px] text-muted-foreground leading-snug">O vento flui inclinado. O ar contorna a quina da cantoneira, aliviando o empuxo direto e gerando turbulência assimétrica.</p>
            </div>
          </div>
        );

      case 'tower':
        return (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Caso 1 */}
            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
              <span className="text-xs font-bold text-sky-400">Caso A: Vento Frontal a 0°</span>
              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                <svg viewBox="0 0 300 150" className="w-full h-full">
                  {styleBlock}
                  <path d="M -20,20 L 320,20" className="wind-line-slow" />
                  <path d="M -20,50 Q 110,40 140,40 Q 170,40 320,50" className="wind-line" />
                  <path d="M -20,100 Q 110,110 140,110 Q 170,110 320,100" className="wind-line" />
                  <path d="M -20,130 L 320,130" className="wind-line-slow" />
                  {/* Pequenas linhas de turbulência passando por dentro da treliça */}
                  <path d="M 170,75 L 320,75" className="vortex-line" />

                  {/* Seção quadrada da torre */}
                  <g transform="translate(135, 60)">
                    <rect x="0" y="0" width="30" height="30" fill="none" stroke="#64748b" strokeWidth="2.5" />
                    <line x1="0" y1="0" x2="30" y2="30" stroke="#64748b" strokeWidth="1" />
                    <line x1="30" y1="0" x2="0" y2="30" stroke="#64748b" strokeWidth="1" />
                  </g>
                </svg>
              </div>
              <p className="text-[10px] text-muted-foreground leading-snug">Vento passa através dos vazios das barras. Cada cantoneira gera sua própria microesteira de turbulência.</p>
            </div>

            {/* Caso 2 */}
            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
              <span className="text-xs font-bold text-rose-400">Caso B: Vento Diagonal a 45°</span>
              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                <svg viewBox="0 0 300 150" className="w-full h-full">
                  {styleBlock}
                  <path d="M -20,15 L 320,15" className="wind-line-slow" />
                  <path d="M -20,45 C 100,35 130,20 150,20 C 180,20 200,45 320,55" className="wind-line" />
                  <path d="M -20,105 C 100,115 130,130 150,130 C 180,130 200,105 320,95" className="wind-line" />
                  <path d="M -20,135 L 320,135" className="wind-line-slow" />
                  <path d="M 170,75 L 320,75" className="vortex-line" />

                  {/* Seção quadrada rotacionada */}
                  <g transform="translate(150, 75) rotate(45)">
                    <rect x="-15" y="-15" width="30" height="30" fill="none" stroke="#64748b" strokeWidth="2.5" />
                    <line x1="-15" y1="-15" x2="15" y2="15" stroke="#64748b" strokeWidth="1" />
                    <line x1="15" y1="-15" x2="-15" y2="15" stroke="#64748b" strokeWidth="1" />
                  </g>
                </svg>
              </div>
              <p className="text-[10px] text-muted-foreground leading-snug">Vento incide na diagonal da torre. O fator de incidência aumenta o esforço nas fundações de canto.</p>
            </div>
          </div>
        );

      case 'vault':
        return (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Caso 1 */}
            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
              <span className="text-xs font-bold text-sky-400">Caso A: Regime de Baixa Turbulência</span>
              <div className="relative aspect-video 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" />
                  
                  {/* Linhas de vento contornando perfeitamente */}
                  <path d="M -20,20 L 320,20" className="wind-line-slow" />
                  <path d="M -20,60 C 100,50 110,25 150,25 C 190,25 200,60 320,60" className="wind-line-fast" />
                  <path d="M -20,100 C 90,90 100,65 150,65 C 200,65 210,100 320,100" className="wind-line" />
                  
                  {/* Abóbada */}
                  <path d="M 100,130 A 50,50 0 0 1 200,130 Z" fill="#475569" stroke="#64748b" strokeWidth="2" />
                </svg>
              </div>
              <p className="text-[10px] text-muted-foreground leading-snug">O escoamento contorna colado à casca, gerando sucção simétrica com valor máximo de Cpe no topo do arco.</p>
            </div>

            {/* Caso 2 */}
            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
              <span className="text-xs font-bold text-rose-400">Caso B: Regime Turbulento (Série 51/52)</span>
              <div className="relative aspect-video 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" />
                  
                  {/* Linhas de vento ondulando e descolando antes */}
                  <path d="M -20,20 L 320,20" className="wind-line-slow" />
                  <path d="M -20,55 C 100,45 110,30 135,30 Q 160,20 185,55 Q 215,90 320,80" className="wind-line-fast" />
                  <path d="M -20,95 C 90,85 100,70 135,70 Q 150,60 175,90 Q 200,110 320,105" className="wind-line" />
                  <path d="M 175,80 Q 230,70 320,115" className="vortex-line" />
                  
                  {/* Abóbada */}
                  <path d="M 100,130 A 50,50 0 0 1 200,130 Z" fill="#475569" stroke="#64748b" strokeWidth="2" />
                </svg>
              </div>
              <p className="text-[10px] text-muted-foreground leading-snug">A turbulência do ar antecipa o descolamento da camada limite, gerando redemoinhos e pressões flutuantes a sotavento.</p>
            </div>
          </div>
        );

      case 'dome':
        return (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Caso 1 */}
            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
              <span className="text-xs font-bold text-sky-400">Caso A: Cúpula Apoiada no Solo</span>
              <div className="relative aspect-video 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" />
                  
                  {/* Vento contornando diretamente */}
                  <path d="M -20,20 L 320,20" className="wind-line-slow" />
                  <path d="M -20,60 C 100,50 110,25 150,25 C 190,25 200,60 320,60" className="wind-line-fast" />
                  <path d="M -20,100 C 90,90 100,65 150,65 C 200,65 210,100 320,100" className="wind-line" />
                  
                  {/* Cúpula hemisférica */}
                  <path d="M 100,130 A 50,50 0 0 1 200,130 Z" fill="#475569" stroke="#64748b" strokeWidth="2" />
                </svg>
              </div>
              <p className="text-[10px] text-muted-foreground leading-snug">Vento escoa diretamente da superfície do terreno, gerando pressões positivas na face esquerda inferior e sucção no topo.</p>
            </div>

            {/* Caso 2 */}
            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
              <span className="text-xs font-bold text-rose-400">Caso B: Elevada sobre Parede Cilíndrica</span>
              <div className="relative aspect-video 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" />
                  
                  {/* Vento desviando mais no barlavento devido à parede vertical */}
                  <path d="M -20,15 L 320,15" className="wind-line-slow" />
                  <path d="M -20,50 C 90,40 100,15 150,15 C 200,15 210,50 320,55" className="wind-line-fast" />
                  <path d="M -20,95 C 80,85 100,50 120,50 L 180,50 C 200,50 220,85 320,90" className="wind-line" />
                  
                  {/* Parede + Cúpula */}
                  <rect x="110" y="90" width="80" height="40" fill="#2d3748" stroke="#475569" strokeWidth="1.5" />
                  <path d="M 110,90 A 40,40 0 0 1 190,90 Z" fill="#475569" stroke="#64748b" strokeWidth="2" />
                </svg>
              </div>
              <p className="text-[10px] text-muted-foreground leading-snug">A parede de base deflete o fluxo bruscamente, gerando zonas de forte redemoinho sob a quina e alterando o Cpe do domo.</p>
            </div>
          </div>
        );

      case 'warehouse':
        return (
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {/* Caso 1 */}
            <div className="flex flex-col gap-2 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>
              <div className="relative aspect-video 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" />
                  <path d="M -20,20 L 320,20" className="wind-line-slow" />
                  <path d="M -20,60 C 100,60 110,35 150,35 C 190,35 200,65 320,65" className="wind-line-fast" />
                  <path d="M -20,100 C 90,90 100,75 115,75 L 185,75 C 200,75 210,100 320,100" className="wind-line" />
                  
                  {/* Galpão */}
                  <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>
            </div>

            {/* Caso 2 */}
            <div className="flex flex-col gap-2 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>
              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                <svg viewBox="0 0 300 150" className="w-full h-full">
                  {styleBlock}
                  {legendDef}
                  <line x1="0" y1="130" x2="300" y2="130" stroke="#475569" strokeWidth="2" />
                  <path d="M 110,130 L 110,85 L 150,55 L 190,85 L 190,130 Z" fill="#475569" stroke="#64748b" strokeWidth="2" />
                  {/* Setas laranjas apontando para fora (inflado) */}
                  <path d="M 130,110 L 115,110" className="cpi-arrow-pos" markerEnd="url(#cpi-pos)" />
                  <path d="M 170,110 L 185,110" className="cpi-arrow-pos" markerEnd="url(#cpi-pos)" />
                  <path d="M 138,80 L 128,68" className="cpi-arrow-pos" markerEnd="url(#cpi-pos)" />
                  <path d="M 162,80 L 172,68" className="cpi-arrow-pos" markerEnd="url(#cpi-pos)" />
                </svg>
              </div>
              <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 */}
            <div className="flex flex-col gap-2 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>
              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                <svg viewBox="0 0 300 150" className="w-full h-full">
                  {styleBlock}
                  {legendDef}
                  <line x1="0" y1="130" x2="300" y2="130" stroke="#475569" strokeWidth="2" />
                  <path d="M 110,130 L 110,85 L 150,55 L 190,85 L 190,130 Z" fill="#475569" stroke="#64748b" strokeWidth="2" />
                  {/* Setas azuis apontando para dentro (sugado) */}
                  <path d="M 115,110 L 130,110" className="cpi-arrow-neg" markerEnd="url(#cpi-neg)" />
                  <path d="M 185,110 L 170,110" className="cpi-arrow-neg" markerEnd="url(#cpi-neg)" />
                  <path d="M 128,68 L 138,80" className="cpi-arrow-neg" markerEnd="url(#cpi-neg)" />
                  <path d="M 172,68 L 162,80" className="cpi-arrow-neg" markerEnd="url(#cpi-neg)" />
                </svg>
              </div>
              <p className="text-[10px] text-muted-foreground leading-snug">Com aberturas nas zonas de sucção externas, cria-se vácuo interno. O teto e paredes são puxados para dentro.</p>
            </div>
          </div>
        );

      case 'cylinder':
        return (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Caso 1 */}
            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
              <span className="text-xs font-bold text-sky-400">Caso A: Escoamento Subcrítico (Superfície Lisa)</span>
              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                <svg viewBox="0 0 300 150" className="w-full h-full">
                  {styleBlock}
                  <path d="M -20,20 L 320,20" className="wind-line-slow" />
                  <path d="M -20,45 C 100,42 110,25 150,25 C 190,25 200,42 320,45" className="wind-line-fast" />
                  <path d="M -20,105 C 100,108 110,125 150,125 C 190,125 200,108 320,105" className="wind-line-fast" />
                  <path d="M -20,130 L 320,130" className="wind-line-slow" />
                  
                  {/* Esteira de vórtices de Von Kármán larga */}
                  <g transform="translate(190, 75)">
                    <circle cx="20" cy="-20" r="8" fill="none" stroke="#ef4444" strokeWidth="1.2" strokeDasharray="2 4" className="vortex-spin-cw" />
                    <circle cx="50" cy="20" r="10" fill="none" stroke="#ef4444" strokeWidth="1.2" strokeDasharray="2 4" className="vortex-spin-ccw" />
                    <path d="M 0,0 Q 30,-25 60,0 Q 90,25 120,0" className="vortex-line" />
                  </g>
                  
                  <circle cx="150" cy="75" r="25" fill="#475569" stroke="#64748b" strokeWidth="1.5" />
                </svg>
              </div>
              <p className="text-[10px] text-muted-foreground leading-snug">O fluxo descola precocemente (~80°), criando uma esteira de turbulência larga e resultando em arrasto elevado ($C_a \approx 1.2$).</p>
            </div>

            {/* Caso 2 */}
            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
              <span className="text-xs font-bold text-emerald-400">Caso B: Escoamento Supercrítico (Superfície Rugosa)</span>
              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                <svg viewBox="0 0 300 150" className="w-full h-full">
                  {styleBlock}
                  <path d="M -20,20 L 320,20" className="wind-line-slow" />
                  <path d="M -20,45 C 100,42 120,38 150,38 C 175,38 180,42 320,45" className="wind-line-fast" />
                  <path d="M -20,105 C 100,108 120,112 150,112 C 175,112 180,108 320,105" className="wind-line-fast" />
                  <path d="M -20,130 L 320,130" className="wind-line-slow" />
                  
                  {/* Esteira mais estreita */}
                  <g transform="translate(195, 75)">
                    <circle cx="15" cy="-10" r="5" fill="none" stroke="#ef4444" strokeWidth="1" strokeDasharray="2 3" className="vortex-spin-cw" />
                    <circle cx="35" cy="10" r="6" fill="none" stroke="#ef4444" strokeWidth="1" strokeDasharray="2 3" className="vortex-spin-ccw" />
                    <path d="M 0,0 Q 20,-15 40,0 Q 60,15 80,0" className="vortex-line" />
                  </g>

                  <circle cx="150" cy="75" r="25" fill="#475569" stroke="#e2e8f0" strokeWidth="3" />
                </svg>
              </div>
              <p className="text-[10px] text-muted-foreground leading-snug">A camada limite adere mais à casca (descolamento tardio ~120°). A esteira estreita gera menos resistência aerodinâmica ($C_a \approx 0.6$).</p>
            </div>
          </div>
        );

      case 'sign':
        return (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Caso 1 */}
            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
              <span className="text-xs font-bold text-sky-400">Caso A: Muro sem Abas Laterais</span>
              <div className="relative aspect-video 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" />
                  <path d="M -20,20 L 320,20" className="wind-line-slow" />
                  <path d="M -20,55 C 100,50 120,30 150,30 C 180,30 200,60 320,65" className="wind-line" />
                  <path d="M -20,95 C 100,90 120,60 150,60 C 180,60 210,95 320,105" className="wind-line-fast" />
                  
                  {/* Esteira turbulenta no sotavento */}
                  <circle cx="195" cy="100" r="10" fill="none" stroke="#ef4444" strokeWidth="1.2" strokeDasharray="2 4" className="vortex-spin-cw" />
                  <path d="M 160,110 Q 210,85 320,120" className="vortex-line" />

                  {/* Placa/Muro */}
                  <rect x="146" y="55" width="8" height="75" fill="#475569" stroke="#64748b" strokeWidth="1.5" />
                </svg>
              </div>
              <p className="text-[10px] text-muted-foreground leading-snug">O vento contorna as bordas e escapa tridimensionalmente, resultando em um coeficiente de força aliviado.</p>
            </div>

            {/* Caso 2 */}
            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
              <span className="text-xs font-bold text-rose-400">Caso B: Com Abas de Extremidade (End Plates)</span>
              <div className="relative aspect-video 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" />
                  <path d="M -20,20 L 320,20" className="wind-line-slow" />
                  <path d="M -20,50 C 90,45 110,15 150,15 C 180,15 200,60 320,65" className="wind-line" />
                  <path d="M -20,95 C 100,90 120,40 150,40 C 180,40 220,105 320,115" className="wind-line-fast" />
                  
                  {/* Esteira turbulenta muito maior */}
                  <circle cx="210" cy="100" r="18" fill="none" stroke="#ef4444" strokeWidth="1.2" strokeDasharray="2 4" className="vortex-spin-cw" />
                  <path d="M 160,110 Q 230,70 320,125" className="vortex-line" />

                  {/* Placa/Muro */}
                  <rect x="146" y="55" width="8" height="75" fill="#475569" stroke="#64748b" strokeWidth="1.5" />
                  {/* Abas vermelhas de extremidade */}
                  <line x1="140" y1="55" x2="160" y2="55" stroke="#ef4444" strokeWidth="3.5" />
                  <line x1="140" y1="130" x2="160" y2="130" stroke="#ef4444" strokeWidth="3.5" />
                </svg>
              </div>
              <p className="text-[10px] text-muted-foreground leading-snug">As abas (barreiras vermelhas) bloqueiam a fuga lateral de ar. O fluxo é puramente 2D plano, forçando o empuxo ao valor limite superior ($C_f \approx 1.3 - 2.0$).</p>
            </div>
          </div>
        );

      case 'dynamics':
        return (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Caso 1 */}
            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
              <span className="text-xs font-bold text-sky-400">Caso A: Abaixo da Velocidade Crítica (Sem Vibração)</span>
              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                <svg viewBox="0 0 300 150" className="w-full h-full">
                  {styleBlock}
                  <path d="M -20,20 L 320,20" className="wind-line-slow" />
                  <path d="M -20,50 Q 110,45 150,45 C 180,45 190,60 320,60" className="wind-line" />
                  <path d="M -20,100 Q 110,105 150,105 C 180,105 190,90 320,90" className="wind-line" />
                  <path d="M -20,130 L 320,130" className="wind-line-slow" />
                  
                  {/* Pequenos vórtices desorganizados */}
                  <g transform="translate(185, 75)">
                    <circle cx="15" cy="-10" r="5" fill="none" stroke="#ef4444" strokeWidth="1" strokeDasharray="2 3" />
                    <circle cx="35" cy="10" r="5" fill="none" stroke="#ef4444" strokeWidth="1" strokeDasharray="2 3" />
                  </g>

                  <circle cx="150" cy="75" r="22" fill="#475569" stroke="#64748b" strokeWidth="1.5" />
                </svg>
              </div>
              <p className="text-[10px] text-muted-foreground leading-snug">Vórtices desprendem-se sem frequência uniforme. A estrutura permanece estável e as forças dinâmicas são negligenciáveis.</p>
            </div>

            {/* Caso 2 */}
            <div className="flex flex-col gap-2 bg-slate-950 border border-border/60 p-3 rounded-lg">
              <span className="text-xs font-bold text-rose-400">Caso B: Velocidade Crítica (Ressonância / Lock-in)</span>
              <div className="relative aspect-video bg-slate-900/60 rounded-md overflow-hidden border border-border/30">
                <svg viewBox="0 0 300 150" className="w-full h-full">
                  {styleBlock}
                  <path d="M -20,20 L 320,20" className="wind-line-slow" />
                  <path d="M -20,50 C 100,45 110,30 150,30 C 180,30 190,55 320,55" className="wind-line-fast" />
                  <path d="M -20,100 C 100,105 110,120 150,120 C 180,120 190,95 320,95" className="wind-line-fast" />
                  
                  {/* Vórtices fortes e organizados de Von Kármán */}
                  <g transform="translate(185, 75)">
                    <circle cx="20" cy="-22" r="10" fill="none" stroke="#ef4444" strokeWidth="1.5" strokeDasharray="3 5" className="vortex-spin-cw" />
                    <circle cx="55" cy="22" r="11" fill="none" stroke="#ef4444" strokeWidth="1.5" strokeDasharray="3 5" className="vortex-spin-ccw" />
                    <path d="M 0,0 Q 35,-30 70,0 Q 105,30 140,0" className="vortex-line" />
                  </g>

                  {/* Chaminé vibrando lateralmente */}
                  <g className="vibe-cyl">
                    <circle cx="150" cy="75" r="22" fill="#ef4444" stroke="#b91c1c" strokeWidth="2.5" />
                    <line x1="150" y1="75" x2="150" y2="25" stroke="#ef4444" strokeWidth="2" strokeDasharray="2 3" />
                  </g>
                </svg>
              </div>
              <p className="text-[10px] text-muted-foreground leading-snug">Vórtices desprendem-se na frequência natural da estrutura, provocando oscilações transversais violentas (vibração de lock-in).</p>
            </div>
          </div>
        );

      default:
        // Caso padrão dinâmico geral (Módulos dinâmicos simples)
        return (
          <div className="bg-slate-950 border border-border/60 p-4 rounded-lg flex items-center justify-center min-h-[160px]">
            <svg viewBox="0 0 400 150" className="w-full max-w-[320px]">
              {styleBlock}
              <path d="M -20,30 L 420,30" className="wind-line-slow" />
              <path d="M -20,75 L 420,75" className="wind-line" />
              <path d="M -20,120 L 420,120" className="wind-line-slow" />
              <circle cx="200" cy="75" r="20" fill="#475569" />
            </svg>
          </div>
        );
    }
  };

  const legendItems = getVisibleLegendItems();

  return (
    <div className="flex flex-col gap-4 my-6 bg-slate-900/40 p-4 border border-border/60 rounded-xl">
      <div className="flex justify-between items-center border-b border-border/40 pb-2">
        <div>
          <h3 className="text-sm font-semibold text-foreground">Esquemas e Fluxos Comparativos NBR 6123</h3>
          <span className="text-[10px] text-sky-400 font-medium font-mono">{getViewLabel()}</span>
        </div>
        <span className="text-[9px] bg-sky-500/10 text-sky-400 font-bold border border-sky-500/20 px-2 py-0.5 rounded-full">SVG Animado</span>
      </div>

      {/* Renderiza o grid comparativo */}
      <div className="flex flex-col gap-4">
        {renderScenarios()}
      </div>

      {/* Caixa de Legenda Didática Inteligente (Filtra itens não utilizados no módulo ativo) */}
      <div className="bg-slate-950/60 p-3 rounded-lg border border-border/40 text-[11px] text-muted-foreground flex flex-col gap-2">
        <span className="font-bold text-xs text-foreground uppercase tracking-wider">Legenda do Escoamento:</span>
        <div className="grid grid-cols-2 gap-x-4 gap-y-2">
          {legendItems.wind && (
            <div className="flex items-center gap-2">
              <span className="w-6 h-0.5 bg-blue-500 inline-block border-b border-dashed" />
              <span>Linhas de Corrente de Vento</span>
            </div>
          )}
          {legendItems.fast && (
            <div className="flex items-center gap-2">
              <span className="w-6 h-0.5 bg-sky-400 inline-block" />
              <span>Fluxo Acelerado (Alta Vel. / Sucção)</span>
            </div>
          )}
          {legendItems.vortex && (
            <div className="flex items-center gap-2">
              <span className="w-6 h-0.5 bg-red-500 inline-block border-b border-dotted" />
              <span>Esteira Turbulenta / Recirculação</span>
            </div>
          )}
          {legendItems.vortexSpin && (
            <div className="flex items-center gap-2">
              <span className="w-4 h-4 rounded-full border border-dashed border-red-500 inline-block animate-spin" style={{ animationDuration: '4s' }} />
              <span>Vórtices de Desprendimento</span>
            </div>
          )}
          {legendItems.cpiPos && (
            <div className="flex items-center gap-1.5">
              <span className="text-orange-500 text-xs font-bold font-sans">→</span>
              <span>Seta Laranja: Pressão Interna (+Cpi)</span>
            </div>
          )}
          {legendItems.cpiNeg && (
            <div className="flex items-center gap-1.5">
              <span className="text-blue-500 text-xs font-bold font-sans">←</span>
              <span>Seta Azul Escura: Sucção Interna (-Cpi)</span>
            </div>
          )}
          {legendItems.lift && (
            <div className="flex items-center gap-2">
              <span className="w-4 h-2 bg-emerald-500 inline-block" />
              <span>Forças Resultantes (Lift/Downforce)</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
