{% extends "base.html" %}

{% block content %}

<!-- ================= HERO ================= -->
<section class="hero" id="hero">
    <div class="container hero-inner">
        <div class="hero-text">
            <p class="hero-hello">&gt; привет, мир</p>
            <h1 class="hero-name">{{ profile.name }}</h1>
            <h2 class="hero-role">{{ profile.role }}</h2>
            <p class="hero-tagline">{{ profile.tagline }}</p>
            <div class="hero-actions">
                <a href="#contact" class="btn btn-primary">Написать мне</a>
                <a href="#services" class="btn btn-ghost">Что я умею</a>
            </div>
            <div class="hero-meta">
                <span>📍 {{ profile.city }}</span>
                <span>💼 {{ profile.experience_years }}+ лет опыта</span>
                <span>⚡ Удалённо и на месте</span>
            </div>
        </div>

        <div class="terminal reveal" aria-hidden="true">
            <div class="terminal-bar">
                <span class="dot red"></span>
                <span class="dot yellow"></span>
                <span class="dot green"></span>
                <span class="terminal-title">astra — bash</span>
            </div>
            <div class="terminal-body" id="terminal-body">
                {% for kind, line in terminal_lines %}
                <p class="t-line t-{{ kind }}">{{ line }}</p>
                {% endfor %}
            </div>
        </div>
    </div>
</section>

<!-- ================= ОБО МНЕ ================= -->
<section class="section" id="about">
    <div class="container">
        <h2 class="section-title"><span>01</span>Обо мне</h2>
        <p class="about-text">{{ profile.about }}</p>
        <div class="about-facts">
            <div class="fact reveal">
                <span class="fact-num">10+</span>
                <span class="fact-label">лет в Linux</span>
            </div>
            <div class="fact reveal">
                <span class="fact-num">250+</span>
                <span class="fact-label">серверов и рабочих мест</span>
            </div>
            <div class="fact reveal">
                <span class="fact-num">99.9%</span>
                <span class="fact-label">аптайм инфраструктуры</span>
            </div>
        </div>
    </div>
</section>

<!-- ================= НАВЫКИ ================= -->
<section class="section section-alt" id="skills">
    <div class="container">
        <h2 class="section-title"><span>02</span>Навыки</h2>
        <div class="skills">
            {% for skill in skills %}
            <div class="skill reveal">
                <div class="skill-head">
                    <span class="skill-name">{{ skill.name }}</span>
                    <span class="skill-level">{{ skill.level }}%</span>
                </div>
                <div class="skill-bar">
                    <div class="skill-fill" data-level="{{ skill.level }}"></div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- ================= УСЛУГИ ================= -->
<section class="section" id="services">
    <div class="container">
        <h2 class="section-title"><span>03</span>Услуги</h2>
        <div class="services-grid">
            {% for s in services %}
            <article class="service-card reveal">
                <div class="service-icon">{{ s.icon }}</div>
                <h3>{{ s.title }}</h3>
                <p>{{ s.text }}</p>
            </article>
            {% endfor %}
        </div>
    </div>
</section>

<!-- ================= КОНТАКТЫ ================= -->
<section class="section section-alt" id="contact">
    <div class="container">
        <h2 class="section-title"><span>04</span>Связаться</h2>
        <div class="contact-grid">
            <div class="contact-info reveal">
                <p class="contact-lead">
                    Есть проект или вопрос? Напишите — обычно отвечаю
                    в течение рабочего дня.
                </p>
                <ul class="contact-list">
                    <li>
                        <span class="ico">📧</span>
                        <a href="mailto:{{ profile.email }}">{{ profile.email }}</a>
                    </li>
                    <li>
                        <span class="ico">📞</span>
                        <a href="tel:{{ profile.phone_href }}">{{ profile.phone }}</a>
                    </li>
                    <li>
                        <span class="ico">✈️</span>
                        <a href="{{ profile.tg_href }}" target="_blank" rel="noopener">{{ profile.telegram }}</a>
                    </li>
                    <li>
                        <span class="ico">📍</span>
                        <span>{{ profile.city }} (и удалённо)</span>
                    </li>
                </ul>
            </div>

            <form class="contact-form reveal" action="{{ url_for('contact') }}" method="post" novalidate>
                <label>
                    <span>Ваше имя</span>
                    <input type="text" name="name" placeholder="Иван Петров"
                           required minlength="2" autocomplete="name">
                </label>
                <label>
                    <span>E-mail</span>
                    <input type="email" name="email" placeholder="ivan@example.ru"
                           required autocomplete="email">
                </label>
                <label>
                    <span>Сообщение</span>
                    <textarea name="message" rows="5"
                              placeholder="Расскажите коротко о задаче…" required minlength="5"></textarea>
                </label>
                <button type="submit" class="btn btn-primary">Отправить&nbsp;→</button>
            </form>
        </div>
    </div>
</section>

{% endblock %}