import React, { useState } from 'react';

const MatchmakingPage = () => {
  const [activeTab, setActiveTab] = useState('opportunities');
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    organization: '',
    interest: '',
    description: ''
  });

  const opportunities = [
    {
      id: 1,
      title: 'Solar-Powered Cold Storage for Smallholder Farmers',
      organization: 'Renewable Agriculture Initiative',
      location: 'Kenya, Tanzania',
      description: 'Seeking technology partners and investors for deployment of solar-powered cold storage units in East Africa.',
      tags: ['Cold Chain', 'Solar Power', 'Smallholders', 'East Africa'],
      posted: '2025-10-18'
    },
    {
      id: 2,
      title: 'Mobile Processing Unit for Fruit Preservation',
      organization: 'Sustainable Food Systems Group',
      location: 'India, Bangladesh',
      description: 'Looking for equipment manufacturers and local partners to deploy mobile processing units for mango and banana preservation.',
      tags: ['Processing', 'Mobile Units', 'Fruit Preservation', 'South Asia'],
      posted: '2025-10-15'
    },
    {
      id: 3,
      title: 'Food Waste to Biogas Project',
      organization: 'Circular Economy Network',
      location: 'Brazil, Colombia',
      description: 'Seeking technology providers and financing partners for food waste-to-biogas facilities in urban areas.',
      tags: ['Biogas', 'Waste Valorization', 'Urban', 'South America'],
      posted: '2025-10-12'
    }
  ];

  const handleSubmit = (e) => {
    e.preventDefault();
    // In a real app, this would submit to an API
    alert('Thank you for your submission! We will review your request and get back to you soon.');
    setFormData({
      name: '',
      email: '',
      organization: '',
      interest: '',
      description: ''
    });
  };

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  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">
        <h2 className="text-3xl font-bold mb-8 text-gray-800 dark:text-white drop-shadow bg-gradient-to-r from-bio-green to-bio-blue bg-clip-text text-transparent">Matchmaking Platform</h2>
        
        <div className="bg-white dark:bg-gray-700 rounded-2xl shadow-lg overflow-hidden mb-8 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="border-b border-gray-200 dark:border-gray-600">
            <nav className="flex">
              <button
                className={`py-4 px-6 text-center border-b-2 font-medium text-sm ${
                  activeTab === 'opportunities'
                    ? 'border-bio-green text-bio-green dark:text-green-400 drop-shadow bg-gradient-to-r from-bio-green to-green-500 bg-clip-text text-transparent'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
                }`}
                onClick={() => setActiveTab('opportunities')}
              >
                Collaboration Opportunities
              </button>
              <button
                className={`py-4 px-6 text-center border-b-2 font-medium text-sm ${
                  activeTab === 'submit'
                    ? 'border-bio-green text-bio-green dark:text-green-400 drop-shadow bg-gradient-to-r from-bio-green to-green-500 bg-clip-text text-transparent'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
                }`}
                onClick={() => setActiveTab('submit')}
              >
                Submit Opportunity
              </button>
            </nav>
          </div>
          
          <div className="p-6">
            {activeTab === 'opportunities' ? (
              <div>
                <h3 className="text-xl 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">Current Collaboration Opportunities</h3>
                
                <div className="space-y-6">
                  {opportunities.map((opportunity) => (
                    <div key={opportunity.id} className="border border-gray-200 dark:border-gray-600 rounded-xl p-6 hover:shadow-md transition drop-shadow bg-gradient-to-br from-white to-gray-50 dark:from-gray-700 dark:to-gray-800">
                      <div className="flex justify-between items-start mb-4">
                        <h4 className="text-lg font-bold 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">{opportunity.title}</h4>
                        <span className="text-sm text-gray-500 dark:text-gray-400 drop-shadow">{opportunity.posted}</span>
                      </div>
                      
                      <div className="mb-3">
                        <span className="font-medium text-gray-700 dark:text-gray-300 drop-shadow">Organization:</span> {opportunity.organization}
                      </div>
                      
                      <div className="mb-3">
                        <span className="font-medium text-gray-700 dark:text-gray-300 drop-shadow">Location:</span> {opportunity.location}
                      </div>
                      
                      <p className="text-gray-600 dark:text-gray-300 mb-4 drop-shadow">{opportunity.description}</p>
                      
                      <div className="flex flex-wrap gap-2 mb-4">
                        {opportunity.tags.map((tag, index) => (
                          <span key={index} className="px-2 py-1 text-xs bg-bio-blue/10 text-bio-blue dark:bg-blue-900/30 dark:text-blue-300 rounded-full drop-shadow bg-gradient-to-r from-blue-100 to-blue-200 dark:from-blue-900/30 dark:to-blue-800/30">
                            {tag}
                          </span>
                        ))}
                      </div>
                      
                      <button className="bg-gradient-to-r from-bio-green to-green-500 text-white px-4 py-2 rounded-lg hover:from-green-500 hover:to-green-600 transition shadow-md hover:shadow-lg drop-shadow">
                        Express Interest
                      </button>
                    </div>
                  ))}
                </div>
              </div>
            ) : (
              <div>
                <h3 className="text-xl 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">Submit Collaboration Opportunity</h3>
                <p className="text-gray-600 dark:text-gray-300 mb-6 drop-shadow">Have a project or collaboration opportunity? Submit the details below and our team will review it for inclusion in our matchmaking platform.</p>
                
                <form onSubmit={handleSubmit} className="space-y-6">
                  <div>
                    <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 drop-shadow bg-gradient-to-r from-gray-700 to-gray-600 bg-clip-text text-transparent dark:from-gray-300 dark:to-gray-400">
                      Your Name
                    </label>
                    <input
                      type="text"
                      id="name"
                      name="name"
                      value={formData.name}
                      onChange={handleChange}
                      required
                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-bio-green focus:border-transparent dark:bg-gray-600 dark:text-white drop-shadow bg-gradient-to-r from-white to-gray-50 dark:from-gray-600 dark:to-gray-700"
                    />
                  </div>
                  
                  <div>
                    <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 drop-shadow bg-gradient-to-r from-gray-700 to-gray-600 bg-clip-text text-transparent dark:from-gray-300 dark:to-gray-400">
                      Email Address
                    </label>
                    <input
                      type="email"
                      id="email"
                      name="email"
                      value={formData.email}
                      onChange={handleChange}
                      required
                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-bio-green focus:border-transparent dark:bg-gray-600 dark:text-white drop-shadow bg-gradient-to-r from-white to-gray-50 dark:from-gray-600 dark:to-gray-700"
                    />
                  </div>
                  
                  <div>
                    <label htmlFor="organization" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 drop-shadow bg-gradient-to-r from-gray-700 to-gray-600 bg-clip-text text-transparent dark:from-gray-300 dark:to-gray-400">
                      Organization
                    </label>
                    <input
                      type="text"
                      id="organization"
                      name="organization"
                      value={formData.organization}
                      onChange={handleChange}
                      required
                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-bio-green focus:border-transparent dark:bg-gray-600 dark:text-white drop-shadow bg-gradient-to-r from-white to-gray-50 dark:from-gray-600 dark:to-gray-700"
                    />
                  </div>
                  
                  <div>
                    <label htmlFor="interest" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 drop-shadow bg-gradient-to-r from-gray-700 to-gray-600 bg-clip-text text-transparent dark:from-gray-300 dark:to-gray-400">
                      Type of Collaboration
                    </label>
                    <select
                      id="interest"
                      name="interest"
                      value={formData.interest}
                      onChange={handleChange}
                      required
                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-bio-green focus:border-transparent dark:bg-gray-600 dark:text-white drop-shadow bg-gradient-to-r from-white to-gray-50 dark:from-gray-600 dark:to-gray-700"
                    >
                      <option value="">Select an option</option>
                      <option value="funding">Funding/Investment</option>
                      <option value="technology">Technology Partnership</option>
                      <option value="implementation">Project Implementation</option>
                      <option value="research">Research Collaboration</option>
                      <option value="policy">Policy Development</option>
                      <option value="other">Other</option>
                    </select>
                  </div>
                  
                  <div>
                    <label htmlFor="description" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 drop-shadow bg-gradient-to-r from-gray-700 to-gray-600 bg-clip-text text-transparent dark:from-gray-300 dark:to-gray-400">
                      Opportunity Description
                    </label>
                    <textarea
                      id="description"
                      name="description"
                      value={formData.description}
                      onChange={handleChange}
                      required
                      rows={5}
                      className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-bio-green focus:border-transparent dark:bg-gray-600 dark:text-white drop-shadow bg-gradient-to-r from-white to-gray-50 dark:from-gray-600 dark:to-gray-700"
                      placeholder="Describe your collaboration opportunity in detail..."
                    ></textarea>
                  </div>
                  
                  <div>
                    <button
                      type="submit"
                      className="w-full bg-gradient-to-r from-bio-green to-bio-blue text-white font-bold py-3 px-4 rounded-lg hover:opacity-90 transition shadow-lg drop-shadow"
                    >
                      Submit Opportunity
                    </button>
                  </div>
                </form>
              </div>
            )}
          </div>
        </div>
        
        <div className="bg-gradient-to-r from-bio-purple to-bio-blue rounded-2xl p-6 text-white shadow-lg">
          <h3 className="text-xl font-bold mb-2 drop-shadow">Need Help Finding Partners?</h3>
          <p className="mb-4 drop-shadow">Our matchmaking team can help connect you with the right partners for your project.</p>
          <button className="bg-white text-bio-purple font-bold px-6 py-2 rounded-lg hover:bg-purple-100 transition shadow-md drop-shadow">
            Contact Matchmaking Team
          </button>
        </div>
      </div>
    </div>
  );
};

export default MatchmakingPage;