import { useState, useEffect } from 'react'; import Link from 'next/link'; import Head from 'next/head'; interface NetworkStats { totalPlants: number; totalOwners: number; species: { [key: string]: number }; globalDistribution: { [key: string]: number }; } export default function Home() { const [stats, setStats] = useState(null); const [blockchainInfo, setBlockchainInfo] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { fetchNetworkStats(); }, []); const fetchNetworkStats = async () => { try { const response = await fetch('/api/plants/network'); const data = await response.json(); if (data.success) { setStats(data.network); setBlockchainInfo(data.blockchain); } } catch (error) { console.error('Error fetching network stats:', error); } finally { setLoading(false); } }; return (

LocalGreenChain - Plant Cloning Blockchain {/* Header */}

🌱 LocalGreenChain

Plant Cloning Blockchain Network

{/* Hero Section */}

Track Your Plant's Journey

A blockchain for plants that preserves lineage across clones and seeds. Connect with growers, share plants, and build a global green network.

{/* Network Stats */} {loading ? (

Loading network stats...

) : ( <>

{/* Features */}

{/* Top Species */} {stats && Object.keys(stats.species).length > 0 && (

Popular Species

{Object.entries(stats.species) .sort((a, b) => b[1] - a[1]) .slice(0, 6) .map(([species, count]) => (

{species} {count}

))}

)} {/* Blockchain Status */}

Blockchain Status

Status

{blockchainInfo?.isValid ? ( ✓ Valid ) : ( ✗ Invalid )}

Mining Difficulty

{blockchainInfo?.difficulty || 'N/A'}

Total Blocks

{blockchainInfo?.totalBlocks || 0}

)} {/* CTA Section */}

Ready to Get Started?

Register your first plant and join the global green blockchain network.

Register Your First Plant

{/* Footer */}

); } // Helper Components function StatCard({ title, value, icon, color, }: { title: string; value: number; icon: string; color: string; }) { const colorClasses = { green: 'bg-green-100 text-green-800', blue: 'bg-blue-100 text-blue-800', purple: 'bg-purple-100 text-purple-800', orange: 'bg-orange-100 text-orange-800', }; return (

{title}

{value}

{icon}

); } function FeatureCard({ title, description, icon, }: { title: string; description: string; icon: string; }) { return (

{icon}

{title}

{description}

); }