diff --git a/src/components/MobileOffsetOrder.tsx b/src/components/MobileOffsetOrder.tsx
index 5f053d6..cb29624 100644
--- a/src/components/MobileOffsetOrder.tsx
+++ b/src/components/MobileOffsetOrder.tsx
@@ -1,8 +1,11 @@
-import React, { useState } from 'react';
-import { Check, ArrowLeft, Loader2, CreditCard, User, Mail, Phone } from 'lucide-react';
+import React, { useState, useEffect, useCallback } from 'react';
+import { Check, ArrowLeft, Loader2, User, Mail, Phone, Globe2, TreePine, Waves, Factory, Wind, X, AlertCircle } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
-import type { CurrencyCode } from '../types';
+import { createOffsetOrder, getPortfolios } from '../api/wrenClient';
+import type { CurrencyCode, OffsetOrder as OffsetOrderType, Portfolio, OffsetProject } from '../types';
 import { currencies, formatCurrency, getCurrencyByCode } from '../utils/currencies';
+import { config } from '../utils/config';
+import { sendFormspreeEmail } from '../utils/email';
 
 interface Props {
   tons: number;
@@ -11,89 +14,130 @@ interface Props {
   onBack: () => void;
 }
 
-interface Project {
-  id: string;
-  name: string;
-  type: string;
-  description: string;
-  location: string;
-  pricePerTon: number;
-  imageUrl: string;
-  percentage: number;
+interface ProjectTypeIconProps {
+  project: OffsetProject;
 }
 
+const ProjectTypeIcon = ({ project }: ProjectTypeIconProps) => {
+  if (!project || !project.type) {
+    return <Globe2 className="text-blue-500" size={16} />;
+  }
+
+  const type = project.type.toLowerCase();
+  
+  switch (type) {
+    case 'direct air capture':
+      return <Factory className="text-purple-500" size={16} />;
+    case 'blue carbon':
+      return <Waves className="text-blue-500" size={16} />;
+    case 'renewable energy':
+      return <Wind className="text-green-500" size={16} />;
+    case 'forestry':
+      return <TreePine className="text-green-500" size={16} />;
+    default:
+      return <Globe2 className="text-blue-500" size={16} />;
+  }
+};
+
 export function MobileOffsetOrder({ tons, monetaryAmount, currency, onBack }: Props) {
-  const [currentStep, setCurrentStep] = useState<'summary' | 'projects' | 'payment' | 'confirmation'>('summary');
+  const [currentStep, setCurrentStep] = useState<'summary' | 'projects' | 'confirmation'>('summary');
   const [loading, setLoading] = useState(false);
-  const [orderData, setOrderData] = useState({
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+  const [order, setOrder] = useState<OffsetOrderType | null>(null);
+  const [portfolio, setPortfolio] = useState<Portfolio | null>(null);
+  const [loadingPortfolio, setLoadingPortfolio] = useState(true);
+  const [selectedProject, setSelectedProject] = useState<OffsetProject | null>(null);
+  const [formData, setFormData] = useState({
     name: '',
     email: '',
-    phone: ''
+    phone: '',
+    company: '',
+    message: `I would like to offset ${tons.toFixed(2)} tons of CO2 from my yacht's emissions.`
   });
 
-  // 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
+  useEffect(() => {
+    if (!config.wrenApiKey) {
+      setError('Carbon offset service is currently unavailable. Please use our contact form to request offsetting.');
+      setLoadingPortfolio(false);
+      return;
     }
-  ];
+    fetchPortfolio();
+  }, []);
 
-  // Calculate cost (using dummy pricing)
-  const pricePerTon = 18; // $18 per ton
-  const totalCost = monetaryAmount || (tons * pricePerTon);
-  const targetCurrency = getCurrencyByCode(currency);
-
-  const handleInputChange = (field: keyof typeof orderData, value: string) => {
-    setOrderData(prev => ({ ...prev, [field]: value }));
+  const fetchPortfolio = async () => {
+    try {
+      const allPortfolios = await getPortfolios();
+      
+      if (!allPortfolios || allPortfolios.length === 0) {
+        throw new Error('No portfolios available');
+      }
+      
+      const puffinPortfolio = allPortfolios.find(p => 
+        p.name.toLowerCase().includes('puffin') || 
+        p.name.toLowerCase().includes('maritime')
+      );
+      
+      if (puffinPortfolio) {
+        console.log('[MobileOffsetOrder] Found Puffin portfolio with ID:', puffinPortfolio.id);
+        setPortfolio(puffinPortfolio);
+      } else {
+        console.log('[MobileOffsetOrder] No Puffin portfolio found, using first available portfolio with ID:', allPortfolios[0].id);
+        setPortfolio(allPortfolios[0]);
+      }
+    } catch (err) {
+      setError('Failed to fetch portfolio information. Please try again.');
+    } finally {
+      setLoadingPortfolio(false);
+    }
   };
 
-  const handleProceedToPayment = () => {
+  const handleOffsetOrder = async () => {
+    if (!portfolio) return;
+    
+    setLoading(true);
+    setError(null);
+    
+    try {
+      const newOrder = await createOffsetOrder(portfolio.id, tons);
+      setOrder(newOrder);
+      setSuccess(true);
+      setCurrentStep('confirmation');
+    } catch (err) {
+      setError('Failed to create offset order. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const renderPortfolioPrice = (portfolio: Portfolio) => {
+    try {
+      const pricePerTon = portfolio.pricePerTon || 18;
+      const targetCurrency = getCurrencyByCode(currency);
+      return formatCurrency(pricePerTon, targetCurrency);
+    } catch (err) {
+      console.error('Error formatting portfolio price:', err);
+      return formatCurrency(18, currencies.USD);
+    }
+  };
+
+  const offsetCost = monetaryAmount || (portfolio ? tons * (portfolio.pricePerTon || 18) : 0);
+  const targetCurrency = getCurrencyByCode(currency);
+
+  const handleInputChange = (field: keyof typeof formData, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  const handleProceedToProjects = () => {
     setCurrentStep('projects');
   };
 
-  const handleProceedFromProjects = () => {
-    setCurrentStep('payment');
-  };
+  const handleProjectClick = useCallback((project: OffsetProject) => {
+    setSelectedProject(project);
+  }, []);
 
-  const handlePlaceOrder = async () => {
-    setLoading(true);
-    
-    // Simulate API call
-    await new Promise(resolve => setTimeout(resolve, 2000));
-    
-    setLoading(false);
-    setCurrentStep('confirmation');
-  };
-
-  const generateOrderId = () => {
-    return 'PO-' + Date.now().toString().slice(-8);
+  const handleCloseLightbox = () => {
+    setSelectedProject(null);
   };
 
   const renderSummaryStep = () => (
@@ -103,98 +147,154 @@ export function MobileOffsetOrder({ tons, monetaryAmount, currency, onBack }: Pr
       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-4">Offset Summary</h3>
-        
-        <div className="space-y-4">
-          <div className="flex justify-between items-center p-4 bg-blue-50 rounded-xl">
+      {error && !config.wrenApiKey ? (
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-6">
+          <h3 className="text-lg font-semibold text-blue-900 mb-4">
+            Contact Us for Offsetting
+          </h3>
+          <p className="text-blue-700 mb-4 text-sm">
+            Our automated offsetting service is temporarily unavailable. Please fill out the form below and our team will help you offset your emissions.
+          </p>
+          <form onSubmit={async (e) => {
+            e.preventDefault();
+            setLoading(true);
+            try {
+              await sendFormspreeEmail(formData, 'offset');
+              setSuccess(true);
+              setCurrentStep('confirmation');
+            } catch (err) {
+              setError('Failed to send request. Please try again.');
+            } finally {
+              setLoading(false);
+            }
+          }} className="space-y-4">
             <div>
-              <div className="font-semibold text-blue-900">CO₂ to Offset</div>
-              <div className="text-sm text-blue-600">From your yacht emissions</div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Name *
+              </label>
+              <input
+                type="text"
+                required
+                value={formData.name}
+                onChange={(e) => handleInputChange('name', e.target.value)}
+                className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              />
             </div>
-            <div className="text-xl font-bold text-blue-900">
-              {tons.toFixed(2)} tons
-            </div>
-          </div>
-
-          <div className="flex justify-between items-center p-4 bg-green-50 rounded-xl">
             <div>
-              <div className="font-semibold text-green-900">Price per Ton</div>
-              <div className="text-sm text-green-600">Verified carbon credits</div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Email *
+              </label>
+              <input
+                type="email"
+                required
+                value={formData.email}
+                onChange={(e) => handleInputChange('email', e.target.value)}
+                className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              />
             </div>
-            <div className="text-xl font-bold text-green-900">
-              {formatCurrency(pricePerTon, targetCurrency)}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Phone
+              </label>
+              <input
+                type="tel"
+                value={formData.phone}
+                onChange={(e) => handleInputChange('phone', e.target.value)}
+                className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              />
             </div>
-          </div>
-
-          <div className="border-t pt-4">
-            <div className="flex justify-between items-center">
-              <span className="text-lg font-semibold text-gray-900">Total Cost</span>
-              <span className="text-2xl font-bold text-gray-900">
-                {formatCurrency(totalCost, targetCurrency)}
-              </span>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Message
+              </label>
+              <textarea
+                rows={3}
+                value={formData.message}
+                onChange={(e) => handleInputChange('message', e.target.value)}
+                className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              />
             </div>
+            <button
+              type="submit"
+              disabled={loading}
+              className={`w-full flex items-center justify-center bg-blue-500 text-white py-3 rounded-lg transition-colors ${
+                loading ? 'opacity-50 cursor-not-allowed' : 'hover:bg-blue-600'
+              }`}
+            >
+              {loading ? (
+                <>
+                  <Loader2 className="animate-spin mr-2" size={20} />
+                  Sending Request...
+                </>
+              ) : (
+                'Send Offset Request'
+              )}
+            </button>
+          </form>
+        </div>
+      ) : error ? (
+        <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+          <div className="flex items-center space-x-2">
+            <AlertCircle className="text-red-500" size={20} />
+            <p className="text-red-700 text-sm">{error}</p>
           </div>
         </div>
-      </div>
-
-      <div className="bg-white rounded-2xl p-6 shadow-sm">
-        <h3 className="text-lg font-semibold mb-4">Your Details</h3>
-        
-        <div className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              <User size={16} className="inline mr-2" />
-              Full Name
-            </label>
-            <input
-              type="text"
-              value={orderData.name}
-              onChange={(e) => handleInputChange('name', e.target.value)}
-              placeholder="Enter your full name"
-              className="w-full py-3 px-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              required
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              <Mail size={16} className="inline mr-2" />
-              Email Address
-            </label>
-            <input
-              type="email"
-              value={orderData.email}
-              onChange={(e) => handleInputChange('email', e.target.value)}
-              placeholder="Enter your email"
-              className="w-full py-3 px-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              required
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              <Phone size={16} className="inline mr-2" />
-              Phone Number (Optional)
-            </label>
-            <input
-              type="tel"
-              value={orderData.phone}
-              onChange={(e) => handleInputChange('phone', e.target.value)}
-              placeholder="Enter your phone number"
-              className="w-full py-3 px-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            />
-          </div>
+      ) : loadingPortfolio ? (
+        <div className="flex justify-center items-center py-12">
+          <Loader2 className="animate-spin text-blue-500" size={32} />
+          <span className="ml-2 text-gray-600">Loading portfolio information...</span>
         </div>
-      </div>
+      ) : portfolio ? (
+        <>
+          <div className="bg-white rounded-2xl p-6 shadow-sm">
+            <h3 className="text-lg font-semibold mb-4">Offset Summary</h3>
+            
+            <div className="space-y-4">
+              <div className="flex justify-between items-center p-4 bg-blue-50 rounded-xl">
+                <div>
+                  <div className="font-semibold text-blue-900">CO₂ to Offset</div>
+                  <div className="text-sm text-blue-600">From your yacht emissions</div>
+                </div>
+                <div className="text-xl font-bold text-blue-900">
+                  {tons.toFixed(2)} tons
+                </div>
+              </div>
 
-      <button
-        onClick={handleProceedToPayment}
-        disabled={!orderData.name || !orderData.email}
-        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 disabled:opacity-50 disabled:cursor-not-allowed"
-      >
-        Proceed to Payment
-      </button>
+              <div className="flex justify-between items-center p-4 bg-green-50 rounded-xl">
+                <div>
+                  <div className="font-semibold text-green-900">Price per Ton</div>
+                  <div className="text-sm text-green-600">Verified carbon credits</div>
+                </div>
+                <div className="text-xl font-bold text-green-900">
+                  {renderPortfolioPrice(portfolio)}
+                </div>
+              </div>
+
+              <div className="border-t pt-4">
+                <div className="flex justify-between items-center">
+                  <span className="text-lg font-semibold text-gray-900">Total Cost</span>
+                  <span className="text-2xl font-bold text-gray-900">
+                    {formatCurrency(offsetCost, targetCurrency)}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-gray-50 rounded-xl p-4">
+            <h4 className="font-semibold text-gray-900 mb-2">Portfolio</h4>
+            <p className="text-sm text-gray-600">{portfolio.name}</p>
+            <p className="text-xs text-gray-500 mt-1">{portfolio.description}</p>
+          </div>
+
+          <button
+            onClick={handleProceedToProjects}
+            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"
+          >
+            View Projects & Continue
+          </button>
+        </>
+      ) : null}
     </motion.div>
   );
 
@@ -205,180 +305,104 @@ export function MobileOffsetOrder({ tons, monetaryAmount, currency, onBack }: Pr
       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>
+      {portfolio && (
+        <>
+          <div className="bg-white rounded-2xl p-6 shadow-sm">
+            <h3 className="text-lg font-semibold mb-2">{portfolio.name}</h3>
+            <p className="text-sm text-gray-600 mb-4">
+              Your offset will be distributed across these verified carbon reduction projects
+            </p>
+            
+            {portfolio.projects && portfolio.projects.length > 0 && (
+              <div className="space-y-4">
+                {portfolio.projects.map((project, index) => (
+                  <motion.div
+                    key={project.id || `project-${index}`}
+                    className="border border-gray-200 rounded-xl overflow-hidden cursor-pointer hover:border-blue-400 transition-colors"
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: index * 0.1 }}
+                    onClick={() => handleProjectClick(project)}
+                  >
+                    {project.imageUrl && (
+                      <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>
+                        </div>
+                      </div>
+                    )}
+                    
+                    <div className="p-4">
+                      {!project.imageUrl && (
+                        <h4 className="font-semibold text-gray-900 mb-2">{project.name}</h4>
+                      )}
+                      
+                      <div className="flex items-center justify-between mb-2">
+                        <div className="flex items-center space-x-2">
+                          <ProjectTypeIcon project={project} />
+                          <span className="text-xs font-medium text-gray-600">
+                            {project.type || 'Environmental Project'}
+                          </span>
+                        </div>
+                        {project.percentage && (
+                          <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 line-clamp-2">
+                        {project.shortDescription || 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.toFixed(2)}</span>
+                      </div>
+                    </div>
+                  </motion.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>
+
+          <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(offsetCost, targetCurrency)}
+              </span>
+            </div>
+          </div>
+
+          <button
+            onClick={handleOffsetOrder}
+            disabled={loading}
+            className={`w-full bg-gradient-to-r from-green-500 to-green-600 text-white py-4 px-6 rounded-xl font-semibold text-lg shadow-md hover:shadow-lg transition-all ${
+              loading ? 'opacity-50 cursor-not-allowed' : ''
+            }`}
+          >
+            {loading ? (
+              <div className="flex items-center justify-center">
+                <Loader2 className="animate-spin mr-2" size={20} />
+                Processing...
               </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"
-      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-4 flex items-center">
-          <CreditCard size={20} className="mr-2" />
-          Payment Information
-        </h3>
-        
-        <div className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              Card Number
-            </label>
-            <input
-              type="text"
-              placeholder="1234 5678 9012 3456"
-              className="w-full py-3 px-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            />
-          </div>
-
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Expiry
-              </label>
-              <input
-                type="text"
-                placeholder="MM/YY"
-                className="w-full py-3 px-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                CVV
-              </label>
-              <input
-                type="text"
-                placeholder="123"
-                className="w-full py-3 px-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              />
-            </div>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
-              Cardholder Name
-            </label>
-            <input
-              type="text"
-              value={orderData.name}
-              className="w-full py-3 px-4 border border-gray-300 rounded-xl bg-gray-50"
-              readOnly
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className="bg-gray-50 rounded-2xl p-6">
-        <h4 className="font-semibold mb-3">Order Summary</h4>
-        <div className="space-y-2">
-          <div className="flex justify-between">
-            <span className="text-gray-600">CO₂ Offset:</span>
-            <span className="font-medium">{tons.toFixed(2)} tons</span>
-          </div>
-          <div className="flex justify-between">
-            <span className="text-gray-600">Total:</span>
-            <span className="font-bold text-lg">
-              {formatCurrency(totalCost, targetCurrency)}
-            </span>
-          </div>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-2 gap-3">
-        <button
-          onClick={() => setCurrentStep('summary')}
-          className="py-3 px-4 border border-gray-300 text-gray-700 rounded-xl font-medium hover:bg-gray-50 transition-colors"
-        >
-          Back
-        </button>
-        <button
-          onClick={handlePlaceOrder}
-          disabled={loading}
-          className="py-3 px-4 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-xl font-semibold hover:shadow-lg transition-all disabled:opacity-50"
-        >
-          {loading ? (
-            <div className="flex items-center justify-center">
-              <Loader2 className="animate-spin mr-2" size={20} />
-              Processing...
-            </div>
-          ) : (
-            'Place Order'
-          )}
-        </button>
-      </div>
+            ) : (
+              'Confirm Offset Order'
+            )}
+          </button>
+        </>
+      )}
     </motion.div>
   );
 
@@ -395,42 +419,52 @@ export function MobileOffsetOrder({ tons, monetaryAmount, currency, onBack }: Pr
         </div>
 
         <h3 className="text-2xl font-bold text-gray-900 mb-4">
-          Order Confirmed!
+          {order ? 'Offset Order Successful!' : 'Request Sent!'}
         </h3>
         
         <p className="text-gray-600 mb-6">
-          Congratulations! You've successfully offset {tons.toFixed(2)} tons of CO₂ from your yacht emissions.
+          {order 
+            ? "Your order has been processed successfully. You'll receive a confirmation email shortly."
+            : "Your offset request has been sent. Our team will contact you shortly to complete the process."
+          }
         </p>
 
-        <div className="bg-gray-50 rounded-xl p-6 mb-6">
-          <h4 className="font-semibold mb-4">Order Details</h4>
-          <div className="space-y-3 text-left">
-            <div className="flex justify-between">
-              <span className="text-gray-600">Order ID:</span>
-              <span className="font-mono font-medium">{generateOrderId()}</span>
-            </div>
-            <div className="flex justify-between">
-              <span className="text-gray-600">CO₂ Offset:</span>
-              <span className="font-medium">{tons.toFixed(2)} tons</span>
-            </div>
-            <div className="flex justify-between">
-              <span className="text-gray-600">Amount Paid:</span>
-              <span className="font-medium">
-                {formatCurrency(totalCost, targetCurrency)}
-              </span>
-            </div>
-            <div className="flex justify-between">
-              <span className="text-gray-600">Email:</span>
-              <span className="font-medium">{orderData.email}</span>
+        {order && (
+          <div className="bg-gray-50 rounded-xl p-6 mb-6">
+            <h4 className="font-semibold mb-4">Order Details</h4>
+            <div className="space-y-3 text-left">
+              <div className="flex justify-between">
+                <span className="text-gray-600">Order ID:</span>
+                <span className="font-mono font-medium">{order.id}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600">CO₂ Offset:</span>
+                <span className="font-medium">{order.tons} tons</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600">Amount:</span>
+                <span className="font-medium">
+                  {formatCurrency(order.amountCharged / 100, currencies[order.currency])}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600">Portfolio:</span>
+                <span className="font-medium">{order.portfolio.name}</span>
+              </div>
             </div>
           </div>
-        </div>
+        )}
 
-        <div className="bg-blue-50 rounded-xl p-4 mb-6">
-          <p className="text-sm text-blue-800">
-            📧 A confirmation email has been sent to {orderData.email} with your certificate and receipt.
-          </p>
-        </div>
+        {formData.email && (
+          <div className="bg-blue-50 rounded-xl p-4 mb-6">
+            <p className="text-sm text-blue-800">
+              📧 {order 
+                ? `A confirmation email has been sent to ${formData.email}`
+                : `We'll contact you at ${formData.email}`
+              }
+            </p>
+          </div>
+        )}
       </div>
 
       <button
@@ -454,7 +488,7 @@ export function MobileOffsetOrder({ tons, monetaryAmount, currency, onBack }: Pr
         <div className="flex items-center justify-between p-4">
           <motion.button
             onClick={currentStep === 'confirmation' ? onBack : () => {
-              if (currentStep === 'payment') {
+              if (currentStep === 'projects') {
                 setCurrentStep('summary');
               } else {
                 onBack();
@@ -471,7 +505,6 @@ export function MobileOffsetOrder({ tons, monetaryAmount, currency, onBack }: Pr
             <h1 className="text-lg font-bold text-gray-900">
               {currentStep === 'summary' ? 'Order Summary' : 
                currentStep === 'projects' ? 'Project Portfolio' :
-               currentStep === 'payment' ? 'Payment' : 
                'Order Confirmed'}
             </h1>
           </div>
@@ -484,13 +517,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 ${
-                ['summary', 'projects', 'payment'].includes(currentStep) ? 'bg-blue-500' : 'bg-gray-200'
+                ['summary', 'projects'].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'
+                currentStep === 'projects' ? 'bg-blue-500' : 'bg-gray-200'
               }`} />
             </div>
           </div>
@@ -501,10 +531,105 @@ export function MobileOffsetOrder({ tons, monetaryAmount, currency, onBack }: Pr
         <AnimatePresence mode="wait">
           {currentStep === 'summary' && renderSummaryStep()}
           {currentStep === 'projects' && renderProjectsStep()}
-          {currentStep === 'payment' && renderPaymentStep()}
           {currentStep === 'confirmation' && renderConfirmationStep()}
         </AnimatePresence>
       </div>
+
+      {/* Lightbox Modal for Project Details */}
+      <AnimatePresence>
+        {selectedProject && (
+          <motion.div 
+            className="fixed inset-0 z-[9999] flex items-center justify-center p-4"
+            style={{ backgroundColor: 'rgba(0, 0, 0, 0.8)' }}
+            onClick={handleCloseLightbox}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.3 }}
+          >
+            <motion.div
+              className="relative bg-white rounded-lg shadow-2xl max-w-lg w-full max-h-[90vh] overflow-y-auto"
+              onClick={(e) => e.stopPropagation()}
+              initial={{ opacity: 0, scale: 0.8, y: 20 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.8, y: 20 }}
+              transition={{ 
+                duration: 0.4, 
+                ease: [0.22, 1, 0.36, 1],
+                scale: { type: "spring", stiffness: 300, damping: 30 }
+              }}
+            >
+              <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>
+              
+              {selectedProject.imageUrl && (
+                <div className="relative h-48 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-xl font-bold text-white mb-1">{selectedProject.name}</h3>
+                  </div>
+                </div>
+              )}
+              
+              <div className="p-6">
+                {!selectedProject.imageUrl && (
+                  <>
+                    <h3 className="text-xl 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 text-sm">{selectedProject.type || 'Environmental Project'}</span>
+                    </div>
+                  </>
+                )}
+                
+                <p className="text-gray-700 mb-4 text-sm">
+                  {selectedProject.description || selectedProject.shortDescription}
+                </p>
+                
+                <div className="grid grid-cols-2 gap-4 mb-4">
+                  <div className="bg-gray-50 p-3 rounded-lg">
+                    <p className="text-xs text-gray-600 mb-1">Price per Ton</p>
+                    <p className="text-lg font-bold text-gray-900">${selectedProject.pricePerTon.toFixed(2)}</p>
+                  </div>
+                  {selectedProject.percentage && (
+                    <div className="bg-gray-50 p-3 rounded-lg">
+                      <p className="text-xs text-gray-600 mb-1">Portfolio Allocation</p>
+                      <p className="text-lg font-bold text-gray-900">{(selectedProject.percentage * 100).toFixed(1)}%</p>
+                    </div>
+                  )}
+                </div>
+                
+                {(selectedProject.location || selectedProject.verificationStandard) && (
+                  <div className="space-y-2 text-sm">
+                    {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:</span>
+                        <span className="font-medium text-gray-900">{selectedProject.verificationStandard}</span>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }