client/src/pages/NewsDetailPage.jsx

import React, { useState, useEffect } from 'react';
import { Link, useParams } from 'react-router-dom';

const NewsDetailPage = () => {
  const { id } = useParams();
  const [newsItem, setNewsItem] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // In a real app, this would fetch from an API
    // For demo purposes, we'll use mock data
    const mockNews = [
      {
        id: 1,
        title: 'New Cold Chain Initiative Launched in Southeast Asia',
        excerpt: 'Regional partnership aims to reduce post-harvest losses by 30% through solar-powered refrigeration.',
        date: '2025-10-15',
        category: 'Policy',
        content: 'The Southeast Asian Cold Chain Initiative represents a significant step forward in addressing post-harvest losses in the region. The project, funded by a coalition of international donors, will install solar-powered refrigeration units in rural areas where access to electricity is limited. Early pilot programs have shown promising results, with participating farms reporting a 25% reduction in losses of perishable goods.\n\nThe initiative is being implemented in partnership with local governments, agricultural cooperatives, and technology providers. The first phase will target 500 farms across Thailand, Vietnam, and Indonesia, with plans to expand to additional countries in the region.\n\nAccording to Dr. Maria Santos, the project director, "This initiative addresses a critical gap in our food system. By providing reliable cold storage at the farm level, we can significantly reduce losses while improving farmer incomes and food security."'
      },
      {
        id: 2,
        title: 'Innovative Edible Coatings Show Promise in Lab Trials',
        excerpt: 'New biodegradable coatings extend shelf life of fruits by up to 2 weeks.',
        date: '2025-10-10',
        category: 'Technology',
        content: 'Scientists at the Institute for Sustainable Agriculture have developed a new type of edible coating derived from plant-based materials that can extend the shelf life of fruits and vegetables. In laboratory trials, apples treated with the coating remained fresh for up to 14 days longer than untreated controls. The coating is completely biodegradable and safe for consumption.\n\nThe coating is made from a blend of polysaccharides and proteins derived from agricultural waste, making it both sustainable and cost-effective to produce. Initial taste tests have shown no impact on the flavor or texture of treated produce.\n\n"We\'re excited about the potential of this technology to reduce food waste at the consumer level," said Dr. James Wilson, lead researcher on the project. "If we can extend the shelf life of produce by two weeks, it could have a significant impact on household food waste."'
      },
      {
        id: 3,
        title: 'Global Fund Announces $50M for FLW Reduction Projects',
        excerpt: 'Funding opportunity for pilot projects connecting smallholders to processing facilities.',
        date: '2025-10-05',
        category: 'Finance',
        content: 'The Global Food Loss Reduction Fund has announced a new call for proposals with $50 million available for innovative projects that connect smallholder farmers to processing and distribution networks. Priority will be given to projects that demonstrate measurable impact on reducing food loss while improving farmer incomes. Applications are due by December 31, 2025.\n\nThe fund is seeking projects that address food loss at multiple points in the supply chain, from harvest to retail. Preference will be given to initiatives that incorporate innovative technologies, build local capacity, and demonstrate potential for scalability.\n\n"Reducing food loss is not just about preventing waste - it\'s about creating more efficient and equitable food systems," said Fund Director Sarah Johnson. "We\'re looking for projects that can show real impact on both food security and farmer livelihoods."'
      }
    ];

    const item = mockNews.find(news => news.id === parseInt(id));
    
    if (item) {
      setTimeout(() => {
        setNewsItem(item);
        setLoading(false);
      }, 300);
    } else {
      setError('News item not found');
      setLoading(false);
    }
  }, [id]);

  if (loading) {
    return (
      <div className="py-16 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 transition-colors duration-300 min-h-screen">
        <div className="container mx-auto px-4">
          <div className="flex justify-center">
            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-bio-green"></div>
          </div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="py-16 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 transition-colors duration-300 min-h-screen">
        <div className="container mx-auto px-4">
          <div className="text-center">
            <h2 className="text-2xl font-bold text-red-500 mb-4 drop-shadow">Error</h2>
            <p className="text-red-500 drop-shadow">{error}</p>
            <Link to="/news" className="mt-4 inline-block text-bio-blue dark:text-blue-400 hover:underline drop-shadow bg-gradient-to-r from-bio-blue to-blue-500 bg-clip-text text-transparent">
              ← Back to News
            </Link>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="py-16 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 transition-colors duration-300 min-h-screen">
      <div className="container mx-auto px-4">
        <Link to="/news" className="inline-block text-bio-blue dark:text-blue-400 hover:underline mb-6 drop-shadow bg-gradient-to-r from-bio-blue to-blue-500 bg-clip-text text-transparent">
          ← Back to News
        </Link>
        
        <article className="bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden max-w-4xl mx-auto border border-gray-100 dark:border-gray-600 bg-gradient-to-br from-white to-gray-100 dark:from-gray-700 dark:to-gray-800">
          <div className="p-6 md:p-8">
            <div className="flex flex-wrap items-center justify-between mb-6">
              <span className="inline-block px-3 py-1 text-xs font-semibold text-bio-green bg-green-100 dark:bg-green-900/30 dark:text-green-300 rounded-full drop-shadow bg-gradient-to-r from-green-100 to-green-200 dark:from-green-900/30 dark:to-green-800/30">
                {newsItem.category}
              </span>
              <span className="text-sm text-gray-500 dark:text-gray-400 drop-shadow">
                {new Date(newsItem.date).toLocaleDateString('en-US', { 
                  year: 'numeric', 
                  month: 'long', 
                  day: 'numeric' 
                })}
              </span>
            </div>
            
            <h1 className="text-3xl md:text-4xl font-bold mb-6 text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent dark:from-white dark:to-gray-300">
              {newsItem.title}
            </h1>
            
            <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 italic drop-shadow bg-gradient-to-r from-gray-600 to-gray-500 bg-clip-text text-transparent dark:from-gray-300 dark:to-gray-400">
              {newsItem.excerpt}
            </p>
            
            <div className="prose prose-lg dark:prose-invert max-w-none">
              {newsItem.content.split('\n\n').map((paragraph, index) => (
                <p key={index} className="mb-4 text-gray-700 dark:text-gray-300 drop-shadow">
                  {paragraph}
                </p>
              ))}
            </div>
          </div>
        </article>
        
        <div className="max-w-4xl mx-auto mt-8">
          <div className="bg-gradient-to-r from-bio-green to-bio-blue rounded-2xl p-6 text-white shadow-lg">
            <h3 className="text-xl font-bold mb-2 drop-shadow">Stay Informed</h3>
            <p className="mb-4 drop-shadow">Subscribe to our newsletter to receive updates on food loss and waste reduction initiatives.</p>
            <div className="flex flex-col sm:flex-row gap-4">
              <input 
                type="email" 
                placeholder="Your email address" 
                className="flex-grow px-4 py-2 rounded-lg text-gray-800 drop-shadow"
              />
              <button className="bg-white text-bio-green font-bold px-6 py-2 rounded-lg hover:bg-green-100 transition shadow-md drop-shadow">
                Subscribe
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default NewsDetailPage;