{assign var="page_title" value="Welcome to EasyStream"}

<div class="homepage">
    <!-- Hero Section -->
    <section class="hero-section">
        <div class="hero-content">
            <h1>Welcome to EasyStream</h1>
            <p>Discover, upload, and share amazing videos with the world</p>
            {if !$is_logged_in}
                <div class="hero-actions">
                    <a href="/register" class="btn btn-primary">Get Started</a>
                    <a href="/login" class="btn btn-secondary">Sign In</a>
                </div>
            {else}
                <div class="hero-actions">
                    <a href="/upload" class="btn btn-primary">Upload Video</a>
                    <a href="/browse" class="btn btn-secondary">Browse Videos</a>
                </div>
            {/if}
        </div>
        <div class="hero-stats">
            <div class="stat-item">
                <span class="stat-number">{$stats.total_videos}</span>
                <span class="stat-label">Videos</span>
            </div>
            <div class="stat-item">
                <span class="stat-number">{$stats.total_views}</span>
                <span class="stat-label">Views</span>
            </div>
            <div class="stat-item">
                <span class="stat-number">{$stats.total_users}</span>
                <span class="stat-label">Creators</span>
            </div>
        </div>
    </section>

    <!-- Featured Videos -->
    {if $featured_videos}
    <section class="featured-section">
        <div class="section-header">
            <h2>Featured Videos</h2>
            <a href="/browse?featured=1" class="view-all">View All</a>
        </div>
        <div class="video-grid featured-grid">
            {$featured_video_cards}
        </div>
    </section>
    {/if}

    <!-- Trending Videos -->
    {if $trending_videos}
    <section class="trending-section">
        <div class="section-header">
            <h2>🔥 Trending This Week</h2>
            <a href="/browse?trending=1" class="view-all">View All</a>
        </div>
        <div class="video-grid">
            {$trending_video_cards}
        </div>
    </section>
    {/if}

    <!-- Latest Videos -->
    <section class="latest-section">
        <div class="section-header">
            <h2>Latest Uploads</h2>
            <a href="/browse" class="view-all">View All</a>
        </div>
        <div class="video-grid">
            {$video_cards}
        </div>
    </section>

    <!-- Categories -->
    {if $categories}
    <section class="categories-section">
        <div class="section-header">
            <h2>Browse by Category</h2>
        </div>
        <div class="categories-grid">
            {foreach from=$categories item=category}
                <a href="/browse?category={$category.ct_id}" class="category-card">
                    <div class="category-icon">
                        <i class="icon-{$category.ct_name|lower}"></i>
                    </div>
                    <h3>{$category.ct_name}</h3>
                    <span class="video-count">{$category.video_count} videos</span>
                </a>
            {/foreach}
        </div>
    </section>
    {/if}

    <!-- Call to Action -->
    {if !$is_logged_in}
    <section class="cta-section">
        <div class="cta-content">
            <h2>Ready to Share Your Story?</h2>
            <p>Join thousands of creators sharing their passion with the world</p>
            <a href="/register" class="btn btn-primary btn-large">Start Creating Today</a>
        </div>
    </section>
    {/if}
</div>