import React from 'react';
import { AlertCircle, Info, Search, ChevronRight } from 'lucide-react';

export default function AllergenWebsite() {
  const allergens = [
    {
      name: 'Peanuts',
      description: 'One of the most common food allergens, found in many processed foods.',
      symptoms: ['Hives', 'Swelling', 'Difficulty breathing', 'Anaphylaxis'],
      commonIn: ['Cookies', 'Asian cuisine', 'Candy bars', 'Sauces']
    },
    {
      name: 'Dairy',
      description: 'Includes milk and milk products, affecting many individuals worldwide.',
      symptoms: ['Digestive issues', 'Skin reactions', 'Respiratory problems'],
      commonIn: ['Cheese', 'Yogurt', 'Ice cream', 'Baked goods']
    },
    {
      name: 'Shellfish',
      description: 'Common seafood allergen including shrimp, crab, and lobster.',
      symptoms: ['Throat tightness', 'Hives', 'Nausea', 'Anaphylaxis'],
      commonIn: ['Seafood dishes', 'Fish sauce', 'Asian cuisine']
    }
  ];

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero Section */}
      <header className="bg-blue-600 text-white py-16">
        <div className="max-w-6xl mx-auto px-4">
          <h1 className="text-4xl md:text-5xl font-bold mb-4">
            Understanding Food Allergens
          </h1>
          <p className="text-xl opacity-90">
            Your comprehensive guide to common food allergies, symptoms, and safety
          </p>
        </div>
      </header>

      {/* Search Bar */}
      <div className="max-w-6xl mx-auto px-4 -mt-6">
        <div className="bg-white rounded-lg shadow-lg p-4 flex items-center">
          <Search className="text-gray-400 w-5 h-5 mr-2" />
          <input
            type="text"
            placeholder="Search for allergens..."
            className="w-full outline-none text-gray-700"
          />
        </div>
      </div>

      {/* Emergency Banner */}
      <div className="bg-red-50 border-l-4 border-red-500 p-4 mx-auto max-w-6xl mt-8 mb-8">
        <div className="flex items-center">
          <AlertCircle className="text-red-500 w-5 h-5 mr-2" />
          <p className="text-red-700">
            If you're experiencing a severe allergic reaction, seek immediate medical attention or call emergency services.
          </p>
        </div>
      </div>

      {/* Main Content */}
      <main className="max-w-6xl mx-auto px-4 py-8">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {allergens.map((allergen) => (
            <div key={allergen.name} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
              <div className="p-6">
                <h2 className="text-xl font-semibold mb-3">{allergen.name}</h2>
                <p className="text-gray-600 mb-4">{allergen.description}</p>
                
                <div className="mb-4">
                  <h3 className="font-medium text-gray-700 mb-2">Common Symptoms:</h3>
                  <ul className="list-disc list-inside text-gray-600">
                    {allergen.symptoms.map((symptom) => (
                      <li key={symptom}>{symptom}</li>
                    ))}
                  </ul>
                </div>

                <div>
                  <h3 className="font-medium text-gray-700 mb-2">Commonly Found In:</h3>
                  <ul className="list-disc list-inside text-gray-600">
                    {allergen.commonIn.map((item) => (
                      <li key={item}>{item}</li>
                    ))}
                  </ul>
                </div>
              </div>
              
              <div className="border-t px-6 py-3">
                <button className="text-blue-600 font-medium flex items-center hover:text-blue-700">
                  Learn more <ChevronRight className="w-4 h-4 ml-1" />
                </button>
              </div>
            </div>
          ))}
        </div>

        {/* Info Section */}
        <div className="mt-12 bg-blue-50 rounded-lg p-6">
          <div className="flex items-start">
            <Info className="text-blue-500 w-6 h-6 mr-3 mt-1" />
            <div>
              <h2 className="text-xl font-semibold mb-3">Did You Know?</h2>
              <p className="text-gray-700">
                Food allergies affect approximately 32 million Americans, including 5.6 million children under age 18.
                Understanding food allergens and their presence in various foods is crucial for maintaining safety and well-being.
              </p>
            </div>
          </div>
        </div>
      </main>

      {/* Footer */}
      <footer className="bg-gray-800 text-white mt-16 py-8">
        <div className="max-w-6xl mx-auto px-4">
          <p className="text-center text-gray-400">
            This website is for informational purposes only. Always consult with a healthcare professional about your specific allergies.
          </p>
        </div>
      </footer>
    </div>
  );
}