puffin-app/components/StandardsLegend.tsx

'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 mb-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"
              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>
  );
}