import React from 'react';
import { Link } from 'react-router-dom';

const HomePage = () => {
  const features = [
    {
      title: "News Hub",
      description: "Discover regional policy updates and best practices in food loss reduction and bioeconomy innovation.",
      icon: "📰",
      link: "/news",
      gradient: "from-bio-green to-green-500"
    },
    {
      title: "Open Data",
      description: "Access datasets on cold-chain gaps, processing capacity, and surplus hotspots to inform interventions.",
      icon: "📊",
      link: "/datasets",
      gradient: "from-bio-blue to-blue-500"
    },
    {
      title: "Matchmaking",
      description: "Connect with partners, funders, and implementers to develop collaborative pilot projects.",
      icon: "🤝",
      link: "/matchmaking",
      gradient: "from-bio-purple to-purple-500"
    },
    {
      title: "Directory",
      description: "Find and connect with stakeholders across the bioeconomy ecosystem.",
      icon: "📖",
      link: "/directory",
      gradient: "from-bio-orange to-orange-500"
    }
  ];

  return (
    <div className="bg-gradient-to-br from-green-50 via-blue-50 to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
      {/* Enhanced hero section with more vibrant gradient */}
      <section className="hero py-16 md:py-24 bg-gradient-to-r from-bio-green via-bio-blue to-bio-purple text-white dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 transition-all duration-300">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-4xl md:text-6xl font-bold mb-6 drop-shadow-lg [-webkit-text-stroke: 0.5px_rgba(0,0,0,0.1)] bg-gradient-to-r from-yellow-300 via-green-300 to-blue-300 bg-clip-text text-transparent">
            Connecting Stakeholders to Accelerate Bioeconomy Solutions
          </h2>
          <p className="text-xl md:text-2xl max-w-3xl mx-auto mb-10 drop-shadow-md font-medium bg-gradient-to-r from-green-200 via-blue-200 to-purple-200 bg-clip-text text-transparent">
            Reducing Food Loss & Waste through data, partnerships, and pilot projects
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <Link 
              to="/datasets" 
              className="bg-gradient-to-r from-bio-green to-green-500 text-white font-bold py-3 px-8 rounded-full hover:from-green-500 hover:to-green-600 transition-all transform hover:scale-105 shadow-lg text-center shadow-green-500/30 hover:shadow-green-500/50"
            >
              Explore Datasets
            </Link>
            <Link 
              to="/matchmaking" 
              className="bg-gradient-to-r from-bio-purple to-purple-500 text-white font-bold py-3 px-8 rounded-full hover:from-purple-500 hover:to-purple-600 transition-all transform hover:scale-105 shadow-lg text-center shadow-purple-500/30 hover:shadow-purple-500/50"
            >
              Join Matchmaking
            </Link>
          </div>
        </div>
      </section>
      
      {/* Enhanced features section with colorful gradients */}
      <section className="py-16 bg-gradient-to-br from-white to-gray-100 dark:from-gray-800 dark:to-gray-900">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-12 text-gray-800 dark:text-white bg-gradient-to-r from-bio-green to-bio-blue bg-clip-text text-transparent">
            Our Platform Features
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {features.map((feature, index) => (
              <Link 
                to={feature.link} 
                key={index} 
                className={`bg-gradient-to-br ${feature.gradient} dark:from-gray-700 dark:to-gray-800 p-8 rounded-2xl shadow-xl border border-white/20 dark:border-gray-700 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 block text-white hover:from-bio-pink hover:to-bio-teal`}
              >
                <div className="text-5xl mb-4 drop-shadow-md">{feature.icon}</div>
                <h3 className="text-2xl font-bold mb-3 drop-shadow bg-gradient-to-r from-yellow-300 to-white bg-clip-text text-transparent">{feature.title}</h3>
                <p className="drop-shadow">{feature.description}</p>
              </Link>
            ))}
          </div>
        </div>
      </section>
      
      {/* Enhanced CTA section with vibrant gradient */}
      <section className="py-16 bg-gradient-to-r from-bio-teal via-bio-blue to-bio-purple dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 transition-colors duration-300">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-6 text-white drop-shadow-lg bg-gradient-to-r from-yellow-300 to-white bg-clip-text text-transparent">
            Join Our Growing Network
          </h2>
          <p className="text-xl max-w-3xl mx-auto mb-10 text-white/90 drop-shadow-md font-medium bg-gradient-to-r from-green-200 to-blue-200 bg-clip-text text-transparent">
            Be part of a global community working to transform agrifood systems through bioeconomy solutions.
          </p>
          <Link 
            to="/directory" 
            className="bg-gradient-to-r from-bio-pink to-pink-500 text-white font-bold py-3 px-8 rounded-full hover:from-pink-500 hover:to-pink-600 transition-all transform hover:scale-105 shadow-lg inline-block shadow-pink-500/30 hover:shadow-pink-500/50"
          >
            Explore Directory
          </Link>
        </div>
      </section>
    </div>
  );
};

export default HomePage;