<%- include('partials/header') %>

<!-- Display flash messages -->
<% if (messages.error) { %>
    <div class="alert alert-danger alert-dismissible fade show m-3" role="alert">
        <i class="fas fa-exclamation-triangle me-2"></i>
        <%= messages.error %>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
<% } %>

<% if (messages.success) { %>
    <div class="alert alert-success alert-dismissible fade show m-3" role="alert">
        <i class="fas fa-check-circle me-2"></i>
        <%= messages.success %>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
<% } %>

<div class="hero-section bg-gradient-primary text-white py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <% if (user) { %>
                    <h1 class="display-4 fw-bold mb-4">Welcome back, <%= user.name %>!</h1>
                    <p class="lead mb-4">Ready to enhance your study experience? Upload notes, generate AI quizzes, get personalized revision, and chat with our intelligent assistant.</p>
                    <div class="d-flex gap-3 flex-wrap">
                        <a href="/upload" class="btn btn-light btn-lg">
                            <i class="fas fa-upload me-2"></i>Upload Notes
                        </a>
                        <a href="/quiz" class="btn btn-outline-light btn-lg">
                            <i class="fas fa-question-circle me-2"></i>Take Quiz
                        </a>
                    </div>
                <% } else { %>
                    <h1 class="display-4 fw-bold mb-4">Welcome to EduCat</h1>
                    <p class="lead mb-4">Transform your study experience with AI-powered note revision, personalized quizzes, and intelligent tutoring. Upload your notes and let our smart system create the perfect study environment for you.</p>
                    <div class="d-flex gap-3 flex-wrap">
                        <a href="/login" class="btn btn-light btn-lg">
                            <i class="fas fa-sign-in-alt me-2"></i>Get Started
                        </a>
                        <a href="/register" class="btn btn-outline-light btn-lg">
                            <i class="fas fa-user-plus me-2"></i>Sign Up Free
                        </a>
                    </div>
                <% } %>
            </div>
            <div class="col-lg-6 text-center">
                <img src="/images/logo.png" alt="EduCat" class="img-fluid" style="max-height: 300px;">
            </div>
        </div>
    </div>
</div>

<div class="container py-5">
    <div class="row">
        <div class="col-md-3 mb-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center">
                    <div class="feature-icon bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                        <i class="fas fa-upload fa-2x"></i>
                    </div>
                    <h5 class="card-title">Upload Your Notes</h5>
                    <p class="card-text">Simply upload your study notes in various formats (PDF, DOC, TXT) and let our AI analyze them.</p>
                    <% if (user) { %>
                        <a href="/upload" class="btn btn-primary">Get Started</a>
                    <% } else { %>
                        <a href="/login" class="btn btn-primary">Get Started</a>
                    <% } %>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center">
                    <div class="feature-icon bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                        <i class="fas fa-brain fa-2x"></i>
                    </div>
                    <h5 class="card-title">AI-Powered Revision</h5>
                    <p class="card-text">Our AI will summarize, improve, and generate study questions from your notes automatically.</p>
                    <% if (user) { %>
                        <a href="/dashboard" class="btn btn-success">View Dashboard</a>
                    <% } else { %>
                        <a href="/login" class="btn btn-success">View Dashboard</a>
                    <% } %>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center">
                    <div class="feature-icon bg-warning text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                        <i class="fas fa-question-circle fa-2x"></i>
                    </div>
                    <h5 class="card-title">AI Quiz Generator</h5>
                    <p class="card-text">Generate personalized quizzes on any topic with multiple question types and difficulty levels.</p>
                    <% if (user) { %>
                        <a href="/quiz" class="btn btn-warning">Take Quiz</a>
                    <% } else { %>
                        <a href="/login" class="btn btn-warning">Take Quiz</a>
                    <% } %>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center">
                    <div class="feature-icon bg-info text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                        <i class="fas fa-comments fa-2x"></i>
                    </div>
                    <h5 class="card-title">Interactive Chat</h5>
                    <p class="card-text">Ask questions about your notes and get instant, intelligent responses from our AI assistant.</p>
                    <% if (user) { %>
                        <a href="/chat" class="btn btn-info">Start Chatting</a>
                    <% } else { %>
                        <a href="/login" class="btn btn-info">Start Chatting</a>
                    <% } %>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Quiz Section -->
<div class="bg-gradient-warning py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h2 class="display-5 fw-bold text-white mb-4">Test Your Knowledge</h2>
                <p class="lead text-white mb-4">Generate personalized quizzes on any topic with our AI-powered quiz generator. Choose from multiple question types and difficulty levels to challenge yourself.</p>
                <div class="quiz-features mb-4">
                    <div class="d-flex align-items-center text-white mb-2">
                        <i class="fas fa-check-circle me-3"></i>
                        <span>Multiple choice questions</span>
                    </div>
                    <div class="d-flex align-items-center text-white mb-2">
                        <i class="fas fa-check-circle me-3"></i>
                        <span>True/False questions</span>
                    </div>
                    <div class="d-flex align-items-center text-white mb-2">
                        <i class="fas fa-check-circle me-3"></i>
                        <span>Instant feedback and scoring</span>
                    </div>
                    <div class="d-flex align-items-center text-white mb-2">
                        <i class="fas fa-check-circle me-3"></i>
                        <span>Customizable difficulty levels</span>
                    </div>
                </div>
                <% if (user) { %>
                    <a href="/quiz" class="btn btn-light btn-lg">
                        <i class="fas fa-question-circle me-2"></i>Start Quiz
                    </a>
                <% } else { %>
                    <a href="/login" class="btn btn-light btn-lg">
                        <i class="fas fa-sign-in-alt me-2"></i>Login to Start
                    </a>
                <% } %>
            </div>
            <div class="col-lg-6 text-center">
                <div class="quiz-preview bg-white rounded-3 shadow-lg p-4 mx-auto" style="max-width: 400px;">
                    <h6 class="text-primary mb-3">Sample Quiz Question</h6>
                    <div class="quiz-question mb-3">
                        <p class="fw-bold mb-3">What is the capital of France?</p>
                        <div class="quiz-options">
                            <div class="form-check text-start mb-2">
                                <input class="form-check-input" type="radio" name="sample" disabled>
                                <label class="form-check-label">London</label>
                            </div>
                            <div class="form-check text-start mb-2">
                                <input class="form-check-input" type="radio" name="sample" checked disabled>
                                <label class="form-check-label">Paris ✓</label>
                            </div>
                            <div class="form-check text-start mb-2">
                                <input class="form-check-input" type="radio" name="sample" disabled>
                                <label class="form-check-label">Berlin</label>
                            </div>
                            <div class="form-check text-start">
                                <input class="form-check-input" type="radio" name="sample" disabled>
                                <label class="form-check-label">Madrid</label>
                            </div>
                        </div>
                    </div>
                    <div class="text-success small">
                        <i class="fas fa-check me-1"></i>Correct! Great job.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="bg-light py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 mx-auto text-center">
                <h2 class="mb-4">How EduCat Works</h2>
                <div class="row">
                    <div class="col-md-3">
                        <div class="step-number bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 50px; height: 50px;">1</div>
                        <h6>Upload</h6>
                        <p class="text-muted">Upload your study notes in any supported format</p>
                    </div>
                    <div class="col-md-3">
                        <div class="step-number bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 50px; height: 50px;">2</div>
                        <h6>AI Analysis</h6>
                        <p class="text-muted">Our AI analyzes and processes your content</p>
                    </div>
                    <div class="col-md-3">
                        <div class="step-number bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 50px; height: 50px;">3</div>
                        <h6>Take Quizzes</h6>
                        <p class="text-muted">Generate personalized quizzes to test your knowledge</p>
                    </div>
                    <div class="col-md-3">
                        <div class="step-number bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 50px; height: 50px;">4</div>
                        <h6>Get Results</h6>
                        <p class="text-muted">Receive improved notes, summaries, and instant feedback</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<%- include('partials/footer') %>
