Add Wren Standards 2025+ legend and update certification badges

Features:
- Created expandable StandardsLegend component explaining Wren's 4 layers of climate impact
- Added detailed descriptions for Certified Offsets, In-Progress Offsets, Additional Contributions, and Investments
- Updated CertificationStatus type to include 'standard 2025'
- Enhanced CertificationBadge with Standard 2025+ support
- Updated wrenClient to map API's 'standard 2023' to 'standard 2025'
- Integrated legend into checkout success page below portfolio chart

Content based on Wren's official 2025+ standard documentation explaining their hybrid approach to maximizing climate impact.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/checkout/success/page.tsx

@@ -8,6 +8,7 @@ import { getOrderDetails } from '../../../src/api/checkoutClient';
 import { OrderDetailsResponse } from '../../../src/types';
 import { CarbonImpactComparison } from '../../../src/components/CarbonImpactComparison';
 import { RechartsPortfolioPieChart } from '../../../src/components/RechartsPortfolioPieChart';
+import { StandardsLegend } from '../../../components/StandardsLegend';
 import { useCalculatorState } from '../../../src/hooks/useCalculatorState';
 
 // Map backend status to user-friendly labels
@@ -452,6 +453,9 @@ export default function CheckoutSuccessPage() {
                   projects={orderDetails.order.portfolio.projects}
                   totalTons={order.tons}
                 />
+
+                {/* Standards Legend */}
+                <StandardsLegend />
               </div>
             </motion.div>
           )}

components/StandardsLegend.tsx

@@ -0,0 +1,163 @@
+'use client';
+
+import { useState } from 'react';
+import { Info, ChevronDown, ChevronUp, ShieldCheck, Clock, Leaf, TrendingUp } from 'lucide-react';
+
+export function StandardsLegend() {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <div className="mt-8 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-2xl p-6 border border-blue-200 print:hidden">
+      {/* Header */}
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full flex items-center justify-between text-left hover:opacity-80 transition-opacity"
+      >
+        <div className="flex items-center gap-3">
+          <div className="p-2 bg-blue-500 rounded-lg">
+            <Info className="w-5 h-5 text-white" />
+          </div>
+          <div>
+            <h3 className="text-lg font-bold text-slate-800">
+              Understanding Wren's Carbon Offset Standards
+            </h3>
+            <p className="text-sm text-slate-600">
+              Learn about the different types of climate impact in your portfolio
+            </p>
+          </div>
+        </div>
+        {isExpanded ? (
+          <ChevronUp className="w-5 h-5 text-slate-600 flex-shrink-0" />
+        ) : (
+          <ChevronDown className="w-5 h-5 text-slate-600 flex-shrink-0" />
+        )}
+      </button>
+
+      {/* Expanded Content */}
+      {isExpanded && (
+        <div className="mt-6 space-y-6 animate-in slide-in-from-top-2 duration-300">
+          {/* Intro */}
+          <div className="bg-white/70 rounded-xl p-4 border border-blue-100">
+            <p className="text-sm text-slate-700 leading-relaxed">
+              Wren maximizes climate impact by combining multiple layers of solutions: <strong>Certified offsets</strong> (verified carbon removal/reduction), <strong>In-progress offsets</strong> (long-term removal projects), <strong>Additional contributions</strong> (policy & conservation work), and <strong>Investments</strong> (scaling climate companies). This hybrid approach delivers the greatest impact per dollar.
+            </p>
+          </div>
+
+          {/* Standard Categories */}
+          <div className="grid md:grid-cols-2 gap-4">
+            {/* Certified Offsets */}
+            <div className="bg-white rounded-xl p-5 border-2 border-emerald-200 shadow-sm hover:shadow-md transition-shadow">
+              <div className="flex items-start gap-3 mb-3">
+                <div className="p-2 bg-emerald-100 rounded-lg">
+                  <ShieldCheck className="w-5 h-5 text-emerald-700" />
+                </div>
+                <div>
+                  <h4 className="font-bold text-slate-800 text-base">Certified Offsets</h4>
+                  <p className="text-xs text-emerald-700 font-medium">Standard 2025+ Compliant</p>
+                </div>
+              </div>
+              <p className="text-sm text-slate-700 mb-3 leading-relaxed">
+                Quantified CO₂e that has already been prevented or removed from the atmosphere. These offsets follow strict rules and are verified by independent auditors.
+              </p>
+              <div className="bg-emerald-50 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-slate-700"><strong>✓</strong> Peer-reviewed measurement methodology</p>
+                <p className="text-xs text-slate-700"><strong>✓</strong> ISO-accredited third-party verification</p>
+                <p className="text-xs text-slate-700"><strong>✓</strong> Tracked on carbon credit registry</p>
+                <p className="text-xs text-slate-700"><strong>✓</strong> Credits issued within 12 months</p>
+              </div>
+            </div>
+
+            {/* In-Progress Offsets */}
+            <div className="bg-white rounded-xl p-5 border-2 border-yellow-200 shadow-sm hover:shadow-md transition-shadow">
+              <div className="flex items-start gap-3 mb-3">
+                <div className="p-2 bg-yellow-100 rounded-lg">
+                  <Clock className="w-5 h-5 text-yellow-700" />
+                </div>
+                <div>
+                  <h4 className="font-bold text-slate-800 text-base">In-Progress Offsets</h4>
+                  <p className="text-xs text-yellow-700 font-medium">Long-term carbon removal</p>
+                </div>
+              </div>
+              <p className="text-sm text-slate-700 mb-3 leading-relaxed">
+                Activities currently removing CO₂e from the atmosphere using proven methods. Credits will be issued once the work is complete and verified (within 5 years).
+              </p>
+              <div className="bg-yellow-50 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-slate-700"><strong>✓</strong> Peer-reviewed methodology</p>
+                <p className="text-xs text-slate-700"><strong>✓</strong> Third-party verification pending</p>
+                <p className="text-xs text-slate-700"><strong>✓</strong> Credits issued within 5 years</p>
+                <p className="text-xs text-slate-700"><strong>→</strong> Example: Enhanced mineral weathering</p>
+              </div>
+            </div>
+
+            {/* Additional Contributions */}
+            <div className="bg-white rounded-xl p-5 border-2 border-cyan-200 shadow-sm hover:shadow-md transition-shadow">
+              <div className="flex items-start gap-3 mb-3">
+                <div className="p-2 bg-cyan-100 rounded-lg">
+                  <Leaf className="w-5 h-5 text-cyan-700" />
+                </div>
+                <div>
+                  <h4 className="font-bold text-slate-800 text-base">Additional Contributions</h4>
+                  <p className="text-xs text-cyan-700 font-medium">Systems-change initiatives</p>
+                </div>
+              </div>
+              <p className="text-sm text-slate-700 mb-3 leading-relaxed">
+                Funding for climate policy, conservation, and initiatives that are difficult to quantify but essential for creating systemic change toward a carbon-neutral world.
+              </p>
+              <div className="bg-cyan-50 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-slate-700"><strong>✓</strong> Peer-reviewed science (proof of concept)</p>
+                <p className="text-xs text-slate-700"><strong>✓</strong> Clear theory of change</p>
+                <p className="text-xs text-slate-700"><strong>✓</strong> Transparent monitoring & evaluation</p>
+                <p className="text-xs text-slate-700"><strong>→</strong> Example: Rainforest protection technology</p>
+              </div>
+            </div>
+
+            {/* Investments */}
+            <div className="bg-white rounded-xl p-5 border-2 border-purple-200 shadow-sm hover:shadow-md transition-shadow">
+              <div className="flex items-start gap-3 mb-3">
+                <div className="p-2 bg-purple-100 rounded-lg">
+                  <TrendingUp className="w-5 h-5 text-purple-700" />
+                </div>
+                <div>
+                  <h4 className="font-bold text-slate-800 text-base">Investments</h4>
+                  <p className="text-xs text-purple-700 font-medium">Scaling climate solutions</p>
+                </div>
+              </div>
+              <p className="text-sm text-slate-700 mb-3 leading-relaxed">
+                Capital investments in climate companies to scale operations. Returns amplify climate impact rather than profit. Not counted in tonnes offset.
+              </p>
+              <div className="bg-purple-50 rounded-lg p-3 space-y-1">
+                <p className="text-xs text-slate-700"><strong>✓</strong> Clear theory of change</p>
+                <p className="text-xs text-slate-700"><strong>✓</strong> Financial additionality</p>
+                <p className="text-xs text-slate-700"><strong>✓</strong> High scalability potential</p>
+                <p className="text-xs text-slate-700"><strong>→</strong> Example: Pacific Biochar expansion</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Why This Approach */}
+          <div className="bg-gradient-to-r from-blue-600 to-cyan-600 rounded-xl p-5 text-white">
+            <h4 className="font-bold text-lg mb-2">Why Wren Uses This Hybrid Approach</h4>
+            <p className="text-sm text-blue-50 leading-relaxed">
+              Addressing the climate crisis requires more than just measurable carbon offsets. By combining <strong>verified removals</strong>, <strong>emerging technologies</strong>, <strong>policy change</strong>, and <strong>strategic investments</strong>, Wren maximizes climate impact per dollar while supporting the systemic changes needed for a sustainable future.
+            </p>
+          </div>
+
+          {/* Learn More */}
+          <div className="text-center">
+            <a
+              href="https://www.wren.co/certification-standards"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 text-sm font-medium text-blue-600 hover:text-blue-700 hover:underline"
+            >
+              <span>Learn more about Wren's certification standards</span>
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+              </svg>
+            </a>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/api/wrenClient.ts

@@ -81,6 +81,12 @@ export async function getPortfolios(): Promise<Portfolio[]> {
           ? (typeof project.percentage === 'number' ? project.percentage : parseFloat(project.percentage))
           : undefined;
 
+        // Map certification status - update 2023 to 2025 standard
+        let certificationStatus = project.certification_status;
+        if (certificationStatus === 'standard 2023') {
+          certificationStatus = 'standard 2025';
+        }
+
         return {
           id: project.id || `project-${Math.random().toString(36).substring(2, 9)}`,
           name: project.name,
@@ -89,7 +95,7 @@ export async function getPortfolios(): Promise<Portfolio[]> {
           imageUrl: project.image_url,
           pricePerTon: projectPricePerTon,
           percentage: projectPercentage,
-          certificationStatus: project.certification_status,
+          certificationStatus: certificationStatus,
           location: '',
           type: '',
           verificationStandard: '',

src/components/CertificationBadge.tsx

@@ -25,12 +25,20 @@ export function CertificationBadge({ status, size = 'md', className = '' }: Cert
 
   const getBadgeConfig = (status: CertificationStatus) => {
     switch (status) {
-      case 'standard 2023':
+      case 'standard 2025':
         return {
           icon: ShieldCheck,
           bgColor: 'bg-emerald-100',
           textColor: 'text-emerald-800',
           borderColor: 'border-emerald-300',
+          label: 'Standard 2025+',
+        };
+      case 'standard 2023':
+        return {
+          icon: ShieldCheck,
+          bgColor: 'bg-teal-100',
+          textColor: 'text-teal-800',
+          borderColor: 'border-teal-300',
           label: 'Standard 2023',
         };
       case 'standard 2020':

src/types.ts

@@ -50,6 +50,7 @@ export interface Portfolio {
 export type CertificationStatus =
   | 'standard 2020'
   | 'standard 2023'
+  | 'standard 2025'
   | 'nonstandard'
   | 'in progress';