<?php get_header(); ?>

<section class="hero">
    <div class="container hero__container flex-align-start gap-12">
        <div class="hero__title">
            <h1>Почасовая аренда катеров в Санкт-Петербурге</h1>
        </div>
        <div class="hero__information">
            <div class="hero__description">
                <p>Насладитесь видами и атмосферой Петербурга на катерах премиум-класса. Популярные достопримечательности и незаебываемые закаты в лучшем проявлении.</p>
            </div>
            <div class="hero__buttons flex-align-center gap-6">
                <div class="hero__button flex-center gap-2">
                    <a href="#booking" class="button button--lg button--primary">Арендовать катер</a>
                    <a href="#booking" class="button button--lg button--icon">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_154_604)">
                                <path d="M4.34315 4.34313L4.35022 6.34425H12.2415L3.63604 14.9497L5.05025 16.3639L13.6557 7.75846L13.6628 15.6568H15.6569V4.34313H4.34315Z" fill="white" />
                            </g>
                            <defs>
                                <clipPath id="clip0_154_604">
                                <rect width="20" height="20" fill="white" />
                                </clipPath>
                            </defs>
                        </svg>
                    </a>
                </div>
                <a href="#details" class="button button--lg button--nopadding button--secondary">
                    Ознакомиться с услугами
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_154_604)">
                            <path d="M4.34315 4.34313L4.35022 6.34425H12.2415L3.63604 14.9497L5.05025 16.3639L13.6557 7.75846L13.6628 15.6568H15.6569V4.34313H4.34315Z" fill="white" />
                        </g>
                        <defs>
                            <clipPath id="clip0_154_604">
                                <rect width="20" height="20" fill="white" />
                            </clipPath>
                        </defs>
                    </svg>
                </a>
            </div>
        </div>
        <div class="hero__scroll">
            <p>Двигайтесь дальше</p>
        </div>
    </div>
    <div class="hero__logo"></div>
</section>

<section class="rent pt--80 pb--80" id="rent">
    <div class="container">
        <div class="section__wrapper">
            <div class="section__header grid col-3 gap-1">
                <div class="section__subtitle">
                    <p><i class="icon--title"></i>Аренда катеров</p>
                </div>
                <div class="section__title">
                    <h2>Забронируйте подходящий катер под ваш запрос</h2>
                </div>
                <div class="section__description max-w-md/1.35">
                    <p>У нас можно арендовать катера под любой вкус и настроение, <span>вы&nbsp;можете выбрать именно тот</span>, который подходит под ваш повод</p>
                </div>

                <!-- Фильтр -->
                <div class="rent__filters flex-align-center gap-2">
                    <div class="rent__filters-title flex-align-center gap-2 mr--16">
                        <i class="icon--filter"></i>
                        <p>Фильтр:</p>
                    </div>
                    
                    <!-- По типу судна -->
                    <div class="rent__filter">
                        <div class="custom-select" data-name="rent-filter-type">
                            <button class="custom-select__trigger" type="button" aria-haspopup="listbox" aria-expanded="false">
                                <span class="custom-select__value">По типу судна</span>
                                <svg class="custom-select__arrow" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect x="14" y="6.11959e-07" width="14" height="14" rx="5" transform="rotate(90 14 6.11959e-07)" fill="white" fill-opacity="0.06"/>
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.66672 8.84096L4.28635 6.09804C4.12207 5.90874 4.12207 5.62743 4.28635 5.43812C4.48706 5.20684 4.84606 5.20684 5.04678 5.43812L6.24474 6.81855C6.64345 7.27798 7.35655 7.27798 7.75526 6.81855L8.95322 5.43812C9.15394 5.20684 9.51294 5.20684 9.71365 5.43812C9.87793 5.62743 9.87793 5.90874 9.71365 6.09804L7.33328 8.84096C7.24488 8.94279 7.125 9 7 9C6.875 9 6.75512 8.94279 6.66672 8.84096Z" fill="white" fill-opacity="0.5"/>
                                </svg>
                            </button>
                            <select name="rent-filter-type" id="rent-filter-type" aria-hidden="true" tabindex="-1">
                                <option value="">По типу судна</option>
                                <option value="yacht">Яхта</option>
                                <option value="motorboat">Моторная лодка</option>
                                <option value="sailboat">Парусная лодка</option>
                            </select>
                            <ul class="custom-select__dropdown" role="listbox" aria-label="По типу судна">
                                <li class="custom-select__option is-selected" role="option" aria-selected="true" data-value="">По типу судна</li>
                                <li class="custom-select__option" role="option" aria-selected="false" data-value="yacht">Яхта</li>
                                <li class="custom-select__option" role="option" aria-selected="false" data-value="motorboat">Моторная лодка</li>
                                <li class="custom-select__option" role="option" aria-selected="false" data-value="sailboat">Парусная лодка</li>
                            </ul>
                        </div>
                    </div>

                    <!-- По вместимости -->
                    <div class="rent__filter">
                        <div class="custom-select" data-name="rent-filter-capacity">
                            <button class="custom-select__trigger" type="button" aria-haspopup="listbox" aria-expanded="false">
                                <span class="custom-select__value">По вместимости</span>
                                <svg class="custom-select__arrow" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect x="14" y="6.11959e-07" width="14" height="14" rx="5" transform="rotate(90 14 6.11959e-07)" fill="white" fill-opacity="0.06"/>
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.66672 8.84096L4.28635 6.09804C4.12207 5.90874 4.12207 5.62743 4.28635 5.43812C4.48706 5.20684 4.84606 5.20684 5.04678 5.43812L6.24474 6.81855C6.64345 7.27798 7.35655 7.27798 7.75526 6.81855L8.95322 5.43812C9.15394 5.20684 9.51294 5.20684 9.71365 5.43812C9.87793 5.62743 9.87793 5.90874 9.71365 6.09804L7.33328 8.84096C7.24488 8.94279 7.125 9 7 9C6.875 9 6.75512 8.94279 6.66672 8.84096Z" fill="white" fill-opacity="0.5"/>
                                </svg>
                            </button>
                            <select name="rent-filter-capacity" id="rent-filter-capacity" aria-hidden="true" tabindex="-1">
                                <option value="">По вместимости</option>
                                <option value="2-4">2-4 человека</option>
                                <option value="5-10">5-10 человек</option>
                                <option value="11-20">11-20 человек</option>
                                <option value="21+">21+ человек</option>
                            </select>
                            <ul class="custom-select__dropdown" role="listbox" aria-label="По вместимости">
                                <li class="custom-select__option is-selected" role="option" aria-selected="true" data-value="">По вместимости</li>
                                <li class="custom-select__option" role="option" aria-selected="false" data-value="2-4">2-4 человека</li>
                                <li class="custom-select__option" role="option" aria-selected="false" data-value="5-10">5-10 человек</li>
                                <li class="custom-select__option" role="option" aria-selected="false" data-value="11-20">11-20 человек</li>
                                <li class="custom-select__option" role="option" aria-selected="false" data-value="21+">21+ человек</li>
                            </ul>
                        </div>
                    </div>

                    <!-- По услуге -->
                    <div class="rent__filter">
                        <div class="custom-select" data-name="rent-filter-service">
                            <button class="custom-select__trigger" type="button" aria-haspopup="listbox" aria-expanded="false">
                                <span class="custom-select__value">По услуге</span>
                                <svg class="custom-select__arrow" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <rect x="14" y="6.11959e-07" width="14" height="14" rx="5" transform="rotate(90 14 6.11959e-07)" fill="white" fill-opacity="0.06"/>
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.66672 8.84096L4.28635 6.09804C4.12207 5.90874 4.12207 5.62743 4.28635 5.43812C4.48706 5.20684 4.84606 5.20684 5.04678 5.43812L6.24474 6.81855C6.64345 7.27798 7.35655 7.27798 7.75526 6.81855L8.95322 5.43812C9.15394 5.20684 9.51294 5.20684 9.71365 5.43812C9.87793 5.62743 9.87793 5.90874 9.71365 6.09804L7.33328 8.84096C7.24488 8.94279 7.125 9 7 9C6.875 9 6.75512 8.94279 6.66672 8.84096Z" fill="white" fill-opacity="0.5"/>
                                </svg>
                            </button>
                            <select name="rent-filter-service" id="rent-filter-service" aria-hidden="true" tabindex="-1">
                                <option value="">По услуге</option>
                                <option value="1">Почасовая аренда</option>
                                <option value="2">Аренда с капитаном</option>
                            </select>
                            <ul class="custom-select__dropdown" role="listbox" aria-label="По услуге">
                                <li class="custom-select__option is-selected" role="option" aria-selected="true" data-value="">По услуге</li>
                                <li class="custom-select__option" role="option" aria-selected="false" data-value="1">Почасовая аренда</li>
                                <li class="custom-select__option" role="option" aria-selected="false" data-value="2">Аренда с капитаном</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Сортировка -->
                <div class="rent__sort flex-align-center">
                    <div class="custom-select custom-select--nobg" data-name="rent-sort">
                        <button class="custom-select__trigger" type="button" aria-haspopup="listbox" aria-expanded="false">
                            <span class="custom-select__value">По популярности</span>
                            <svg class="custom-select__arrow" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="14" y="6.11959e-07" width="14" height="14" rx="5" transform="rotate(90 14 6.11959e-07)" fill="white" fill-opacity="0.06"/>
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.66672 8.84096L4.28635 6.09804C4.12207 5.90874 4.12207 5.62743 4.28635 5.43812C4.48706 5.20684 4.84606 5.20684 5.04678 5.43812L6.24474 6.81855C6.64345 7.27798 7.35655 7.27798 7.75526 6.81855L8.95322 5.43812C9.15394 5.20684 9.51294 5.20684 9.71365 5.43812C9.87793 5.62743 9.87793 5.90874 9.71365 6.09804L7.33328 8.84096C7.24488 8.94279 7.125 9 7 9C6.875 9 6.75512 8.94279 6.66672 8.84096Z" fill="white" fill-opacity="0.5"/>
                            </svg>
                        </button>
                        <select name="rent-sort" id="rent-sort" aria-hidden="true" tabindex="-1">
                            <option value="popular">По популярности</option>
                            <option value="price-asc">Цене: от низкой к высокой</option>
                            <option value="price-desc">Цене: от высокой к низкой</option>
                            <option value="capacity-asc">Вместимости: от меньшей к большей</option>
                            <option value="capacity-desc">Вместимости: от большей к меньшей</option>
                        </select>
                        <ul class="custom-select__dropdown" role="listbox" aria-label="Сортировка">
                            <li class="custom-select__option is-selected" role="option" aria-selected="true" data-value="popular">По популярности</li>
                            <li class="custom-select__option" role="option" aria-selected="false" data-value="price-asc">Цене: от низкой к высокой</li>
                            <li class="custom-select__option" role="option" aria-selected="false" data-value="price-desc">Цене: от высокой к низкой</li>
                            <li class="custom-select__option" role="option" aria-selected="false" data-value="capacity-asc">Вместимости: от меньшей к большей</li>
                            <li class="custom-select__option" role="option" aria-selected="false" data-value="capacity-desc">Вместимости: от большей к меньшей</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<?php get_footer(); ?>
