{% extends "base.html" %}

{% block content %}
<div class="max-w-2xl mx-auto space-y-8">
    <!-- Hero Section -->
    <div class="text-center space-y-4">
        <div class="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-gradient-to-br from-ocean-400 to-ocean-600 shadow-xl shadow-ocean-500/30 mb-4">
            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
            </svg>
        </div>
        <h1 class="text-3xl font-bold text-white">MySQL Awesome Stats Collector</h1>
        <p class="text-midnight-400 text-lg">A lightweight, self-hosted MySQL diagnostics tool for DevOps teams</p>
    </div>

    <!-- About Card -->
    <div class="glass-card glow-border rounded-2xl p-8 space-y-6">
        <div class="space-y-4">
            <h2 class="text-xl font-semibold text-white flex items-center gap-2">
                <svg class="w-5 h-5 text-ocean-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                About
            </h2>
            <p class="text-midnight-300 leading-relaxed">
                MASC helps you collect, visualize, and compare MySQL diagnostic data across multiple hosts — 
                without agents, cloud dependencies, or complex setup. Built for DevOps teams who need quick 
                MySQL diagnostics without the overhead of complex monitoring solutions.
            </p>
        </div>

        <div class="border-t border-midnight-700/50 pt-6 space-y-4">
            <h2 class="text-xl font-semibold text-white flex items-center gap-2">
                <svg class="w-5 h-5 text-ocean-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
                Author
            </h2>
            <div class="flex items-center gap-4">
                <div class="w-16 h-16 rounded-full ring-2 ring-ocean-500/50 shadow-lg shadow-ocean-500/20 overflow-hidden">
                    <img src="https://github.com/k4kratik.png" alt="Kratik Jain" 
                         class="w-full h-full object-cover scale-[2]">
                </div>
                <div>
                    <a href="https://linkedin.com/in/k4kratik" target="_blank" rel="noopener noreferrer" class="text-lg font-semibold text-white hover:text-[#0A66C2] transition-colors">Kratik Jain | Infrastructure Engineer</a>
                    <a href="https://linkedin.com/in/k4kratik" target="_blank" rel="noopener noreferrer" class="block text-midnight-400 hover:text-[#0A66C2] transition-colors">@k4kratik</a>
                </div>
            </div>
            <div class="mt-4 flex items-center gap-2 text-sm text-midnight-400 flex-wrap">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
                <span>Working at</span>
                <a href="https://primetrace.com" target="_blank" rel="noopener noreferrer" class="text-white font-medium hover:text-ocean-400 transition-colors">Primetrace Technologies</a>
                <span class="text-midnight-500">—</span>
                <span>Team behind</span>
                <a href="https://play.google.com/store/apps/details?id=com.kutumb.android" target="_blank" rel="noopener noreferrer" class="text-ember-400 font-medium hover:text-ember-300 transition-colors">Kutumb</a>
                <span class="text-midnight-500">&</span>
                <a href="https://play.google.com/store/apps/details?id=com.crafto.android" target="_blank" rel="noopener noreferrer" class="text-violet-400 font-medium hover:text-violet-300 transition-colors">Crafto</a>
            </div>
        </div>

        <!-- Social Links -->
        <div class="border-t border-midnight-700/50 pt-6 space-y-4">
            <h2 class="text-xl font-semibold text-white flex items-center gap-2">
                <svg class="w-5 h-5 text-ocean-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
                </svg>
                Connect
            </h2>
            <div class="flex flex-wrap gap-3">
                <!-- GitHub -->
                <a href="https://github.com/k4kratik" target="_blank" rel="noopener noreferrer" 
                   class="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-midnight-800/50 border border-midnight-700 hover:border-midnight-600 hover:bg-midnight-700/50 transition-all group">
                    <svg class="w-5 h-5 text-midnight-400 group-hover:text-white transition-colors" fill="currentColor" viewBox="0 0 24 24">
                        <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
                    </svg>
                    <span class="text-sm font-medium text-midnight-300 group-hover:text-white transition-colors">GitHub</span>
                </a>
                
                <!-- LinkedIn -->
                <a href="https://linkedin.com/in/k4kratik" target="_blank" rel="noopener noreferrer"
                   class="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-midnight-800/50 border border-midnight-700 hover:border-[#0A66C2]/50 hover:bg-[#0A66C2]/10 transition-all group">
                    <svg class="w-5 h-5 text-midnight-400 group-hover:text-[#0A66C2] transition-colors" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                    </svg>
                    <span class="text-sm font-medium text-midnight-300 group-hover:text-[#0A66C2] transition-colors">LinkedIn</span>
                </a>
                
                <!-- Polarsteps -->
                <a href="https://polarsteps.com/k4kratik" target="_blank" rel="noopener noreferrer"
                   class="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-midnight-800/50 border border-midnight-700 hover:border-[#FF6B35]/50 hover:bg-[#FF6B35]/10 transition-all group">
                    <svg class="w-5 h-5 text-midnight-400 group-hover:text-[#FF6B35] transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <span class="text-sm font-medium text-midnight-300 group-hover:text-[#FF6B35] transition-colors">Polarsteps</span>
                </a>
                
                <!-- X (Twitter) -->
                <a href="https://x.com/k4kratik" target="_blank" rel="noopener noreferrer"
                   class="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-midnight-800/50 border border-midnight-700 hover:border-white/50 hover:bg-white/5 transition-all group">
                    <svg class="w-5 h-5 text-midnight-400 group-hover:text-white transition-colors" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                    </svg>
                    <span class="text-sm font-medium text-midnight-300 group-hover:text-white transition-colors">X</span>
                </a>
                
            </div>
            <div class="flex flex-wrap gap-3 mt-3">
                <!-- kratik.dev -->
                <a href="https://kratik.dev" target="_blank" rel="noopener noreferrer"
                   class="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-midnight-800/50 border border-midnight-700 hover:border-volt-400/50 hover:bg-volt-400/10 transition-all group">
                    <svg class="w-5 h-5 text-midnight-400 group-hover:text-volt-400 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                    </svg>
                    <span class="text-sm font-medium text-midnight-300 group-hover:text-volt-400 transition-colors">kratik.dev</span>
                </a>
                
                <!-- kratik.cloud -->
                <a href="https://kratik.cloud" target="_blank" rel="noopener noreferrer"
                   class="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-midnight-800/50 border border-midnight-700 hover:border-sky-400/50 hover:bg-sky-400/10 transition-all group">
                    <svg class="w-5 h-5 text-midnight-400 group-hover:text-sky-400 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
                    </svg>
                    <span class="text-sm font-medium text-midnight-300 group-hover:text-sky-400 transition-colors">kratik.cloud</span>
                </a>
            </div>
        </div>

        <!-- Project Links -->
        <div class="border-t border-midnight-700/50 pt-6 space-y-4">
            <h2 class="text-xl font-semibold text-white flex items-center gap-2">
                <svg class="w-5 h-5 text-ocean-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                </svg>
                Project
            </h2>
            <div class="flex flex-wrap gap-3">
                <a href="https://github.com/k4kratik/mysql-awesome-stats-collector" target="_blank" rel="noopener noreferrer"
                   class="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-ocean-600/20 border border-ocean-500/30 hover:border-ocean-500/50 hover:bg-ocean-600/30 transition-all group">
                    <svg class="w-5 h-5 text-ocean-400" fill="currentColor" viewBox="0 0 24 24">
                        <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
                    </svg>
                    <span class="text-sm font-medium text-ocean-300">Source Code</span>
                </a>
                <a href="https://pypi.org/project/mysql-awesome-stats-collector/" target="_blank" rel="noopener noreferrer"
                   class="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-volt-500/20 border border-volt-500/30 hover:border-volt-500/50 hover:bg-volt-500/30 transition-all group">
                    <svg class="w-5 h-5 text-volt-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                    </svg>
                    <span class="text-sm font-medium text-volt-400">PyPI Package</span>
                </a>
            </div>
        </div>
    </div>

    <!-- License -->
    <div class="text-center">
        <p class="text-sm text-midnight-500">
            Released under the <span class="text-midnight-400">MIT License</span>
        </p>
    </div>
</div>
{% endblock %}