Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed to enable users to process videos directly in their browser using FFmpeg.wasm. The primary purpose is to allow users to upload a video file and generate clips based on specified segment durations without the need for a backend server.

## CORE FEATURES
1. **Video Upload**: Users can easily upload their video files using a simple drag-and-drop interface or a traditional file input.
2. **Clip Generation**: Upon clicking the 'Generar Clips' button, the application processes the video to create clips based on a specified duration (90 seconds) using FFmpeg.wasm.
3. **Real-time Processing**: The application operates entirely on the client side, providing immediate feedback and results without needing to communicate with a server.
4. **Segment Management**: If the segmentation format runs into issues, the application utilizes a JavaScript loop to read the video duration and create individual clips sequentially.
5. **Result Display**: Users can view and download the generated video clips, which are stored in an array within the application state.
6. **Responsive Design**: The application is optimized for various device sizes, ensuring usability on both desktop and mobile platforms.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Layout**: 
  - A centered hero section with a video upload area and the 'Generar Clips' button.
  - A results section below the hero to display generated clips with download links.
  - Clear spacing between elements to enhance readability and usability.
- **Typography**: 
  - Primary font: 'Roboto', sans-serif.
  - Hierarchy: Headings in bold, larger sizes for emphasis, and standard text in regular weight for clarity.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for type safety and modern component-based architecture.
- **Styling**: Tailwind CSS for rapid styling and responsive design features.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist design.
- **State Management**: Use React's built-in state management (useState, useEffect) to handle video uploads and clip storage.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Upload Component**: Build a component for video upload featuring drag-and-drop functionality and a file input.
3. **Integrate FFmpeg.wasm**: Load FFmpeg.wasm when the application mounts using the `useEffect` hook.
4. **Handle Video Processing**: Implement the logic to write the uploaded video to the virtual file system and execute the FFmpeg command to generate clips.
5. **Implement Result Handling**: Store generated clips in an array and display them in the results section with download links.
6. **Style the Application**: Use Tailwind CSS to style all components, ensuring a clean and minimalist aesthetic that adheres to the design specifications.
7. **Test Functionality**: Ensure all features work seamlessly across different browsers and devices, focusing on user experience.

## USER EXPERIENCE
Users will first encounter a straightforward interface that invites them to upload a video. After selecting a video file, they click the 'Generar Clips' button, triggering the processing. During this time, they can view a loading indicator. Once processing is complete, the generated clips are displayed below the upload section, each with a download link. Users can easily repeat the process with new videos, ensuring an intuitive and engaging interaction flow. The application is fully responsive, providing a smooth experience on both mobile and desktop devices.