<?php
/**
 * Overview Section
 * Main dashboard overview with key metrics
 */
?>
<div class="dashboard-grid">
    <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
        <h2>📊 SEO Analytics Dashboard</h2>
        
        <div style="margin-top: 20px;">
            <p><strong>Welcome to your SEO Analytics Dashboard!</strong></p>
            <p>This module provides comprehensive SEO insights and analytics for your website.</p>
        </div>

        <h3>Features Available:</h3>
        <ul style="line-height: 1.8;">
            <li><strong>🔍 Search Performance:</strong> Track clicks, impressions, CTR, and average position from Google Search Console</li>
            <li><strong>⚡ Realtime Activity:</strong> Monitor active users, device breakdown, and per-minute traffic from Google Analytics</li>
            <li><strong>🔗 Backlink Analysis:</strong> View backlink metrics, domain authority, and referring domains</li>
            <li><strong>🔧 Site Audit:</strong> Automated health checks for HTTPS, robots.txt, sitemap, and Core Web Vitals</li>
            <li><strong>🎯 Keyword Research:</strong> Track keyword rankings and organic traffic trends</li>
            <li><strong>📥 Export Reports:</strong> Download analytics data as CSV or PDF</li>
        </ul>

        <h3>Quick Setup:</h3>
        <ol style="line-height: 1.8;">
            <li>Go to <code>Settings</code> tab to configure API keys</li>
            <li>Add your Google Search Console property URL</li>
            <li>Link your Google Analytics 4 property</li>
            <li>Optional: Add SEMrush or Ahrefs API keys for backlink analysis</li>
            <li>Save and refresh to start collecting data</li>
        </ol>

        <h3>API Configuration:</h3>
        <p>Ensure these environment variables are set in your <code>.env</code> file:</p>
        <ul style="line-height: 1.8; font-family: monospace; background: #f5f5f5; padding: 10px; border-radius: 4px;">
            <li>GSC_CLIENT_ID</li>
            <li>GSC_REFRESH_TOKEN</li>
            <li>GA4_PROPERTY_ID</li>
            <li>GA4_REFRESH_TOKEN</li>
            <li>SEMRUSH_API_KEY (optional)</li>
            <li>AHREFS_API_KEY (optional)</li>
        </ul>

        <div style="margin-top: 20px; padding: 15px; background: #e3f2fd; border-radius: 4px; border-left: 4px solid #2196F3;">
            <p><strong>ℹ️ Documentation:</strong> For detailed setup instructions, see <code>/helpers/seo_analytics/README.md</code></p>
        </div>

        <h3>Module Structure:</h3>
        <ul style="line-height: 1.8;">
            <li><code>/helpers/seo_analytics/</code> - Core API integration classes</li>
            <li><code>/api/seo_analytics/</code> - RESTful API endpoints</li>
            <li><code>/admin/seo_analytics/</code> - Admin dashboard interface</li>
            <li><code>/assets/seo_analytics/</code> - CSS and JavaScript assets</li>
        </ul>

        <h3>Navigation Sections:</h3>
        <ul style="line-height: 1.8;">
            <li><strong>Overview</strong> - This page with general information</li>
            <li><strong>Search Performance</strong> - Google Search Console data and trends</li>
            <li><strong>Realtime Activity</strong> - Live user activity and device breakdown</li>
            <li><strong>Backlinks</strong> - Backlink analysis and domain authority</li>
            <li><strong>Site Audit</strong> - Website health and SEO audit results</li>
            <li><strong>Keywords</strong> - Keyword ranking and organic traffic data</li>
            <li><strong>Settings</strong> - Configure API keys and preferences</li>
        </ul>

        <div style="margin-top: 20px; padding: 15px; background: #fff3cd; border-radius: 4px; border-left: 4px solid #ffc107;">
            <p><strong>⚠️ Note:</strong> This dashboard is modular and can be extended with additional features. All data is cached for optimal performance.</p>
        </div>
    </div>

    <!-- Key Metrics Cards -->
    <div style="margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
        <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: center;">
            <div style="font-size: 40px; margin-bottom: 10px;">🔍</div>
            <h4>Search Performance</h4>
            <p style="color: #666; margin-top: 10px;">Track clicks, impressions, CTR and position metrics from Google Search Console</p>
        </div>

        <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: center;">
            <div style="font-size: 40px; margin-bottom: 10px;">⚡</div>
            <h4>Realtime Users</h4>
            <p style="color: #666; margin-top: 10px;">Monitor active users by device from Google Analytics 4 in real-time</p>
        </div>

        <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: center;">
            <div style="font-size: 40px; margin-bottom: 10px;">🔗</div>
            <h4>Backlinks</h4>
            <p style="color: #666; margin-top: 10px;">Analyze backlinks, domain authority, and referring domains data</p>
        </div>

        <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: center;">
            <div style="font-size: 40px; margin-bottom: 10px;">🔧</div>
            <h4>Site Audit</h4>
            <p style="color: #666; margin-top: 10px;">Automated health checks and Core Web Vitals monitoring</p>
        </div>
    </div>
</div>

<style>
.dashboard-grid {
    max-width: 1200px;
}

.dashboard-grid code {
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
}

.dashboard-grid ol, .dashboard-grid ul {
    margin-left: 20px;
}

.dashboard-grid h3 {
    margin-top: 25px;
    color: #333;
}
</style>

