{% extends "base.html" %}

{% block title %}Welcome - Review Hound{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <!-- Header -->
    <div class="text-center mb-16">
        <h1 class="text-3xl font-semibold text-[var(--text-primary)] mb-3">Welcome to Review Hound</h1>
        <p class="text-lg text-[var(--text-muted)] mb-6">Monitor and analyze your business reviews across platforms</p>
        <a href="{{ url_for('main.dashboard') }}" class="inline-flex items-center gap-2 bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition font-medium">
            Get Started
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        </a>
    </div>

    <!-- Section 1: Add a Business -->
    <div class="mb-16 grid md:grid-cols-2 gap-8 items-center">
        <div class="bg-[var(--bg-muted)] rounded-lg aspect-video flex items-center justify-center border border-[var(--border)]">
            <span class="text-[var(--text-muted)] text-sm">Screenshot: Add business modal with source search results</span>
        </div>
        <div>
            <h2 class="text-xl font-semibold text-[var(--text-primary)] mb-3">Add a Business</h2>
            <p class="text-[var(--text-secondary)]">
                Enter your business name and Review Hound will search TrustPilot, BBB, and other platforms to find your listings. Select the correct matches or enter URLs manually.
            </p>
        </div>
    </div>

    <!-- Section 2: Dashboard Overview -->
    <div class="mb-16 grid md:grid-cols-2 gap-8 items-center">
        <div class="md:order-2 bg-[var(--bg-muted)] rounded-lg aspect-video flex items-center justify-center border border-[var(--border)]">
            <span class="text-[var(--text-muted)] text-sm">Screenshot: Dashboard with business cards</span>
        </div>
        <div class="md:order-1">
            <h2 class="text-xl font-semibold text-[var(--text-primary)] mb-3">Dashboard Overview</h2>
            <p class="text-[var(--text-secondary)]">
                See all your businesses at a glance with average ratings, review counts, and sentiment analysis. Color-coded bars show the balance of positive and negative feedback.
            </p>
        </div>
    </div>

    <!-- Section 3: Review Details -->
    <div class="mb-16 grid md:grid-cols-2 gap-8 items-center">
        <div class="bg-[var(--bg-muted)] rounded-lg aspect-video flex items-center justify-center border border-[var(--border)]">
            <span class="text-[var(--text-muted)] text-sm">Screenshot: Business detail page with chart and reviews</span>
        </div>
        <div>
            <h2 class="text-xl font-semibold text-[var(--text-primary)] mb-3">Review Details</h2>
            <p class="text-[var(--text-secondary)]">
                Track rating trends over time with interactive charts. Browse individual reviews, filter by source or sentiment, and export data to CSV for further analysis.
            </p>
        </div>
    </div>

    <!-- Section 4: Alerts -->
    <div class="mb-16 grid md:grid-cols-2 gap-8 items-center">
        <div class="md:order-2 bg-[var(--bg-muted)] rounded-lg aspect-video flex items-center justify-center border border-[var(--border)]">
            <span class="text-[var(--text-muted)] text-sm">Screenshot: Alert configuration panel</span>
        </div>
        <div class="md:order-1">
            <h2 class="text-xl font-semibold text-[var(--text-primary)] mb-3">Alerts</h2>
            <p class="text-[var(--text-secondary)]">
                Get notified when new negative reviews come in. Configure email alerts with customizable thresholds so you can respond quickly to customer concerns.
            </p>
        </div>
    </div>

    <!-- Section 5: Settings -->
    <div class="mb-16 grid md:grid-cols-2 gap-8 items-center">
        <div class="bg-[var(--bg-muted)] rounded-lg aspect-video flex items-center justify-center border border-[var(--border)]">
            <span class="text-[var(--text-muted)] text-sm">Screenshot: Settings page with API keys</span>
        </div>
        <div>
            <h2 class="text-xl font-semibold text-[var(--text-primary)] mb-3">Settings</h2>
            <p class="text-[var(--text-secondary)]">
                Add API keys for Google Places and Yelp Fusion to access official review data. Fine-tune sentiment analysis weights to match your business needs.
            </p>
        </div>
    </div>

    <!-- Footer CTA -->
    <div class="text-center py-8 border-t border-[var(--border)]">
        <a href="{{ url_for('main.dashboard') }}" class="inline-flex items-center gap-2 bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition font-medium">
            Get Started
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        </a>
    </div>
</div>
{% endblock %}