@extends('layout')

    @section('title', 'В\'язальні бесіди')

    @section('content')
        <div class="home-page-content">
            <section id="first__screen" class="first__screen">
                <div class="first-screen__container">
                    <div class="first-screen__content">
                        <div class="info-block">
                            <h1 class="home__title">В'язальні бесіди</h1>
                            <p class="home__description">
                                Раді вітати вас на нашому сайті, де в'язані вироби набувають нового життя та форми. Тут ви
                                знайдете товари, що поєднують тепло, комфорт та оригінальність. Наш магазин – це оаза для
                                тих,
                                хто шукає особливі речі для себе та своїх близьких.
                            </p>
                            <a href="{{ route('catalog') }}" class="catalog-button">Переглянути пропозиції</a>
                        </div>
                        <div class="image-block">
                            <img class="first-screen" src="{{ asset('assets/home/first-screen.png') }}" alt="">
                        </div>
                    </div>
                </div>
                <img class="bg-rabbit" src="{{ asset('assets/home/first-screen__bg-rabbit.png') }}" alt="">
            </section>
            <section id="what-we-sale" class="what-we-sale">
                <div class="sale__container">
                    <div class="sale__content">
                        <h2 class="sale__title title">Що ми продаємо?</h2>
                        <div class="sale__list">
                            <div class="sale__item clothes">
                                <div class="sale__image-block">
                                    <a href="{{ route('catalog', [
                                        'category' => 'Одяг',
                                    ]) }}"
                                        class="sale__image">
                                        <img src="{{ asset('assets/home/product-type-1.jpg') }}" alt="В’язаний одяг">
                                    </a>
                                    <svg class="ellipse" width="222" height="201" viewBox="0 0 222 201" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M109.747 199.85C82.5534 199.85 55.3763 179.244 34.921 151.501C14.4879 123.789 0.999996 89.2666 0.999997 61.9468C0.999998 48.3205 4.35444 37.8256 10.1761 29.7224C16.0024 21.6127 24.3579 15.8181 34.4927 11.6982C54.8075 3.44005 82.0601 1.98931 109.747 1.98931C136.951 1.98932 164.755 22.4823 185.836 50.1015C206.896 77.6934 221 112.086 221 139.393C221 153.009 217.494 163.532 211.442 171.683C205.382 179.843 196.712 185.704 186.259 189.889C165.314 198.275 137.428 199.85 109.747 199.85Z"
                                            stroke="#FFBAA4" stroke-width="2" />
                                    </svg>
                                    <svg class="arrow" width="49" height="113" viewBox="0 0 49 113" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path opacity="0.957" fill-rule="evenodd" clip-rule="evenodd"
                                            d="M7.52971 111.76C7.11888 111.349 6.70805 110.939 6.29723 110.528C5.9174 108.887 6.54218 107.811 8.17158 107.3C11.3129 107.322 14.4544 107.344 17.5957 107.366C11.6257 101.331 6.92684 94.4496 3.49915 86.7214C-1.23257 75.3035 -0.575349 64.3011 5.47082 53.7143C1.53749 45.1893 -0.0343459 36.2912 0.755554 27.02C2.47411 15.1799 8.4897 6.21266 18.8024 0.118034C19.3282 0.100785 19.8382 0.124658 20.3327 0.18989C20.7435 0.600388 21.1544 1.01101 21.5652 1.42151C21.8559 2.3873 21.6579 3.24205 20.9713 3.98564C9.47599 11.3492 4.22578 21.8506 5.22076 35.4899C5.66739 40.2834 6.80147 44.9387 8.623 49.4558C13.6514 43.7597 19.9102 40.3791 27.3992 39.3141C36.3587 38.7423 42.8306 42.4973 46.815 50.5792C49.7365 59.1038 47.8288 66.3062 41.0919 72.1861C35.5799 75.6944 29.71 76.3463 23.4821 74.142C18.3666 71.5096 14.1796 67.8113 10.9212 63.0472C9.92807 61.6606 9.02058 60.2273 8.19856 58.7476C6.84469 61.1336 5.92431 63.6956 5.43755 66.4332C4.31319 74.6765 5.83632 82.4736 10.0073 89.8244C12.9979 95.0614 16.6211 99.8157 20.8771 104.087C20.9773 100.915 20.9959 97.7356 20.9327 94.5482C21.4416 92.8457 22.5391 92.2827 24.2252 92.8591C24.7785 93.2327 25.1899 93.7247 25.4594 94.3353C25.4951 99.4313 25.5308 104.527 25.5665 109.623C25.1274 110.925 24.2356 111.734 22.8911 112.051C17.7491 112.076 12.6286 111.979 7.52971 111.76ZM40.8659 66.1307C36.5432 70.5644 31.3916 71.8532 25.4113 69.9973C21.9017 68.2228 18.9067 65.7966 16.4262 62.7188C14.3478 60.1459 12.5336 57.4019 10.9836 54.4866C14.4398 49.3059 19.2298 45.9149 25.3537 44.314C30.6487 43.0903 35.4296 44.2244 39.6966 47.7165C44.4493 53.6556 44.839 59.7937 40.8659 66.1307Z"
                                            fill="#FFBAA4" />
                                    </svg>
                                </div>
                                <a href="{{ route('catalog', [
                                    'category' => 'Одяг',
                                ]) }}"
                                    class="sale__desc">В’язаний одяг</a>
                            </div>
                            <div class="sale__item toys">
                                <div class="sale__image-block">
                                    <a href="{{ route('catalog', [
                                        'category' => 'Іграшки',
                                    ]) }}"
                                        class="sale__image">
                                        <img src="{{ asset('assets/home/product-type-2.jpg') }}" alt="В’язані іграшки">
                                    </a>
                                    <svg class="ellipse" width="145" height="180" viewBox="0 0 145 180" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M141.519 112.022C135.804 133.7 126.484 152.501 113.292 164.427C100.153 176.305 83.1085 181.426 61.6867 175.674C18.7341 164.142 -7.67146 118.031 3.66998 75.0101C5.10845 69.5536 6.4037 64.153 7.65221 58.9113C7.74486 58.5223 7.83724 58.1342 7.9294 57.7471C9.08017 52.9132 10.1965 48.224 11.3586 43.7432C13.8717 34.0533 16.5804 25.4167 20.2544 18.5193C23.9219 11.6343 28.5108 6.55876 34.7526 3.87782C40.9985 1.1951 49.0563 0.842816 59.7953 3.7262C81.297 9.49934 104.605 25.8496 121.108 46.1982C137.627 66.5671 147.141 90.6981 141.519 112.022Z"
                                            stroke="#FFBAA4" stroke-width="2" />
                                    </svg>
                                    <svg class="arrow" width="69" height="100" viewBox="0 0 69 100" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path opacity="0.957" fill-rule="evenodd" clip-rule="evenodd"
                                            d="M1.16088 91.7282C1.01052 91.1666 0.860145 90.605 0.709779 90.0435C1.20198 88.4301 2.28137 87.8096 3.94794 88.182C6.6573 89.7728 9.36683 91.3637 12.0762 92.9545C9.92572 84.7336 9.29966 76.4145 10.198 67.9972C11.813 55.7276 17.887 46.5147 28.4199 40.3586C29.279 30.9973 32.3698 22.4941 37.6925 14.8489C45.1047 5.4406 54.8008 0.673723 66.7809 0.548208C67.2449 0.796321 67.6746 1.07222 68.0702 1.37622C68.2206 1.93776 68.371 2.49946 68.5213 3.06101C68.2898 4.04401 67.6908 4.68625 66.724 4.98754C53.085 5.62182 43.2842 12.1021 37.3216 24.4285C35.3101 28.8091 33.963 33.4138 33.2803 38.2427C40.4849 35.8187 47.5964 36.0186 54.6147 38.842C62.6596 42.829 66.3855 49.3238 65.7924 58.3263C64.0573 67.1811 58.8017 72.4727 50.0256 74.2012C43.4969 74.4858 38.0874 72.1141 33.797 67.0864C30.6841 62.2438 28.9085 56.9415 28.4703 51.1795C28.3041 49.4801 28.2353 47.7831 28.2638 46.0885C25.8975 47.4804 23.8187 49.2417 22.0274 51.3723C16.9294 57.9587 14.3472 65.4827 14.2815 73.9446C14.251 79.9827 15.01 85.9187 16.5585 91.7526C18.2323 89.0519 19.8393 86.3037 21.3793 83.5078C22.6719 82.286 23.904 82.3469 25.0758 83.6903C25.368 84.2912 25.4781 84.9238 25.406 85.5881C22.8872 90.0255 20.3683 94.4629 17.8496 98.9003C16.8182 99.8091 15.6411 100.065 14.3182 99.6666C9.85255 97.1158 5.46673 94.4697 1.16088 91.7282ZM52.8595 68.8366C46.8978 70.5189 41.7917 69.059 37.5413 64.4572C35.3899 61.1622 34.0102 57.5595 33.402 53.6492C32.8894 50.3779 32.6912 47.0905 32.8075 43.7867C38.3926 41.0231 44.2374 40.4789 50.3417 42.1547C55.5394 43.7428 59.1122 47.1186 61.0602 52.282C62.2045 59.8106 59.4709 65.3289 52.8595 68.8366Z"
                                            fill="#FFBAA4" />
                                    </svg>
                                </div>
                                <a href="{{ route('catalog', [
                                    'category' => 'Іграшки',
                                ]) }}"
                                    class="sale__desc">В’язані іграшки</a>
                            </div>
                            <div class="sale__item tools">
                                <div class="sale__image-block">
                                    <a href="{{ route('catalog', [
                                        'category' => 'Матеріали',
                                    ]) }}"
                                        class="sale__image">
                                        <img src="{{ asset('assets/home/product-type-3.jpg') }}"
                                            alt="Інструменти для в’язання">
                                    </a>
                                    <svg class="ellipse" width="165" height="235" viewBox="0 0 165 235" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M132.307 25.2264C144.013 31.9863 151.966 43.7486 156.855 58.4664C161.744 73.1854 163.541 90.785 162.978 109.072C161.853 145.663 151.295 184.762 137.522 208.613C130.641 220.528 123.675 227.394 116.442 230.678C109.233 233.95 101.605 233.736 93.2312 231.162C84.833 228.581 75.7671 223.653 65.7507 217.594C62.046 215.353 58.2058 212.954 54.2276 210.469C47.4985 206.265 40.3741 201.815 32.841 197.465C9.35471 183.902 0.690579 155.083 1.4636 123.354C2.23553 91.6701 12.4253 57.4369 26.2135 33.5609C33.1032 21.6305 40.1997 13.4847 47.6663 8.36615C55.1145 3.2602 62.9785 1.13343 71.483 1.31402C88.5913 1.6773 108.303 11.3646 132.307 25.2264Z"
                                            stroke="#FFBAA4" stroke-width="2" />
                                    </svg>
                                    <svg class="arrow" width="48" height="113" viewBox="0 0 48 113" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path opacity="0.957" fill-rule="evenodd" clip-rule="evenodd"
                                            d="M7.29766 111.759C6.88683 111.349 6.476 110.938 6.06518 110.528C5.68535 108.886 6.31013 107.81 7.93953 107.299C11.0809 107.321 14.2223 107.343 17.3636 107.365C11.3936 101.329 6.69479 94.4462 3.2671 86.7167C-1.46463 75.2969 -0.807405 64.2927 5.23877 53.704C1.30543 45.1775 -0.266409 36.278 0.52349 27.0052C2.24204 15.1632 8.25763 6.19438 18.5704 0.0987131C19.0961 0.0814665 19.6062 0.105337 20.1007 0.170583C20.5115 0.581154 20.9224 0.991843 21.3332 1.40241C21.6238 2.36836 21.4259 3.22326 20.7392 3.96698C9.24392 11.3318 3.99372 21.8349 4.98869 35.4765C5.43533 40.2708 6.56941 44.9269 8.39094 49.4449C13.4194 43.7478 19.6782 40.3666 27.1672 39.3014C36.1266 38.7295 42.5985 42.4852 46.5829 50.5684C49.5045 59.0945 47.5968 66.298 40.8598 72.179C35.3478 75.6878 29.4779 76.3398 23.2501 74.1352C18.1346 71.5023 13.9476 67.8034 10.6891 63.0385C9.69601 61.6516 8.78853 60.2182 7.9665 58.7382C6.61263 61.1246 5.69225 63.687 5.2055 66.4251C4.08114 74.6698 5.60427 82.4682 9.77524 89.8202C12.7658 95.0581 16.3891 99.8132 20.645 104.085C20.7453 100.913 20.7638 97.7327 20.7006 94.5448C21.2095 92.842 22.3071 92.279 23.9932 92.8554C24.5464 93.2291 24.9579 93.7212 25.2274 94.3319C25.2631 99.4288 25.2987 104.526 25.3345 109.623C24.8953 110.924 24.0035 111.733 22.659 112.05C17.517 112.076 12.3965 111.979 7.29766 111.759ZM40.6338 66.1226C36.3112 70.557 31.1596 71.846 25.1792 69.9898C21.6696 68.215 18.6746 65.7883 16.1941 62.71C14.1157 60.1367 12.3015 57.3922 10.7515 54.4765C14.2077 49.2949 18.9977 45.9033 25.1216 44.3022C30.4166 43.0782 35.1976 44.2126 39.4645 47.7052C44.2172 53.6453 44.6069 59.7845 40.6338 66.1226Z"
                                            fill="#FFBAA4" />
                                    </svg>
                                </div>
                                <a href="{{ route('catalog', [
                                    'category' => 'Матеріали',
                                ]) }}"
                                    class="sale__desc">Інструменти для в’язання</a>
                            </div>
                        </div>
                    </div>
                </div>
                <img class="what-we-sale__bottom-bg" src="{{ asset('assets/home/what-we-sale__bottom.png') }}"
                    alt="">
            </section>
            <section id="photogalary" class="photogalary">
                <h2 class="photogalary__title title">
                    Фото клієнтів
                </h2>
                <div class="swiper photogalary-slider">
                    <div class="swiper-wrapper">
                        @foreach ($photos as $photo)
                            <div class="swiper-slide photogalary-slide">
                                <div class="photogalary-slide-img">
                                    <img src="{{ asset('assets/photogalary/' . $photo->photo_url) }}" alt="Client Image">
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="photogalary-slider-control">
                        <div class="swiper-button-prev slider-arrow">
                            <svg width="34" height="30" viewBox="0 0 34 30" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M10.6832 14.6089H27.9734V18.9894H10.6832L17.3145 26.2017L14.4665 29.2992L2.97339 16.7992L14.4665 4.29919L17.3145 7.39668L10.6832 14.6089Z"
                                    fill="#FFBAA4" />
                            </svg>
                        </div>
                        <div class="swiper-button-next slider-arrow">
                            <svg width="34" height="30" viewBox="0 0 34 30" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M17.9455 15.5827H0.655273V11.2022H17.9455L11.3142 3.98994L14.1622 0.892456L25.6553 13.3925L14.1622 25.8925L11.3142 22.795L17.9455 15.5827Z"
                                    fill="#FFBAA4" />
                            </svg>
                        </div>
                    </div>
                </div>
            </section>
            <section id="about-us" class="about-us">
                <div class="about-us__container">
                    <h2 class="about-us__title title">Про нас</h2>
                    <div class="about-us__content">
                        <div class="text-block">
                            <h3 class="about-us__name">В'язальні бесіди</h3>
                            <p class="about-us__text">
                                {{ $aboutUsVideo['value'] }}
                            </p>
                        </div>
                        <div class="video-block">
                            <div class="video">
                                <div id="about-us-video" width="100%" height="100%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <img class="about-us-left-bg" src="{{ asset('assets/home/about-us__left-bg.png') }}" alt="">
                <img class="about-us-right-bg" src="{{ asset('assets/home/about-us__right-bg.png') }}" alt="">
                <img class="about-us__bottom-bg" src="{{ asset('assets/home/about-us__bottom.png') }}" alt="">
            </section>
            @include('components.order-form')
        </div>
    @endsection