✨ Set up Copilot instructions ai g13

[funtimefranky1530-coder]

Configure instructions for this repository as documented in Best practices for Copilot coding agent in your repository.

import React, { useState } from 'react'; import { Search, Brain, Atom, Dna, Telescope, Zap } from 'lucide-react';

const mysteries = [
{
id: 1,
category: "Physics",
icon: Atom,
title: "Dark Matter & Dark Energy",
mystery: "95% of the universe is made of something we can't see or detect directly. Dark matter (27%) holds galaxies together, while dark energy (68%) drives the universe's accelerating expansion.",
whatWeKnow: "We observe their gravitational effects. Galaxies rotate too fast to be held together by visible matter alone. The universe's expansion is speeding up, not slowing down.",
whyItMatters: "Understanding these could revolutionize physics and our understanding of reality itself.",
status: "Active research with experiments like LUX-ZEPLIN detector"
},
{
id: 2,
category: "Biology",
icon: Dna,
title: "Origin of Life",
mystery: "How did non-living chemistry become living biology? How did the first self-replicating molecules form, and what was the path from simple chemicals to the first cell?",
whatWeKnow: "Life emerged on Earth around 3.8 billion years ago. RNA can store information and catalyze reactions. Experiments have created amino acids from simple compounds.",
whyItMatters: "This could tell us how common life is in the universe and help us recognize alien biochemistry.",
status: "Multiple competing hypotheses: RNA world, metabolism-first, clay hypothesis"
},
{
id: 3,
category: "Neuroscience",
icon: Brain,
title: "Consciousness",
mystery: "How does physical brain activity create subjective experience? Why do we have an inner mental life? What is the 'hard problem' of consciousness?",
whatWeKnow: "Certain brain regions correlate with conscious experience. Damage to specific areas affects consciousness. But we can't explain why this produces felt experience.",
whyItMatters: "Fundamental to understanding human nature, AI, and questions of animal sentience.",
status: "Theories include Integrated Information Theory, Global Workspace Theory, others"
},
{
id: 4,
category: "Astronomy",
icon: Telescope,
title: "Fast Radio Bursts",
mystery: "Millisecond-long bursts of radio waves from deep space with incredible energy. First discovered in 2007, their origin remains largely mysterious.",
whatWeKnow: "Some repeat, most don't. They come from billions of light-years away. Some are associated with magnetars (highly magnetic neutron stars).",
whyItMatters: "Could reveal exotic physics and help map the universe's structure.",
status: "Thousands detected, multiple theories, no consensus yet"
},
{
id: 5,
category: "Physics",
icon: Zap,
title: "High-Temperature Superconductivity",
mystery: "Some materials conduct electricity with zero resistance at unexpectedly high temperatures. We don't fully understand the mechanism behind this.",
whatWeKnow: "Discovered in 1986. Certain copper-oxide ceramics superconduct above -140°C. Recent discoveries show superconductivity at near room temperature under extreme pressure.",
whyItMatters: "Room-temperature superconductors could revolutionize energy, computing, and transportation.",
status: "Active research; mechanism still debated after 35+ years"
},
{
id: 6,
category: "Biology",
icon: Dna,
title: "Junk DNA Purpose",
mystery: "98% of human DNA doesn't code for proteins. Long dismissed as 'junk,' we're discovering it has functions we don't fully understand.",
whatWeKnow: "Some regulates genes, some produces RNA molecules with unknown functions. Many regions are conserved across species, suggesting importance.",
whyItMatters: "Could explain disease susceptibility, evolution, and human variation.",
status: "ENCODE project and others revealing hidden complexity"
},
{
id: 7,
category: "Physics",
icon: Atom,
title: "Matter-Antimatter Asymmetry",
mystery: "The Big Bang should have created equal amounts of matter and antimatter, which would annihilate each other. Yet we exist in a matter-dominated universe.",
whatWeKnow: "There's about 1 billion and 1 matter particles for every billion antimatter particles. Experiments show slight differences in how they decay.",
whyItMatters: "Explains why anything exists at all.",
status: "Experiments at LHC and others searching for the full explanation"
},
{
id: 8,
category: "Astronomy",
icon: Telescope,
title: "The Fermi Paradox",
mystery: "If the universe is so vast and old, where is everybody? Why haven't we detected any signs of alien civilizations?",
whatWeKnow: "Billions of potentially habitable planets exist. We've found no convincing evidence of extraterrestrial intelligence despite decades of searching.",
whyItMatters: "Fundamental to understanding humanity's place in the cosmos.",
status: "Hundreds of proposed solutions, from Great Filters to Zoo Hypothesis"
}
];

export default function ScientificMysteriesExplorer() {
const [selectedMystery, setSelectedMystery] = useState(mysteries[0]);
const [filter, setFilter] = useState("All");

const categories = ["All", ...new Set(mysteries.map(m => m.category))];
const filteredMysteries = filter === "All"
? mysteries
: mysteries.filter(m => m.category === filter);

const Icon = selectedMystery.icon;

return (

Scientific Mysteries Explorer

The biggest unsolved puzzles in science

    <div className="flex gap-2 mb-6 flex-wrap justify-center">
      {categories.map(cat => (
        <button
          key={cat}
          onClick={() => setFilter(cat)}
          className={`px-4 py-2 rounded-full transition-all ${
            filter === cat
              ? 'bg-purple-500 text-white shadow-lg'
              : 'bg-white/10 hover:bg-white/20 text-purple-200'
          }`}
        >
          {cat}
        </button>
      ))}
    </div>

    <div className="grid md:grid-cols-3 gap-6">
      <div className="md:col-span-1 space-y-3">
        <h2 className="text-lg font-semibold text-purple-300 mb-3">Select a Mystery</h2>
        {filteredMysteries.map(mystery => {
          const MysteryIcon = mystery.icon;
          return (
            <button
              key={mystery.id}
              onClick={() => setSelectedMystery(mystery)}
              className={`w-full text-left p-4 rounded-lg transition-all ${
                selectedMystery.id === mystery.id
                  ? 'bg-gradient-to-r from-purple-600 to-indigo-600 shadow-xl scale-105'
                  : 'bg-white/10 hover:bg-white/15'
              }`}
            >
              <div className="flex items-start gap-3">
                <MysteryIcon className="w-5 h-5 mt-1 flex-shrink-0" />
                <div>
                  <div className="text-xs text-purple-300 mb-1">{mystery.category}</div>
                  <div className="font-semibold">{mystery.title}</div>
                </div>
              </div>
            </button>
          );
        })}
      </div>

      <div className="md:col-span-2 bg-white/10 backdrop-blur-lg rounded-xl p-6 shadow-2xl">
        <div className="flex items-center gap-3 mb-6">
          <div className="bg-gradient-to-br from-purple-500 to-indigo-500 p-3 rounded-lg">
            <Icon className="w-8 h-8" />
          </div>
          <div>
            <div className="text-sm text-purple-300">{selectedMystery.category}</div>
            <h2 className="text-2xl font-bold">{selectedMystery.title}</h2>
          </div>
        </div>

        <div className="space-y-6">
          <div>
            <h3 className="text-lg font-semibold text-purple-300 mb-2">🔍 The Mystery</h3>
            <p className="text-purple-100 leading-relaxed">{selectedMystery.mystery}</p>
          </div>

          <div>
            <h3 className="text-lg font-semibold text-purple-300 mb-2">💡 What We Know</h3>
            <p className="text-purple-100 leading-relaxed">{selectedMystery.whatWeKnow}</p>
          </div>

          <div>
            <h3 className="text-lg font-semibold text-purple-300 mb-2">⚡ Why It Matters</h3>
            <p className="text-purple-100 leading-relaxed">{selectedMystery.whyItMatters}</p>
          </div>

          <div className="bg-indigo-900/50 rounded-lg p-4 border border-indigo-500/30">
            <h3 className="text-lg font-semibold text-purple-300 mb-2">📊 Current Status</h3>
            <p className="text-purple-100">{selectedMystery.status}</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

);
}