{% extends "base.html" %}
{% block content %}

<!-- HERO -->
<section class="pt-5">
    <div class="hero">
        <div class="heroGlow"></div>

        <div class="relative z-10 p-8 md:p-10">
            <div class="flex flex-wrap items-center gap-3">
                <h1 class="text-3xl md:text-5xl font-semibold tracking-tight">{{ p.name }}</h1>
                <span class="badge">{{ p.badge }}</span>
            </div>

            <p class="mt-3 text-zinc-300 text-base md:text-lg max-w-3xl">{{ p.headline }}</p>

            <div class="mt-3 text-sm text-zinc-400 flex flex-wrap gap-2">
                <span class="pill">📍 {{ p.location }}</span>
                <span class="pill">⚡ FastAPI</span>
                <span class="pill">🗄️ PostgreSQL</span>
                <span class="pill">🐳 Docker</span>
                <span class="pill">🧩 Alembic</span>
            </div>

            <p class="mt-6 text-zinc-200 leading-relaxed max-w-3xl">{{ p.about }}</p>

            <div class="mt-7 flex flex-wrap gap-3">
                <a class="btn primary" href="{{ p.links.github }}" target="_blank" rel="noreferrer">GitHub</a>
                <a class="btn ghost" href="{{ p.links.linkedin }}" target="_blank" rel="noreferrer">Open LinkedIn</a>
                <a class="btn ghost" href="mailto:{{ p.links.email }}">Email</a>
                <a class="btn ghost" href="/projects">View Projects</a>
            </div>
        </div>
    </div>
</section>

<!-- EXPERIENCE -->
<section id="experience" class="mt-10">
    <div class="sectionHead">
        <h2 class="sectionTitle">Experience</h2>
    </div>

    <div class="timeline">
        {% for job in p.experience %}
        <div class="tItem">
            <div class="tDot"></div>
            <div class="tCard">
                <div class="flex items-start justify-between gap-4">
                    <div>
                        <div class="text-base font-semibold">{{ job.role }}</div>
                        <div class="text-sm text-zinc-300 mt-1">
                            <span class="text-zinc-100">{{ job.company }}</span>
                            {% if job.type %}<span class="text-zinc-500"> • {{ job.type }}</span>{% endif %}
                        </div>
                    </div>
                    <div class="text-xs text-zinc-400 text-right">
                        <div>{{ job.period }}</div>
                        {% if job.duration %}<div class="mt-1 text-zinc-500">{{ job.duration }}</div>{% endif %}
                    </div>
                </div>

                <div class="mt-2 text-xs text-zinc-500">
                    {% if job.location %}{{ job.location }}{% endif %}
                </div>

                <ul class="mt-4 space-y-2 text-sm text-zinc-200">
                    {% for b in job.bullets %}
                    <li class="li">{{ b }}</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        {% endfor %}
    </div>
</section>

<!-- SKILLS -->
<section id="skills" class="mt-12">
    <div class="sectionHead">
        <h2 class="sectionTitle">Skills</h2>
    </div>

    <div class="grid md:grid-cols-2 gap-4">
        {% for g in p.skills_groups %}
        <div class="glass p-6">
            <div class="flex items-center justify-between">
                <div class="text-sm font-semibold text-zinc-100">{{ g.title }}</div>
                <div class="text-xs text-zinc-500">{{ g.skills|length }} items</div>
            </div>

            <div class="mt-4 flex flex-wrap gap-2">
                {% for s in g.skills %}
                <span class="chip">{{ s }}</span>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
</section>

<!-- EDUCATION -->
<section id="education" class="mt-12">
    <div class="sectionHead">
        <h2 class="sectionTitle">Education</h2>
    </div>

    <div class="grid md:grid-cols-2 gap-4">
        {% for ed in p.education %}
        <div class="glass p-6">
            <div class="font-semibold">{{ ed.school }}</div>
            {% if ed.program %}
            <div class="text-sm text-zinc-300 mt-2">{{ ed.program }}</div>
            {% endif %}
            <div class="text-xs text-zinc-500 mt-3">{{ ed.period }}</div>
        </div>
        {% endfor %}
    </div>
</section>

<!-- CONTACT -->
<section id="contact" class="mt-12">
    <div class="sectionHead">
        <h2 class="sectionTitle">Contact</h2>
    </div>

    <div class="glass p-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div class="text-sm text-zinc-300">
            Email:
            <a class="link" href="mailto:{{ p.links.email }}">{{ p.links.email }}</a>
        </div>
        <div class="flex flex-wrap gap-3">
            <a class="btn primary" href="{{ p.links.linkedin }}" target="_blank" rel="noreferrer">LinkedIn</a>
            <a class="btn ghost" href="{{ p.links.github }}" target="_blank" rel="noreferrer">GitHub</a>
            <a class="btn ghost" href="/projects">Projects</a>
        </div>
    </div>
</section>

{% endblock %}