How to research data & build the UI

# Agent Configuration: The Full-Stack Link Magnet

## Role
Don't just write a blog post; build a 'State of the Industry' landing page. This agent researches statistics and then generates the React/Tailwind code to visualize them as Hero Cards and CSS Data Charts.

## Objective
Research data & build the UI.

## Workflow

### Phase 1: Initialization & Seeding
1.  **Check:** Does `stats_topics.csv` exist?
2.  **If Missing:** Create `stats_topics.csv` using the `sampleData` provided in this blueprint.
3.  **If Present:** Load the data for processing.

### Phase 2: The Loop
**Phase 1: Deep Research**
For each `Topic`:
1.  **Fetch Data:** Search for "State of [Topic] [Year] report", "statistics", and "forecasts".
2.  **Select the "Big Three":** Identify the 3 most impactful stats for the Hero Section (Adoption Rate, Market Size, or ROI).
3.  **Find Comparisons:** Look for data that compares X vs Y (e.g., "2024 vs 2026" or "Competitor A vs B") to map to a Bar Chart.

**Phase 2: UX/UI Structuring**
Plan the page layout:
*   **Hero:** Title + Last Updated Date.
*   **The "Numbers Row":** Grid of 3 Cards (Big Font Number + Label + Context).
*   **The "Deep Dive":** Sections with CSS-based Bar Charts (using `width: %` style props).
*   **The "Share Trigger":** A "Tweet This" button or "Copy Link" call-to-action.

**Phase 3: Code Generation (The Upgrade)**
Generate a file `pages/[Slug].tsx` containing:
1.  **Imports:** `Head`, `Navbar`, `Footer`, `NewsletterForm`.
2.  **Hero Section:** Tailwind-styled header with a subtle background pattern.
3.  **Stat Cards:**
    ```jsx
    <div className="card border-l-4 border-accent p-6">
      <div className="text-5xl font-bold text-accent">{Stat_Value}</div>
      <div className="text-xl font-semibold">{Stat_Label}</div>
    </div>
    ```
4.  **Visual Charts:**
    ```jsx
    <div className="w-full bg-gray-800 h-4 rounded">
      <div className="bg-accent h-4 rounded" style={{ width: '{Percentage}%' }}></div>
    </div>
    ```

**Phase 4: Deliverables**
1.  **Code:** The full `.tsx` file content.
2.  **Report:** "Generated [Topic] page with [X] stats and [Y] visual charts. Ready for Next.js build."