Create a single-page Single Page Application (SPA) using React and Tailwind CSS. The application's primary function is to detect and verify potentially fabricated quotes within text, particularly those generated by AI.
**Core Functionality:**
1. **Text Input:** A large textarea where users can paste or type their text.
2. **URL Input (Optional):** An input field to paste a URL for text extraction and analysis.
3. **Analysis Trigger:** A prominent 'Analyze Text' button.
4. **Results Display:** After analysis, the original text should be displayed, with potentially fabricated or questionable quotes highlighted (e.g., using a distinct background color like light yellow or red underline).
5. **Verification Suggestions:** For each highlighted quote, a small, unobtrusive icon or label should appear. Clicking this should reveal a section below the quote or in a sidebar suggesting potential verification steps, sources, or counter-evidence. This could be a placeholder initially, indicating 'Searching for verification...' or similar.
6. **Loading State:** A clear visual indicator (e.g., spinner, progress bar) while the analysis is in progress.
7. **Error Handling:** Display user-friendly error messages for invalid URLs, network issues, or analysis failures.
**Technical Requirements:**
* **Frontend Framework:** React
* **Styling:** Tailwind CSS for rapid UI development and a clean, modern look.
* **State Management:** Basic React state management (useState, useContext) should suffice for this SPA.
* **API Integration (Placeholder):** The application should be structured to easily integrate with a backend API for the actual AI-powered quote detection. For the MVP, the analysis trigger can simulate a loading state and display placeholder results. Assume an API endpoint `/api/analyze` that accepts text and returns JSON with the original text, highlighted quote spans, and suggested verification actions.
* **Component Structure:** Organize the code into logical components (e.g., `App.js`, `TextInput.js`, `UrlInput.js`, `ResultsDisplay.js`, `QuoteHighlight.js`, `VerificationSuggestion.js`).
* **Responsiveness:** The layout should be responsive and work well on various screen sizes.
**User Experience (UX) Focus:**
* Keep the interface clean and focused on the primary task of text analysis.
* Provide clear feedback to the user throughout the process (loading, success, error).
* Make the highlighted quotes and verification suggestions easy to understand.
**Initial Mock Data/Simulation:**
For the purpose of building the frontend without a backend, simulate the API response. When the 'Analyze Text' button is clicked, after a 2-second delay, populate the results with sample data, including a few highlighted quotes and placeholder verification suggestions. For example:
```json
{
"originalText": "The report stated, \"The sky is green and the grass is blue.\" This is a significant finding according to Dr. Smith.",
"analysisResults": [
{
"quote": "The sky is green and the grass is blue.",
"startIndex": 25,
"endIndex": 58,
"verification": {
"status": "suggestion",
"message": "Contradicts common knowledge. Check meteorological data or scientific consensus.",
"suggestionType": "external_search"
}
},
{
"quote": "Dr. Smith",
"startIndex": 79,
"endIndex": 88,
"verification": {
"status": "info",
"message": "Consider verifying Dr. Smith's credentials and affiliation.",
"suggestionType": "profile_lookup"
}
}
]
}
```
Begin by setting up the basic React SPA structure, the main `App` component, and the input fields. Use Tailwind CSS classes directly for styling.