{% extends "base.html" %}

{% block title %}Devanturas by SimolZimol - Professional Minecraft & Discord Development{% endblock %}

{% block content %}
<!-- Hero Section -->
<section id="home" class="hero">
    <div class="hero-content">
        <h1>Devanturas</h1>
        <h2>by <span class="highlight">SimolZimol</span></h2>
        <p>Professional Minecraft Plugin Development & Discord Bot Programming</p>
        <div class="hero-buttons">
            <a href="{{ url_for('projects') }}" class="btn btn-primary">View Projects</a>
            <a href="https://github.com/SimolZimol/" target="_blank" class="btn btn-secondary">
                <i class="fab fa-github"></i> GitHub
            </a>
        </div>
    </div>
    <div class="hero-background">
        <div class="floating-icons">
            <i class="fab fa-java"></i>
            <i class="fab fa-python"></i>
            <i class="fas fa-server"></i>
            <i class="fab fa-discord"></i>
            <i class="fas fa-code"></i>
        </div>
    </div>
</section>

<!-- Featured Projects Section -->
<section id="featured-projects" class="featured-projects">
    <div class="container">
        <h2>Featured Projects</h2>
        <p class="section-subtitle">Showcase of my latest Minecraft and Discord development work</p>
        
        <div class="projects-grid">
            {% for project in projects %}
            <div class="project-card {{ project.color }}">
                <div class="project-header">
                    <div class="project-icon">
                        <i class="{{ project.icon }}"></i>
                    </div>
                    <div class="project-meta">
                        <h3>{{ project.name }}</h3>
                        <span class="project-type">{{ project.type }}</span>
                    </div>
                </div>
                <p>{{ project.description }}</p>
                <div class="project-features">
                    {% for tech in project.technologies %}
                    <span class="feature-tag">{{ tech }}</span>
                    {% endfor %}
                </div>
                <div class="project-links">
                    <a href="{{ project.url }}" class="project-link">
                        <i class="fas fa-arrow-right"></i> Learn More
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>

        <div class="view-all-projects">
            <a href="{{ url_for('projects') }}" class="btn btn-primary">View All Projects</a>
        </div>
    </div>
</section>

<!-- Skills Overview Section -->
<section id="skills-overview" class="skills-overview">
    <div class="container">
        <h2>Development Expertise</h2>
        <div class="skills-grid">
            <div class="skill-card">
                <div class="skill-icon">
                    <i class="fas fa-cube"></i>
                </div>
                <h3>Minecraft Development</h3>
                <p>Professional plugin development for Spigot, Paper, and Bukkit servers with focus on performance and user experience.</p>
                <ul>
                    <li>Java Programming</li>
                    <li>Spigot/Paper API</li>
                    <li>Server Optimization</li>
                    <li>Custom Commands</li>
                </ul>
            </div>
            
            <div class="skill-card">
                <div class="skill-icon">
                    <i class="fab fa-discord"></i>
                </div>
                <h3>Discord Bot Development</h3>
                <p>Advanced Discord bots with database integration, complex algorithms, and community management features.</p>
                <ul>
                    <li>Python & Discord.py</li>
                    <li>Database Integration</li>
                    <li>Async Programming</li>
                    <li>Docker Deployment</li>
                </ul>
            </div>
            
            <div class="skill-card">
                <div class="skill-icon">
                    <i class="fas fa-cogs"></i>
                </div>
                <h3>Full-Stack Solutions</h3>
                <p>Complete project lifecycle from conception to deployment, including web interfaces and server management.</p>
                <ul>
                    <li>Flask Web Development</li>
                    <li>MySQL Database Design</li>
                    <li>Git Version Control</li>
                    <li>DevOps & Deployment</li>
                </ul>
            </div>
        </div>
    </div>
</section>

<!-- Quick Stats Section -->
<section id="stats" class="stats">
    <div class="container">
        <div class="stats-grid">
            <div class="stat-item">
                <div class="stat-number">3+</div>
                <div class="stat-label">Years Experience</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">2</div>
                <div class="stat-label">Active Projects</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">Multiple</div>
                <div class="stat-label">Platforms</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">Java & Python</div>
                <div class="stat-label">Primary Languages</div>
            </div>
        </div>
    </div>
</section>

<!-- Call to Action Section -->
<section id="cta" class="cta">
    <div class="container">
        <div class="cta-content">
            <h2>Ready to Collaborate?</h2>
            <p>Whether you need a custom Minecraft plugin, Discord bot, or full-stack solution, I'm here to help bring your ideas to life.</p>
            <div class="cta-buttons">
                <a href="{{ url_for('contact') }}" class="btn btn-primary">Get In Touch</a>
                <a href="{{ url_for('minecraft') }}" class="btn btn-secondary">Explore Minecraft Projects</a>
            </div>
        </div>
    </div>
</section>
{% endblock %}