{% extends 'base.html' %}
{% load i18n %}

{% block title %}Home{% endblock %}

{% block content %}
<div class="container mx-auto max-w-4xl">
    <header class="text-center mb-12">
        <h1 class="text-4xl font-bold mb-4">{% translate "Hi! You found Osama's project & blog centre.." %}</h1>
        <p class="text-xl text-gray-400">{% translate 'I am a young enthusiast in the programming field, specializing in sectors including not limited to: Data Analysis/Extraction, APIs, and Web Development.. Check out my skills, socials, and projects!' %}</p>

        <label for="language" class="block mt-4">{% translate 'Select Language' %}</label>
        <select id="language" class="block w-48 mx-auto p-2 bg-neutral-700 text-white rounded-lg mt-1" onchange="window.location.href = '/' + this.value;">
            <option value="en" {% if request.LANGUAGE_CODE == 'en' %}selected{% endif %}>English</option>
            <option value="ar" dir="rtl" {% if request.LANGUAGE_CODE == 'ar' %}selected{% endif %}>العربية</option>
        </select>
    </header>
    <div class="mb-12 gap-3 bg-neutral-700 p-6 rounded-lg">
        <h2 class="text-2xl font-semibold mb-1">{% translate 'About Me' %}</h2>
        <p class="text-gray-300 mb-1">{% translate "I'm Osama Alhennawi, a passionate programming enthusiast with expertise in areas such as Data Analysis, Data Extraction, APIs, and Web Development. Explore my skills, socials, and projects!" %}</p>
        <ul class="mb-5">
            <li>📌 {% translate 'Ajman, United Arab Emirates' %}</li>
            <li>🎓 {% translate '2026 Senior' %}</li>
            <li>💻 {% translate 'Programming since Mid 2021' %}</li>
            <li>📰 {% translate 'Over 60+ projects, both open-source and private!' %}</li>
        </ul>
        <hr class="mb-5 border-white/50">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-1">
            <section>
                <h2 class="text-2xl font-semibold mb-4">{% translate 'My TOP Skills' %}</h2>
                <div class="min-h-24">
                    <div class="flex flex-wrap gap-2">
                        <span class="px-3 py-1 bg-yellow-600 text-white rounded-full text-sm">{% translate 'Software Design' %}</span>
                        <span class="px-3 py-1 bg-[#9008ac] text-white rounded-full text-sm">{% translate 'HDL Buspro' %}</span>
                        <span class="px-3 py-1 bg-[#207196] text-white rounded-full text-sm">{% translate 'Wordpress' %}</span>
                        <span class="px-3 py-1 bg-[#1facc3] text-white rounded-full text-sm">{% translate 'Digital Marketing' %}</span>
                        <span class="px-3 py-1 bg-[#2d2376] text-white rounded-full text-sm">{% translate 'System Admin' %}</span>
                        <span class="px-3 py-1 bg-[#fe702d] text-white rounded-full text-sm">{% translate 'cPanel' %}</span>
                        <span class="px-3 py-1 bg-[#366c9a] text-white rounded-full text-sm">{% translate 'Python' %}</span>
                        <span class="px-3 py-1 bg-[#cfbc42] text-white rounded-full text-sm">{% translate 'JavaScript' %}</span>
                        <span class="px-3 py-1 bg-teal-700 text-white rounded-full text-sm">{% translate 'Linux' %}</span>
                        <span class="px-3 py-1 bg-green-600 text-white rounded-full text-sm">{% translate 'Django' %}</span>
                        <span class="px-3 py-1 bg-[#777BB3] text-white rounded-full text-sm">{% translate 'PHP' %}</span>
                        <span class="px-3 py-1 bg-[#ff5733] text-white rounded-full text-sm">{% translate 'Databases' %}</span>
                    </div>
                </div>
            </section>
            <section>
                <h2 class="text-2xl font-semibold mb-4">{% translate 'Social Media' %}</h2>
                <div>
                    <div class="flex flex-wrap gap-2">
                        <a target="_blank" href="https://snapchat.com/t/BxVDvcWQ" class="w-12 h-12 bg-neutral-600 rounded-lg flex items-center justify-center hover:bg-neutral-500 transition-hover duration-200">
                            <img src="https://img.icons8.com/ios-filled/50/ffffff/snapchat.png" alt="Snapchat" class="w-6 h-6">
                        </a>
                        <a target="_blank" href="https://github.com/osam7a" class="w-12 h-12 bg-neutral-600 rounded-lg flex items-center justify-center hover:bg-neutral-500 transition-hover duration-200">
                            <img src="https://img.icons8.com/ios-filled/50/ffffff/github.png" alt="GitHub" class="w-6 h-6">
                        </a>
                        <a target="_blank" href="https://instagram.com/osam7a__" class="w-12 h-12 bg-neutral-600 rounded-lg flex items-center justify-center hover:bg-neutral-500 transition-hover duration-200">
                            <img src="https://img.icons8.com/ios-filled/50/ffffff/instagram-new.png" alt="Instagram" class="w-6 h-6">
                        </a>
                        <a target="_blank" href="https://www.linkedin.com/in/osama-alhinawi-8272b6194/" class="w-12 h-12 bg-neutral-600 rounded-lg flex items-center justify-center hover:bg-neutral-500 transition-hover duration-200">
                            <img src="https://img.icons8.com/ios-filled/50/ffffff/linkedin.png" alt="LinkedIn" class="w-6 h-6">
                        </a>
                        <a target="_blank" href="https://wa.me/+971565073490" class="min-w-36 h-12 font-bold bg-neutral-600 rounded-lg flex items-center justify-center hover:bg-neutral-500 transition-hover duration-200">
                            {% translate 'Contact Me' %}
                        </a>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <section class="mb-12">
        <div class="flex flex-row">
            <h2 class="text-2xl font-semibold mb-4">{% translate 'Latest Projects' %}</h2>
            <a href="/projects" class="ms-auto text-blue-500 font-medium hover:underline">{% translate 'View All' %}</a>
        </div>
        <div class="overflow-x-auto pb-4">
            <div class="inline-flex gap-4">
                {% for project in projects %}
                <div class="flex flex-col bg-neutral-700 p-6 rounded-lg shadow-lg w-80">
                    <img src="{{ project.image.url|default:project.image }}" alt="AI Chatbot" class="w-full h-36 object-cover rounded-md mb-4">
                    <h3 class="text-xl font-semibold mb-2">{{ project.name }}</h3>
                    <p class="text-gray-300 break-words mb-4">{% translate project.description %}</p>
                    <div class="flex mt-auto gap-2">
                        {% if project.preview %}<a target="_blank" href="{{ project.preview }}" class="px-2 py-1 grow text-center bg-blue-500 text-white font-medium rounded hover:bg-blue-500/90">{% translate 'Preview' %}</a>{% endif %}
                        {% if project.source %}<a target="_blank" href="{{ project.source }}" class="px-2 py-1 grow text-center bg-white text-black font-medium rounded hover:bg-white/90">{% translate 'Github Link' %}</a>{% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </section>
    <section>
        <div class="flex flex-row">
            <h2 class="text-2xl font-semibold mb-4">{% translate 'Latest Blogs' %}</h2>
            <a href="/blogs" class="ms-auto text-blue-500 font-medium hover:underline">{% translate 'View All' %}</a>
        </div>
        <div class="overflow-x-auto pb-4">
            <div class="inline-flex gap-4">
                {% for blog in blogs %}
                <div class="bg-neutral-700 p-6 rounded-lg shadow-lg w-80">
                    <img src="https://placehold.co/600x400" alt="AI Future" class="w-full h-36 object-cover rounded-md mb-4">
                    <h3 class="text-xl font-semibold mb-2">{% translate blog.title %}</h3>
                    <p class="text-gray-300 break-words">{{ blog.description }}</p>
                    <a href="{% url 'blogs:blog' blog.id %}" class="text-lg text-blue-500 font-medium mt-2 inline-block">{% translate 'Read more' %}</a>
                </div>
                {% endfor %}
                {% if not blogs %}
                <p class="text-gray-300 break-words">{% translate 'No blogs yet! Stay tuned..' %}</p>
                {% endif %}
            </div>
        </div>
    </section>
</div>
{% endblock %}