From bf38357c74ec9071af91e31701f9bb37265f40ca Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Tue, 3 Jun 2025 15:21:29 +0200
Subject: [PATCH] updates

---
 src/components/OffsetOrder.tsx | 392 +++++++++++++++------------------
 1 file changed, 179 insertions(+), 213 deletions(-)

diff --git a/src/components/OffsetOrder.tsx b/src/components/OffsetOrder.tsx
index e1e0e9f..b53fe37 100644
--- a/src/components/OffsetOrder.tsx
+++ b/src/components/OffsetOrder.tsx
@@ -40,207 +40,6 @@ const ProjectTypeIcon = ({ project }: ProjectTypeIconProps) => {
   }
 };
 
-// Project card component to improve readability and ensure consistent behavior
-const ProjectCard = ({ 
-  project, 
-  index, 
-  onSelect 
-}: { 
-  project: OffsetProject; 
-  index: number; 
-  onSelect: (project: OffsetProject) => void;
-}) => {
-  // Handler to ensure event propagation is stopped correctly
-  const handleClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    console.log('Project clicked:', project.name);
-    onSelect(project);
-  };
-
-  return (
-    <motion.button 
-      type="button"
-      key={project.id} 
-      className="bg-gray-50 rounded-lg p-4 hover:shadow-lg transition-all cursor-pointer text-left w-full flex flex-col"
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.5, delay: 0.1 * index }}
-      whileHover={{ scale: 1.03 }}
-      whileTap={{ scale: 0.98 }}
-      onClick={handleClick}
-      aria-label={`View details for ${project.name}`}
-    >
-      <div className="flex items-center justify-between mb-3">
-        <div className="flex items-center space-x-2">
-          <ProjectTypeIcon project={project} />
-          <h4 className="font-semibold text-gray-900">{project.name}</h4>
-        </div>
-        {project.percentage && (
-          <span className="text-sm text-gray-600 font-medium">
-            {(project.percentage * 100).toFixed(1)}%
-          </span>
-        )}
-      </div>
-      {project.imageUrl && (
-        <div className="relative h-32 mb-3 rounded-lg overflow-hidden">
-          <img
-            src={project.imageUrl}
-            alt={project.name}
-            className="absolute inset-0 w-full h-full object-cover transition-transform duration-300 hover:scale-110"
-          />
-        </div>
-      )}
-      <p className="text-sm text-gray-600 mb-3">
-        {project.shortDescription || project.description}
-      </p>
-      <div className="space-y-1 text-sm mt-3">
-        <div className="flex justify-between">
-          <span className="text-gray-500">Price per ton:</span>
-          <span className="text-gray-900 font-medium">
-            ${project.pricePerTon.toFixed(2)}
-          </span>
-        </div>
-      </div>
-      <div className="mt-3 text-center">
-        <span className="text-xs text-blue-600 font-medium">Click for details</span>
-      </div>
-    </motion.button>
-  );
-};
-
-// Lightbox modal component
-const ProjectLightbox = ({
-  project,
-  onClose
-}: {
-  project: OffsetProject | null;
-  onClose: () => void;
-}) => {
-  // Close on Escape key
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-    };
-    
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [onClose]);
-
-  // Prevent body scrolling when modal is open
-  useEffect(() => {
-    document.body.style.overflow = 'hidden';
-    return () => {
-      document.body.style.overflow = 'auto';
-    };
-  }, []);
-
-  if (!project) return null;
-  
-  return (
-    <div 
-      className="fixed inset-0 z-50 flex items-center justify-center p-4"
-      onClick={onClose}
-    >
-      {/* Backdrop */}
-      <div 
-        className="absolute inset-0 bg-black bg-opacity-50"
-        aria-hidden="true"
-      />
-      
-      {/* Modal Content */}
-      <div
-        className="relative bg-white rounded-lg shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto z-60"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Close Button */}
-        <button
-          onClick={onClose}
-          className="absolute top-4 right-4 p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors z-10"
-          aria-label="Close details"
-        >
-          <X size={20} />
-        </button>
-        
-        {/* Project Image */}
-        {project.imageUrl && (
-          <div className="relative h-64 md:h-80 overflow-hidden rounded-t-lg">
-            <img
-              src={project.imageUrl}
-              alt={project.name}
-              className="w-full h-full object-cover"
-            />
-            <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
-            <div className="absolute bottom-4 left-4 right-4">
-              <h3 className="text-2xl font-bold text-white mb-2">{project.name}</h3>
-              <div className="flex items-center space-x-2">
-                <ProjectTypeIcon project={project} />
-                <span className="text-white/90">{project.type || 'Environmental Project'}</span>
-              </div>
-            </div>
-          </div>
-        )}
-        
-        {/* Project Details */}
-        <div className="p-6">
-          {!project.imageUrl && (
-            <>
-              <h3 className="text-2xl font-bold text-gray-900 mb-2">{project.name}</h3>
-              <div className="flex items-center space-x-2 mb-4">
-                <ProjectTypeIcon project={project} />
-                <span className="text-gray-600">{project.type || 'Environmental Project'}</span>
-              </div>
-            </>
-          )}
-          
-          <p className="text-gray-700 mb-6">
-            {project.description || project.shortDescription}
-          </p>
-          
-          <div className="grid grid-cols-2 gap-4 mb-6">
-            <div className="bg-gray-50 p-4 rounded-lg">
-              <p className="text-sm text-gray-600 mb-1">Price per Ton</p>
-              <p className="text-xl font-bold text-gray-900">${project.pricePerTon.toFixed(2)}</p>
-            </div>
-            {project.percentage && (
-              <div className="bg-gray-50 p-4 rounded-lg">
-                <p className="text-sm text-gray-600 mb-1">Portfolio Allocation</p>
-                <p className="text-xl font-bold text-gray-900">{(project.percentage * 100).toFixed(1)}%</p>
-              </div>
-            )}
-          </div>
-          
-          {(project.location || project.verificationStandard) && (
-            <div className="space-y-3 mb-6">
-              {project.location && (
-                <div className="flex items-center justify-between">
-                  <span className="text-gray-600">Location:</span>
-                  <span className="font-medium text-gray-900">{project.location}</span>
-                </div>
-              )}
-              {project.verificationStandard && (
-                <div className="flex items-center justify-between">
-                  <span className="text-gray-600">Verification Standard:</span>
-                  <span className="font-medium text-gray-900">{project.verificationStandard}</span>
-                </div>
-              )}
-            </div>
-          )}
-          
-          {project.impactMetrics && project.impactMetrics.co2Reduced > 0 && (
-            <div className="bg-blue-50 p-4 rounded-lg">
-              <p className="text-sm text-blue-700 mb-1">Impact Metrics</p>
-              <p className="text-lg font-semibold text-blue-900">
-                {project.impactMetrics.co2Reduced.toLocaleString()} tons CO₂ reduced
-              </p>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
 export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Props) {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -329,16 +128,26 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
   // Calculate offset cost using the portfolio price
   const offsetCost = monetaryAmount || (portfolio ? tons * (portfolio.pricePerTon || 18) : 0);
 
-  // Handler for project selection
-  const handleProjectSelect = (project: OffsetProject) => {
-    console.log(`Setting selected project: ${project.name}`);
+  // 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
     setSelectedProject(project);
+    
+    console.log('State updated to:', project.name);
+    console.log('=== END PROJECT CLICK HANDLER ===');
   };
 
   // Handler for closing the lightbox
-  const handleCloseLightbox = () => {
-    console.log('Closing lightbox');
+  const handleCloseLightbox = (e: React.MouseEvent | React.TouchEvent) => {
+    if (e) e.preventDefault();
+    console.log('=== CLOSING LIGHTBOX ===');
     setSelectedProject(null);
+    console.log('selectedProject set to null');
   };
 
   return (
@@ -543,12 +352,58 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
                 transition={{ duration: 0.5, delay: 0.3 }}
               >
                 {portfolio.projects.map((project, index) => (
-                  <ProjectCard 
+                  <div
                     key={project.id}
-                    project={project}
-                    index={index}
-                    onSelect={handleProjectSelect}
-                  />
+                    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);
+                    }}
+                    style={{ 
+                      userSelect: 'none',
+                      WebkitUserSelect: 'none',
+                      msUserSelect: 'none',
+                      MozUserSelect: 'none'
+                    }}
+                  >
+                    <div className="flex items-center justify-between mb-3">
+                      <div className="flex items-center space-x-2">
+                        <ProjectTypeIcon project={project} />
+                        <h4 className="font-semibold text-gray-900">{project.name}</h4>
+                      </div>
+                      {project.percentage && (
+                        <span className="text-sm text-gray-600 font-medium">
+                          {(project.percentage * 100).toFixed(1)}%
+                        </span>
+                      )}
+                    </div>
+                    {project.imageUrl && (
+                      <div className="relative h-32 mb-3 rounded-lg overflow-hidden">
+                        <img
+                          src={project.imageUrl}
+                          alt={project.name}
+                          className="absolute inset-0 w-full h-full object-cover transition-transform duration-300 hover:scale-110"
+                          style={{ pointerEvents: 'none' }}
+                        />
+                      </div>
+                    )}
+                    <p className="text-sm text-gray-600 mb-3">
+                      {project.shortDescription || project.description}
+                    </p>
+                    <div className="space-y-1 text-sm mt-3">
+                      <div className="flex justify-between">
+                        <span className="text-gray-500">Price per ton:</span>
+                        <span className="text-gray-900 font-medium">
+                          ${project.pricePerTon.toFixed(2)}
+                        </span>
+                      </div>
+                    </div>
+                    <div className="mt-3 text-center">
+                      <span className="text-xs text-blue-600 font-medium">👆 Click for details</span>
+                    </div>
+                  </div>
                 ))}
               </motion.div>
             )}
@@ -621,8 +476,119 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
         </>
       ) : null}
 
-      {/* Project Lightbox Modal - Rendered directly without AnimatePresence for better compatibility */}
-      {selectedProject && <ProjectLightbox project={selectedProject} onClose={handleCloseLightbox} />}
+      {/* Debug info */}
+      {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 }}
+          >
+            {/* 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()}
+            >
+              {/* Close Button */}
+              <button
+                onClick={handleCloseLightbox}
+                className="absolute top-4 right-4 p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors z-10"
+                aria-label="Close details"
+              >
+                <X size={20} />
+              </button>
+              
+              {/* Project Image */}
+              {selectedProject.imageUrl && (
+                <div className="relative h-64 md:h-80 overflow-hidden rounded-t-lg">
+                  <img
+                    src={selectedProject.imageUrl}
+                    alt={selectedProject.name}
+                    className="w-full h-full object-cover"
+                  />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
+                  <div className="absolute bottom-4 left-4 right-4">
+                    <h3 className="text-2xl font-bold text-white mb-2">{selectedProject.name}</h3>
+                    <div className="flex items-center space-x-2">
+                      <ProjectTypeIcon project={selectedProject} />
+                      <span className="text-white/90">{selectedProject.type || 'Environmental Project'}</span>
+                    </div>
+                  </div>
+                </div>
+              )}
+            
+            {/* Project Details */}
+            <div className="p-6">
+              {!selectedProject.imageUrl && (
+                <>
+                  <h3 className="text-2xl font-bold text-gray-900 mb-2">{selectedProject.name}</h3>
+                  <div className="flex items-center space-x-2 mb-4">
+                    <ProjectTypeIcon project={selectedProject} />
+                    <span className="text-gray-600">{selectedProject.type || 'Environmental Project'}</span>
+                  </div>
+                </>
+              )}
+              
+              <p className="text-gray-700 mb-6">
+                {selectedProject.description || selectedProject.shortDescription}
+              </p>
+              
+              <div className="grid grid-cols-2 gap-4 mb-6">
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <p className="text-sm text-gray-600 mb-1">Price per Ton</p>
+                  <p className="text-xl font-bold text-gray-900">${selectedProject.pricePerTon.toFixed(2)}</p>
+                </div>
+                {selectedProject.percentage && (
+                  <div className="bg-gray-50 p-4 rounded-lg">
+                    <p className="text-sm text-gray-600 mb-1">Portfolio Allocation</p>
+                    <p className="text-xl font-bold text-gray-900">{(selectedProject.percentage * 100).toFixed(1)}%</p>
+                  </div>
+                )}
+              </div>
+              
+              {(selectedProject.location || selectedProject.verificationStandard) && (
+                <div className="space-y-3 mb-6">
+                  {selectedProject.location && (
+                    <div className="flex items-center justify-between">
+                      <span className="text-gray-600">Location:</span>
+                      <span className="font-medium text-gray-900">{selectedProject.location}</span>
+                    </div>
+                  )}
+                  {selectedProject.verificationStandard && (
+                    <div className="flex items-center justify-between">
+                      <span className="text-gray-600">Verification Standard:</span>
+                      <span className="font-medium text-gray-900">{selectedProject.verificationStandard}</span>
+                    </div>
+                  )}
+                </div>
+              )}
+              
+              {selectedProject.impactMetrics && selectedProject.impactMetrics.co2Reduced > 0 && (
+                <div className="bg-blue-50 p-4 rounded-lg">
+                  <p className="text-sm text-blue-700 mb-1">Impact Metrics</p>
+                  <p className="text-lg font-semibold text-blue-900">
+                    {selectedProject.impactMetrics.co2Reduced.toLocaleString()} tons CO₂ reduced
+                  </p>
+                </div>
+              )}
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </motion.div>
   );
 }