Refactor MobileOffsetOrder component for improved readability and maintainability

src/components/MobileOffsetOrder.tsx

@@ -11,8 +11,19 @@ interface Props {
   onBack: () => void;
 }
 
+interface Project {
+  id: string;
+  name: string;
+  type: string;
+  description: string;
+  location: string;
+  pricePerTon: number;
+  imageUrl: string;
+  percentage: number;
+}
+
 export function MobileOffsetOrder({ tons, monetaryAmount, currency, onBack }: Props) {
-  const [currentStep, setCurrentStep] = useState<'summary' | 'payment' | 'confirmation'>('summary');
+  const [currentStep, setCurrentStep] = useState<'summary' | 'projects' | 'payment' | 'confirmation'>('summary');
   const [loading, setLoading] = useState(false);
   const [orderData, setOrderData] = useState({
     name: '',
@@ -20,6 +31,40 @@ export function MobileOffsetOrder({ tons, monetaryAmount, currency, onBack }: Pr
     phone: ''
   });
 
+  // Dummy projects data
+  const projects: Project[] = [
+    {
+      id: '1',
+      name: 'Coastal Blue Carbon',
+      type: 'Blue Carbon',
+      description: 'Protecting and restoring coastal wetlands that capture carbon 10x faster than forests.',
+      location: 'Indonesia',
+      pricePerTon: 25,
+      imageUrl: 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?auto=format&fit=crop&q=80&w=800',
+      percentage: 0.35
+    },
+    {
+      id: '2',
+      name: 'Wind Power Initiative',
+      type: 'Renewable Energy',
+      description: 'Supporting offshore wind farms to replace fossil fuel energy generation.',
+      location: 'North Sea',
+      pricePerTon: 15,
+      imageUrl: 'https://images.unsplash.com/photo-1548337138-e87d889cc369?auto=format&fit=crop&q=80&w=800',
+      percentage: 0.30
+    },
+    {
+      id: '3',
+      name: 'Rainforest Conservation',
+      type: 'Forestry',
+      description: 'Protecting critical rainforest habitats from deforestation.',
+      location: 'Amazon Basin',
+      pricePerTon: 12,
+      imageUrl: 'https://images.unsplash.com/photo-1511884642898-4c92249e20b6?auto=format&fit=crop&q=80&w=800',
+      percentage: 0.35
+    }
+  ];
+
   // Calculate cost (using dummy pricing)
   const pricePerTon = 18; // $18 per ton
   const totalCost = monetaryAmount || (tons * pricePerTon);
@@ -30,6 +75,10 @@ export function MobileOffsetOrder({ tons, monetaryAmount, currency, onBack }: Pr
   };
 
   const handleProceedToPayment = () => {
+    setCurrentStep('projects');
+  };
+
+  const handleProceedFromProjects = () => {
     setCurrentStep('payment');
   };
 
@@ -149,6 +198,87 @@ export function MobileOffsetOrder({ tons, monetaryAmount, currency, onBack }: Pr
     </motion.div>
   );
 
+  const renderProjectsStep = () => (
+    <motion.div
+      className="space-y-6"
+      initial={{ opacity: 0, x: 20 }}
+      animate={{ opacity: 1, x: 0 }}
+      exit={{ opacity: 0, x: -20 }}
+    >
+      <div className="bg-white rounded-2xl p-6 shadow-sm">
+        <h3 className="text-lg font-semibold mb-2">Project Portfolio</h3>
+        <p className="text-sm text-gray-600 mb-4">
+          Your offset will be distributed across these verified carbon reduction projects
+        </p>
+        
+        <div className="space-y-4">
+          {projects.map((project, index) => (
+            <motion.div
+              key={project.id}
+              className="border border-gray-200 rounded-xl overflow-hidden"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.1 }}
+            >
+              <div className="relative h-32">
+                <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/60 to-transparent" />
+                <div className="absolute bottom-2 left-3 right-3">
+                  <h4 className="text-white font-semibold text-sm">{project.name}</h4>
+                  <p className="text-white/80 text-xs">{project.location}</p>
+                </div>
+              </div>
+              
+              <div className="p-4">
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-xs font-medium text-blue-600 bg-blue-50 px-2 py-1 rounded">
+                    {project.type}
+                  </span>
+                  <span className="text-sm font-semibold text-gray-900">
+                    {(project.percentage * 100).toFixed(0)}%
+                  </span>
+                </div>
+                
+                <p className="text-sm text-gray-600 mb-3">
+                  {project.description}
+                </p>
+                
+                <div className="flex items-center justify-between text-xs">
+                  <span className="text-gray-500">Price per ton</span>
+                  <span className="font-medium text-gray-900">${project.pricePerTon}</span>
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+
+      <div className="bg-blue-50 rounded-xl p-4">
+        <div className="flex items-center justify-between mb-2">
+          <span className="font-medium text-blue-900">Total CO₂ Offset</span>
+          <span className="font-bold text-blue-900">{tons.toFixed(2)} tons</span>
+        </div>
+        <div className="flex items-center justify-between">
+          <span className="font-medium text-blue-900">Portfolio Price</span>
+          <span className="font-bold text-lg text-blue-900">
+            {formatCurrency(totalCost, targetCurrency)}
+          </span>
+        </div>
+      </div>
+
+      <button
+        onClick={handleProceedFromProjects}
+        className="w-full bg-gradient-to-r from-blue-500 to-blue-600 text-white py-4 px-6 rounded-xl font-semibold text-lg shadow-md hover:shadow-lg transition-all"
+      >
+        Continue to Payment
+      </button>
+    </motion.div>
+  );
+
   const renderPaymentStep = () => (
     <motion.div
       className="space-y-6"
@@ -340,6 +470,7 @@ export function MobileOffsetOrder({ tons, monetaryAmount, currency, onBack }: Pr
           <div className="flex items-center space-x-3">
             <h1 className="text-lg font-bold text-gray-900">
               {currentStep === 'summary' ? 'Order Summary' : 
+               currentStep === 'projects' ? 'Project Portfolio' :
                currentStep === 'payment' ? 'Payment' : 
                'Order Confirmed'}
             </h1>
@@ -353,7 +484,10 @@ export function MobileOffsetOrder({ tons, monetaryAmount, currency, onBack }: Pr
           <div className="px-4 pb-3">
             <div className="flex items-center space-x-2">
               <div className={`flex-1 h-2 rounded-full ${
-                currentStep === 'summary' ? 'bg-blue-200' : 'bg-blue-500'
+                ['summary', 'projects', 'payment'].includes(currentStep) ? 'bg-blue-500' : 'bg-gray-200'
+              }`} />
+              <div className={`flex-1 h-2 rounded-full ${
+                ['projects', 'payment'].includes(currentStep) ? 'bg-blue-500' : 'bg-gray-200'
               }`} />
               <div className={`flex-1 h-2 rounded-full ${
                 currentStep === 'payment' ? 'bg-blue-500' : 'bg-gray-200'
@@ -366,6 +500,7 @@ export function MobileOffsetOrder({ tons, monetaryAmount, currency, onBack }: Pr
       <div className="p-4 pb-20">
         <AnimatePresence mode="wait">
           {currentStep === 'summary' && renderSummaryStep()}
+          {currentStep === 'projects' && renderProjectsStep()}
           {currentStep === 'payment' && renderPaymentStep()}
           {currentStep === 'confirmation' && renderConfirmationStep()}
         </AnimatePresence>