{% extends 'base.html.twig' %}

{% block title %}{{ profile.name }} — {{ profile.role }}{% endblock %}

{% block body %}
<header class="site-header">
    <div class="wrap">
        <a href="#top" class="brand"><span class="mark">◆</span> {{ profile.name }}</a>
        <nav class="nav">
            <a href="#o-mnie">o&nbsp;mnie</a>
            <a href="#stack">stack</a>
            <a href="#projekty">projekty <span class="nav-count">[{{ projects|length }}]</span></a>
            <a href="#homelab">homelab</a>
            <a href="#kontakt">kontakt</a>
        </nav>
    </div>
</header>

<main id="top">
    {# ---- HERO ---- #}
    <section class="hero">
        <div class="wrap">
            {% if profile.available %}
                <span class="status"><span class="dot"></span> dostępny do współpracy</span>
            {% endif %}
            <h1 class="hero-title">
                Full Stack Developer<br>
                od pomysłu <span class="accent">do wdrożenia</span>.
            </h1>
            <p class="hero-role">{{ profile.role }} · {{ profile.location }}</p>
            <p class="hero-summary">{{ profile.summary }}</p>
            <div class="hero-cta">
                <a class="btn btn-primary" href="#projekty">Zobacz projekty</a>
                <a class="btn" href="mailto:{{ profile.email }}">Napisz do mnie</a>
                <a class="btn" href="{{ profile.gitea }}" target="_blank" rel="noopener">Gitea</a>
                <a class="btn" href="{{ profile.github }}" target="_blank" rel="noopener">GitHub</a>
                <a class="btn" href="{{ profile.bitbucket }}" target="_blank" rel="noopener">BitBucket</a>
            </div>
            <div class="hero-meta">
                <span><b>{{ profile.location }}</b> — lokalizacja</span>
                <span><b>{{ projects|length }}</b> wybrane projekty</span>
                <span><b>PHP · JavaScript / jQuery</b> — główny stack</span>
            </div>
        </div>
    </section>

    {# ---- O MNIE ---- #}
    <section class="section reveal" id="o-mnie">
        <div class="wrap">
            <div class="about-grid">
                <div>
                    <p class="eyebrow">o mnie</p>
                    <h2 class="section-title">Inżynier, nie tylko programista</h2>
                </div>
                <div>
                    <div class="about-body">
                        {% for paragraph in profile.about %}
                            <p>{{ paragraph }}</p>
                        {% endfor %}
                    </div>
{#                    <dl class="about-aside" style="margin-top: 28px;">#}
{#                        <dt>rola</dt><dd>{{ profile.role }}</dd>#}
{#                        <dt>podejście</dt><dd>domena → API → interfejs → deploy</dd>#}
{#                        <dt>lokalizacja</dt><dd>{{ profile.location }}</dd>#}
{#                    </dl>#}
                </div>
            </div>
        </div>
    </section>

    {# ---- STACK ---- #}
    <section class="section reveal" id="stack">
        <div class="wrap">
            <div class="section-head">
                <p class="eyebrow">stack</p>
                <h2 class="section-title">Technologie, którymi się zajmuję</h2>
                <p class="section-lead">Narzędzia, których używam na co dzień — od backendu po wdrożenie.</p>
            </div>
            <div class="tech-grid">
                {% for tech in technologies %}
                    <div class="tech-card">
                        <p class="tech-group">{{ tech.group }}</p>
                        <div class="tech-chips">
                            {% for item in tech.items %}
                                <span class="chip">{{ item }}</span>
                            {% endfor %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>

    {# ---- PROJEKTY ---- #}
    <section class="section reveal" id="projekty" data-controller="webview">
        <div class="wrap">
            <div class="section-head">
                <p class="eyebrow">projekty</p>
                <h2 class="section-title">Wybrane realizacje</h2>
                <p class="section-lead">Kliknij <b>Live view</b>, aby zobaczyć projekt bez opuszczania strony.</p>
            </div>

            <div class="projects-grid">
                {% for project in projects %}
                    <article class="project">
                        <img class="project-thumb" src="{{ asset(project.thumbnail) }}" alt="Podgląd projektu {{ project.name }}" loading="lazy" width="480" height="270">
                        <div class="project-body">
                            <div class="project-meta">
                                <span>{{ project.year }}</span>
                                <span>·</span>
                                <span>{{ project.role }}</span>
                            </div>
                            <h3 class="project-name">{{ project.name }}</h3>
                            <p class="project-desc">{{ project.description }}</p>
                            <div class="project-stack">
                                {% for tech in project.stack %}
                                    <span class="chip">{{ tech }}</span>
                                {% endfor %}
                            </div>
                            <div class="project-actions">
                                <button type="button" class="action action-live"
                                        data-action="webview#open"
                                        data-webview-url-param="{{ project.live }}"
                                        data-webview-title-param="{{ project.name }}">
                                    {{ include('home/_icon.html.twig', { name: 'play' }) }}
                                    Live view
                                </button>
                                <a class="action" href="{{ project.github }}" target="_blank" rel="noopener">
                                    {{ include('home/_icon.html.twig', { name: 'github' }) }}
                                    Gitea
                                </a>
                                {% if project.githubfront is defined %}
                                    <a class="action" href="{{ project.githubfront }}" target="_blank" rel="noopener">
                                        {{ include('home/_icon.html.twig', { name: 'github' }) }}
                                        Gitea-Front
                                    </a>
                                {% endif %}
                            </div>
                        </div>
                    </article>
                {% endfor %}
            </div>
        </div>

        {# ---- WEBVIEW (podgląd live w oknie "przeglądarki") ---- #}
        <dialog class="webview" data-webview-target="dialog" data-action="click->webview#backdrop">
            <div class="webview-bar">
                <div class="webview-dots"><span></span><span></span><span></span></div>
                <div class="webview-address" data-webview-target="address">about:blank</div>
                <div class="webview-actions">
                    <a class="webview-btn" data-webview-target="external" href="#" target="_blank" rel="noopener" title="Otwórz w nowej karcie" aria-label="Otwórz w nowej karcie">
                        {{ include('home/_icon.html.twig', { name: 'external' }) }}
                    </a>
                    <button type="button" class="webview-btn" data-action="webview#close" title="Zamknij" aria-label="Zamknij podgląd">
                        {{ include('home/_icon.html.twig', { name: 'close' }) }}
                    </button>
                </div>
            </div>
            <div class="webview-stage">
                <iframe class="webview-frame" data-webview-target="frame" title="Podgląd projektu" referrerpolicy="no-referrer"></iframe>
                <div class="webview-fallback" data-webview-target="fallback" hidden>
                    <span class="title" data-webview-target="title"></span>
                    <p>Ta strona nie pozwala na osadzanie w podglądzie.</p>
                    <a class="btn btn-primary" data-webview-target="external" href="#" target="_blank" rel="noopener">Otwórz w nowej karcie</a>
                </div>
            </div>
        </dialog>
    </section>

    {# ---- HOMELAB ---- #}
    <section class="section reveal" id="homelab">
        <div class="wrap">
            <div class="section-head">
                <p class="eyebrow">homelab</p>
                <h2 class="section-title">Własna infrastruktura, self-hosted</h2>
                <p class="section-lead">{{ homelab.lead }}</p>
            </div>
            <div class="lab-grid">
                {% for service in homelab.services %}
                    <div class="lab-card{{ service.featured is defined and service.featured ? ' lab-card--featured' : '' }}">
                        <div class="lab-head">
                            <span class="lab-name">{{ service.name }}</span>
                            <span class="lab-tag">{{ service.role }}</span>
                        </div>
                        <p class="lab-desc">{{ service.description }}</p>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>
</main>

<footer class="site-footer" id="kontakt">
    <div class="wrap">
        <span>© {{ 'now'|date('Y') }} {{ profile.name }} — zbudowane w Symfony</span>
        <div class="footer-links">
            <a href="mailto:{{ profile.email }}">e-mail</a>
            <a href="{{ profile.gitea }}" target="_blank" rel="noopener">Gitea</a>
            <a href="{{ profile.github }}" target="_blank" rel="noopener">GitHub</a>
            <a href="{{ profile.bitbucket }}" target="_blank" rel="noopener">BitBucket</a>
            <a href="{{ profile.linkedin }}" target="_blank" rel="noopener">LinkedIn</a>
        </div>
    </div>
</footer>
{% endblock %}