{% extends "base.html" %}
{% block title %}Contact - Programming Visualization{% endblock %}
{% block content %}

<section class="page-header">
    <div class="page-header-content">
        <span class="page-tag reveal-scale">Contact</span>
        <h1 class="page-title reveal-left">Get In Touch</h1>
        <p class="page-subtitle reveal-left">Have questions or feedback? We'd love to hear from you.</p>
    </div>
</section>

<section class="section">
    <div class="contact-grid">
        <div class="contact-info glass reveal-left">
            <h3><i class="fas fa-address-card"></i> Developer Info</h3>
            <div class="contact-item">
                <i class="fas fa-user"></i>
                <div>
                    <span class="contact-label">Developer</span>
                    <span class="contact-value">issu321</span>
                </div>
            </div>
            <div class="contact-item">
                <i class="fab fa-github"></i>
                <div>
                    <span class="contact-label">GitHub</span>
                    <a href="https://github.com/issu321" target="_blank" class="contact-value">github.com/issu321</a>
                </div>
            </div>
            <div class="contact-item">
                <i class="fas fa-code-branch"></i>
                <div>
                    <span class="contact-label">Repository</span>
                    <a href="https://github.com/issu321/Programming-Visualization" target="_blank" class="contact-value">Programming-Visualization</a>
                </div>
            </div>
            <div class="contact-item">
                <i class="fas fa-envelope"></i>
                <div>
                    <span class="contact-label">Email</span>
                    <span class="contact-value">contact@programming-visualization.dev</span>
                </div>
            </div>
        </div>

        <div class="contact-form-card glass reveal-right">
            <h3><i class="fas fa-paper-plane"></i> Send Message</h3>
            <form class="contact-form" onsubmit="event.preventDefault(); showToast('Message sent! (Demo)', 'success');">
                <div class="form-group">
                    <label for="contact-name">Name</label>
                    <input type="text" id="contact-name" placeholder="Your name" required>
                </div>
                <div class="form-group">
                    <label for="contact-email">Email</label>
                    <input type="email" id="contact-email" placeholder="your@email.com" required>
                </div>
                <div class="form-group">
                    <label for="contact-subject">Subject</label>
                    <input type="text" id="contact-subject" placeholder="Message subject" required>
                </div>
                <div class="form-group">
                    <label for="contact-message">Message</label>
                    <textarea id="contact-message" rows="5" placeholder="Your message..." required></textarea>
                </div>
                <button type="submit" class="btn btn-primary btn-block btn-glow btn-magnetic">
                    <i class="fas fa-paper-plane"></i> Send Message
                </button>
            </form>
        </div>
    </div>

    <!-- Tech Stack Cards -->
    <div class="contact-tech glass reveal">
        <h3><i class="fas fa-cogs"></i> Technologies Used</h3>
        <div class="tech-cards">
            <div class="tech-card">
                <i class="fab fa-python"></i>
                <span>Python 3.11+</span>
            </div>
            <div class="tech-card">
                <i class="fas fa-flask"></i>
                <span>Flask</span>
            </div>
            <div class="tech-card">
                <i class="fas fa-database"></i>
                <span>SQLite</span>
            </div>
            <div class="tech-card">
                <i class="fas fa-chart-line"></i>
                <span>Plotly</span>
            </div>
            <div class="tech-card">
                <i class="fas fa-project-diagram"></i>
                <span>NetworkX</span>
            </div>
            <div class="tech-card">
                <i class="fas fa-diagram-project"></i>
                <span>Mermaid</span>
            </div>
        </div>
    </div>
</section>

{% endblock %}