interface Event {
  id: string;
  partner_id: string;            // Who created it
  event_name: string;            // "María's Quinceañera"
  event_slug: string;            // URL: ?event=maria-quince
  
  // Credits
  credits_allocated: number;     // Total budget (e.g., 5000 = 50 photos)
  credits_used: number;          // Consumed so far
  
  // Dates
  start_date: string;            // Event begins
  end_date: string;              // Event ends
  
  // Branding
  config: {
    logo_url?: string;           // Client logo
    primary_color: string;       // Hex color (#ff69b4)
    welcome_text: string;        // Greeting message
    show_welcome_screen: boolean;// Pre-event landing page
  };
  
  // AI Styles
  selected_styles: string[];     // ['pixar_a', 'disney_a', 'barbie_a']
  
  is_active: boolean;            // Can be disabled by partner
}

// src/App.tsx:1096
if (isPreEvent) {
  return (
    <div className="pre-event-screen">
      {eventConfig.config?.logo_url && (
        <img src={eventConfig.config.logo_url} alt="Logo" />
      )}
      <h1>{eventConfig.event_name}</h1>
      <p>{eventConfig.config?.welcome_text}</p>
      <p>Comienza el {new Date(eventConfig.start_date).toLocaleDateString()}</p>
    </div>
  );
}

// Event becomes read-only
// Guests see: "Este evento ya finalizó. ¡Gracias por participar!"
// Partner can still:
// - View analytics
// - Download all photos
// - Export generation report

// src/components/kiosk/GuestExperience.tsx:23
export const GuestExperience: React.FC<GuestExperienceProps> = ({
  eventConfig, supabase
}) => {
  const [step, setStep] = useState<Step>('WELCOME');
  
  // Step 1: Welcome screen with event branding
  // Step 2: Select AI style (from event.selected_styles)
  // Step 3: Capture photo with camera
  // Step 4: Processing (10-15 seconds)
  // Step 5: Result with download/share options
};

// src/components/EventQRGenerator.tsx:14
const EventQRGenerator = ({ eventSlug }: { eventSlug: string }) => {
  const eventUrl = `https://app.metalabia.com?event=${eventSlug}`;
  
  return (
    <div>
      <QRCodeSVG
        value={eventUrl}
        size={512}
        level="H"          // High error correction (30%)
        includeMargin={true}
        imageSettings={{
          src: '/logo.png',
          height: 64,
          width: 64,
          excavate: true   // Remove background behind logo
        }}
      />
      
      <button onClick={downloadQR}>Descargar PNG</button>
      <button onClick={downloadSVG}>Descargar SVG</button>
    </div>
  );
};

// src/hooks/useBranding.ts:100
const handleLogoUpload = async (file: File) => {
  // Validate file
  if (file.size > 5 * 1024 * 1024) {
    throw new Error('Logo debe ser menor a 5MB');
  }
  
  if (!file.type.startsWith('image/')) {
    throw new Error('Solo se aceptan imágenes');
  }
  
  setIsUploading(true);
  
  // Upload to Supabase Storage
  const filePath = `${partner.id}/${Date.now()}-${file.name}`;
  const { data, error } = await supabase.storage
    .from('event-logos')
    .upload(filePath, file, {
      cacheControl: '3600',
      upsert: false
    });
  
  if (error) throw error;
  
  // Get public URL
  const { data: publicUrl } = supabase.storage
    .from('event-logos')
    .getPublicUrl(data.path);
  
  // Update config
  setBrandingConfig(prev => ({
    ...prev,
    logo_url: publicUrl.publicUrl
  }));
  
  setIsUploading(false);
};

// Applied at runtime when event loads
const applyBranding = (primaryColor: string) => {
  const root = document.documentElement;
  
  // Main accent color
  root.style.setProperty('--accent-color', primaryColor);
  
  // Glow/shadow variant (40% opacity)
  const rgba = hexToRgba(primaryColor, 0.4);
  root.style.setProperty('--accent-glow', rgba);
  
  // All CSS using these variables updates instantly:
  // - Buttons background
  // - Text highlights
  // - Loading spinners
  // - Confetti colors
};

// Example usage:
applyBranding('#ff69b4');  // Hot pink for a quinceañera

config: {
  welcome_text: '¡Bienvenidos a la boda de Juan & María! 💍'
}

// src/components/dashboards/partner/EventsSection.tsx:25
const eventStats = {
  total_photos: 87,
  credits_used: 8_700,
  credits_remaining: 1_300,
  avg_generation_time: '12s',
  peak_usage: '22:30 - 23:00',
  most_popular_style: 'Pixar'
};

// src/components/dashboards/ClientDashboard.tsx:200
const clientView = {
  photos_generated: 87,
  credits_remaining: 1_300,
  event_url: 'app.metalabia.com?event=maria-quince',
  qr_downloads: 3,
  gallery_link: '/gallery?event=maria-quince'
};

// src/components/EventGallery.tsx:14
const LiveGallery = ({ eventId }: { eventId: string }) => {
  const [photos, setPhotos] = useState<any[]>([]);
  
  useEffect(() => {
    // Subscribe to new generations
    const subscription = supabase
      .channel(`event_${eventId}`)
      .on(
        'postgres_changes',
        {
          event: 'INSERT',
          schema: 'public',
          table: 'generations',
          filter: `event_id=eq.${eventId}`
        },
        (payload) => {
          setPhotos(prev => [payload.new, ...prev]);
          playShutterSound();
        }
      )
      .subscribe();
    
    return () => subscription.unsubscribe();
  }, [eventId]);
  
  return (
    <div className="photo-grid">
      {photos.map(photo => (
        <img key={photo.id} src={photo.image_url} alt="Generation" />
      ))}
    </div>
  );
};