{% extends 'base.html' %}
{% block title %}Welcome - {{ project_name }}{% endblock %}
{% block head %}
    <style>
        body {
            min-height: 100vh;
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: radial-gradient(1200px 500px at 10% 10%, rgba(118, 75, 162, 0.25), transparent 70%),
                        radial-gradient(1000px 600px at 90% 20%, rgba(102, 126, 234, 0.25), transparent 70%),
                        linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .glass {
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 20px;
        }
        .brand {
            letter-spacing: 1px;
        }
        .pulse {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.03); opacity: 0.95; }
            100% { transform: scale(1); opacity: 1; }
        }
        .btn-start {
            background: linear-gradient(45deg, #00d2ff, #3a7bd5);
            border: none;
            border-radius: 30px;
            padding: 12px 28px;
            font-weight: 600;
            transition: transform .2s ease, box-shadow .2s ease;
        }
        .btn-start:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }
        .feature-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,0.15);
            border: 1px solid rgba(255,255,255,0.2);
        }
    </style>
    <script>
        // Auto-redirect to step1 after a brief delay (optional)
        // setTimeout(() => window.location.href = '/step1', 4000);
    </script>
{% endblock %}
{% block content %}
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-10">
                <div class="glass p-5 text-center">
                    <div class="mb-3">
                        <span class="feature-icon me-2"><i class="fas fa-bolt text-warning"></i></span>
                        <span class="feature-icon"><i class="fas fa-brain text-info"></i></span>
                    </div>
                    <h1 class="display-5 fw-bold brand pulse">Welcome to {{ project_name }}</h1>
                    <p class="lead mt-3 mb-4">AI-powered Exam Paper Generator. Create high-quality question papers in minutes with MCQ, Short, and Long sections.</p>
                    <div class="d-flex justify-content-center gap-3 flex-wrap mb-4">
                        <div class="feature-icon"><i class="fas fa-list-ul"></i></div>
                        <small>MCQ, Short OR, Long Attempt-any</small>
                        <div class="feature-icon"><i class="fas fa-sliders-h"></i></div>
                        <small>Custom marks and duration</small>
                        <div class="feature-icon"><i class="fas fa-file-export"></i></div>
                        <small>Printable and downloadable</small>
                    </div>
                    <a href="/step1" class="btn btn-start btn-lg">
                        <i class="fas fa-arrow-right me-2"></i>Get Started
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="container mt-4">
        <div class="row g-4">
            <div class="col-md-4">
                <div class="glass p-4 h-100">
                    <div class="mb-2"><i class="fas fa-magic"></i></div>
                    <h5>Smart Generation</h5>
                    <small>Transforms your syllabus into structured questions with contextual MCQ options.</small>
                </div>
            </div>
            <div class="col-md-4">
                <div class="glass p-4 h-100">
                    <div class="mb-2"><i class="fas fa-paint-brush"></i></div>
                    <h5>Beautiful Output</h5>
                    <small>Clean, printable layouts with clear sections and instructions.</small>
                </div>
            </div>
            <div class="col-md-4">
                <div class="glass p-4 h-100">
                    <div class="mb-2"><i class="fas fa-lock"></i></div>
                    <h5>Privacy First</h5>
                    <small>Your content is processed on demand; no database storage by default.</small>
                </div>
            </div>
        </div>
    </div>

{% endblock %}