{% extends "base.html" %}

{% block title %}Home{% endblock %}

{% block content %}
<section class="hero">
    <div class="hero-content">
        <div class="hero-badge">
            <span class="pulse-dot"></span>
            <span>Industry-Level AI Data Science Platform</span>
        </div>

        <h1 class="hero-title">
            Your Intelligent<br>
            <span class="gradient-text">Data Science Companion</span>
        </h1>

        <p class="hero-subtitle">
            Upload any CSV dataset and let AI automatically analyze, visualize, and build machine learning models. 
            No coding required. Fully automated data science pipeline.
        </p>

        <div class="hero-buttons">
            <a href="/upload" class="btn-liquid">
                <i class="fas fa-cloud-upload-alt"></i>
                Upload Dataset
            </a>
            <a href="/dashboard" class="btn-liquid btn-liquid-outline">
                <i class="fas fa-chart-line"></i>
                Go to Dashboard
            </a>
        </div>

        <div class="hero-stats">
            <div class="hero-stat-card">
                <div class="hero-stat-value">∞</div>
                <div class="hero-stat-label">Data Types</div>
            </div>
            <div class="hero-stat-card">
                <div class="hero-stat-value">100%</div>
                <div class="hero-stat-label">Automated</div>
            </div>
            <div class="hero-stat-card">
                <div class="hero-stat-value">0</div>
                <div class="hero-stat-label">Code Needed</div>
            </div>
            <div class="hero-stat-card">
                <div class="hero-stat-value">ML</div>
                <div class="hero-stat-label">AutoML Built-in</div>
            </div>
        </div>
    </div>
</section>

<section class="features-section">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">Powerful Features</h2>
            <p class="section-subtitle">
                Everything you need for professional data analysis, all in one automated platform
            </p>
        </div>

        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">📊</div>
                <div class="feature-title">Auto Analysis</div>
                <div class="feature-desc">
                    Automatic data profiling, quality scoring, statistical summaries, and missing value detection. 
                    Every dataset gets a complete health check instantly.
                </div>
            </div>

            <div class="feature-card">
                <div class="feature-icon">📈</div>
                <div class="feature-title">Smart Visualizations</div>
                <div class="feature-desc">
                    Interactive Plotly charts generated automatically based on your data types. 
                    Histograms, box plots, heatmaps, PCA, clustering, and 3D plots.
                </div>
            </div>

            <div class="feature-card">
                <div class="feature-icon">🤖</div>
                <div class="feature-title">AutoML Engine</div>
                <div class="feature-desc">
                    Automatic classification and regression with model leaderboard. 
                    Trains Logistic Regression, Random Forest, Gradient Boosting, and more.
                </div>
            </div>

            <div class="feature-card">
                <div class="feature-icon">🧠</div>
                <div class="feature-title">AI Insights</div>
                <div class="feature-desc">
                    Real data-driven insights from actual calculations. Correlations, skewness, 
                    imbalances, anomalies, and actionable recommendations.
                </div>
            </div>

            <div class="feature-card">
                <div class="feature-icon">⚙️</div>
                <div class="feature-title">Data Operations</div>
                <div class="feature-desc">
                    Transform your data with mathematical operations, filtering, sorting, 
                    new column creation, and percentage adjustments. Full control.
                </div>
            </div>

            <div class="feature-card">
                <div class="feature-icon">📑</div>
                <div class="feature-title">Professional Reports</div>
                <div class="feature-desc">
                    Export HTML, JSON, and TXT reports with complete analysis. 
                    Download datasets, charts, insights, and model results.
                </div>
            </div>
        </div>
    </div>
</section>

<section style="padding: 80px 0; background: rgba(102, 126, 234, 0.03);">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">How It Works</h2>
            <p class="section-subtitle">
                Four simple steps to unlock the power of your data
            </p>
        </div>

        <div class="features-grid" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
            <div class="glass-card" style="text-align: center;">
                <div style="font-size: 3rem; margin-bottom: 16px;">1️⃣</div>
                <div class="feature-title">Upload Your CSV</div>
                <div class="feature-desc">Drag and drop any CSV file. No size limits, no format restrictions.</div>
            </div>

            <div class="glass-card" style="text-align: center;">
                <div style="font-size: 3rem; margin-bottom: 16px;">2️⃣</div>
                <div class="feature-title">Auto Analysis</div>
                <div class="feature-desc">AI instantly profiles your data, detects issues, and generates insights.</div>
            </div>

            <div class="glass-card" style="text-align: center;">
                <div style="font-size: 3rem; margin-bottom: 16px;">3️⃣</div>
                <div class="feature-title">Visualize & Model</div>
                <div class="feature-desc">Explore interactive charts and train ML models with one click.</div>
            </div>

            <div class="glass-card" style="text-align: center;">
                <div style="font-size: 3rem; margin-bottom: 16px;">4️⃣</div>
                <div class="feature-title">Export & Share</div>
                <div class="feature-desc">Download reports, cleaned data, and visualizations in any format.</div>
            </div>
        </div>
    </div>
</section>

<section style="padding: 80px 0;">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">Developer</h2>
            <p class="section-subtitle">
                Built by a passionate developer for the data science community
            </p>
        </div>

        <div class="glass-card" style="max-width: 600px; margin: 0 auto; text-align: center;">
            <div style="font-size: 4rem; margin-bottom: 20px;">👨‍💻</div>
            <h3 style="font-size: 1.5rem; margin-bottom: 8px;">issu321</h3>
            <p style="color: var(--text-muted); margin-bottom: 24px;">AI Data Scientist Developer</p>

            <div style="display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">
                <a href="https://github.com/issu321" target="_blank" class="github-badge">
                    <svg viewBox="0 0 24 24" style="width: 18px; height: 18px; fill: currentColor;">
                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                    </svg>
                    GitHub Profile
                </a>
                <a href="https://github.com/issu321/AI-Data-Scientist" target="_blank" class="github-badge">
                    <svg viewBox="0 0 24 24" style="width: 18px; height: 18px; fill: currentColor;">
                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                    </svg>
                    Repository
                </a>
            </div>
        </div>
    </div>
</section>
{% endblock %}