// Access React and ReactDOM from global scope (UMD)
const { React, ReactDOM } = window as any;

// --- TYPES ---
interface Mission {
  id: string;
  title: string;
  image: string;
  status: 'active' | 'top_priority' | 'new' | 'open' | 'completed';
  task: string;
  funding: number;
  reward: number;
  priorityLabel?: string;
  priorityColor?: string;
  filename: string;
  tools: string;
}

// --- DATA ---
const missions: Mission[] = [
  {
    id: 'open-legal-freedom',
    title: 'Mission: Open Legal Freedom',
    image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Panorama_of_United_States_Supreme_Court_Building_at_Dusk.jpg/1280px-Panorama_of_United_States_Supreme_Court_Building_at_Dusk.jpg',
    status: 'new',
    priorityLabel: 'NEW',
    priorityColor: 'purple',
    task: 'Create an unassailable record of unconstitutional and corrupt legal practices affecting citizens, bypassing traditional legal gatekeepers.',
    funding: 5000,
    reward: 50,
    filename: 'mission-open-legal-freedom.html',
    tools: 'Computer (PC/Mac/Linux), PACER, DocumentCloud, Secure Communications'
  },
  {
    id: 'open-tax-freedom',
    title: 'Mission: Open Tax Freedom',
    image: 'https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=800&h=400&fit=crop',
    status: 'new',
    priorityLabel: 'NEW',
    priorityColor: 'purple',
    task: 'Build the people\'s tax tool. Kill the Intuit monopoly for good.',
    funding: 5000,
    reward: 50,
    filename: 'mission-open-tax-freedom.html',
    tools: 'Computer (PC/Mac/Linux), Web Browser, GitHub, Text Editor'
  },
  {
    id: 'epstein',
    title: 'Project Lolita: Released vs Missing Material (April 2026 Status)',
    image: 'https://images.unsplash.com/photo-1589829545856-d10d557cf95f?w=400&h=300&fit=crop',
    status: 'completed',
    priorityLabel: 'COMPLETED',
    priorityColor: 'gray',
    task: 'Create a clear, verifiable forensic summary of what has actually been released versus what is still missing or withheld, and document patterns of elite involvement.',
    funding: 0,
    reward: 500,
    filename: 'mission-project-lolita.html',
    tools: 'Grok (xAI), Digital Forensic Crawler'
  },
  {
    id: 'clandestine-lab',
    title: 'Project CCP Nexus: Clandestine Lab Detection',
    image: 'https://images.unsplash.com/photo-1532094349884-543bc11b234d?w=400&h=300&fit=crop',
    status: 'new',
    priorityLabel: 'NEW',
    priorityColor: 'purple',
    task: 'Detect state-sponsored biological threats before outbreak.',
    funding: 95000,
    reward: 250,
    filename: 'mission-clandestine-lab.html',
    tools: 'Smartphone, Camera App, Audio App, ProofMode, Phyphox, Computer (PC/Mac/Linux), Maltego, OpenCorporates, QGIS, Python'
  },
  {
    id: 'farm-belt',
    title: 'Operation Farm-Belt Alpha',
    image: 'https://images.unsplash.com/photo-1625246333195-78d9c38ad449?w=400&h=300&fit=crop',
    status: 'active',
    priorityLabel: 'ACTIVE',
    priorityColor: 'green',
    task: 'Test claims of environmental contamination through standardized sampling and lab analysis.',
    funding: 85000,
    reward: 150,
    filename: 'mission-farm-belt.html',
    tools: 'Smartphone, Camera App, Audio App, ProofMode, Phyphox, NFC Tools, NFC 213 Stickers, Collection Jars, Ward Lab Form, Computer (PC/Mac/Linux), QGIS, OpenCorporates, Python, Maltego'
  },
  {
    id: 'vaccine-injuries',
    title: 'Project Duplicity: Vaccine Injury and Double-Dealing Review',
    image: 'https://images.pexels.com/photos/32418225/pexels-photo-32418225.jpeg?auto=compress&cs=tinysrgb&w=400&h=300&fit=crop',
    status: 'active',
    priorityLabel: 'ACTIVE',
    priorityColor: 'green',
    task: 'Review vaccine data (VAERS, et al) for injuries in children.',
    funding: 75000,
    reward: 100,
    filename: 'mission-vaccine-injuries.html',
    tools: 'Smartphone, Camera App, ProofMode, Computer (PC/Mac/Linux), Python, OpenRefine, DocumentCloud, Wayback Machine'
  },
  {
    id: 'minneapolis-money',
    title: 'Operation Gold Eagle: Federal Fraud Audit',
    image: 'https://images.unsplash.com/photo-1633158829875-e5316a358c6f?w=400&h=300&fit=crop',
    status: 'new',
    priorityLabel: 'NEW',
    priorityColor: 'purple',
    task: 'Locate, track, and report fraudulent government funding.',
    funding: 55000,
    reward: 50,
    filename: 'mission-gold-eagle.html',
    tools: 'Smartphone, Camera App, ProofMode, Computer (PC/Mac/Linux), Python, OpenCorporates, DocumentCloud, Wayback Machine'
  },
  {
    id: 'project-shit-stirrer',
    title: 'Project Shit-stirrer: Political Influence Network Mapping',
    image: 'https://images.unsplash.com/photo-1495020689067-958852a7765e?w=800&h=400&fit=crop',
    status: 'top_priority',
    priorityLabel: 'High Funding Priority',
    priorityColor: 'red',
    task: 'To tie together a vast array of databases to accumulate actionable legal data across the US and elsewhere.',
    funding: 65000,
    reward: 75,
    filename: 'mission-project-shit-stirrer.html',
    tools: 'Smartphone, Camera App, ProofMode, Computer (PC/Mac/Linux), ProPublica Nonprofit Explorer, FEC.gov Data, OpenSecrets, Gephi'
  },
  {
    id: 'occupation-hardcore',
    title: 'Operation Breaking Ozark: Drug/Money Tracing and Prevention',
    image: 'https://images.pexels.com/photos/7230243/pexels-photo-7230243.jpeg?auto=compress&cs=tinysrgb&w=400&h=300&fit=crop',
    status: 'top_priority',
    priorityLabel: 'High Funding Priority',
    priorityColor: 'red',
    task: 'Trace supply chains and identify key distribution nodes.',
    funding: 80000,
    reward: 200,
    filename: 'mission-occupation-hardcore.html',
    tools: 'Smartphone, Camera App, ProofMode, Computer (PC/Mac/Linux), OpenCorporates, PACER, OCCRP Aleph, LittleSis'
  },
  {
    id: 'operation-deepmap',
    title: 'Operation Deepmap: Municipal Transparency Auditing',
    image: 'https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=400&h=300&fit=crop',
    status: 'new',
    priorityLabel: 'NEW',
    priorityColor: 'purple',
    task: 'Identify and map the top 300-500 administrative personnel within the supranational network.',
    funding: 100000,
    reward: 300,
    filename: 'mission-operation-deepmap.html',
    tools: 'Smartphone, Camera App, ProofMode, Computer (PC/Mac/Linux), LittleSis, OpenSecrets, ProPublica Nonprofit Explorer, Gephi'
  },
  {
    id: 'glass-ledger',
    title: 'Operation Glass Ledger',
    image: 'https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?w=800&h=400&fit=crop',
    status: 'new',
    priorityLabel: 'NEW',
    priorityColor: 'purple',
    task: 'Map and expose the influence networks of the top 2000 high-net-worth individuals worldwide.',
    funding: 90000,
    reward: 250,
    filename: 'mission-operation-glass-ledger.html',
    tools: 'Smartphone, Camera App, ProofMode, Computer (PC/Mac/Linux), OpenCorporates, OCCRP Aleph, ICIJ Offshore Leaks Database, OpenSecrets'
  }
];

// --- COMPONENTS ---

const Hero = () => {
  return (
    <div 
      className="relative bg-gray-900 text-white py-6 md:py-10 bg-cover bg-center"
      style={{ 
        backgroundImage: 'url("https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=2070")',
        referrerPolicy: 'no-referrer'
      } as any}
    >
      {/* Dark Overlay for readability */}
      <div className="absolute inset-0 bg-black/60"></div>

      <div className="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center">
          <h3 
            className="text-xl md:text-3xl lg:text-4xl font-black mb-3 md:mb-4 uppercase tracking-tight"
            style={{ textShadow: '0 2px 10px rgba(0,0,0,0.5)' }}
          >
            Open World Investigation<br/>and Documentation platform
          </h3>
          <div className="max-w-3xl mx-auto">
            <div className="flex flex-row items-stretch justify-center gap-3 md:gap-5 mb-4 md:mb-6">
              <div className="flex-1 bg-black/20 backdrop-blur-sm py-3 px-3 md:py-5 md:px-6 rounded-lg flex items-center justify-center text-center">
                <p className="text-sm md:text-lg font-bold text-gray-300">
                  Research Project Creators submit projects, get funding.
                </p>
              </div>
              <div className="flex items-center justify-center">
                <div className="w-px h-12 md:h-16 bg-white/70"></div>
              </div>
              <div className="flex-1 bg-black/20 backdrop-blur-sm py-3 px-3 md:py-5 md:px-6 rounded-lg flex items-center justify-center text-center">
                <p className="text-sm md:text-lg font-bold text-gray-300">
                  Citizen Scientists complete tasks, get paid.
                </p>
              </div>
            </div>
            <div className="mt-4 md:mt-6 text-center">
              <a href="post-mission.html" className="inline-block bg-purple-600 hover:bg-purple-700 text-white font-semibold text-sm py-2 px-5 md:px-6 rounded-full transition-colors shadow-lg">
                Submit Your Research Mission
              </a>
            </div>
            <p className="text-[11px] md:text-xs text-gray-300 mt-4 uppercase tracking-wider font-semibold text-center">
              <span className="block md:inline">Highlight an investigation | Determine cost</span>
              <span className="hidden md:inline"> | </span>
              <span className="block md:inline">Set Tasks and Rewards | Collect and Inspect Data</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

const StatsBar = () => {
  return (
    <div className="bg-white border-b border-gray-200 py-4 md:py-8">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
          <div className="text-center">
            <div className="text-2xl md:text-3xl font-bold text-purple-600">$811,350</div>
            <div className="text-xs md:text-sm text-gray-600 mt-1">Total Funds Requested</div>
          </div>
          <div className="text-center">
            <div className="text-2xl md:text-3xl font-bold text-purple-600">21</div>
            <div className="text-xs md:text-sm text-gray-600 mt-1">Total Missions</div>
          </div>
          <div className="text-center">
            <div className="text-2xl md:text-3xl font-bold text-purple-600">5,330</div>
            <div className="text-xs md:text-sm text-gray-600 mt-1">Verified Research Requested</div>
          </div>
        </div>
      </div>
    </div>
  );
};

const BountyBoard = () => {
  return (
    <div id="mission-board" className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="mb-6 font-semibold text-gray-700">
        21 missions available
      </div>
      
      <div className="bg-purple-50 rounded-xl p-8 mb-12 border border-purple-100">
        <h2 className="text-2xl font-bold text-gray-900 mb-6">Featured/Local Test Missions</h2>
        
        {/* Featured Horizontal Card */}
        <div className="mb-8 bg-white rounded-xl overflow-hidden shadow-sm border-2 border-purple-400 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 flex flex-col">
          <a href="mission-roundup-not-ready.html" className="flex flex-col md:flex-row w-full flex-grow">
            <div className="h-48 md:h-auto md:w-1/3 bg-gray-200 flex-shrink-0">
              <img src="https://images.pexels.com/photos/2889442/pexels-photo-2889442.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="Project RoundUp Not Ready" className="w-full h-full object-cover" referrerPolicy="no-referrer" />
            </div>
            <div className="p-6 md:p-8 flex flex-col justify-center flex-grow">
              <div className="flex justify-between items-start mb-4">
                <span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-bold uppercase tracking-wider">
                  FUNDED
                </span>
                <span className="text-xl font-black text-purple-600">$5,000</span>
              </div>
              
              <h3 className="text-2xl font-bold text-gray-900 mb-3">
                Project RoundUp <i>Not</i> Ready
              </h3>
              
              <div className="space-y-3 text-sm mb-0">
                <div>
                  <span className="font-semibold text-gray-700">Task:</span>
                  <span className="text-gray-600"> Collect soil samples to test for glyphosate and biological health from farm field runoff.</span>
                </div>
                <div>
                  <span className="font-semibold text-gray-700">Tools Needed:</span>
                  <span className="text-gray-600"> Smartphone, ProofMode, Phyphox, NFC Tools, NFC 213 Stickers, Collection Jars, Ward Lab Form</span>
                </div>
                <div className="pt-1">
                  <span className="inline-block px-4 py-2 bg-blue-600 text-white text-sm font-bold rounded shadow hover:bg-blue-700 transition-colors">
                    Tools and Testing
                  </span>
                </div>
              </div>
            </div>
          </a>
          <div className="px-6 pb-6 md:px-8 md:pb-6">
            <div className="mt-4 flex flex-col items-center gap-2 border-t border-gray-100 pt-4">
              <p className="text-xs text-gray-500 text-center">
                Original Mission created by <a href="#" className="text-purple-600 font-semibold hover:underline">RENSIC</a>.
              </p>
              <a href="post-mission.html" className="inline-flex items-center px-4 py-1.5 bg-purple-600 text-white hover:bg-purple-700 rounded-full text-[11px] font-bold transition-colors shadow-sm">
                Submit Your Research Mission
              </a>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bounty-card rounded-xl overflow-hidden bg-white shadow-sm border border-gray-200 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 flex flex-col">
            <a href="mission-project-rumble-strip.html" className="block flex-grow">
              <div className="h-40 bg-gray-200 flex items-center justify-center">
                <img src="https://images.unsplash.com/photo-1560782205-4dd83ceb0270?auto=format&fit=crop&w=800&h=400&q=80&crop=focalpoint&fp-y=0.53&fp-x=0.5" alt="Project Rumble Strip" className="w-full h-full object-cover" referrerPolicy="no-referrer" />
              </div>
              <div className="p-5">
                <div className="flex justify-between items-start mb-3">
                  <span className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-bold uppercase tracking-wider">
                    LIVE TEST
                  </span>
                </div>
                
                <h3 className="text-lg font-bold text-gray-900 mb-2">
                  Project Rumble Strip
                </h3>
                
                <div className="space-y-2 text-sm mb-4">
                  <div>
                    <span className="font-semibold text-gray-700">Task:</span>
                    <span className="text-gray-600"> Hold contractors accountable with data from your phone. No potholes!</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Funded:</span>
                    <span className="text-gray-900 font-bold"> $150</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Reward:</span>
                    <span className="text-green-600 font-black"> $5</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Tools Needed:</span>
                    <span className="text-gray-600"> Smartphone, ProofMode, Phyphox, Vehicle</span>
                  </div>
                  <div className="pt-1">
                    <a href="tools-and-testing.html" className="inline-block px-4 py-2 bg-blue-600 text-white text-sm font-bold rounded shadow hover:bg-blue-700 transition-colors">
                      Tools and Testing
                    </a>
                  </div>
                </div>
              </div>
            </a>
            <div className="px-5 pb-5">
              <div className="mt-4 flex flex-col items-center gap-2 border-t border-gray-100 pt-4">
                <p className="text-xs text-gray-500 text-center">
                  Original Mission created by <a href="#" className="text-purple-600 font-semibold hover:underline">RENSIC</a>.
                </p>
                <a href="post-mission.html" className="inline-flex items-center px-4 py-1.5 bg-purple-600 text-white hover:bg-purple-700 rounded-full text-[11px] font-bold transition-colors shadow-sm">
                  Submit Your Research Mission
                </a>
              </div>
            </div>
          </div>
          <div className="bounty-card rounded-xl overflow-hidden bg-white shadow-sm border border-gray-200 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 flex flex-col">
            <a href="mission-silent-woods.html" className="block flex-grow">
              <div className="h-40 bg-gray-200 flex items-center justify-center">
                <img src="https://images.unsplash.com/photo-1448375240586-882707db888b?w=400&h=300&fit=crop" alt="Silent Woods" className="w-full h-full object-cover" referrerPolicy="no-referrer" />
              </div>
              <div className="p-5">
                <div className="flex justify-between items-start mb-3">
                  <span className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-bold uppercase tracking-wider">
                    LIVE TEST
                  </span>
                </div>
                
                <h3 className="text-lg font-bold text-gray-900 mb-2">
                  The "Silent Woods" Audit
                </h3>
                
                <div className="space-y-2 text-sm mb-4">
                  <div>
                    <span className="font-semibold text-gray-700">Task:</span>
                    <span className="text-gray-600"> Verify "3 Billion Birds" crisis with dawn audio.</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Funded:</span>
                    <span className="text-gray-900 font-bold"> $150</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Reward:</span>
                    <span className="text-green-600 font-black"> $5</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Tools Needed:</span>
                    <span className="text-gray-600"> Smartphone, ProofMode, Phyphox, Audacity</span>
                  </div>
                  <div className="pt-1">
                    <a href="tools-and-testing.html" className="inline-block px-4 py-2 bg-blue-600 text-white text-sm font-bold rounded shadow hover:bg-blue-700 transition-colors">
                      Tools and Testing
                    </a>
                  </div>
                </div>
              </div>
            </a>
            <div className="px-5 pb-5">
              <div className="mt-4 flex flex-col items-center gap-2 border-t border-gray-100 pt-4">
                <p className="text-xs text-gray-500 text-center">
                  Original Mission created by <a href="#" className="text-purple-600 font-semibold hover:underline">RENSIC</a>.
                </p>
                <a href="post-mission.html" className="inline-flex items-center px-4 py-1.5 bg-purple-600 text-white hover:bg-purple-700 rounded-full text-[11px] font-bold transition-colors shadow-sm">
                  Submit Your Research Mission
                </a>
              </div>
            </div>
          </div>
          <div className="bounty-card rounded-xl overflow-hidden bg-white shadow-sm border border-gray-200 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 flex flex-col">
            <a href="mission-sky-scan.html" className="block flex-grow">
              <div className="h-40 bg-gray-200 flex items-center justify-center">
                <img src="https://images.unsplash.com/photo-1506012787146-f92b2d7d6d96?w=400&h=300&fit=crop" alt="Sky-Scan" className="w-full h-full object-cover" referrerPolicy="no-referrer" />
              </div>
              <div className="p-5">
                <div className="flex justify-between items-start mb-3">
                  <span className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-bold uppercase tracking-wider">
                    LIVE TEST
                  </span>
                </div>
                
                <h3 className="text-lg font-bold text-gray-900 mb-2">
                  The "Sky-Scan" (Atmospheric Aerosols)
                </h3>
                
                <div className="space-y-2 text-sm mb-4">
                  <div>
                    <span className="font-semibold text-gray-700">Task:</span>
                    <span className="text-gray-600"> Map persistent contrails and geoengineering aerosols.</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Funded:</span>
                    <span className="text-gray-900 font-bold"> $150</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Reward:</span>
                    <span className="text-green-600 font-black"> $5</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Tools Needed:</span>
                    <span className="text-gray-600"> Smartphone, ProofMode, Phyphox</span>
                  </div>
                  <div className="pt-1">
                    <a href="tools-and-testing.html" className="inline-block px-4 py-2 bg-blue-600 text-white text-sm font-bold rounded shadow hover:bg-blue-700 transition-colors">
                      Tools and Testing
                    </a>
                  </div>
                </div>
              </div>
            </a>
            <div className="px-5 pb-5">
              <div className="mt-4 flex flex-col items-center gap-2 border-t border-gray-100 pt-4">
                <p className="text-xs text-gray-500 text-center">
                  Original Mission created by <a href="#" className="text-purple-600 font-semibold hover:underline">RENSIC</a>.
                </p>
                <a href="post-mission.html" className="inline-flex items-center px-4 py-1.5 bg-purple-600 text-white hover:bg-purple-700 rounded-full text-[11px] font-bold transition-colors shadow-sm">
                  Submit Your Research Mission
                </a>
              </div>
            </div>
          </div>
          <div className="bounty-card rounded-xl overflow-hidden bg-white shadow-sm border border-gray-200 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 flex flex-col">
            <a href="mission-digital-noise.html" className="block flex-grow">
              <div className="h-40 bg-gray-200 flex items-center justify-center">
                <img src="https://images.unsplash.com/photo-1519331379826-f10be5486c6f?auto=format&fit=crop&w=800&h=400&q=80" alt="Digital Noise" className="w-full h-full object-cover" referrerPolicy="no-referrer" />
              </div>
              <div className="p-5">
                <div className="flex justify-between items-start mb-3">
                  <span className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-bold uppercase tracking-wider">
                    LIVE TEST
                  </span>
                </div>
                
                <h3 className="text-lg font-bold text-gray-900 mb-2">
                  The "Digital Noise" Pollution Map
                </h3>
                
                <div className="space-y-2 text-sm mb-4">
                  <div>
                    <span className="font-semibold text-gray-700">Task:</span>
                    <span className="text-gray-600"> Map electronic congestion in natural spaces.</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Funded:</span>
                    <span className="text-gray-900 font-bold"> $150</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Reward:</span>
                    <span className="text-green-600 font-black"> $5</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Tools Needed:</span>
                    <span className="text-gray-600"> Smartphone, EMF App</span>
                  </div>
                  <div className="pt-1">
                    <a href="tools-and-testing.html" className="inline-block px-4 py-2 bg-blue-600 text-white text-sm font-bold rounded shadow hover:bg-blue-700 transition-colors">
                      Tools and Testing
                    </a>
                  </div>
                </div>
              </div>
            </a>
            <div className="px-5 pb-5">
              <div className="mt-4 flex flex-col items-center gap-2 border-t border-gray-100 pt-4">
                <p className="text-xs text-gray-500 text-center">
                  Original Mission created by <a href="#" className="text-purple-600 font-semibold hover:underline">RENSIC</a>.
                </p>
                <a href="post-mission.html" className="inline-flex items-center px-4 py-1.5 bg-purple-600 text-white hover:bg-purple-700 rounded-full text-[11px] font-bold transition-colors shadow-sm">
                  Submit Your Research Mission
                </a>
              </div>
            </div>
          </div>
          <div className="bounty-card rounded-xl overflow-hidden bg-white shadow-sm border border-gray-200 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 flex flex-col">
            <a href="mission-magnetic-ghost.html" className="block flex-grow">
              <div className="h-40 bg-gray-200 flex items-center justify-center">
                <img src="https://images.unsplash.com/photo-1513828583688-c52646db42da?auto=format&fit=crop&w=800&h=400&q=80" alt="Magnetic Ghost" className="w-full h-full object-cover" referrerPolicy="no-referrer" />
              </div>
              <div className="p-5">
                <div className="flex justify-between items-start mb-3">
                  <span className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-bold uppercase tracking-wider">
                    LIVE TEST
                  </span>
                </div>
                
                <h3 className="text-lg font-bold text-gray-900 mb-2">
                  The "Magnetic Ghost" Hunter
                </h3>
                
                <div className="space-y-2 text-sm mb-4">
                  <div>
                    <span className="font-semibold text-gray-700">Task:</span>
                    <span className="text-gray-600"> Map EMF spikes near utility infrastructure.</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Funded:</span>
                    <span className="text-gray-900 font-bold"> $150</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Reward:</span>
                    <span className="text-green-600 font-black"> $5</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Tools Needed:</span>
                    <span className="text-gray-600"> Smartphone, EMF App</span>
                  </div>
                  <div className="pt-1">
                    <a href="tools-and-testing.html" className="inline-block px-4 py-2 bg-blue-600 text-white text-sm font-bold rounded shadow hover:bg-blue-700 transition-colors">
                      Tools and Testing
                    </a>
                  </div>
                </div>
              </div>
            </a>
            <div className="px-5 pb-5">
              <div className="mt-4 flex flex-col items-center gap-2 border-t border-gray-100 pt-4">
                <p className="text-xs text-gray-500 text-center">
                  Original Mission created by <a href="#" className="text-purple-600 font-semibold hover:underline">RENSIC</a>.
                </p>
                <a href="post-mission.html" className="inline-flex items-center px-4 py-1.5 bg-purple-600 text-white hover:bg-purple-700 rounded-full text-[11px] font-bold transition-colors shadow-sm">
                  Submit Your Research Mission
                </a>
              </div>
            </div>
          </div>
          <div className="bounty-card rounded-xl overflow-hidden bg-white shadow-sm border border-gray-200 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 flex flex-col">
            <a href="mission-midnight-chorus.html" className="block flex-grow">
              <div className="h-40 bg-gray-200 flex items-center justify-center">
                <img src="https://images.pexels.com/photos/5379753/pexels-photo-5379753.jpeg?auto=compress&cs=tinysrgb&w=800&h=400&fit=crop" alt="Midnight Chorus" className="w-full h-full object-cover" referrerPolicy="no-referrer" />
              </div>
              <div className="p-5">
                <div className="flex justify-between items-start mb-3">
                  <span className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-bold uppercase tracking-wider">
                    LIVE TEST
                  </span>
                </div>
                
                <h3 className="text-lg font-bold text-gray-900 mb-2">
                  The "Midnight Chorus"
                </h3>
                
                <div className="space-y-2 text-sm mb-4">
                  <div>
                    <span className="font-semibold text-gray-700">Task:</span>
                    <span className="text-gray-600"> Record nocturnal insect sounds to track ecosystem health.</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Funded:</span>
                    <span className="text-gray-900 font-bold"> $150</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Reward:</span>
                    <span className="text-green-600 font-black"> $5</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Tools Needed:</span>
                    <span className="text-gray-600"> Smartphone, Audio Recording App</span>
                  </div>
                  <div className="pt-1">
                    <a href="tools-and-testing.html" className="inline-block px-4 py-2 bg-blue-600 text-white text-sm font-bold rounded shadow hover:bg-blue-700 transition-colors">
                      Tools and Testing
                    </a>
                  </div>
                </div>
              </div>
            </a>
            <div className="px-5 pb-5">
              <div className="mt-4 flex flex-col items-center gap-2 border-t border-gray-100 pt-4">
                <p className="text-xs text-gray-500 text-center">
                  Original Mission created by <a href="#" className="text-purple-600 font-semibold hover:underline">RENSIC</a>.
                </p>
                <a href="post-mission.html" className="inline-flex items-center px-4 py-1.5 bg-purple-600 text-white hover:bg-purple-700 rounded-full text-[11px] font-bold transition-colors shadow-sm">
                  Submit Your Research Mission
                </a>
              </div>
            </div>
          </div>
          <div className="bounty-card rounded-xl overflow-hidden bg-white shadow-sm border border-gray-200 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 flex flex-col">
            <a href="mission-vector-point.html" className="block flex-grow">
              <div className="h-40 bg-gray-200 flex items-center justify-center relative overflow-hidden">
                <img src="https://images.pexels.com/photos/5009442/pexels-photo-5009442.jpeg?auto=compress&cs=tinysrgb&w=800&h=400&fit=crop" alt="Vector-Point Audit" className="w-full h-full object-cover" style={{ objectPosition: 'top', transform: 'scale(1.1)', transformOrigin: 'top center' }} referrerPolicy="no-referrer" />
              </div>
              <div className="p-5">
                <div className="flex justify-between items-start mb-3">
                  <span className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-bold uppercase tracking-wider">
                    LIVE TEST
                  </span>
                </div>
                
                <h3 className="text-lg font-bold text-gray-900 mb-2">
                  The "Vector-Point" Audit
                </h3>
                
                <div className="space-y-2 text-sm mb-4">
                  <div>
                    <span className="font-semibold text-gray-700">Task:</span>
                    <span className="text-gray-600"> Place phone in transition zone for 6 hours overnight.</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Funded:</span>
                    <span className="text-gray-900 font-bold"> $150</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Reward:</span>
                    <span className="text-green-600 font-black"> $5</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Tools Needed:</span>
                    <span className="text-gray-600"> Smartphone, Camera App</span>
                  </div>
                  <div className="pt-1">
                    <a href="tools-and-testing.html" className="inline-block px-4 py-2 bg-blue-600 text-white text-sm font-bold rounded shadow hover:bg-blue-700 transition-colors">
                      Tools and Testing
                    </a>
                  </div>
                </div>
              </div>
            </a>
            <div className="px-5 pb-5">
              <div className="mt-4 flex flex-col items-center gap-2 border-t border-gray-100 pt-4">
                <p className="text-xs text-gray-500 text-center">
                  Original Mission created by <a href="#" className="text-purple-600 font-semibold hover:underline">RENSIC</a>.
                </p>
                <a href="post-mission.html" className="inline-flex items-center px-4 py-1.5 bg-purple-600 text-white hover:bg-purple-700 rounded-full text-[11px] font-bold transition-colors shadow-sm">
                  Submit Your Research Mission
                </a>
              </div>
            </div>
          </div>
          <div className="bounty-card rounded-xl overflow-hidden bg-white shadow-sm border border-gray-200 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 flex flex-col">
            <a href="mission-food-fraud.html" className="block flex-grow">
              <div className="h-40 bg-gray-200 flex items-center justify-center relative overflow-hidden">
                <img src="https://images.pexels.com/photos/33783/olive-oil-salad-dressing-cooking-olive.jpg?auto=compress&cs=tinysrgb&w=800&h=400&fit=crop" alt="Food Fraud Scan" className="w-full h-full object-cover" style={{ objectPosition: 'center', transform: 'scale(1.1)', transformOrigin: 'center center' }} referrerPolicy="no-referrer" />
              </div>
              <div className="p-5">
                <div className="flex justify-between items-start mb-3">
                  <span className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-bold uppercase tracking-wider">
                    LIVE TEST
                  </span>
                </div>
                
                <h3 className="text-lg font-bold text-gray-900 mb-2">
                  The "Food Fraud" Scan
                </h3>
                
                <div className="space-y-2 text-sm mb-4">
                  <div>
                    <span className="font-semibold text-gray-700">Task:</span>
                    <span className="text-gray-600"> Capture spectral signature of premium liquids.</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Funded:</span>
                    <span className="text-gray-900 font-bold"> $150</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Reward:</span>
                    <span className="text-green-600 font-black"> $5</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Tools Needed:</span>
                    <span className="text-gray-600"> Smartphone, Spectrometer Attachment</span>
                  </div>
                  <div className="pt-1">
                    <a href="tools-and-testing.html" className="inline-block px-4 py-2 bg-blue-600 text-white text-sm font-bold rounded shadow hover:bg-blue-700 transition-colors">
                      Tools and Testing
                    </a>
                  </div>
                </div>
              </div>
            </a>
            <div className="px-5 pb-5">
              <div className="mt-4 flex flex-col items-center gap-2 border-t border-gray-100 pt-4">
                <p className="text-xs text-gray-500 text-center">
                  Original Mission created by <a href="#" className="text-purple-600 font-semibold hover:underline">RENSIC</a>.
                </p>
                <a href="post-mission.html" className="inline-flex items-center px-4 py-1.5 bg-purple-600 text-white hover:bg-purple-700 rounded-full text-[11px] font-bold transition-colors shadow-sm">
                  Submit Your Research Mission
                </a>
              </div>
            </div>
          </div>
          <div className="bounty-card rounded-xl overflow-hidden bg-white shadow-sm border border-gray-200 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 flex flex-col">
            <a href="mission-green-shield.html" className="block flex-grow">
              <div className="h-40 bg-gray-200 flex items-center justify-center relative overflow-hidden">
                <img src="https://images.pexels.com/photos/1072824/pexels-photo-1072824.jpeg?auto=compress&cs=tinysrgb&w=800&h=400&fit=crop" alt="Green-Shield Accuracy Audit" className="w-full h-full object-cover" style={{ objectPosition: 'center', transform: 'scale(1.1)', transformOrigin: 'center center' }} referrerPolicy="no-referrer" />
              </div>
              <div className="p-5">
                <div className="flex justify-between items-start mb-3">
                  <span className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-bold uppercase tracking-wider">
                    LIVE TEST
                  </span>
                </div>
                
                <h3 className="text-lg font-bold text-gray-900 mb-2">
                  The "Green-Shield" Accuracy Audit
                </h3>
                
                <div className="space-y-2 text-sm mb-4">
                  <div>
                    <span className="font-semibold text-gray-700">Task:</span>
                    <span className="text-gray-600"> Take a 5-second video circling a specific plant.</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Funded:</span>
                    <span className="text-gray-900 font-bold"> $150</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Reward:</span>
                    <span className="text-green-600 font-black"> $5</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Tools Needed:</span>
                    <span className="text-gray-600"> Smartphone, Camera App</span>
                  </div>
                  <div className="pt-1">
                    <a href="tools-and-testing.html" className="inline-block px-4 py-2 bg-blue-600 text-white text-sm font-bold rounded shadow hover:bg-blue-700 transition-colors">
                      Tools and Testing
                    </a>
                  </div>
                </div>
              </div>
            </a>
            <div className="px-5 pb-5">
              <div className="mt-4 flex flex-col items-center gap-2 border-t border-gray-100 pt-4">
                <p className="text-xs text-gray-500 text-center">
                  Original Mission created by <a href="#" className="text-purple-600 font-semibold hover:underline">RENSIC</a>.
                </p>
                <a href="post-mission.html" className="inline-flex items-center px-4 py-1.5 bg-purple-600 text-white hover:bg-purple-700 rounded-full text-[11px] font-bold transition-colors shadow-sm">
                  Submit Your Research Mission
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <h2 className="text-2xl font-bold text-gray-900 mb-6">Active Research Missions</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {missions.filter(m => m.status !== 'completed').map((mission) => (
          <div key={mission.id} className="bounty-card rounded-xl overflow-hidden bg-white shadow-sm border border-gray-200 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 flex flex-col">
            <a href={mission.filename} className="block">
              <div className="h-48 bg-gray-200 flex items-center justify-center">
                <img src={mission.image} alt={mission.title} className="w-full h-full object-cover" />
              </div>
              <div className="p-6">
                <div className="flex justify-between items-start mb-3">
                  <span className={`px-3 py-1 bg-${mission.priorityColor}-100 text-${mission.priorityColor}-700 rounded-full text-xs font-semibold`}>
                    {mission.priorityLabel}
                  </span>
                </div>
                
                <h3 className="text-xl font-bold text-gray-900 mb-4 h-14 overflow-hidden">
                  {mission.title}
                </h3>
                
                <div className="space-y-2 text-sm mb-6">
                  <div>
                    <span className="font-semibold text-gray-700">Task:</span>
                    <span className="text-gray-600 line-clamp-2"> {mission.task}</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Funding necessary:</span>
                    <span className="text-gray-900"> ${mission.funding.toLocaleString()}</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Reward starts at</span>
                    <span className="text-purple-600 font-bold"> ${mission.reward.toLocaleString()}</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Tools Needed:</span>
                    <span className="text-gray-600"> {mission.tools}</span>
                  </div>
                  <div className="pt-1">
                    <span className="inline-block px-4 py-2 bg-blue-600 text-white text-sm font-bold rounded shadow hover:bg-blue-700 transition-colors">
                      Tools and Testing
                    </span>
                  </div>
                </div>
              </div>
            </a>
            
            <div className="px-6 pb-6">
              <div className="grid grid-cols-2 gap-3">
                <a href={`${mission.filename}?role=funder`} className="bg-blue-600 text-white py-2.5 px-4 rounded-lg font-semibold text-sm hover:bg-blue-700 transition text-center flex items-center justify-center">
                  Citizen<br/>Funders
                </a>
                <a href={`${mission.filename}?role=researcher`} className="bg-purple-600 text-white py-2.5 px-4 rounded-lg font-semibold text-sm hover:bg-purple-700 transition text-center flex items-center justify-center">
                  Citizen<br/>Researchers
                </a>
              </div>
              <div className="mt-4 flex flex-col items-center gap-2">
                <p className="text-xs text-gray-500 text-center">
                  Original Mission created by {mission.id === 'open-tax-freedom' || mission.id === 'open-legal-freedom' ? (
                    <a href="https://grok.com" target="_blank" rel="noopener noreferrer" className="text-purple-600 font-semibold hover:underline">Grok</a>
                  ) : (
                    <a href="#" className="text-purple-600 font-semibold hover:underline">RENSIC</a>
                  )}.
                </p>
                <a href="post-mission.html" className="inline-flex items-center px-4 py-1.5 bg-purple-600 text-white hover:bg-purple-700 rounded-full text-[11px] font-bold transition-colors shadow-sm">
                  Submit Your Research Mission
                </a>
              </div>
            </div>
          </div>
        ))}
      </div>

      <h2 className="text-2xl font-bold text-gray-900 mt-12 mb-6">Completed Missions</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {missions.filter(m => m.status === 'completed').map((mission) => (
          <div key={mission.id} className="bounty-card rounded-xl overflow-hidden bg-white shadow-sm border border-gray-200 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 flex flex-col">
            <a href={mission.filename} className="block">
              <div className="h-48 bg-gray-200 flex items-center justify-center relative">
                <div className="absolute inset-0 z-10 flex items-center justify-center pointer-events-none">
                  <span className="text-white font-bold text-xl uppercase tracking-widest border-2 border-white px-4 py-2 bg-purple-600/60 backdrop-blur-sm transform rotate-[-5deg]">Completed</span>
                </div>
                <img src={mission.image} alt={mission.title} className="w-full h-full object-cover" />
              </div>
              <div className="p-6">
                <div className="flex justify-between items-start mb-3">
                  <span className={`px-3 py-1 bg-${mission.priorityColor}-100 text-${mission.priorityColor}-700 rounded-full text-xs font-semibold`}>
                    {mission.priorityLabel}
                  </span>
                </div>
                
                <h3 className="text-xl font-bold text-gray-900 mb-4 h-14 overflow-hidden">
                  {mission.title}
                </h3>
                
                <div className="space-y-2 text-sm mb-6">
                  <div>
                    <span className="font-semibold text-gray-700">Task:</span>
                    <span className="text-gray-600 line-clamp-2"> {mission.task}</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Funding fulfilled:</span>
                    <span className="text-gray-900"> ${mission.funding.toLocaleString()}</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Rewards given:</span>
                    <span className="text-purple-600 font-bold"> -</span>
                  </div>
                  <div>
                    <span className="font-semibold text-gray-700">Tools Used:</span>
                    <span className="text-gray-600"> {mission.tools}</span>
                  </div>
                  <div className="pt-1">
                    <span className="inline-block px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-bold rounded shadow transition-colors">
                      View Findings
                    </span>
                  </div>
                </div>
              </div>
            </a>
            
            <div className="px-6 pb-6">
              <div className="mt-4 flex flex-col items-center gap-2">
                <p className="text-xs text-gray-500 text-center">
                  Original Mission created by <a href="https://grok.com" target="_blank" rel="noopener noreferrer" className="text-purple-600 font-semibold hover:underline">Grok</a>.
                </p>
                <a href="post-mission.html" className="inline-flex items-center px-4 py-1.5 bg-purple-600 text-white hover:bg-purple-700 rounded-full text-[11px] font-bold transition-colors shadow-sm">
                  Submit Your Research Mission
                </a>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const HowItWorks = () => {
  return (
    <div id="how-it-works" className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
      <div className="text-center mb-12">
        <h2 className="text-4xl font-black uppercase tracking-tight text-gray-900">How It Works</h2>
        <p className="mt-4 text-2xl font-bold text-gray-600 uppercase tracking-wide">No Donors. No Gatekeepers.</p>
      </div>

      {/* Mobile Quick Links */}
      <div className="flex md:hidden flex-row justify-center gap-3 mb-10 flex-wrap">
        <a href="#creators" className="bg-purple-600 hover:bg-purple-700 text-white py-2 px-5 rounded-full text-sm font-bold shadow-md transition">
          Research Project Creators &darr;
        </a>
        <a href="#scientists" className="bg-green-600 hover:bg-green-700 text-white py-2 px-5 rounded-full text-sm font-bold shadow-md transition">
          Citizen Scientists &darr;
        </a>
      </div>

      <div className="flex flex-col md:flex-row gap-8 md:gap-12 relative">
        {/* Left Side: Creators */}
        <div id="creators" className="flex-1 flex flex-col scroll-mt-28">
          <div className="bg-gray-900 text-white p-4 md:p-6 rounded-xl mb-8 text-center shadow-lg flex items-center justify-center min-h-[6rem] md:min-h-[7rem]">
            <h3 className="text-lg md:text-xl font-bold">Research Project Creators submit projects, get funding.</h3>
          </div>
          
          <div className="text-center mb-8 flex flex-col justify-center min-h-[8rem] md:min-h-[9rem]">
            <h4 className="text-2xl font-bold text-gray-900 mb-3">Have an issue that needs forensic inspection?</h4>
            <p className="text-gray-600 text-sm md:text-base font-medium">Highlight an investigation | Determine cost | Set Tasks and Rewards | Collect and Inspect Data</p>
          </div>

          <div className="flex flex-col gap-6 flex-1">
            <div className="bg-white rounded-xl p-6 md:p-8 shadow-lg border border-gray-100 flex-1 flex flex-col">
              <div className="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-5">
                <span className="text-xl font-bold text-purple-600">1</span>
              </div>
              <h5 className="font-bold text-lg mb-3 text-gray-900">Highlight an investigation</h5>
              <div className="bg-gray-50 rounded-lg p-4 mb-3">
                <p className="text-gray-700 italic text-sm">
                  "Dysbiosis is at epidemic levels. We believe base cause to be long term soil radioactivity from nuclear testing, Chernobyl and Fukushima."
                </p>
              </div>
              <p className="text-gray-600 text-sm mt-auto">
                Clearly articulate the problem you want investigated. Define the scope and test or falsify the stated hypothesis.
              </p>
            </div>

            <div className="bg-white rounded-xl p-6 md:p-8 shadow-lg border border-gray-100 flex-1 flex flex-col">
              <div className="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-5">
                <span className="text-xl font-bold text-purple-600">2</span>
              </div>
              <h5 className="font-bold text-lg mb-3 text-gray-900">Determine cost</h5>
              <div className="bg-gray-50 rounded-lg p-4 mb-3">
                <p className="text-gray-700 italic text-sm">
                  "We require 500 soil tests in the midwest growing belt as independent samples tested at varying labs."
                </p>
              </div>
              <p className="text-gray-600 text-sm mt-auto">
                Calculate the resources needed for comprehensive investigation. Set realistic funding goals based on scope.
              </p>
            </div>

            <div className="bg-white rounded-xl p-6 md:p-8 shadow-lg border border-gray-100 flex-1 flex flex-col">
              <div className="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-5">
                <span className="text-xl font-bold text-purple-600">3</span>
              </div>
              <h5 className="font-bold text-lg mb-3 text-gray-900">Set Tasks and Rewards</h5>
              <div className="bg-gray-50 rounded-lg p-4 mb-3">
                <p className="text-gray-700 italic text-sm">
                  "Task is to remotely take soil samples based on instructions provided per location. Gathered samples are to be placed in Ziplock bags and mailed to 'X' with billing instructions as included for Paypal presentation and payment. Projected cost: $50.00. Reward: $100.00."
                </p>
              </div>
              <p className="text-gray-600 text-sm mt-auto">
                Break down the investigation into actionable tasks. Offer fair compensation to citizen researchers.
              </p>
            </div>

            <div className="bg-white rounded-xl p-6 md:p-8 shadow-lg border border-gray-100 flex-1 flex flex-col">
              <div className="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-5">
                <span className="text-xl font-bold text-purple-600">4</span>
              </div>
              <h5 className="font-bold text-lg mb-3 text-gray-900">Collect and Inspect Data</h5>
              <div className="bg-gray-50 rounded-lg p-4 mb-3">
                <p className="text-gray-700 italic text-sm">
                  "Data can be organized and reviewed for application. Available data can be shared with contributors, copyrighted and sold to corporations, governments and non-profits, or utilized directly to forward action on a specific cause with 'data pressure' alone."
                </p>
              </div>
              <p className="text-gray-600 text-sm mt-auto">
                Aggregate and analyze results. Use verified data to drive change, inform policy, or prove your case.
              </p>
            </div>
          </div>

          <div className="text-center mt-auto pt-8">
            <a href="post-mission.html" className="inline-block bg-purple-600 text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-purple-700 transition shadow-lg w-full md:w-auto">
              Post Your Research Mission
            </a>
          </div>
        </div>

        {/* Vertical Divider */}
        <div className="hidden md:block w-1 bg-gray-900 rounded-full opacity-20 my-4"></div>

        {/* Right Side: Scientists */}
        <div id="scientists" className="flex-1 flex flex-col mt-12 md:mt-0 scroll-mt-28">
          <div className="bg-gray-900 text-white p-4 md:p-6 rounded-xl mb-8 text-center shadow-lg flex items-center justify-center min-h-[6rem] md:min-h-[7rem]">
            <h3 className="text-lg md:text-xl font-bold">Citizen Scientists complete tasks, get paid.</h3>
          </div>
          
          <div className="text-center mb-8 flex flex-col justify-center min-h-[8rem] md:min-h-[9rem]">
            <h4 className="text-2xl font-bold text-gray-900 mb-3">Browse open missions, complete verified tasks, and receive payment upon approval.</h4>
            <p className="text-gray-600 text-sm md:text-base font-medium">Find a Mission | Do the Research | Upload &amp; Verify | Get Paid</p>
          </div>

          <div className="flex flex-col gap-6 flex-1">
            <div className="bg-white rounded-xl p-6 md:p-8 shadow-lg border border-gray-100 flex-1 flex flex-col">
              <div className="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-5">
                <span className="text-xl font-bold text-green-600">1</span>
              </div>
              <h5 className="font-bold text-lg mb-3 text-gray-900">Find a Mission</h5>
              <div className="bg-gray-50 rounded-lg p-4 mb-3">
                <p className="text-gray-700 italic text-sm">
                  "Browse the Mission Board for local or remote tasks that fit your skills, equipment, and location."
                </p>
              </div>
              <p className="text-gray-600 text-sm mt-auto">
                Select an active investigation that needs your help. Review the requirements, protocols, and the offered reward.
              </p>
            </div>

            <div className="bg-white rounded-xl p-6 md:p-8 shadow-lg border border-gray-100 flex-1 flex flex-col">
              <div className="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-5">
                <span className="text-xl font-bold text-green-600">2</span>
              </div>
              <h5 className="font-bold text-lg mb-3 text-gray-900">Do the Research</h5>
              <div className="bg-gray-50 rounded-lg p-4 mb-3">
                <p className="text-gray-700 italic text-sm">
                  "Follow the mission brief carefully. Take photos, collect physical samples, or gather digital evidence exactly as requested."
                </p>
              </div>
              <p className="text-gray-600 text-sm mt-auto">
                Execute the task with precision. Accuracy, safety, and strict adherence to the mission parameters are critical.
              </p>
            </div>

            <div className="bg-white rounded-xl p-6 md:p-8 shadow-lg border border-gray-100 flex-1 flex flex-col">
              <div className="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-5">
                <span className="text-xl font-bold text-green-600">3</span>
              </div>
              <h5 className="font-bold text-lg mb-3 text-gray-900">Upload &amp; Verify</h5>
              <div className="bg-gray-50 rounded-lg p-4 mb-3">
                <p className="text-gray-700 italic text-sm">
                  "Submit your findings through our secure portal. All data is timestamped and verified for authenticity."
                </p>
              </div>
              <p className="text-gray-600 text-sm mt-auto">
                Provide your evidence. Our system and the project creators will review your submission to ensure it meets quality standards.
              </p>
            </div>

            <div className="bg-white rounded-xl p-6 md:p-8 shadow-lg border border-gray-100 flex-1 flex flex-col">
              <div className="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-5">
                <span className="text-xl font-bold text-green-600">4</span>
              </div>
              <h5 className="font-bold text-lg mb-3 text-gray-900">Get Paid</h5>
              <div className="bg-gray-50 rounded-lg p-4 mb-3">
                <p className="text-gray-700 italic text-sm">
                  "Once verified, funds are released from escrow directly to your account. Your contribution becomes part of the immutable record."
                </p>
              </div>
              <p className="text-gray-600 text-sm mt-auto">
                Receive your reward for successful forensic inspection. Contribute verifiable field data to funded research projects and get compensated for your effort.
              </p>
            </div>
          </div>

          <div className="text-center mt-auto pt-8">
            <a href="mission-board.html" className="inline-block bg-green-600 text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-green-700 transition shadow-lg w-full md:w-auto">
              Get Paid
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};

// --- APP ---

const App = () => {
  return (
    <div className="font-sans text-gray-900 bg-gray-50">
      <main>
        <Hero />
        <BountyBoard />
        <StatsBar />
        <HowItWorks />
      </main>
    </div>
  );
}

// --- MOUNT ---

const rootElement = document.getElementById('root');
if (rootElement) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
} else {
  console.error("Failed to find root element");
}