{"id":698,"date":"2025-12-16T12:01:22","date_gmt":"2025-12-16T12:01:22","guid":{"rendered":"https:\/\/jacobwarn.com\/?page_id=698"},"modified":"2026-03-03T07:32:27","modified_gmt":"2026-03-03T07:32:27","slug":"a-trillion-ways-to-die","status":"publish","type":"page","link":"https:\/\/jacobwarn.com\/es\/a-trillion-ways-to-die\/","title":{"rendered":"A trillion ways to die"},"content":{"rendered":"\n<div class=\"et_pb_section_0 et_pb_section et_section_regular et_block_section et-pb-has-background-video et_pb_preload\"><span class=\"et-pb-background-video\"><video autoplay loop playsinline muted width=\"100\"><source type=\"video\/webm\" data-src=\"https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/sea.webm\" \/><\/video><\/span><div class=\"et_pb_row_0 et_pb_row et_block_row\"><div class=\"et_pb_column_0 et_pb_column et_pb_column_4_4 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\"><div class=\"et_pb_text_0 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module et_pb_text_align_center preset--module--divi-text--d7caef96-f132-442b-bdd0-a31c0eb933b8\"><div class=\"et_pb_text_inner\"><h2>A trillion ways to die<\/h2>\n<h3>An interactive story-telling experiment<\/h3>\n<\/div><\/div><\/div><\/div><\/div><div class=\"et_pb_section_1 et_pb_section et_section_regular et_block_section\"><div class=\"et_pb_row_1 et_pb_row et_block_row\"><div class=\"et_pb_column_1 et_pb_column et_pb_column_1_2 et_block_column et_pb_css_mix_blend_mode_passthrough\"><div class=\"et_pb_text_1 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_text_inner\"><p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">The following number is so big that you will read it without flinching. Without hesitating. And without understanding. Here it is: every year, between 1.1 and 2.2 trillion fish and other aquatic animals are killed for human consumption.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">These numbers are so vast they become abstract - practically impossible to grasp. Combined with a prevalent though <em>scientifically disproven<\/em> belief that fish and other aquatic animals <em>don't suffer, <\/em>it is no wonder that we continue to cause suffering and slaughter on a scale that constitutes by several orders of magnitude the most grievous crime our species (and probably any other) has ever committed. The very fact that such a statement may seem exaggerated or dramatic speaks to the incredible normalisation of animal exploitation and to the incredible power of our minds to silence cognitive dissonance that such a realisation has before we even perceive it.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">But the truth is, any one of is able to feel emotional attachment and amazement at the beauty of fish and other aquatic animals. The popularity of aquariums is evidence to this. As is the wide appeal of films such as Finding Nemo and my Octopus Teacher, or the fact many of us 'looked after' goldfish in tiny glass bowls as kids.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">\n<\/div><\/div><\/div><div class=\"et_pb_column_2 et_pb_column et_pb_column_1_2 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\"><div class=\"et_pb_text_2 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module\"><div class=\"et_pb_text_inner\"><p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Yet each one of these trillion lives has a story. Each one experiences their own suffering and their own inevitable death.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">I have created this prototype interactive experience based on the website <span style=\"text-decoration: underline;\"><a href=\"https:\/\/fishcount.org.uk\/\" target=\"_blank\" rel=\"noopener\">Fishcount<\/a><\/span>. I wanted to explore a way of presenting these numbers in a more individualised and hopefully more impactful way. Its purpose is unabashedly to make you reflect. It does so by inviting you to follow four of these individual stories from the inside. You'll live as an anchoveta caught in a purse seine net off the coast of Peru; a whiteleg shrimp raised in intensive aquaculture; an Atlantic salmon in a sea cage; or a blue mussel whose capacity for suffering we still don't understand, but take a <em>huge<\/em> moral risk by assuming it may not when the jury is still out.<\/p>\n<p class=\"font-claude-response-body break-words whitespace-normal leading-[1.7]\">Each journey is based on peer-reviewed research into aquatic animal welfare. The deaths you'll experience are not exaggerated for effect - they reflect standard industry practices affecting hundreds of billions of animals annually. Some stories offer choices. Others don't. Just like the animals themselves, your agency is limited. But your awareness - and the decisions you will take today to put your pleasure over and above the incredible suffering and death of another life - doesn't have to be.<\/p>\n<\/div><\/div><\/div><\/div><\/div><div class=\"et_pb_section_2 et_pb_section et_section_regular et_block_section\"><div class=\"et_pb_row_2 et_pb_row et_block_row\"><div class=\"et_pb_column_3 et_pb_column et_pb_column_4_4 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\"><div class=\"et_pb_code_0 et_pb_code et_pb_module the-journey\"><div class=\"et_pb_code_inner\"><div id=\"fish-story-container\" style=\"width: 100%; min-height: 100vh; border-radius: 10px; overflow: hidden;\"><\/div>\n\n<script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n<script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n<script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n<style>\n  #fish-story-container { margin: 0; padding: 0; }\n  #fish-story-container * { box-sizing: border-box; }\n  .impact-font { font-family: Impact, 'Arial Black', sans-serif !important; }\n  \n  @keyframes float {\n    0%, 100% { transform: translateY(0px); }\n    50% { transform: translateY(-20px); }\n  }\n  @keyframes gradient {\n    0% { background-position: 0% 50%; }\n    50% { background-position: 100% 50%; }\n    100% { background-position: 0% 50%; }\n  }\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n  @keyframes zoomIn {\n    0% { transform: scale(1); }\n    100% { transform: scale(1.1); }\n  }\n  .animate-gradient { background-size: 200% 200%; animation: gradient 15s ease infinite; }\n  .animate-zoom { animation: zoomIn 20s ease-in-out infinite alternate; }\n  .animate-float { animation: float 4s ease-in-out infinite; }\n  .animate-float-delay-1 { animation: float 5s ease-in-out infinite; animation-delay: 1s; }\n  .animate-float-delay-2 { animation: float 6s ease-in-out infinite; animation-delay: 2s; }\n  .animate-float-delay-3 { animation: float 4.5s ease-in-out infinite; animation-delay: 1.5s; }\n  .animate-pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }\n  .animate-fadeIn { animation: fadeIn 1s ease-in; }\n<\/style>\n\n<script type=\"text\/babel\">\n  const { useState, useEffect } = React;\n\n  const AlertCircle = ({ className }) => (\n    <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n    <\/svg>\n  );\n\n  function FishStory() {\n    const [selectedSpecies, setSelectedSpecies] = useState(null);\n    const [currentChapter, setCurrentChapter] = useState(0);\n    const [showChoice, setShowChoice] = useState(false);\n    const [userPath, setUserPath] = useState([]);\n    const [showCallout, setShowCallout] = useState(false);\n    const [asphyxiationTime, setAsphyxiationTime] = useState(55);\n    const [showTimer, setShowTimer] = useState(false);\n    const [timerSkipped, setTimerSkipped] = useState(false);\n    const [fishId] = useState(Math.floor(Math.random() * 1000000000000));\n\nconst speciesOptions = [\n  { \n    id: 'anchoveta', \n    name: 'Anchoveta', \n    subtitle: 'Peruvian Anchovy', \n    description: 'You are silver and small. You have swum these waters for eight months, never alone, always surrounded by millions like you.', \n    color: 'from-blue-600 to-cyan-600', \n    image: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/anchoveta-1.jpg',\n    welcomeInfo: {\n      scientificName: 'Engraulis ringens',\n      habitat: 'Eastern Pacific Ocean, primarily off the coast of Peru and Chile',\n      lifespan: 'Typically 2-3 years in the wild',\n      size: 'Up to 20 cm (8 inches) in length',\n      facts: 'Anchoveta are small schooling fish that form the foundation of one of the world\\'s largest fisheries. They feed on plankton and are themselves food for larger fish, marine mammals, and seabirds. Their populations can number in the trillions, making them one of the most abundant fish species on Earth.'\n    }\n  },\n  { \n    id: 'shrimp', \n    name: 'Whiteleg Shrimp', \n    subtitle: 'Farmed Crustacean', \n    description: 'You were born in concrete. The ocean is a memory you never had. This tank is the only world you know.', \n    color: 'from-pink-600 to-red-600',\n    image: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/whitelegshrimp-2.jpg',\n    welcomeInfo: {\n      scientificName: 'Litopenaeus vannamei',\n      habitat: 'Originally native to the Pacific coast of Central and South America, now farmed globally',\n      lifespan: 'Up to 2 years in the wild; 4-6 months in farms',\n      size: 'Can grow up to 23 cm (9 inches) in length',\n      facts: 'Whiteleg shrimp are one of the most commonly farmed crustaceans in the world. They have complex behaviors including social hierarchies, memory, and pain responses. In the wild, they migrate between estuaries and the ocean, but in farms they live their entire lives in crowded tanks or ponds.'\n    }\n  },\n  { \n    id: 'salmon', \n    name: 'Atlantic Salmon', \n    subtitle: 'Farmed Fish', \n    description: 'You swim in circles. Always circles. Through the mesh you see the open water. You cannot reach it.', \n    color: 'from-orange-600 to-red-600',\n    image: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/atlantic-salmon-3.jpg',\n    welcomeInfo: {\n      scientificName: 'Salmo salar',\n      habitat: 'Native to the North Atlantic; farmed in coastal waters worldwide',\n      lifespan: 'Up to 13 years in the wild; 18-24 months in farms',\n      size: 'Can reach over 1 meter (3 feet) in length',\n      facts: 'Atlantic salmon are anadromous fish\u2014born in freshwater rivers, they migrate to the ocean to grow, then return to their birthplace to spawn. Wild salmon can navigate thousands of miles using Earth\\'s magnetic field. Farmed salmon never experience this journey, spending their entire lives in sea cages.'\n    }\n  },\n  { \n    id: 'mussel', \n    name: 'Blue Mussel', \n    subtitle: 'Farmed Mollusk', \n    description: 'You filter the water. You respond to threats. You may feel fear. Or you may feel nothing. No one knows.', \n    color: 'from-indigo-600 to-purple-600',\n    image: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/bluemussel-1.jpg',\n    welcomeInfo: {\n      scientificName: 'Mytilus edulis',\n      habitat: 'Coastal waters of the North Atlantic, attached to rocks and substrates',\n      lifespan: 'Can live up to 24 years in optimal conditions',\n      size: 'Typically 5-10 cm (2-4 inches) in length',\n      facts: 'Blue mussels are filter feeders that can process up to 15 liters of water per day. They have a simple nervous system but show responses to threats and environmental changes. Recent research suggests they may be capable of learning and memory, though their capacity for consciousness remains uncertain.'\n    }\n  }\n];\n\n    const storyData = {\n      anchoveta: {\n        totalChapters: 4,\n        getBackgroundImage: (chapter) => {\n          const images = {\n            0: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/anchoveta-1.jpg',\n            1: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/anchoveta-1.jpg',\n            2: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/sea-1.jpg',\n            3: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/anchoveta-2.jpg',\n            4: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/sea-1.jpg'\n          };\n          return images[chapter];\n        },\n        getText: (chapter, paths) => {\n          const texts = {\n            1: \"Off the coast of Peru, you swim in a massive school. Millions of silver bodies move as one through the cool Pacific waters. You've been doing this for 8 months since hatching. The water is rich with plankton. You feel safe in the multitude. Suddenly, the water grows darker above you. Shadows ripple across the school. Something is wrong.\",\n            2: paths.includes('escape-attempt') \n              ? \"You dive deeper, away from the shadow. Fifty meters down, you think you've found safety in the darker waters. But the net is already beneath you\u2014it's a purse seine, shaped like a giant bowl. The bottom closes like a drawstring purse, trapping everything inside. Walls of mesh surround you on all sides. The school compresses as the net winches upward. Panic spreads like electricity. You're crushed against thousands of bodies. You cannot breathe properly. You cannot move.\"\n              : \"Before you can react, walls of net surround you on all sides. The boat has encircled the entire school\u2014a purse seine net, closing from below. The school erupts in panic\u2014millions thrashing at once. The net tightens. Bodies press against you from every direction. You try to swim but there's nowhere to go. The compression is unbearable. You cannot breathe properly. You cannot move.\",\n            3: paths.includes('struggle')\n              ? \"Your tail finds a gap\u2014a small opening where net panels meet. You push through with all your strength, scraping against the rough twine. For a moment, you're through! Open water! But the net is still rising. Ten seconds later, you're swept up in another section. The net is enormous\u2014escape was always an illusion. Suddenly, you break the surface. AIR. Your gills burn. You gasp, but there is nothing to breathe. You're dumped onto the metal deck with millions of others. Bodies rain down around you\u2014a writhing, suffocating mass. You flap helplessly. Each movement is agony. Time stretches. Minutes feel like hours. You remain conscious as your organs begin to fail.\"\n              : \"You go still, conserving oxygen as the net rises. It makes no difference. You break the surface. AIR. Your gills burn. You gasp, but there is nothing to breathe. You're dumped onto the metal deck with millions of others. The sunlight is blinding. The metal is cold. You try to move, but your body is failing. Around you, millions flap in slow motion. You remain conscious. This will take time.\",\n            4: \"Consciousness fades. Your body, along with millions of others, is scooped into a mechanical chute. You're ground into paste\u2014bones, organs, everything. You become part of 500 tonnes of fishmeal. You never made it to a human plate. You will become feed for a salmon farm in Norway. Or perhaps chicken feed in Thailand. Or pig feed in China.\"\n          };\n          return texts[chapter] || \"\";\n        },\n        getTitle: (chapter) => {\n          return [\"WELCOME\", \"CHAPTER 1: THE SCHOOL\", \"CHAPTER 2: THE PURSE SEINE\", \"CHAPTER 3: THE DECK\", \"CHAPTER 4: THE END\"][chapter] || \"\";\n        },\n        getBackground: (chapter) => {\n          return [\"from-blue-600 via-cyan-600 to-blue-700\", \"from-blue-600 via-cyan-600 to-blue-700\", \"from-gray-700 via-gray-600 to-gray-800\", \"from-gray-300 via-gray-400 to-gray-500\", \"from-red-900 via-gray-800 to-black\"][chapter] || \"from-black to-gray-900\";\n        },\n        getCallout: (chapter) => {\n          const callouts = {\n            1: { \n              title: \"How large are anchoveta schools?\", \n              content: \"Anchoveta swim in massive aggregations that can contain millions or even billions of individuals. These schools are so large they can be detected from space. Together, anchoveta comprise 28% of all wild-caught fish globally\u2014approximately 450 billion fish are caught annually between 2000-2019. Their sheer abundance makes them the backbone of the global fishmeal industry.\" \n            },\n            2: { \n              title: \"What is purse seine fishing and how does it work?\", \n              content: \"A purse seine is a massive wall of netting that encircles an entire school of fish. The net can be over a kilometer long and 200 meters deep. Once the school is surrounded, a cable at the bottom is pulled tight like a drawstring purse, trapping everything inside. A single haul can capture 500+ tonnes of fish\u2014approximately 50 million individual anchoveta in one net. There is no escape once the net closes.\" \n            },\n            3: { \n              title: \"How long does it take for fish to die from asphyxiation?\", \n              content: \"Fish removed from water die from asphyxiation, but it is not instantaneous. Research shows it can take 25-65 minutes for fish to lose consciousness, depending on the species and conditions. During this entire time, the fish remain aware and responsive to stimuli. There is no stunning, no intervention to reduce suffering. They experience the full duration of oxygen deprivation until their organs fail.\" \n            },\n            4: { \n              title: \"What is the fishmeal industry?\", \n              content: \"Approximately 450 billion wild fish are ground into fishmeal and fish oil each year. These fish\u2014mostly small species like anchoveta, herring, and sardines\u2014are not eaten by humans. Instead, they become feed for farmed fish, chickens, pigs, and pets. It takes 3-5 kg of wild fish to produce just 1 kg of farmed salmon. This creates a massive amplification of death: wild fish are killed by the hundreds of billions to raise other animals for human consumption.\" \n            }\n          };\n          return callouts[chapter];\n        },\n        getChoices: (chapter) => {\n          const choices = {\n            0: [{ text: \"Begin your journey\", next: 1 }],\n            1: [\n              { text: \"Swim deeper with some others\", next: 2, path: \"escape-attempt\" },\n              { text: \"Stay with the main school\", next: 2, path: \"stay\" }\n            ],\n            2: [\n              { text: \"Try to find an opening\", next: 3, path: \"struggle\" },\n              { text: \"Conserve energy\", next: 3, path: \"conserve\" }\n            ],\n            3: [\n              { text: \"Experience the timeline\", next: 4, timer: true },\n              { text: \"Skip ahead\", next: 4, timer: false }\n            ],\n            4: [{ text: \"See your final summary\", next: 5 }]\n          };\n          return choices[chapter] || [];\n        },\n        summary: {\n          born: \"8 months ago\",\n          cause: \"Asphyxiation then Industrial Reduction\",\n          timeToMeath: \"55 minutes of conscious suffocation\",\n          purpose: \"0.0002 kg of fishmeal\",\n          othersLikeYou: \"450 Billion\",\n          othersText: \"Others like you annually (2000-2019)\"\n        }\n      },\nshrimp: {\n  totalChapters: 4,\n  getBackgroundImage: (chapter) => {\n    const images = {\n      0: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/whitelegshrimp-2.jpg',\n      1: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/whitelegshrimp-2.jpg',\n      2: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/whitelegshrimp-3.webp',\n      3: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/whitelegshrimp-2.jpg',\n      4: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/whitelegshrimp-1.webp'\n    };\n    return images[chapter];\n  },\n  getText: (chapter, paths) => {\n    const texts = {\n      1: \"You hatch in a concrete tank with millions of siblings. The water is warm but crowded. You've never seen the ocean. Machinery hums constantly. Lights are always on. This is the only world you know. You compete for the feed pellets that rain down twice daily. Some of your siblings don't survive the first week.\",\n      2: \"Before you were born, your mother was captured from the wild. She was taken to a breeding facility. There, workers cut off one of her eyestalks\u2014a practice called ablation. This hormonal manipulation made her produce more eggs, faster. She was disoriented, stressed, immunocompromised. She died after three breeding cycles, her body exhausted. You are one of thousands of her offspring, born from her suffering.\",\n      3: paths.includes('stay-near-surface')\n        ? \"You stay near the surface where oxygen is better. For weeks, this seems wise\u2014you're healthier than those below. But when harvest comes, surface shrimp are caught first. The net sweeps through, and you're among the first scooped up. You were trying to survive, but you only made yourself more accessible. Harvest day comes. There is no escape.\"\n        : \"You're in a massive outdoor pond with thousands of shrimp per square meter. The water is murky with waste. Disease spreads quickly. White spots appear on your shell\u2014viral infection. Your immune system, weakened by stress, cannot fight it. But you've reached market size. Harvest day comes.\",\n      4: paths.includes('try-to-swim-away')\n        ? \"When the nets come, you swim frantically toward the far edge of the pond. For a moment, you think you've found a gap\u2014a space where the net hasn't reached. You push through murky water, antennae searching. But the pond has walls. Concrete. There is no 'away.' The net reaches you ten seconds later. Suddenly\u2014air. Your gills collapse. Then ice water. Hypothermic shock. The cold is everywhere. Minutes pass. You're still conscious. Then the processing line. You're still alive when the knife comes.\"\n        : \"Nets sweep through the pond. You're scooped up with thousands of others, dumped into baskets. Suddenly\u2014air. Your gills collapse. Then you're plunged into ice water. Hypothermic shock. Your metabolism slows but you're still alive, still conscious. The cold is everywhere. Minutes pass. Ten. Twenty. Some shrimp around you have stopped moving. You haven't. Then the processing line. You're still alive when the knife comes.\"\n    };\n    return texts[chapter] || \"\";\n  },\n  getTitle: (chapter) => {\n    return [\"WELCOME\", \"CHAPTER 1: THE HATCHERY\", \"CHAPTER 2: YOUR MOTHER\", \"CHAPTER 3: THE GROW-OUT POND\", \"CHAPTER 4: THE HARVEST\"][chapter] || \"\";\n  },\n  getBackground: (chapter) => {\n    return [\"from-cyan-700 via-teal-700 to-cyan-800\", \"from-cyan-700 via-teal-700 to-cyan-800\", \"from-red-900 via-red-800 to-black\", \"from-green-800 via-teal-800 to-gray-800\", \"from-blue-300 via-white to-red-600\"][chapter] || \"from-black to-gray-900\";\n  },\n  getCallout: (chapter) => {\n    const callouts = {\n      1: { \n        title: \"How many shrimp are farmed each year?\", \n        content: \"In 2022, approximately 630 billion farmed crustaceans were killed globally, the vast majority being shrimp and prawns. Shrimp farming is one of the largest aquaculture industries in the world, with intensive operations housing millions of individuals in relatively small spaces. The scale is almost incomprehensible\u2014more than 1.7 billion shrimp are killed every single day.\" \n      },\n      2: { \n        title: \"What is eyestalk ablation and why is it done?\", \n        content: \"Eyestalk ablation is the standard practice of cutting or burning off one or both eyestalks of female shrimp to manipulate their hormones and force them to reproduce faster and more frequently. The eyestalk contains a gland that regulates reproduction; removing it causes females to mature rapidly and spawn repeatedly. This practice affects hundreds of billions of breeding females globally and causes chronic stress, disorientation, immune suppression, and often premature death. It is done purely to maximize production efficiency.\" \n      },\n      3: { \n        title: \"What are conditions like in shrimp farms?\", \n        content: \"Intensive shrimp farming operations can stock 100-300 shrimp per square meter, creating extremely crowded conditions. Water quality deteriorates rapidly due to waste accumulation, and disease outbreaks are common\u2014particularly white spot syndrome virus, which can kill up to 100% of a population within days. Mortality rates during the rearing period routinely exceed 40%. Survivors are weakened by chronic stress and poor water quality.\" \n      },\n      4: { \n        title: \"How are farmed shrimp killed?\", \n        content: \"The most common slaughter method for shrimp is immersion in ice slurry (ice water). Research shows this can take 5-50 minutes to induce death, during which shrimp remain conscious and responsive. Many are then processed\u2014heads removed, shells pulled off, bodies split\u2014while still alive. Decapod crustaceans like shrimp have nociceptors (pain receptors) and demonstrate clear pain-avoidance behaviors, yet no country has welfare regulations for their slaughter.\" \n      }\n    };\n    return callouts[chapter];\n  },\n  getChoices: (chapter) => {\n    const choices = {\n      0: [{ text: \"Begin your journey\", next: 1 }],\n      1: [{ text: \"Continue your story\", next: 2 }],\n      2: [{ text: \"Continue\", next: 3 }],\n      3: [\n        { text: \"Stay near the surface where oxygen is better\", next: 4, path: \"stay-near-surface\" },\n        { text: \"Stay deeper in the pond\", next: 4, path: \"stay-deep\" }\n      ],\n      4: [\n        { text: \"Try to swim away from the nets\", next: 5, path: \"try-to-swim-away\" },\n        { text: \"Accept what comes\", next: 5, path: \"accept\" }\n      ]\n    };\n    return choices[chapter] || [];\n  },\n  summary: {\n    born: \"6 months ago (hatchery)\",\n    cause: \"Hypothermic shock then live processing\",\n    timeToMeath: \"25-50 minutes in ice water, conscious\",\n    purpose: \"25 grams of shrimp meat\",\n    othersLikeYou: \"630 Billion\",\n    othersText: \"Others like you in 2022\"\n  }\n},\nsalmon: {\n  totalChapters: 4,\n  getBackgroundImage: (chapter) => {\n    const images = {\n      0: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/atlantic-salmon-3.jpg',\n      1: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/atlantic-salmon-1.jpg',\n      2: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/atlantic-salmon-2.webp',\n      3: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/atlantic-salmon-3.jpg',\n      4: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/atlantic-salmon-4.jpg'\n    };\n    return images[chapter];\n  },\n  getText: (chapter, paths) => {\n    const texts = {\n      1: \"Born in a hatchery, raised in a sea cage. You swim in circles\u2014always circles. The cage is 50 meters across. You share it with 200,000 other salmon. You bump into the net constantly. Sometimes you see the open ocean through the mesh. Wild fish swim past, free. You cannot follow. Sea lice attach to your skin, feeding on your mucus and blood.\",\n      2: \"Pellets rain down from above. You fight for them. These pellets contain other fish. Anchoveta, herring, mackerel. Ground into meal. Over your 18-month life, you will consume feed made from approximately 450 wild fish. Small fish, caught by purse seine, suffocated on deck, ground into paste, processed into feed, eaten by you, so you can be eaten by humans. Each meal is a multiplication of death.\",\n      3: paths.includes('swim-against-net')\n        ? \"You swim hard against the net, again and again. Your instinct tells you there should be open water\u2014somewhere. Your wild ancestors would have migrated thousands of miles. But you hit mesh. Always mesh. Your snout becomes raw from repeated impact. Other salmon watch, then try the same thing. It never works. The net has no gaps. You've reached market size.\"\n        : \"You recognize the futility. The net is everywhere. Wild salmon migrate thousands of miles\u2014you swim in a 50-meter circle. There's nothing to fight. You've reached market size.\",\n      4: paths.includes('resist-the-pump')\n        ? \"The pump activates. You feel the suction pulling you toward the tube. You swim in the opposite direction with all your strength. For ten seconds, you hold your position. Your muscles scream. Then fatigue wins. You're pulled into the tube with hundreds of others, slammed against plastic walls. You emerge in a chamber. In some countries, there's electrical stunning. Brief shock. Consciousness fades. In others, there's no stunning\u2014just a blade across your gills while you're conscious. Blood pours out. It takes minutes.\"\n        : \"You've reached market size. One morning, a pump activates. A powerful suction pulls you through a tube with hundreds of others. You're slammed against plastic walls. You emerge in a chamber. In some countries, there's electrical stunning before slaughter. Brief shock. Consciousness fades. In others, there's no stunning\u2014just a blade across your gills while you're conscious. Blood pours out. It takes minutes.\"\n    };\n    return texts[chapter] || \"\";\n  },\n  getTitle: (chapter) => {\n    return [\"WELCOME\", \"CHAPTER 1: THE CAGE\", \"CHAPTER 2: FEEDING TIME\", \"CHAPTER 3: THE REALIZATION\", \"CHAPTER 4: THE SLAUGHTER\"][chapter] || \"\";\n  },\n  getBackground: (chapter) => {\n    return [\"from-slate-600 via-slate-700 to-slate-800\", \"from-slate-600 via-slate-700 to-slate-800\", \"from-brown-700 via-orange-800 to-red-900\", \"from-slate-700 via-gray-700 to-gray-800\", \"from-gray-600 via-gray-700 to-gray-900\"][chapter] || \"from-black to-gray-900\";\n  },\n  getCallout: (chapter) => {\n    const callouts = {\n      1: { \n        title: \"What are conditions like in salmon sea cages?\", \n        content: \"Sea cages for salmon farming can hold 150,000-200,000 fish in a single enclosure. Stocking densities can exceed 25 kg of fish per cubic meter\u2014roughly equivalent to a bathtub filled with 25 one-kilogram salmon. Fish constantly bump into nets and each other. Parasites like sea lice are endemic, feeding on fish mucus, skin, and blood. Approximately 2-3 billion farmed salmon were killed in 2022, the vast majority raised in these intensive conditions.\" \n      },\n      2: { \n        title: \"How much wild fish does it take to farm salmon?\", \n        content: \"It takes approximately 3-5 kg of wild-caught fish to produce 1 kg of farmed salmon. A typical 4 kg market-size salmon will have consumed feed made from roughly 450 individual wild fish\u2014mostly small species like anchoveta, herring, and sardines. These wild fish are caught in their billions, suffocated, and ground into fishmeal. Salmon farming doesn't reduce fishing pressure; it multiplies it. About 50% of all wild-caught fish globally are rendered into fishmeal and fish oil, much of it to feed farmed fish.\" \n      },\n      3: { \n        title: \"Do farmed salmon try to escape?\", \n        content: \"Farmed salmon frequently bump into nets and exhibit behaviors suggesting they would migrate if able. Wild Atlantic salmon can navigate thousands of miles using Earth's magnetic field, swimming from rivers to the ocean and back. Farmed salmon retain these instincts but can never act on them. Escapes from damaged cages show that farmed salmon will immediately swim away if given the opportunity, though they often cannot survive in the wild due to their dependence on feed pellets.\" \n      },\n      4: { \n        title: \"How are farmed salmon killed and do welfare standards exist?\", \n        content: \"Slaughter methods for farmed salmon vary widely. Norway and Iceland require electrical stunning before slaughter, which renders fish unconscious within seconds. However, most other countries have no such requirements. In many facilities, fish are killed without stunning\u2014often by cutting their gills while fully conscious, causing them to bleed out over several minutes. Of 19 top fishing and aquaculture nations analyzed by researchers, only a handful have any welfare regulations covering farmed fish slaughter, and enforcement is inconsistent.\" \n      }\n    };\n    return callouts[chapter];\n  },\n  getChoices: (chapter) => {\n    const choices = {\n      0: [{ text: \"Begin your journey\", next: 1 }],\n      1: [{ text: \"Continue your story\", next: 2 }],\n      2: [{ text: \"Continue\", next: 3 }],\n      3: [\n        { text: \"Try swimming against the net repeatedly\", next: 4, path: \"swim-against-net\" },\n        { text: \"Accept the confinement\", next: 4, path: \"accept-cage\" }\n      ],\n      4: [\n        { text: \"Resist the pump suction\", next: 5, path: \"resist-the-pump\" },\n        { text: \"Let it take you\", next: 5, path: \"accept-fate\" }\n      ]\n    };\n    return choices[chapter] || [];\n  },\n  summary: {\n    born: \"18 months ago (hatchery)\",\n    cause: \"Electrical stunning or live gill cutting\",\n    timeToMeath: \"Seconds if stunned, minutes if not\",\n    purpose: \"4 kg of salmon fillet\",\n    othersLikeYou: \"3 Billion\",\n    othersText: \"Atlantic salmon farmed in 2022\",\n    multiplier: \"450 wild fish consumed to create you\"\n  }\n},\n mussel: {\n  totalChapters: 4,\n  getBackgroundImage: (chapter) => {\n    const images = {\n      0: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/bluemussel-1.jpg',\n      1: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/bluemussel-1.jpg',\n      2: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/bluemussel-3.webp',\n      3: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/bluemussel-4.jpg',\n      4: 'https:\/\/jacobwarn.com\/wp-content\/uploads\/2025\/12\/bluemussel-1.jpg'\n    };\n    return images[chapter];\n  },\n  getText: (chapter, paths) => {\n    const texts = {\n      1: \"You attach yourself to a rope suspended in clean ocean water. You filter feed\u2014tiny organisms pass through you. This is peaceful. You don't move much. You don't think much. Do you think at all? You have a simple nervous system. You have a heart\u2014it beats faster when predators approach. Researchers measured this. You respond to threats. Does that mean you feel fear?\",\n      2: \"A starfish approaches. Your sensors detect it. Your heart rate increases\u2014scientists measured this with electrodes. You produce extra byssal threads, anchoring yourself more firmly. This is a defensive behavior. The starfish moves on. Your heart rate returns to normal. Did you just experience fear? Or was that merely an automated response? No one knows. But the behavior happened.\",\n      3: paths.includes('produce-more-threads')\n        ? \"You sense disturbance in the water. You produce more byssal threads\u2014stronger, thicker. You anchor yourself as firmly as possible. But hands pull the rope from the water anyway. The threads snap. All that extra anchoring made no difference. You're torn away, dumped into a bucket with thousands of others. Then: transport. Hours in a truck. Then: cleaning. Brushing, sorting, rinsing. Are you stressed? You have no way to express it. No face to show pain. No voice to scream. Finally: the pot.\"\n        : \"Hands pull the rope from the water. You're torn from your anchor\u2014the byssal threads you spent months producing, ripped away. You're dumped into a bucket with thousands of others. Then: transport. Hours in a truck. Then: cleaning. Brushing, sorting, rinsing. Are you stressed? You have no way to express it. No face to show pain. No voice to scream. Finally: the pot.\",\n      4: paths.includes('close-shell-tight')\n        ? \"As the water heats, you sense danger. You close your shell as tight as your muscles allow. For a moment, this keeps the heat out. But the water is boiling. The heat penetrates. Your muscles spasm involuntarily\u2014the shell opens despite your effort. If you're sentient, this is agony beyond description. If you're not, you feel nothing. But we don't know which it is. We've done this to you anyway. To 700 billion of you, in 2022 alone.\"\n        : \"Boiling water. If you're sentient, this is agony beyond description. Every nerve, if you have nerves that can feel pain, firing at once. Your shell opens from the heat\u2014an involuntary muscular response. Or is it you, trying to escape? If you're not sentient, you feel nothing. Just chemistry\u2014proteins denaturing, cellular structures breaking down. No experience. No suffering. But we don't know which it is. And we've done this to you anyway. To 700 billion of you, in 2022 alone.\"\n    };\n    return texts[chapter] || \"\";\n  },\n  getTitle: (chapter) => {\n    return [\"WELCOME\", \"CHAPTER 1: THE ROPE\", \"CHAPTER 2: THE PREDATOR\", \"CHAPTER 3: THE HARVEST\", \"CHAPTER 4: THE POT\"][chapter] || \"\";\n  },\n  getBackground: (chapter) => {\n    return [\"from-blue-800 via-indigo-800 to-blue-900\", \"from-blue-800 via-indigo-800 to-blue-900\", \"from-purple-800 via-indigo-900 to-black\", \"from-gray-600 via-gray-700 to-gray-900\", \"from-orange-600 via-red-600 to-red-900\"][chapter] || \"from-black to-gray-900\";\n  },\n  getCallout: (chapter) => {\n    const callouts = {\n      1: { \n        title: \"Can mussels feel pain or experience suffering?\", \n        content: \"The question of bivalve sentience\u2014whether creatures like mussels can feel pain or suffer\u2014remains unresolved. They have simple nervous systems without centralized brains, but they do have ganglia (nerve clusters) and demonstrate responses to harmful stimuli. They show escape behaviors, predator responses, and even possible learning. A 2022 study found mussels can learn to recognize and fear specific parasites. However, we lack definitive evidence of subjective experience. Approximately 700 billion molluscs were killed for food in 2022, and we still don't know if they suffered.\" \n      },\n      2: { \n        title: \"What evidence exists for awareness in bivalves?\", \n        content: \"While we cannot definitively prove consciousness in mussels, several lines of evidence suggest some form of awareness. Queen scallops show increased heart rate and activity when exposed to predator cues\u2014a physiological stress response. Mussels produce more byssal threads (anchor fibers) in the presence of predators, suggesting threat detection. Some bivalves can learn to associate certain stimuli with danger. These behaviors indicate more than simple reflexes\u2014they suggest some capacity to perceive, assess, and respond to their environment. But whether this constitutes subjective suffering remains unknown.\" \n      },\n      3: { \n        title: \"How are mussels and other bivalves killed?\", \n        content: \"Mussels and other bivalves are typically sold alive and killed by the consumer. The standard method is boiling them alive. There are no welfare requirements for their slaughter in any country. No stunning. No consideration for potential suffering. If they are capable of experiencing pain, this is among the cruelest killing methods imaginable\u2014every nerve ending exposed to extreme heat simultaneously. If they are not capable of experiencing pain, then no harm is done. But we proceed with certainty about something we fundamentally do not understand.\" \n      },\n      4: { \n        title: \"Should we apply the precautionary principle to bivalves?\", \n        content: \"The precautionary principle suggests that when an action might cause severe harm and we lack scientific consensus, we should err on the side of caution. We kill 700 billion molluscs annually, boiling most of them alive. Evidence of their sentience is ambiguous but not absent. They respond to threats, show physiological stress reactions, and may be capable of learning. Given the astronomical numbers involved and the severity of potential suffering, should we continue killing them in ways that would be unthinkable if applied to creatures whose sentience we are more certain about?\" \n      }\n    };\n    return callouts[chapter];\n  },\n  getChoices: (chapter) => {\n    const choices = {\n      0: [{ text: \"Begin your journey\", next: 1 }],\n      1: [{ text: \"Continue\", next: 2 }],\n      2: [{ text: \"Continue\", next: 3 }],\n      3: [\n        { text: \"Produce more byssal threads to anchor tighter\", next: 4, path: \"produce-more-threads\" },\n        { text: \"Remain as you are\", next: 4, path: \"remain\" }\n      ],\n      4: [\n        { text: \"Try to keep your shell closed tight\", next: 5, path: \"close-shell-tight\" },\n        { text: \"Experience what happens\", next: 5, path: \"experience\" }\n      ]\n    };\n    return choices[chapter] || [];\n  },\n  summary: {\n    born: \"1 year ago\",\n    cause: \"Boiled alive\",\n    timeToMeath: \"Unknown - do you experience time?\",\n    purpose: \"10 grams of mussel meat\",\n    othersLikeYou: \"700 Billion\",\n    othersText: \"Molluscs killed in 2022\",\n    question: \"We don't know if you suffered. Should we have taken that risk?\"\n  }\n}\n    };\n\n    useEffect(() => {\n      if (selectedSpecies && currentChapter >= 0 && currentChapter <= storyData[selectedSpecies].totalChapters) {\n        setShowChoice(true);\n      }\n    }, [currentChapter, selectedSpecies]);\n\n    useEffect(() => {\n      if (showTimer && asphyxiationTime > 0 && !timerSkipped) {\n        const timer = setTimeout(() => {\n          setAsphyxiationTime(asphyxiationTime - 1);\n        }, 1000);\n        return () => clearTimeout(timer);\n      } else if (showTimer && asphyxiationTime === 0) {\n        setShowTimer(false);\n        setTimerSkipped(false);\n        setCurrentChapter(4);\n        setShowChoice(true);\n      } else if (timerSkipped) {\n        setShowTimer(false);\n        setCurrentChapter(4);\n        setShowChoice(true);\n        setTimerSkipped(false);\n      }\n    }, [asphyxiationTime, showTimer, timerSkipped]);\n\n    const handleChoice = (nextChapter, path) => {\n      const container = document.getElementById('fish-story-container');\n      if (container) {\n        container.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }\n      \n      if (path === true) {\n        setShowTimer(true);\n        setTimerSkipped(false);\n        setShowChoice(false);\n        return;\n      } else if (path !== false && path !== undefined) {\n        setUserPath([...userPath, path]);\n      }\n      \n      setShowChoice(false);\n      setShowCallout(false);\n      setShowTimer(false);\n      setCurrentChapter(nextChapter);\n    };\n\n    const handleSkipTimer = () => {\n      const container = document.getElementById('fish-story-container');\n      if (container) {\n        container.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }\n      setTimerSkipped(true);\n    };\n\n    const resetStory = () => {\n      const container = document.getElementById('fish-story-container');\n      if (container) {\n        container.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }\n      setSelectedSpecies(null);\n      setCurrentChapter(0);\n      setShowChoice(false);\n      setUserPath([]);\n      setShowCallout(false);\n      setAsphyxiationTime(55);\n      setShowTimer(false);\n      setTimerSkipped(false);\n    };\n\n    const formatTime = (seconds) => {\n      const mins = Math.floor(seconds \/ 60);\n      const secs = seconds % 60;\n      return mins + ':' + (secs < 10 ? '0' : '') + secs;\n    };\n\n    if (!selectedSpecies) {\n      return (\n        <div className=\"min-h-screen bg-gradient-to-b from-black via-gray-900 to-black text-white animate-gradient\" style={{padding: '4rem 2rem'}}>\n          <div className=\"max-w-4xl mx-auto space-y-12\">\n            <div className=\"text-center space-y-6\">\n              <h1 className=\"text-7xl font-black uppercase tracking-tight drop-shadow-2xl impact-font text-white\">\n                A TRILLION WAYS TO DIE\n              <\/h1>\n              <p className=\"text-2xl text-gray-300 font-bold\">\n                Choose whose life you will experience\n              <\/p>\n            <\/div>\n\n            <div className=\"grid grid-cols-2 gap-6\">\n              {speciesOptions.map((species) => (\n                <button\n                  key={species.id}\n                  onClick={() => {\n                    const container = document.getElementById('fish-story-container');\n                    if (container) {\n                      container.scrollIntoView({ behavior: 'smooth', block: 'start' });\n                    }\n                    setSelectedSpecies(species.id);\n                    setCurrentChapter(0);\n                  }}\n                  style={{\n                    backgroundImage: species.image ? `url(${species.image})` : 'none',\n                    backgroundSize: 'cover',\n                    backgroundPosition: 'center',\n                    minHeight: '16rem'\n                  }}\n                  className=\"relative overflow-hidden bg-gray-900 p-8 rounded-lg border-2 border-white\/20 hover:border-white hover:shadow-xl transition-all duration-300 transform hover:scale-110 text-left group\"\n                >\n                  <div className=\"absolute inset-0 bg-gradient-to-t from-black via-black\/80 to-black\/60 group-hover:from-black\/95 group-hover:via-black\/75 transition-all duration-300\"><\/div>\n                  \n                  <div className={`absolute inset-0 bg-gradient-to-br ${species.color} opacity-20 group-hover:opacity-40 transition-opacity duration-300`}><\/div>\n                  \n                  <div className=\"relative z-10 flex flex-col justify-end h-full\">\n                    <h3 className=\"text-3xl font-black mb-3 uppercase impact-font text-white group-hover:text-cyan-300 transition-colors duration-300\">\n                      {species.name}\n                    <\/h3>\n                    <p className=\"text-sm font-bold text-gray-400 mb-4 uppercase tracking-wider\">\n                      {species.subtitle}\n                    <\/p>\n                    <p className=\"text-base text-gray-200 leading-relaxed italic\">\n                      {species.description}\n                    <\/p>\n                  <\/div>\n                <\/button>\n              ))}\n            <\/div>\n\n            <div className=\"text-center text-sm text-gray-400 bg-black\/60 p-6 rounded-lg backdrop-blur border border-gray-700\">\n              <p className=\"font-semibold text-gray-300 mb-2\">All stories based on peer-reviewed research<\/p>\n              <p className=\"text-xs\">Mood, A. & Brooke, P. (2024). Animal Welfare, 33, e6, 1-19.<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      );\n    }\n\n    const currentStory = storyData[selectedSpecies];\n    const totalChapters = currentStory.totalChapters;\n    const progress = (currentChapter \/ (totalChapters + 1)) * 100;\n    const selectedSpeciesInfo = speciesOptions.find(s => s.id === selectedSpecies);\n\n    \/\/ Welcome screen (chapter 0)\n    if (currentChapter === 0) {\n      return (\n        <div \n          className=\"min-h-screen bg-gradient-to-b from-black via-gray-900 to-black text-white relative overflow-hidden\"\n          style={{padding: '4rem 2rem'}}\n        >\n          <div \n            className=\"absolute inset-0 animate-zoom\"\n            style={{\n              backgroundImage: currentStory.getBackgroundImage(0) ? `url(${currentStory.getBackgroundImage(0)})` : 'none',\n              backgroundSize: 'cover',\n              backgroundPosition: 'center',\n            }}\n          ><\/div>\n          <div className=\"absolute inset-0 bg-black\/70\"><\/div>\n\n          <div className=\"relative z-10 max-w-3xl mx-auto\">\n            <div className=\"text-center mb-12\">\n              <h2 className=\"text-5xl font-black tracking-wider uppercase drop-shadow-lg impact-font text-white mb-4\" style={{textShadow: '2px 2px 4px rgba(0,0,0,0.8)'}}>\n                YOU ARE: {selectedSpeciesInfo.name.toUpperCase()}\n              <\/h2>\n              <p className=\"text-xl text-gray-300 font-semibold italic\">{selectedSpeciesInfo.welcomeInfo.scientificName}<\/p>\n            <\/div>\n\n            <div className=\"bg-black\/60 backdrop-blur-md p-10 rounded-lg border-2 border-white\/30 shadow-2xl space-y-6 mb-8\">\n              <div>\n                <h3 className=\"text-lg font-black text-cyan-300 mb-2 uppercase tracking-wide\">Habitat<\/h3>\n                <p className=\"text-gray-200 leading-relaxed\">{selectedSpeciesInfo.welcomeInfo.habitat}<\/p>\n              <\/div>\n              \n              <div>\n                <h3 className=\"text-lg font-black text-cyan-300 mb-2 uppercase tracking-wide\">Lifespan<\/h3>\n                <p className=\"text-gray-200 leading-relaxed\">{selectedSpeciesInfo.welcomeInfo.lifespan}<\/p>\n              <\/div>\n              \n              <div>\n                <h3 className=\"text-lg font-black text-cyan-300 mb-2 uppercase tracking-wide\">Size<\/h3>\n                <p className=\"text-gray-200 leading-relaxed\">{selectedSpeciesInfo.welcomeInfo.size}<\/p>\n              <\/div>\n              \n              <div className=\"border-t border-gray-600 pt-6\">\n                <h3 className=\"text-lg font-black text-cyan-300 mb-3 uppercase tracking-wide\">About This Species<\/h3>\n                <p className=\"text-gray-200 leading-relaxed text-lg\">{selectedSpeciesInfo.welcomeInfo.facts}<\/p>\n              <\/div>\n            <\/div>\n\n            <div className=\"bg-gradient-to-r from-red-900\/40 to-orange-900\/40 border-2 border-red-500\/50 rounded-lg p-6 mb-8 backdrop-blur-md\">\n              <p className=\"text-white text-center text-lg font-semibold leading-relaxed\">\n                This interactive story will take you through the lived experience of this animal\u2014from their perspective. Some choices will be offered. Most will make no difference. This is based on peer-reviewed research into commercial fishing and aquaculture practices.\n              <\/p>\n            <\/div>\n\n            {showChoice && (\n              <div className=\"space-y-4\">\n                {currentStory.getChoices(0).map((choice, i) => (\n                  <button\n                    key={i}\n                    onClick={() => handleChoice(choice.next, choice.path)}\n                    className=\"w-full bg-gradient-to-r from-cyan-600\/20 to-blue-600\/20 hover:from-cyan-500\/40 hover:to-blue-500\/40 border-2 border-cyan-500\/50 hover:border-cyan-400 text-white py-5 px-8 rounded-lg text-xl font-black uppercase tracking-wide transition transform hover:scale-105 backdrop-blur-sm shadow-lg impact-font\"\n                  >\n                    {choice.text}\n                  <\/button>\n                ))}\n              <\/div>\n            )}\n          <\/div>\n        <\/div>\n      );\n    }\n\n    if (currentChapter === totalChapters + 1) {\n      const summary = currentStory.summary;\n      return (\n        <div className=\"min-h-screen bg-gradient-to-b from-black via-gray-900 to-black text-white\" style={{padding: '4rem 2rem'}}>\n          <div className=\"fixed top-0 left-0 right-0 h-2 bg-gray-800 z-50\">\n            <div className=\"h-full bg-red-500 transition-all duration-500\" style={{ width: '100%' }}><\/div>\n          <\/div>\n\n          <div className=\"max-w-3xl mx-auto\">\n            <div className=\"text-center border-t-4 border-b-4 border-red-600 py-12 bg-black\/60 backdrop-blur rounded-lg shadow-2xl\">\n              <h1 className=\"text-5xl font-black mb-12 tracking-tight uppercase text-red-500 impact-font\">\n                YOUR LIFE SUMMARY\n              <\/h1>\n              \n              <div className=\"space-y-6 text-left px-8\">\n                <div className=\"flex justify-between border-b border-gray-700 pb-3 text-lg\">\n                  <span className=\"text-gray-400 font-semibold\">Born:<\/span>\n                  <span className=\"font-bold\">{summary.born}<\/span>\n                <\/div>\n                \n                <div className=\"flex justify-between border-b border-gray-700 pb-3 text-lg\">\n                  <span className=\"text-gray-400 font-semibold\">Died:<\/span>\n                  <span className=\"font-bold\">Today<\/span>\n                <\/div>\n                \n                <div className=\"flex justify-between border-b border-gray-700 pb-3 text-lg\">\n                  <span className=\"text-gray-400 font-semibold\">Cause of Death:<\/span>\n                  <span className=\"font-bold\">{summary.cause}<\/span>\n                <\/div>\n                \n                <div className=\"flex justify-between border-b border-gray-700 pb-3 text-lg\">\n                  <span className=\"text-gray-400 font-semibold\">Time to Death:<\/span>\n                  <span className=\"font-bold\">{summary.timeToMeath}<\/span>\n                <\/div>\n                \n                <div className=\"flex justify-between border-b border-gray-700 pb-3 text-lg\">\n                  <span className=\"text-gray-400 font-semibold\">Your Purpose:<\/span>\n                  <span className=\"font-bold\">{summary.purpose}<\/span>\n                <\/div>\n                \n                {summary.multiplier && (\n                  <div className=\"flex justify-between border-b border-gray-700 pb-3 text-lg\">\n                    <span className=\"text-gray-400 font-semibold\">Wild Fish Consumed:<\/span>\n                    <span className=\"font-bold text-red-400\">{summary.multiplier}<\/span>\n                  <\/div>\n                )}\n                \n                {summary.question && (\n                  <div className=\"p-6 bg-purple-900\/30 border-2 border-purple-600 rounded-lg mt-6\">\n                    <p className=\"text-lg font-bold text-purple-300\">{summary.question}<\/p>\n                  <\/div>\n                )}\n                \n                <div className=\"mt-12 p-8 bg-gradient-to-br from-red-900\/40 to-red-950\/60 border-2 border-red-600 rounded-lg shadow-xl\">\n                  <div className=\"text-center mb-6\">\n                    <div className=\"text-6xl font-black text-red-400 mb-2 impact-font\">\n                      {summary.othersLikeYou}\n                    <\/div>\n                    <div className=\"text-sm text-gray-300 mt-3 font-semibold uppercase tracking-wide\">\n                      {summary.othersText}\n                    <\/div>\n                  <\/div>\n                  \n                  <div className=\"text-base text-center text-gray-300 mt-6 leading-relaxed font-semibold\">\n                    You were number {fishId.toLocaleString()}.\n                  <\/div>\n                <\/div>\n                \n                <div className=\"mt-12 space-y-4\">\n                  <button \n                    onClick={resetStory}\n                    className=\"w-full bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white py-4 px-8 rounded-lg text-xl font-black uppercase tracking-wide transition transform hover:scale-105 shadow-lg impact-font\"\n                  >\n                    Try Another Life\n                  <\/button>\n                  \n                  <div className=\"text-center text-sm text-gray-400 mt-8 bg-black\/40 p-6 rounded-lg\">\n                    <p className=\"mb-3 font-semibold text-gray-300\">This story is based on peer-reviewed research<\/p>\n                    <p className=\"text-xs leading-relaxed\">Mood, A. & Brooke, P. (2024). Animal Welfare, 33, e6, 1-19.<\/p>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      );\n    }\n\n    const text = currentStory.getText(currentChapter, userPath);\n    const title = currentStory.getTitle(currentChapter);\n    const background = currentStory.getBackground(currentChapter);\n    const backgroundImage = currentStory.getBackgroundImage ? currentStory.getBackgroundImage(currentChapter) : null;\n    const callout = currentStory.getCallout(currentChapter);\n    const choices = currentStory.getChoices(currentChapter);\n\n    return (\n      <div \n        className={`min-h-screen bg-gradient-to-b ${background} text-white relative overflow-hidden transition-all duration-1000 animate-gradient`}\n        style={{\n          padding: '4rem 2rem'\n        }}\n      >\n        <div \n          className=\"absolute inset-0 animate-zoom\"\n          style={{\n            backgroundImage: backgroundImage ? `url(${backgroundImage})` : 'none',\n            backgroundSize: 'cover',\n            backgroundPosition: 'center',\n          }}\n        ><\/div>\n        <div className=\"absolute inset-0 bg-black\/60\"><\/div>\n        \n        <div className=\"fixed top-0 left-0 right-0 h-2 bg-gray-900 z-50\">\n          <div \n            className=\"h-full bg-gradient-to-r from-cyan-500 via-blue-500 to-red-500 transition-all duration-500\" \n            style={{ width: `${progress}%` }}\n          ><\/div>\n        <\/div>\n\n        <div className=\"absolute inset-0 opacity-30 pointer-events-none\">\n          <div className=\"absolute top-1\/4 left-1\/4 w-3 h-3 bg-white rounded-full animate-float\"><\/div>\n          <div className=\"absolute top-1\/3 right-1\/3 w-2 h-2 bg-white rounded-full animate-float-delay-1\"><\/div>\n          <div className=\"absolute bottom-1\/4 left-1\/2 w-3 h-3 bg-white rounded-full animate-float-delay-2\"><\/div>\n          <div className=\"absolute top-1\/2 right-1\/4 w-2 h-2 bg-white rounded-full animate-float-delay-3\"><\/div>\n          <div className=\"absolute top-2\/3 left-1\/3 w-2 h-2 bg-white rounded-full animate-float\"><\/div>\n          <div className=\"absolute bottom-1\/3 right-1\/2 w-3 h-3 bg-white rounded-full animate-float-delay-1\"><\/div>\n        <\/div>\n\n        <div className=\"relative z-10 max-w-4xl mx-auto\">\n          <div className=\"text-center mb-12\">\n            <h2 className=\"text-5xl font-black tracking-wider uppercase drop-shadow-lg impact-font text-white\" style={{textShadow: '2px 2px 4px rgba(0,0,0,0.8)'}}>\n              {title}\n            <\/h2>\n          <\/div>\n\n          {showTimer && (\n            <div className=\"text-center space-y-6 mb-12 animate-pulse-slow bg-black\/60 backdrop-blur-md p-8 rounded-lg border-2 border-red-500\/50 shadow-2xl\">\n              <div className=\"text-7xl font-black text-red-400 drop-shadow-lg impact-font\">\n                {formatTime(asphyxiationTime)}\n              <\/div>\n              <p className=\"text-lg text-gray-200 font-semibold\">Time remaining until unconsciousness<\/p>\n              <button\n                onClick={handleSkipTimer}\n                className=\"mt-4 bg-gray-800\/90 hover:bg-gray-700 border-2 border-gray-600 hover:border-gray-500 text-white py-3 px-8 rounded-lg text-lg font-black uppercase tracking-wide transition transform hover:scale-105 backdrop-blur shadow-lg impact-font\"\n              >\n                Skip Ahead\n              <\/button>\n            <\/div>\n          )}\n\n          <div className=\"bg-black\/40 backdrop-blur-md p-10 rounded-lg border-2 border-white\/20 shadow-2xl animate-fadeIn mb-8\">\n            <p className=\"text-2xl leading-relaxed font-medium text-gray-100\">\n              {text}\n            <\/p>\n          <\/div>\n\n          {callout && showChoice && !showTimer && (\n            <div className=\"mb-8 p-6 bg-black\/60 border-2 border-white rounded-lg backdrop-blur-md shadow-2xl\">\n              <button \n                onClick={() => setShowCallout(!showCallout)}\n                className=\"w-full flex items-center justify-between text-left group\"\n              >\n                <h3 className=\"text-xl font-black flex items-center gap-3 uppercase tracking-wide group-hover:text-cyan-300 transition impact-font text-cyan-200\" style={{textShadow: '1px 1px 2px rgba(0,0,0,0.8)'}}>\n                  <AlertCircle className=\"w-6 h-6\" \/>\n                  {callout.title}\n                <\/h3>\n                <span className=\"text-sm text-gray-300 font-bold uppercase tracking-wide\">\n                  {showCallout ? 'Hide' : 'Show'}\n                <\/span>\n              <\/button>\n              \n              {showCallout && (\n                <p className=\"mt-6 text-base text-gray-200 leading-relaxed font-medium border-t border-gray-700 pt-4\">\n                  {callout.content}\n                <\/p>\n              )}\n            <\/div>\n          )}\n\n          {showChoice && !showTimer && (\n            <div className=\"space-y-4 mb-12\">\n              {choices.map((choice, i) => (\n                <button\n                  key={i}\n                  onClick={() => handleChoice(choice.next, choice.path || choice.timer)}\n                  className=\"w-full bg-gradient-to-r from-cyan-600\/20 to-blue-600\/20 hover:from-cyan-500\/40 hover:to-blue-500\/40 border-2 border-cyan-500\/50 hover:border-cyan-400 text-white py-5 px-8 rounded-lg text-xl font-black uppercase tracking-wide transition transform hover:scale-105 backdrop-blur-sm shadow-lg impact-font\"\n                >\n                  {choice.text}\n                <\/button>\n              ))}\n            <\/div>\n          )}\n        <\/div>\n      <\/div>\n    );\n  }\n\n  ReactDOM.render(<FishStory \/>, document.getElementById('fish-story-container'));\n<\/script><\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":746,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-698","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/jacobwarn.com\/es\/wp-json\/wp\/v2\/pages\/698","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jacobwarn.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jacobwarn.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jacobwarn.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jacobwarn.com\/es\/wp-json\/wp\/v2\/comments?post=698"}],"version-history":[{"count":26,"href":"https:\/\/jacobwarn.com\/es\/wp-json\/wp\/v2\/pages\/698\/revisions"}],"predecessor-version":[{"id":795,"href":"https:\/\/jacobwarn.com\/es\/wp-json\/wp\/v2\/pages\/698\/revisions\/795"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jacobwarn.com\/es\/wp-json\/wp\/v2\/media\/746"}],"wp:attachment":[{"href":"https:\/\/jacobwarn.com\/es\/wp-json\/wp\/v2\/media?parent=698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}