{% load static %}
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Подготовка к ОГЭ и ЕГЭ по физике и математике с Игорем Олеговичем Безрукавовым.">
    <title>Игорь Безрукавов — физика и математика</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Mono&amp;family=Manrope:wght@400;500;600;700;800&amp;family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&amp;display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
    <header class="site-header">
        <div class="container navigation">
            <a class="brand" href="#top" aria-label="На главную"><span>ИО</span> physics &amp; math</a>
            <nav class="nav-links" aria-label="Основная навигация">
                <a href="#about">О преподавателе</a>
                <a href="#programs">Направления</a>
                <a href="#faq">Вопросы</a>
            </nav>
            <a class="header-action" href="#booking">Выбрать время <span aria-hidden="true">↗</span></a>
        </div>
    </header>

    <main id="top">
        <section class="hero">
            <div class="container hero-layout">
                <div class="hero-copy">
                    <p class="eyebrow"><span></span> Физика · математика · 5–11 классы</p>
                    <h1>Экзамен — это задача. <em>Её можно решить.</em></h1>
                    <p class="hero-lead">Индивидуальная подготовка к ОГЭ и ЕГЭ: от пробелов в темах до уверенности в каждом шаге решения.</p>
                    <div class="hero-actions">
                        <a class="button button-primary" href="#booking">Записаться на консультацию <span aria-hidden="true">→</span></a>
                        <a class="button button-ghost" href="#about">О преподавателе</a>
                    </div>
                    <div class="hero-numbers" aria-label="Опыт преподавателя">
                        <div><strong>10+</strong><span>лет преподавания<br>и репетиторства</span></div>
                        <div><strong>2</strong><span>предмета для<br>уверенного результата</span></div>
                        <div><strong>АГУ</strong><span>бакалавриат<br>и магистратура</span></div>
                    </div>
                </div>
                <div class="portrait-zone">
                    <div class="portrait-frame">
                        <img src="{% static 'images/igor-bezrukavov.jpg' %}" alt="Игорь Олегович Безрукавов">
                    </div>
                    <div class="portrait-note"><span>→</span> Разбираем<br>до понимания</div>
                    <div class="formula-sticker" aria-hidden="true"><i>F</i><small>= ma</small></div>
                </div>
            </div>
        </section>

        <section class="trust-strip">
            <div class="container trust-content">
                <span>Понятная система подготовки</span><b>·</b>
                <span>Спокойный темп</span><b>·</b>
                <span>Индивидуальный план</span><b>·</b>
                <span>Фокус на результате</span>
            </div>
        </section>

        <section class="section about" id="about">
            <div class="container about-layout">
                <div class="section-label"><span>01</span><p>О преподавателе</p></div>
                <div class="about-content">
                    <h2>Понимание формул начинается с вопроса <em>«почему?»</em></h2>
                    <div class="about-columns">
                        <p class="about-intro">Меня зовут Игорь Олегович Безрукавов. Более 10 лет помогаю школьникам выстроить сильную базу по физике и математике.</p>
                        <div>
                            <p>Окончил Астраханский государственный университет: бакалавриат и магистратуру по специальности «Преподавание физики и математики».</p>
                            <p>На занятии ученик не заучивает шаблон, а учится видеть логику задачи — это помогает уверенно работать и на уроке, и на экзамене.</p>
                        </div>
                    </div>
                    <div class="education-mark"><span>АГУ</span><p>Педагогическое образование<br>по физике и математике</p></div>
                </div>
            </div>
        </section>

        <section class="section programs" id="programs">
            <div class="container">
                <div class="section-heading">
                    <div class="section-label"><span>02</span><p>Направления</p></div>
                    <h2>Работаем на<br><em>вашу цель</em></h2>
                    <p>Выбираем темп и программу с учётом класса, стартового уровня и даты экзамена.</p>
                </div>
                <div class="program-grid">
                    <article class="program-card physics-card">
                        <div class="program-top"><span class="program-code">01 / PH</span><span class="program-symbol">F</span></div>
                        <h3>Физика</h3>
                        <p>От формул и единиц измерения до сложных задач второй части.</p>
                        <ul>
                            <li>ОГЭ и ЕГЭ</li>
                            <li>Механика, электричество, оптика</li>
                            <li>Графики, эксперименты, расчёты</li>
                        </ul>
                        <a href="#booking">Выбрать консультацию <span>→</span></a>
                    </article>
                    <article class="program-card math-card">
                        <div class="program-top"><span class="program-code">02 / MTH</span><span class="program-symbol">π</span></div>
                        <h3>Математика</h3>
                        <p>Понятная алгебра и геометрия вместо набора непонятных правил.</p>
                        <ul>
                            <li>ОГЭ и ЕГЭ</li>
                            <li>Уравнения, неравенства, функции</li>
                            <li>Планиметрия и стереометрия</li>
                        </ul>
                        <a href="#booking">Выбрать консультацию <span>→</span></a>
                    </article>
                </div>
            </div>
        </section>

        <section class="section approach">
            <div class="container approach-layout">
                <div class="approach-copy">
                    <div class="section-label"><span>03</span><p>Как проходят занятия</p></div>
                    <h2>Не «натаскивание»,<br>а <em>система.</em></h2>
                </div>
                <div class="approach-steps">
                    <article><span>01</span><h3>Диагностика</h3><p>Определяем уровень и темы, на которые стоит обратить внимание в первую очередь.</p></article>
                    <article><span>02</span><h3>План</h3><p>Собираем маршрут подготовки: теория, практика, повторение и работа с ошибками.</p></article>
                    <article><span>03</span><h3>Уверенность</h3><p>Тренируем самостоятельное решение и разбираем вопросы до полного понимания.</p></article>
                </div>
            </div>
        </section>

        <section class="booking-section" id="booking">
            <div class="container booking-layout">
                <div class="booking-intro">
                    <p class="eyebrow eyebrow-light"><span></span> Онлайн-запись</p>
                    <h2>Выберите удобное время <em>для старта.</em></h2>
                    <p>Слот предварительно бронируется за вами. Игорь Олегович подтвердит консультацию по указанным контактам.</p>
                    <div class="availability-card">
                        <span class="availability-dot"></span>
                        <div><strong>{{ available_slot_count }}</strong><p>свободных окон<br>для записи сейчас</p></div>
                    </div>
                    <p class="booking-help">Не нашли подходящее время? Напишите желаемый день в комментарии — постараемся подобрать вариант.</p>
                </div>
                <div class="booking-form-card">
                    {% if messages %}
                        {% for message in messages %}
                            <div class="form-message form-message-{{ message.tags }}" role="status">{{ message }}</div>
                        {% endfor %}
                    {% endif %}
                    <div class="form-title"><span>Запись на консультацию</span><p>Поля со звёздочкой обязательны</p></div>
                    {% if form.non_field_errors %}<div class="form-errors">{{ form.non_field_errors }}</div>{% endif %}
                    <form method="post" action="#booking" novalidate>
                        {% csrf_token %}
                        <div class="form-grid">
                            <div class="field full">
                                <label for="{{ form.name.id_for_label }}">{{ form.name.label }} <b>*</b></label>
                                {{ form.name }}{% for error in form.name.errors %}<span class="error">{{ error }}</span>{% endfor %}
                            </div>
                            <div class="field">
                                <label for="{{ form.phone.id_for_label }}">{{ form.phone.label }} <b>*</b></label>
                                {{ form.phone }}{% for error in form.phone.errors %}<span class="error">{{ error }}</span>{% endfor %}
                            </div>
                            <div class="field">
                                <label for="{{ form.contact.id_for_label }}">{{ form.contact.label }}</label>
                                {{ form.contact }}{% for error in form.contact.errors %}<span class="error">{{ error }}</span>{% endfor %}
                            </div>
                            <div class="field">
                                <label for="{{ form.student_grade.id_for_label }}">{{ form.student_grade.label }}</label>
                                {{ form.student_grade }}{% for error in form.student_grade.errors %}<span class="error">{{ error }}</span>{% endfor %}
                            </div>
                            <div class="field">
                                <label for="{{ form.subject.id_for_label }}">{{ form.subject.label }} <b>*</b></label>
                                {{ form.subject }}{% for error in form.subject.errors %}<span class="error">{{ error }}</span>{% endfor %}
                            </div>
                            <div class="field">
                                <label for="{{ form.exam.id_for_label }}">{{ form.exam.label }} <b>*</b></label>
                                {{ form.exam }}{% for error in form.exam.errors %}<span class="error">{{ error }}</span>{% endfor %}
                            </div>
                            <div class="field">
                                <label for="{{ form.format.id_for_label }}">{{ form.format.label }} <b>*</b></label>
                                {{ form.format }}{% for error in form.format.errors %}<span class="error">{{ error }}</span>{% endfor %}
                            </div>
                            <div class="field full">
                                <label for="{{ form.slot.id_for_label }}">{{ form.slot.label }} <b>*</b></label>
                                {{ form.slot }}{% for error in form.slot.errors %}<span class="error">{{ error }}</span>{% endfor %}
                            </div>
                            <div class="field full">
                                <label for="{{ form.comment.id_for_label }}">{{ form.comment.label }}</label>
                                {{ form.comment }}{% for error in form.comment.errors %}<span class="error">{{ error }}</span>{% endfor %}
                            </div>
                        </div>
                        <label class="consent-label" for="{{ form.consent_given.id_for_label }}">
                            {{ form.consent_given }}
                            <span>Я согласен на обработку персональных данных в соответствии с <a href="{% url 'consultations:privacy_policy' %}">политикой конфиденциальности</a>. <b>*</b></span>
                        </label>
                        {% for error in form.consent_given.errors %}<span class="error consent-error">{{ error }}</span>{% endfor %}
                        {% if available_slot_count %}
                            <button class="button button-primary form-submit" type="submit">Отправить заявку <span aria-hidden="true">→</span></button>
                        {% else %}
                            <button class="button button-disabled form-submit" type="button" disabled>Свободных окон пока нет</button>
                        {% endif %}
                    </form>
                </div>
            </div>
        </section>

        <section class="section faq" id="faq">
            <div class="container faq-layout">
                <div><div class="section-label"><span>04</span><p>Вопросы</p></div><h2>Перед первым<br><em>занятием</em></h2></div>
                <div class="faq-list">
                    <details open><summary>Как записаться на консультацию?<span>+</span></summary><p>Выберите свободное время, заполните форму и дождитесь подтверждения. Контакты нужны, чтобы согласовать детали занятия.</p></details>
                    <details><summary>Можно ли начать подготовку не с начала года?<span>+</span></summary><p>Да. На первой консультации определим стартовый уровень, ближайшую цель и соберём реалистичный план подготовки.</p></details>
                    <details><summary>Что указать в комментарии к заявке?<span>+</span></summary><p>Напишите класс, предмет, цель и темы, которые кажутся сложными. Это поможет подготовиться к первой встрече.</p></details>
                </div>
            </div>
        </section>
    </main>

    <footer class="site-footer">
        <div class="container footer-main">
            <a class="brand brand-footer" href="#top"><span>ИО</span> physics &amp; math</a>
            <p>Физика и математика без лишней тревоги.</p>
            <a href="#booking">Записаться <span>↑</span></a>
        </div>
        <div class="container footer-bottom"><span>© {% now "Y" %} Игорь Олегович Безрукавов</span><a href="{% url 'consultations:privacy_policy' %}">Политика конфиденциальности</a></div>
    </footer>
</body>
</html>
