{% extends "base.html" %}
{% block title %}Developer{% endblock %}
{% block page_title %}Developer{% endblock %}

{% block content %}
<div class="row g-4">
    <div class="col-lg-4">
        <div class="glass-card p-4 text-center">
            <div style="width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 40px; font-weight: 700;">M</div>
            <h4 style="font-weight: 700;">Mohammed Usman</h4>
            <p style="color: var(--text-secondary);">Developer & Creator</p>
            <div class="d-flex justify-content-center gap-3 mt-3">
                <a href="https://wa.me/918884294749" target="_blank" class="btn btn-outline-glass"><i class="fab fa-whatsapp me-2" style="color: #25D366;"></i>WhatsApp</a>
                <a href="https://github.com/issu321" target="_blank" class="btn btn-outline-glass"><i class="fab fa-github me-2"></i>GitHub</a>
            </div>
            <div class="mt-3">
                <a href="tel:8884294749" class="btn btn-outline-glass btn-sm"><i class="fas fa-phone me-2"></i>8884294749</a>
            </div>
        </div>
    </div>
    <div class="col-lg-8">
        <div class="glass-card p-4 mb-4">
            <h5 class="mb-3" style="font-weight: 600;">Welcome Message</h5>
            <p style="color: var(--text-secondary); line-height: 1.7;">
                Welcome to Digital Business Simulator - Built with passion for enterprise excellence. 
                I'm Mohammed Usman, the developer behind this platform. Connect with me for support, 
                customization, or collaboration. This platform is designed to help businesses simulate 
                decisions before real-world implementation, reducing risk and optimizing outcomes.
            </p>
        </div>
        <div class="glass-card p-4 mb-4">
            <h5 class="mb-3" style="font-weight: 600;">System Status</h5>
            <div class="row g-3">
                <div class="col-md-4"><div class="p-3" style="background: rgba(255,255,255,0.03); border-radius: 10px;"><small style="color: var(--text-secondary);">Version</small><div style="font-weight: 600;">{{ stats.app_version }}</div></div></div>
                <div class="col-md-4"><div class="p-3" style="background: rgba(255,255,255,0.03); border-radius: 10px;"><small style="color: var(--text-secondary);">Database Size</small><div style="font-weight: 600;">{{ stats.db_size_mb }} MB</div></div></div>
                <div class="col-md-4"><div class="p-3" style="background: rgba(255,255,255,0.03); border-radius: 10px;"><small style="color: var(--text-secondary);">Companies</small><div style="font-weight: 600;">{{ stats.total_companies }}</div></div></div>
                <div class="col-md-4"><div class="p-3" style="background: rgba(255,255,255,0.03); border-radius: 10px;"><small style="color: var(--text-secondary);">Python</small><div style="font-weight: 600;">{{ stats.python_version }}</div></div></div>
                <div class="col-md-4"><div class="p-3" style="background: rgba(255,255,255,0.03); border-radius: 10px;"><small style="color: var(--text-secondary);">Flask</small><div style="font-weight: 600;">{{ stats.flask_version }}</div></div></div>
                <div class="col-md-4"><div class="p-3" style="background: rgba(255,255,255,0.03); border-radius: 10px;"><small style="color: var(--text-secondary);">Uptime</small><div style="font-weight: 600; color: #10B981;">{{ stats.uptime }}</div></div></div>
            </div>
        </div>
        <div class="glass-card p-4">
            <h5 class="mb-3" style="font-weight: 600;">Technologies Used</h5>
            <div class="row g-2">
                {% for tech in ['Python', 'Flask', 'SQLAlchemy', 'SQLite', 'Pandas', 'Scikit-Learn', 'Plotly', 'Bootstrap 5', 'JavaScript'] %}
                <div class="col-auto"><span class="badge-glass badge-info">{{ tech }}</span></div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}