import React, { useState } from ‘react’;
import { ChevronDown, ChevronUp, Lightbulb, PieChart, Brain, Map, Book, CheckCircle, XCircle, BarChart, Compass, MessageCircle, Heart, Star, RefreshCw, Award, Zap, Coffee, Target, Info } from ‘lucide-react’;

const MapaMentalFluxograma = () => {
const [activeMap, setActiveMap] = useState(1);
const [expandedInfo, setExpandedInfo] = useState(false);

// Cores para cada mapa mental
const colors = {
1: {
primary: ‘#3b82f6’, // blue-500
secondary: ‘#93c5fd’, // blue-300
light: ‘#dbeafe’, // blue-100
text: ‘#1e40af’, // blue-800
border: ‘#60a5fa’ // blue-400
},
2: {
primary: ‘#8b5cf6’, // purple-500
secondary: ‘#c4b5fd’, // purple-300
light: ‘#ede9fe’, // purple-100
text: ‘#5b21b6’, // purple-800
border: ‘#a78bfa’ // purple-400
},
3: {
primary: ‘#10b981’, // green-500
secondary: ‘#6ee7b7’, // green-300
light: ‘#d1fae5’, // green-100
text: ‘#065f46’, // green-800
border: ‘#34d399’ // green-400
},
4: {
primary: ‘#f59e0b’, // amber-500
secondary: ‘#fcd34d’, // amber-300
light: ‘#fef3c7’, // amber-100
text: ‘#92400e’, // amber-800
border: ‘#fbbf24’ // amber-400
},
5: {
primary: ‘#f43f5e’, // rose-500
secondary: ‘#fda4af’, // rose-300
light: ‘#ffe4e6’, // rose-100
text: ‘#9f1239’, // rose-800
border: ‘#fb7185’ // rose-400
}
};

// Dados dos mapas mentais
const mapas = [
{
id: 1,
titulo: “O MITO DA COMPLEXIDADE DA ANÁLISE DE DADOS”,
codigo: “Atirar Pedras Contra os ‘Inimigos’”,
icon: ,
expressoes: [
“Barreira que impede sua evolução”,
“Não é questão de capacidade cognitiva”,
“Ensino adaptado ao SEU ritmo”,
“Depois de 10 anos orientando…”,
“Publicaram em revistas internacionais Q1”
]
},
{
id: 2,
titulo: “POR QUE AMOSTRA PEQUENA PODE SER MELHOR”,
codigo: “Confirmação de Suspeitas”,
icon: ,
expressoes: [
“Sem explicar o porquê”,
“Estudo pequeno com metodologia rigorosa”,
“Mais valioso que grande amostra mal planejada”,
“Depende da sua pergunta de pesquisa”,
“As melhores revistas também publicam estudos com poucas amostras”
]
},
{
id: 3,
titulo: “CONCORDO E DISCORDO SOBRE METODOLOGIA”,
codigo: “Concordar e Discordar Publicamente”,
icon: ,
expressoes: [
“Concordo que uma metodologia rigorosa é fundamental”,
“Discordo totalmente que precisa ser um processo sofrido”,
“O sofrimento é quase glorificado no meio acadêmico”,
“A normalização do sofrimento na ciência impede avanços”,
“Aqueles com autonomia e confiança publicam mais rápido e melhor”
]
},
{
id: 4,
titulo: “ENTRE BRASIL E CANADÁ: O QUE APRENDI SOBRE CONFIANÇA”,
codigo: “História Pessoal + Confirmação de Suspeitas”,
icon: ,
expressoes: [
“Nós, pesquisadores brasileiros, não somos menos capazes”,
“Insegurança lendo artigos internacionais”,
“Encontrei pessoas comuns, não gênios”,
“A diferença não era capacidade – era a abordagem de ensino”,
“Ele nunca foi ensinado a duvidar da própria capacidade”
]
},
{
id: 5,
titulo: “O QUE NINGUÉM TE CONTA SOBRE A VIDA ACADÊMICA”,
codigo: “História Pessoal”,
icon: ,
expressoes: [
“Quase ninguém fala sobre isso”,
“Podemos nos sentir incapazes”,
“Quando eu estava na faculdade, me senti perdida”,
“Eu sei exatamente como é esse lugar”,
“Superaram esse bloqueio e hoje têm autonomia”
]
}
];

// Componente MindMapNode – nós do mapa mental
const MindMapNode = ({ text, color, icon, size = “medium”, className = “”, onClick, nodeType = “default” }) => {
const sizeClasses = {
large: “p-4 text-lg font-bold”,
medium: “p-3 text-base font-semibold”,
small: “p-2 text-sm”
};

const nodeStyles = {
default: {
backgroundColor: color.light,
borderColor: color.border,
color: color.text
},
primary: {
backgroundColor: color.secondary,
borderColor: color.primary,
color: color.text
},
highlight: {
backgroundColor: color.primary,
borderColor: color.border,
color: ‘white’
}
};

const style = nodeStyles[nodeType];

return (


{icon && {icon}}
{text}

);
};

// Componente de linha de conexão
const ConnectingLine = ({ direction = “vertical”, color, length = “4”, className = “” }) => {
if (direction === “vertical”) {
return (


);
} else if (direction === “horizontal”) {
return (


);
} else if (direction === “diagonal-right”) {
return (

);
} else if (direction === “diagonal-left”) {
return (

);
}
return null;
};

// Componente para juntar/dividir linhas
const LineJunction = ({ color, className = “” }) => {
return (


);
};

// Renderiza o mapa mental 1
const renderMapa1 = () => {
const color = colors[1];

return (

{/* Largura mínima para evitar quebra em telas pequenas */}
{/* Centro */}

}
size=”large”
nodeType=”highlight”
/>

{/* Gancho Disruptivo */}


{/* Ramos Principais em duas colunas */}

{/* Coluna 1 */}


}
nodeType=”primary”
/>



{/* Coluna 2 */}


}
nodeType=”primary”
/>



{/* Linhas convergentes */}

{/* Evidência */}

{/* Chamada para Ação */}

);
};

// Renderiza o mapa mental 2
const renderMapa2 = () => {
const color = colors[2];

return (

{/* Centro */}

}
size=”large”
nodeType=”highlight”
/>

{/* Gancho Disruptivo */}

{/* Validação da Dor */}

{/* A Verdade Sobre Tamanho Amostral */}


{/* Ramos Principais em duas colunas */}

{/* Coluna 1 */}




{/* Coluna 2 */}




{/* Linhas convergentes */}

{/* Evidência */}

{/* Chamada para Reflexão */}

);
};

// Renderiza o mapa mental 3
const renderMapa3 = () => {
const color = colors[3];

return (

{/* Centro */}

}
size=”large”
nodeType=”highlight”
/>

{/* Gancho Disruptivo */}

{/* Validação da Dor */}


{/* Ramos Principais em duas colunas */}

{/* Coluna 1 */}


}
nodeType=”primary”
/>



{/* Coluna 2 */}


}
nodeType=”primary”
/>



{/* Linhas convergentes */}

{/* Evidência */}

{/* Chamada para Reflexão */}

);
};

// Renderiza o mapa mental 4
const renderMapa4 = () => {
const color = colors[4];

return (

{/* Centro */}

}
size=”large”
nodeType=”highlight”
/>

{/* Gancho Disruptivo */}


{/* Ramos Principais em duas colunas */}

{/* Coluna 1 */}


}
nodeType=”primary”
/>



{/* Coluna 2 */}


}
nodeType=”primary”
/>


{/* Linhas convergentes */}

{/* A Verdadeira Diferença */}




{/* Ramos Secundários em duas colunas */}

{/* Coluna 1 */}


}
nodeType=”primary”
/>

{/* Coluna 2 */}


}
nodeType=”primary”
/>



{/* Linhas convergentes */}

{/* Chamada para Reflexão */}

);
};

// Renderiza o mapa mental 5
const renderMapa5 = () => {
const color = colors[5];

return (

{/* Centro */}

}
size=”large”
nodeType=”highlight”
/>

{/* Gancho Disruptivo */}

{/* Validação da Dor */}


{/* Ramos Principais em duas colunas */}

{/* Coluna 1 */}


}
nodeType=”primary”
/>




{/* Coluna 2 */}


}
nodeType=”primary”
/>



{/* Linhas convergentes */}

{/* Hoje como Mentora */}

{/* Evidência */}

{/* Chamada para Reflexão */}

);
};

const toggleInfo = () => {
setExpandedInfo(!expandedInfo);
};

const renderCurrentMap = () => {
switch(activeMap) {
case 1: return renderMapa1();
case 2: return renderMapa2();
case 3: return renderMapa3();
case 4: return renderMapa4();
case 5: return renderMapa5();
default: return renderMapa1();
}
};

return (

Mapas Mentais Narrativos para Reels – Método Science

Facilitando a roteirização natural e autêntica

{/* Sidebar de navegação */}

{/* Conteúdo principal */}


{renderCurrentMap()}

);
};

export default MapaMentalFluxograma;