import React, { useState } from 'react'; import { Map, X, AlertOctagon, Car, ExternalLink } from 'lucide-react'; /* --- Custom Cartoon Illustrations (SVGs) --- */ const RocketBrain = ({ className }) => ( ); const TunnelVisionBrain = ({ className }) => ( ); const PotholeTrap = ({ className }) => ( ); const MentalRoadTrip = () => { const [activeStop, setActiveStop] = useState(null); const roadStops = [ { id: 1, title: "Mental Shortcuts", subtitle: "Heuristics Zone", theme: "yellow", shape: "diamond", rotation: "-rotate-2", Illustration: RocketBrain, concept: "The brain substitutes a hard question with an easier one to answer it quickly. It uses 'autopilot' routines to find quick solutions without analysing every detail.", goal: "To handle complex information or difficult judgments without suffering from 'cognitive strain' or stopping to do mental maths.", risk: "These shortcuts often ignore statistical facts (like base rates) and can lead to confident but incorrect predictions. They prioritise speed over accuracy.", examples: [ { title: "Availability Heuristic", desc: "Judging a risk based on how easily a dramatic example comes to mind.", scenario: "Fearing a shark attack because you saw 'Jaws', even though it's rare." }, { title: "Affect Heuristic", desc: "Letting feelings or emotions guide a decision rather than the facts.", scenario: "Believing a presentation just because the speaker was energetic." }, { title: "Anchoring", desc: "Clinging to the first number or piece of information offered when making estimates.", scenario: "Paying too much for a car because the dealer started with a very high price." }, { title: "Representativeness", desc: "Judging likelihood based on stereotypes rather than statistics.", scenario: "Assuming a quiet person is a librarian rather than a farmer, ignoring that there are many more farmers." }, { title: "Substitution", desc: "Replacing a difficult target question with an easier heuristic question.", scenario: "Replacing 'How happy are you with your life?' with 'What is my mood right now?'" }, { title: "Peak-End Rule", desc: "Judging an experience based only on its most intense moment and its end.", scenario: "Rating a painful medical procedure as 'not so bad' because the last few minutes were painless." }, { title: "Simulation Heuristic", desc: "Judging tragedy based on how easy it is to imagine an alternative outcome.", scenario: "Missing a flight by 5 minutes feels worse than missing it by an hour." }, { title: "Mood Heuristic", desc: "Using current emotional states to answer unrelated questions.", scenario: "Rating overall life satisfaction higher just because you found a dime on a photocopier." }, { title: "3-D Heuristic", desc: "Automatically interpreting a 2-D image as 3-D to judge size.", scenario: "Visual illusions where identical figures appear different sizes." }, { title: "Recognition Heuristic", desc: "Assuming that because you recognise one option, it must be bigger or better.", scenario: "Choosing a brand you've heard of over a better quality unknown brand." } ] }, { id: 2, title: "Mental One-ways", subtitle: "Bias Checkpoint", theme: "red", shape: "rect", rotation: "rotate-1", Illustration: TunnelVisionBrain, concept: "Systematic errors where the brain consistently leans in one direction, valuing certain types of information over others.", goal: "To maintain a consistent, coherent story about the world and ourselves.", risk: "It causes us to ignore evidence that contradicts our beliefs, leading to overconfidence and distorted reality.", examples: [ { title: "Confirmation Bias", desc: "Zooming in on information that proves you are right while ignoring anything that proves you wrong.", scenario: "Only reading news articles that agree with your political view." }, { title: "Stereotyping", desc: "Stamping a fixed idea onto a person or group based on a single detail.", scenario: "Like an old printing plate repeating the same image over and over." }, { title: "Halo Effect", desc: "Liking everything about a person based on one trait you like.", scenario: "Assuming a handsome speaker is also intelligent and kind." }, { title: "Hindsight Bias", desc: "Reconstructing the past to make it seem predictable ('I knew it all along').", scenario: "Judging a decision by its outcome rather than the process used to make it." }, { title: "Planning Fallacy", desc: "Unrealistically optimistic about how much time or money a project will take.", scenario: "Visualising a best-case scenario and ignoring potential obstacles." }, { title: "Sunk Cost Fallacy", desc: "Continuing a failing endeavour just because resources have already been invested.", scenario: "Sitting through a terrible movie just because you paid for the ticket." }, { title: "Loss Aversion", desc: "The strong preference to avoid losses rather than acquire gains.", scenario: "The pain of losing £100 is felt more intensely than the pleasure of winning £100." }, { title: "Outcome Bias", desc: "Blaming decision-makers for good decisions that had bad results (or vice versa).", scenario: "Praising a reckless gamble just because it happened to win." }, { title: "Fundamental Attribution Error", desc: "Blaming someone's personality for their mistakes while blaming circumstances for our own.", scenario: "He is late because he's lazy; I am late because of traffic." }, { title: "Self-Serving Bias", desc: "Taking credit when things go well but blaming bad luck when they fail.", scenario: "I passed the test because I'm smart; I failed because the teacher is tricky." } ] }, { id: 3, title: "Mental Potholes", subtitle: "Logic Repairs", theme: "orange", shape: "diamond", rotation: "rotate-3", Illustration: PotholeTrap, concept: "Flaws in the structure of an argument that make the reasoning unsound, often used to trick the thinker.", goal: "To win an argument or persuade an audience using tricks rather than solid evidence.", risk: "These fallacies divert attention from the real issue and lead to conclusions that are not supported by the facts.", examples: [ { title: "Straw Man", desc: "Twisting someone's argument into something exaggerated or silly so it is easier to knock down.", scenario: "Person A: 'We should eat less junk.' Person B: 'Oh, so you want us to starve?!'" }, { title: "Hasty Generalisation", desc: "Making a sweeping judgment based on one bad experience.", scenario: "One bad meal means the whole cafeteria is terrible." }, { title: "Either/Or", desc: "Pretending there are only two extreme options when others exist.", scenario: "You are either with us, or you are against us." }, { title: "Ad Hominem", desc: "Attacking the person making the argument rather than addressing the argument itself.", scenario: "Dismissing a manager's plan because of their personal life." }, { title: "False Cause (Post Hoc)", desc: "Assuming that because event B followed event A, event A must have caused event B.", scenario: "I wore my lucky socks and we won; the socks caused the win." }, { title: "Slippery Slope", desc: "Claiming that a small first step will inevitably lead to a chain of extreme negative events.", scenario: "If we let you stay out late once, you'll eventually never come home!" }, { title: "False Analogy", desc: "Comparing two things that are not sufficiently similar to prove a point.", scenario: "Comparing cloning a sheep to creating Frankenstein's monster." }, { title: "Circular Reasoning", desc: "Using the conclusion as the reason, or repeating the point in different words.", scenario: "'The plan is risky because it involves risk.'" }, { title: "Red Herring", desc: "Introducing an irrelevant topic to distract attention from the main issue.", scenario: "Changing the subject to something easier to argue when you are losing." }, { title: "Appeal to Authority", desc: "Believing something is true solely because a famous person said so.", scenario: "Buying a medical product just because an actor endorsed it." }, { title: "Conjunction Fallacy", desc: "Mistakenly believing a specific combination of events is more probable than a single general event.", scenario: "Thinking it's more likely Linda is a 'feminist bank teller' than just a 'bank teller'." } ] } ]; const getThemeStyles = (theme) => { switch (theme) { // Warning Sign Style case 'yellow': return { bg: 'bg-[#FFD700]', border: 'border-slate-900', text: 'text-slate-900', shadow: 'shadow-yellow-900/50', accent: 'bg-slate-900' }; // Prohibition Sign Style case 'red': return { bg: 'bg-[#C1121F]', border: 'border-white', text: 'text-white', shadow: 'shadow-red-900/50', accent: 'bg-white' }; // Construction Sign Style case 'orange': return { bg: 'bg-[#FF8C00]', border: 'border-slate-900', text: 'text-slate-900', shadow: 'shadow-orange-900/50', accent: 'bg-slate-900' }; default: return { bg: 'bg-slate-200', border: 'border-slate-900', text: 'text-slate-900', shadow: 'shadow-slate-900/50' }; } }; return (