<div style="background: white; border-radius: 8px; padding: 30px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-bottom: 20px;">
    <h2 style="color: #333; margin-bottom: 20px;">📊 Dashboard Features</h2>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px;">
        <div style="background: #f8f9fa; padding: 20px; border-radius: 6px; border-left: 4px solid #007bff;">
            <h3 style="color: #007bff; margin-bottom: 10px;">📈 Analytics Dashboard</h3>
            <p style="color: #666;">Comprehensive media performance metrics and insights</p>
        </div>
        <div style="background: #f8f9fa; padding: 20px; border-radius: 6px; border-left: 4px solid #28a745;">
            <h3 style="color: #28a745; margin-bottom: 10px;">🎯 Channel Performance</h3>
            <p style="color: #666;">Multi-channel attribution and performance analysis</p>
        </div>
        <div style="background: #f8f9fa; padding: 20px; border-radius: 6px; border-left: 4px solid #ffc107;">
            <h3 style="color: #ffc107; margin-bottom: 10px;">📱 Interactive Charts</h3>
            <p style="color: #666;">Dynamic visualizations and trend analysis</p>
        </div>
        <div style="background: #f8f9fa; padding: 20px; border-radius: 6px; border-left: 4px solid #dc3545;">
            <h3 style="color: #dc3545; margin-bottom: 10px;">🤖 AI Insights</h3>
            <p style="color: #666;">AI-powered recommendations and optimization</p>
        </div>
    </div>
</div>

<div style="background: white; border-radius: 8px; padding: 30px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-bottom: 20px;">
    <h2 style="color: #333; margin-bottom: 20px;">🔧 Deployment Status</h2>
    <div style="background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 6px; padding: 20px; margin-bottom: 20px;">
        <h3 style="color: #856404; margin-bottom: 10px;">⚠️ Deployment in Progress</h3>
        <p style="color: #856404; margin-bottom: 15px;">The AMI Dashboard is currently being deployed. Here's what's happening:</p>
        <ul style="color: #856404; margin-left: 20px;">
            <li>✅ Hugo site integration completed</li>
            <li>🔄 Frontend deployment to Vercel (in progress)</li>
            <li>🔄 Backend deployment to Railway (in progress)</li>
            <li>⏳ Final integration and testing</li>
        </ul>
    </div>
    
    <div style="background: #d1ecf1; border: 1px solid #bee5eb; border-radius: 6px; padding: 20px;">
        <h3 style="color: #0c5460; margin-bottom: 10px;">📋 Next Steps</h3>
        <p style="color: #0c5460; margin-bottom: 15px;">To complete the deployment:</p>
        <ol style="color: #0c5460; margin-left: 20px;">
            <li>Deploy frontend to Vercel: <code>cd /Users/senthil/Desktop/genbi-analytics/frontend && vercel login && vercel --prod</code></li>
            <li>Deploy backend to Railway: <code>cd /Users/senthil/Desktop/genbi-analytics/backend && railway login && railway up</code></li>
            <li>Update the iframe URL in this file with your Vercel URL</li>
            <li>Push changes to deploy the updated Hugo site</li>
        </ol>
    </div>
</div>

<div style="background: white; border-radius: 8px; padding: 30px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
    <h2 style="color: #333; margin-bottom: 20px;">🎯 Demo Preview</h2>
    <p style="color: #666; margin-bottom: 20px;">Here's what the AMI Dashboard will look like once deployed:</p>
    
    <div style="background: #f8f9fa; border-radius: 6px; padding: 20px; border: 2px dashed #dee2e6;">
        <div style="text-align: center; padding: 40px;">
            <div style="font-size: 48px; margin-bottom: 20px;">📊</div>
            <h3 style="color: #333; margin-bottom: 10px;">AMI Dashboard Preview</h3>
            <p style="color: #666; margin-bottom: 20px;">Interactive analytics dashboard with:</p>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;">
                <div style="background: white; padding: 15px; border-radius: 4px; text-align: center;">
                    <div style="font-size: 24px; margin-bottom: 5px;">💰</div>
                    <strong>Spend Analytics</strong>
                </div>
                <div style="background: white; padding: 15px; border-radius: 4px; text-align: center;">
                    <div style="font-size: 24px; margin-bottom: 5px;">👁️</div>
                    <strong>Impressions</strong>
                </div>
                <div style="background: white; padding: 15px; border-radius: 4px; text-align: center;">
                    <div style="font-size: 24px; margin-bottom: 5px;">🖱️</div>
                    <strong>Clicks & CTR</strong>
                </div>
                <div style="background: white; padding: 15px; border-radius: 4px; text-align: center;">
                    <div style="font-size: 24px; margin-bottom: 5px;">📹</div>
                    <strong>Video Metrics</strong>
                </div>
            </div>
            <p style="color: #007bff; font-weight: bold;">🚀 Coming Soon - Full Interactive Dashboard!</p>
        </div>
    </div>
</div>