Add full SEO optimization for Spanglish social and language events

- Add comprehensive metadata to root layout with Open Graph, Twitter cards
- Create dynamic sitemap.ts for all pages and events
- Create robots.ts with proper allow/disallow rules
- Add JSON-LD Event structured data to event detail pages
- Add page-specific metadata to events, community, contact, FAQ pages
- Add FAQ structured data schema
- Update footer with local SEO text for Asunción, Paraguay
- Add web manifest for mobile SEO
- Create 404 page with proper noindex
- Optimize image alt text and add lazy loading
- Add NEXT_PUBLIC_SITE_URL env variable
- Add about/ folder to gitignore

frontend/src/app/admin/events/page.tsx

@@ -1,13 +1,14 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { useLanguage } from '@/context/LanguageContext';
-import { eventsApi, mediaApi, Event } from '@/lib/api';
+import { eventsApi, Event } from '@/lib/api';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import Input from '@/components/ui/Input';
-import { PlusIcon, PencilIcon, TrashIcon, EyeIcon, PhotoIcon, ArrowUpTrayIcon, DocumentDuplicateIcon, ArchiveBoxIcon } from '@heroicons/react/24/outline';
+import MediaPicker from '@/components/MediaPicker';
+import { PlusIcon, PencilIcon, TrashIcon, EyeIcon, PhotoIcon, DocumentDuplicateIcon, ArchiveBoxIcon } from '@heroicons/react/24/outline';
 import toast from 'react-hot-toast';
 import clsx from 'clsx';
 
@@ -18,8 +19,6 @@ export default function AdminEventsPage() {
   const [showForm, setShowForm] = useState(false);
   const [editingEvent, setEditingEvent] = useState<Event | null>(null);
   const [saving, setSaving] = useState(false);
-  const [uploading, setUploading] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
   
   const [formData, setFormData] = useState<{
     title: string;
@@ -166,25 +165,6 @@ export default function AdminEventsPage() {
     }
   };
 
-  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    setUploading(true);
-    try {
-      const result = await mediaApi.upload(file, editingEvent?.id, 'event');
-      // Use proxied path so it works through Next.js rewrites
-      setFormData({ ...formData, bannerUrl: result.url });
-      toast.success('Image uploaded successfully');
-    } catch (error: any) {
-      toast.error(error.message || 'Failed to upload image');
-    } finally {
-      setUploading(false);
-      if (fileInputRef.current) {
-        fileInputRef.current.value = '';
-      }
-    }
-  };
 
   const formatDate = (dateStr: string) => {
     return new Date(dateStr).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
@@ -360,53 +340,13 @@ export default function AdminEventsPage() {
                 </select>
               </div>
 
-              {/* Image Upload */}
-              <div>
-                <label className="block text-sm font-medium mb-1">Event Banner Image</label>
-                <div className="mt-2">
-                  {formData.bannerUrl ? (
-                    <div className="relative">
-                      <img 
-                        src={formData.bannerUrl} 
-                        alt="Event banner" 
-                        className="w-full h-40 object-cover rounded-btn"
-                      />
-                      <button
-                        type="button"
-                        onClick={() => setFormData({ ...formData, bannerUrl: '' })}
-                        className="absolute top-2 right-2 bg-red-500 text-white p-1 rounded-full hover:bg-red-600"
-                      >
-                        <TrashIcon className="w-4 h-4" />
-                      </button>
-                    </div>
-                  ) : (
-                    <div 
-                      onClick={() => fileInputRef.current?.click()}
-                      className="border-2 border-dashed border-secondary-light-gray rounded-btn p-8 text-center cursor-pointer hover:border-primary-yellow transition-colors"
-                    >
-                      {uploading ? (
-                        <div className="flex flex-col items-center">
-                          <div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full" />
-                          <p className="mt-2 text-sm text-gray-500">Uploading...</p>
-                        </div>
-                      ) : (
-                        <div className="flex flex-col items-center">
-                          <PhotoIcon className="w-12 h-12 text-gray-400" />
-                          <p className="mt-2 text-sm text-gray-600">Click to upload event image</p>
-                          <p className="text-xs text-gray-400">JPEG, PNG, GIF, WebP (max 5MB)</p>
-                        </div>
-                      )}
-                    </div>
-                  )}
-                  <input
-                    ref={fileInputRef}
-                    type="file"
-                    accept="image/jpeg,image/png,image/gif,image/webp,image/avif"
-                    onChange={handleImageUpload}
-                    className="hidden"
-                  />
-                </div>
-              </div>
+              {/* Image Upload / Media Picker */}
+              <MediaPicker
+                value={formData.bannerUrl}
+                onChange={(url) => setFormData({ ...formData, bannerUrl: url })}
+                relatedId={editingEvent?.id}
+                relatedType="event"
+              />
               
               <div className="flex gap-3 pt-4">
                 <Button type="submit" isLoading={saving}>