590 lines
24 KiB
TypeScript
590 lines
24 KiB
TypeScript
import React, { useState, useEffect, useCallback } from 'react';
|
|
import { Check, AlertCircle, ArrowLeft, Loader2, Globe2, TreePine, Waves, Factory, Wind, X } from 'lucide-react';
|
|
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';
|
|
import { config } from '../utils/config';
|
|
import { sendFormspreeEmail } from '../utils/email';
|
|
|
|
interface Props {
|
|
tons: number;
|
|
monetaryAmount?: number;
|
|
onBack: () => void;
|
|
calculatorType: 'trip' | 'annual';
|
|
}
|
|
|
|
interface ProjectTypeIconProps {
|
|
project: OffsetProject;
|
|
}
|
|
|
|
const ProjectTypeIcon = ({ project }: ProjectTypeIconProps) => {
|
|
// Safely check if project and type exist
|
|
if (!project || !project.type) {
|
|
return <Globe2 className="text-blue-500" />;
|
|
}
|
|
|
|
const type = project.type.toLowerCase();
|
|
|
|
switch (type) {
|
|
case 'direct air capture':
|
|
return <Factory className="text-purple-500" />;
|
|
case 'blue carbon':
|
|
return <Waves className="text-blue-500" />;
|
|
case 'renewable energy':
|
|
return <Wind className="text-green-500" />;
|
|
case 'forestry':
|
|
return <TreePine className="text-green-500" />;
|
|
default:
|
|
return <Globe2 className="text-blue-500" />;
|
|
}
|
|
};
|
|
|
|
export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Props) {
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [success, setSuccess] = useState(false);
|
|
const [order, setOrder] = useState<OffsetOrderType | null>(null);
|
|
const [currency, setCurrency] = useState<CurrencyCode>('USD');
|
|
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: '',
|
|
company: '',
|
|
message: `I would like to offset ${tons.toFixed(2)} tons of CO2 from my yacht's ${calculatorType} emissions.`
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!config.wrenApiKey) {
|
|
setError('Carbon offset service is currently unavailable. Please use our contact form to request offsetting.');
|
|
setLoadingPortfolio(false);
|
|
return;
|
|
}
|
|
fetchPortfolio();
|
|
}, []);
|
|
|
|
const fetchPortfolio = async () => {
|
|
try {
|
|
const allPortfolios = await getPortfolios();
|
|
|
|
// Check if portfolios were returned
|
|
if (!allPortfolios || allPortfolios.length === 0) {
|
|
throw new Error('No portfolios available');
|
|
}
|
|
|
|
// Only get the puffin portfolio, no selection allowed
|
|
const puffinPortfolio = allPortfolios.find(p =>
|
|
p.name.toLowerCase().includes('puffin') ||
|
|
p.name.toLowerCase().includes('maritime')
|
|
);
|
|
|
|
if (puffinPortfolio) {
|
|
console.log('[OffsetOrder] Found Puffin portfolio with ID:', puffinPortfolio.id);
|
|
setPortfolio(puffinPortfolio);
|
|
} else {
|
|
// Default to first portfolio if no puffin portfolio found
|
|
console.log('[OffsetOrder] 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 handleOffsetOrder = async () => {
|
|
if (!portfolio) return;
|
|
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const newOrder = await createOffsetOrder(portfolio.id, tons);
|
|
setOrder(newOrder);
|
|
setSuccess(true);
|
|
} catch (err) {
|
|
setError('Failed to create offset order. Please try again.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const renderPortfolioPrice = (portfolio: Portfolio) => {
|
|
try {
|
|
// Get the price per ton from the portfolio
|
|
const pricePerTon = portfolio.pricePerTon || 18; // Default based on Wren Climate Fund average
|
|
const targetCurrency = getCurrencyByCode(currency);
|
|
return formatCurrency(pricePerTon, targetCurrency);
|
|
} catch (err) {
|
|
console.error('Error formatting portfolio price:', err);
|
|
return formatCurrency(18, currencies.USD); // Updated fallback
|
|
}
|
|
};
|
|
|
|
// Calculate offset cost using the portfolio price
|
|
const offsetCost = monetaryAmount || (portfolio ? tons * (portfolio.pricePerTon || 18) : 0);
|
|
|
|
// Robust project click handler with multiple fallbacks
|
|
const handleProjectClick = useCallback((project: OffsetProject, e?: React.MouseEvent) => {
|
|
if (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
console.log('Opening project details for:', project.name);
|
|
setSelectedProject(project);
|
|
}, []);
|
|
|
|
// Additional handler for direct button clicks
|
|
const handleProjectButtonClick = useCallback((project: OffsetProject) => {
|
|
console.log('Button click - Opening project details for:', project.name);
|
|
setSelectedProject(project);
|
|
}, []);
|
|
|
|
// Simple lightbox close handler
|
|
const handleCloseLightbox = () => {
|
|
console.log('Closing lightbox');
|
|
setSelectedProject(null);
|
|
};
|
|
|
|
return (
|
|
<motion.div
|
|
className="bg-white rounded-lg shadow-xl p-4 sm:p-8 max-w-7xl w-full relative mx-auto"
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
|
|
>
|
|
<motion.button
|
|
onClick={onBack}
|
|
className="flex items-center text-gray-600 hover:text-gray-900 mb-6"
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
whileHover={{ x: -5 }}
|
|
type="button"
|
|
>
|
|
<ArrowLeft className="mr-2" size={20} />
|
|
Back to Calculator
|
|
</motion.button>
|
|
|
|
<motion.div
|
|
className="text-center mb-8"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: 0.2 }}
|
|
>
|
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
|
Offset Your Impact
|
|
</h2>
|
|
<p className="text-lg text-gray-600">
|
|
You're about to offset {tons.toFixed(2)} tons of CO₂
|
|
</p>
|
|
</motion.div>
|
|
|
|
{error && !config.wrenApiKey ? (
|
|
<div className="max-w-2xl mx-auto">
|
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-8">
|
|
<h3 className="text-xl font-semibold text-blue-900 mb-4">
|
|
Contact Us for Offsetting
|
|
</h3>
|
|
<p className="text-blue-700 mb-4">
|
|
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);
|
|
} catch (err) {
|
|
setError('Failed to send request. Please try again.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}} className="space-y-6">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Name *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={formData.name}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, 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>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Email *
|
|
</label>
|
|
<input
|
|
type="email"
|
|
required
|
|
value={formData.email}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, 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>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Phone
|
|
</label>
|
|
<input
|
|
type="tel"
|
|
value={formData.phone}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, 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>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Company
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.company}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, company: 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>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Message
|
|
</label>
|
|
<textarea
|
|
rows={4}
|
|
value={formData.message}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, 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>
|
|
</div>
|
|
) : error ? (
|
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
|
|
<div className="flex items-center space-x-2">
|
|
<AlertCircle className="text-red-500" size={20} />
|
|
<p className="text-red-700">{error}</p>
|
|
</div>
|
|
</div>
|
|
) : success && order ? (
|
|
<div className="text-center py-8">
|
|
<div className="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-6">
|
|
<Check className="text-green-500" size={32} />
|
|
</div>
|
|
<h3 className="text-2xl font-bold text-gray-900 mb-4">
|
|
Offset Order Successful!
|
|
</h3>
|
|
<p className="text-gray-600 mb-6">
|
|
Your order has been processed successfully. You'll receive a confirmation email shortly.
|
|
</p>
|
|
<div className="bg-gray-50 rounded-lg p-6 mb-6">
|
|
<h4 className="text-lg font-semibold text-gray-900 mb-4">Order Summary</h4>
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600">Order ID:</span>
|
|
<span className="font-medium">{order.id}</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">CO₂ Offset:</span>
|
|
<span className="font-medium">{order.tons} tons</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>
|
|
<button
|
|
onClick={onBack}
|
|
className="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition-colors"
|
|
>
|
|
Back to Calculator
|
|
</button>
|
|
</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>
|
|
) : portfolio ? (
|
|
<>
|
|
<div className="bg-white border rounded-lg p-6 mb-8">
|
|
<h3 className="text-xl font-semibold text-gray-900 mb-4">
|
|
{portfolio.name}
|
|
</h3>
|
|
<p className="text-gray-600 mb-6">
|
|
{portfolio.description}
|
|
</p>
|
|
|
|
{portfolio.projects && portfolio.projects.length > 0 && (
|
|
<motion.div
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6 mb-6"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.5, delay: 0.3 }}
|
|
>
|
|
{portfolio.projects.map((project, index) => (
|
|
<motion.div
|
|
key={project.id || `project-${index}`}
|
|
className="bg-white rounded-lg p-6 shadow-md hover:shadow-xl transition-all border border-gray-200 hover:border-blue-400 relative group"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.3, delay: index * 0.1 }}
|
|
whileHover={{ scale: 1.02 }}
|
|
>
|
|
{/* Header with title and percentage */}
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center space-x-3">
|
|
<ProjectTypeIcon project={project} />
|
|
<h4 className="font-bold text-gray-900 text-lg">{project.name}</h4>
|
|
</div>
|
|
{project.percentage && (
|
|
<span className="text-sm bg-blue-100 text-blue-800 font-medium px-3 py-1 rounded-full">
|
|
{(project.percentage * 100).toFixed(1)}%
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Project image */}
|
|
{project.imageUrl && (
|
|
<div className="relative h-40 mb-4 rounded-lg overflow-hidden">
|
|
<img
|
|
src={project.imageUrl}
|
|
alt={project.name}
|
|
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
</div>
|
|
)}
|
|
|
|
{/* Description */}
|
|
<p className="text-gray-600 mb-4 leading-relaxed">
|
|
{project.shortDescription || project.description}
|
|
</p>
|
|
|
|
{/* Price info */}
|
|
<div className="bg-gray-50 p-3 rounded-lg mb-4">
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-gray-600 font-medium">Price per ton:</span>
|
|
<span className="text-gray-900 font-bold text-lg">
|
|
${project.pricePerTon.toFixed(2)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Click button - Primary call to action */}
|
|
<button
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
handleProjectButtonClick(project);
|
|
}}
|
|
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center space-x-2"
|
|
>
|
|
<span>View Project Details</span>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
)}
|
|
|
|
<motion.div
|
|
className="flex items-center justify-between bg-blue-50 p-4 rounded-lg"
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.5, delay: 0.5 }}
|
|
>
|
|
<span className="text-blue-900 font-medium">Portfolio Price per Ton:</span>
|
|
<span className="text-blue-900 font-bold text-lg">
|
|
{renderPortfolioPrice(portfolio)}
|
|
</span>
|
|
</motion.div>
|
|
</div>
|
|
|
|
<motion.div
|
|
className="bg-gray-50 rounded-lg p-6 mb-6"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: 0.6 }}
|
|
>
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-4">Order Summary</h3>
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600">Amount to Offset:</span>
|
|
<span className="font-medium">{tons.toFixed(2)} tons CO₂</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600">Portfolio Distribution:</span>
|
|
<span className="font-medium">Automatically optimized</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600">Cost per Ton:</span>
|
|
<span className="font-medium">{renderPortfolioPrice(portfolio)}</span>
|
|
</div>
|
|
<div className="border-t pt-4">
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-900 font-semibold">Total Cost:</span>
|
|
<span className="text-gray-900 font-semibold">
|
|
{formatCurrency(offsetCost, getCurrencyByCode(portfolio.currency))}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.button
|
|
onClick={handleOffsetOrder}
|
|
disabled={loading}
|
|
className={`w-full bg-blue-500 text-white py-3 px-4 rounded-lg transition-colors ${
|
|
loading ? 'opacity-50 cursor-not-allowed' : 'hover:bg-blue-600'
|
|
}`}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: 0.7 }}
|
|
whileHover={{ scale: 1.02 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
>
|
|
{loading ? (
|
|
<div className="flex items-center justify-center">
|
|
<Loader2 className="animate-spin mr-2" size={20} />
|
|
Processing...
|
|
</div>
|
|
) : (
|
|
'Confirm Offset Order'
|
|
)}
|
|
</motion.button>
|
|
</>
|
|
) : null}
|
|
|
|
{/* Simplified Lightbox Modal */}
|
|
{selectedProject && (
|
|
<div
|
|
className="fixed inset-0 z-[9999] flex items-center justify-center p-4"
|
|
style={{ backgroundColor: 'rgba(0, 0, 0, 0.8)' }}
|
|
onClick={handleCloseLightbox}
|
|
>
|
|
<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>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
);
|
|
}
|