updates

src/components/OffsetOrder.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Check, AlertCircle, ArrowLeft, Loader2, Globe2, TreePine, Waves, Factory, Wind, X } from 'lucide-react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { createOffsetOrder, getPortfolios } from '../api/wrenClient';
 import type { CurrencyCode, OffsetOrder as OffsetOrderType, Portfolio, OffsetProject } from '../types';
 import { currencies, formatCurrency, getCurrencyByCode } from '../utils/currencies';
@@ -128,26 +128,18 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
   // Calculate offset cost using the portfolio price
   const offsetCost = monetaryAmount || (portfolio ? tons * (portfolio.pricePerTon || 18) : 0);
 
-  // Simplified handler for project selection with maximum debugging
-  const handleProjectClick = (project: OffsetProject) => {
-    console.log('=== PROJECT CLICK HANDLER FIRED ===');
-    console.log('Project name:', project.name);
-    console.log('Project ID:', project.id);
-    console.log('Current selectedProject state:', selectedProject?.name || 'null');
-    
-    // Force the state update
+  // Completely simplified project selection handler
+  const handleProjectClick = (project: OffsetProject, e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    console.log('Opening project details for:', project.name);
     setSelectedProject(project);
-    
-    console.log('State updated to:', project.name);
-    console.log('=== END PROJECT CLICK HANDLER ===');
   };
 
-  // Handler for closing the lightbox
-  const handleCloseLightbox = (e: React.MouseEvent | React.TouchEvent) => {
-    if (e) e.preventDefault();
-    console.log('=== CLOSING LIGHTBOX ===');
+  // Simple lightbox close handler
+  const handleCloseLightbox = () => {
+    console.log('Closing lightbox');
     setSelectedProject(null);
-    console.log('selectedProject set to null');
   };
 
   return (
@@ -351,16 +343,13 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
                 animate={{ opacity: 1 }}
                 transition={{ duration: 0.5, delay: 0.3 }}
               >
-                {portfolio.projects.map((project, index) => (
+                {portfolio.projects.map((project) => (
                   <div
                     key={project.id}
                     className="bg-gray-50 rounded-lg p-4 hover:shadow-lg transition-all cursor-pointer border border-gray-200 hover:border-blue-300"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      console.log('Project clicked:', project.name);
-                      handleProjectClick(project);
-                    }}
+                    onClick={(e) => handleProjectClick(project, e)}
+                    role="button"
+                    tabIndex={0}
                     style={{ 
                       userSelect: 'none',
                       WebkitUserSelect: 'none',
@@ -476,28 +465,13 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
         </>
       ) : null}
 
-      {/* Debug info */}
+      {/* Simplified Lightbox Modal */}
       {selectedProject && (
-        <div className="fixed top-4 left-4 bg-red-500 text-white p-2 rounded z-50">
-          Selected: {selectedProject.name}
-        </div>
-      )}
-
-      {/* Project Lightbox Modal */}
-      <AnimatePresence>
-        {selectedProject && (
-          <motion.div 
-            className="fixed inset-0 z-50 flex items-center justify-center p-4"
-            style={{ 
-              backgroundColor: 'rgba(0, 0, 0, 0.7)',
-              backdropFilter: 'blur(4px)'
-            }}
-            onClick={(e) => handleCloseLightbox(e)}
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
+        <div 
+          className="fixed inset-0 z-[9999] flex items-center justify-center p-4"
+          style={{ backgroundColor: 'rgba(0, 0, 0, 0.8)' }}
+          onClick={handleCloseLightbox}
         >
-            {/* Modal Content */}
           <div
             className="relative bg-white rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
             onClick={(e) => e.stopPropagation()}
@@ -586,9 +560,8 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
               )}
             </div>
           </div>
-          </motion.div>
+        </div>
       )}
-      </AnimatePresence>
     </motion.div>
   );
 }