@pushOnce('styles')
    <style>
        .cat-wrapper {
            display: flex;

        }

        .cat-wrapper .left-part {
            background-color: #edecf4;
            flex: 50%;
            display: flex;
            justify-content: flex-end;

        }

        .cat-wrapper .right-part {
            background-color: #fbfafc;
            flex: 50%;
            display: flex;
            justify-content: flex-start;

        }

        .cat-wrapper .cat-container {
            max-width: calc(1920px / 2);
            width: 100%;
            padding: 0 90px;
        }

        .cat-wrapper .right-part .cat-container .infos-container {
            max-width: 500px;
            width: 100%;
        }

        .cat-wrapper .left-part .cat-container {
            display: flex;
            gap: 50px;
        }

        .cat-wrapper .left-part .title,
        .cat-wrapper .right-part .title {
            font-size: clamp(1.875rem, 1.6549rem + 0.7042vw, 2.5rem);
            font-weight: 600;
            text-transform: uppercase;
            line-height: 1.2
        }

        .cat-wrapper .left-part .img-container {
            display: flex;
            align-items: flex-end;
        }

        .cat-wrapper .left-part .img-container img {
            max-height: 400px;
            min-width: 189px;
            aspect-ratio: 189/337;
        }

        .cat-wrapper .left-part .infos-container {
            padding: 70px 30px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .cat-wrapper .left-part .icons-container {
            display: flex;
            gap: 10px;
        }

        .cat-wrapper .left-part .icons-container .icon {
            width: 60px;
            height: 60px;
        }

        .cat-wrapper .right-part .infos-container {
            padding: 70px 30px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .form-wrapper {
            background: white;
            padding: 15px;
            border: 1px solid black;
            border-radius: 20px;
            max-width: 300px;
            width: 100%;
        }

        .form-wrapper .input-container {
            border-bottom: 1px solid black;
            display: flex;
            justify-content: space-between
        }

        .form-wrapper .input-container input {
            width: 100%
        }

        .form-wrapper .input-container input::placeholder {
            font-size: 14px;
            font-weight: 500;
            font-style: italic;
        }

        .form-wrapper .input-container button,
        .form-wrapper-light .input-container button {
            font-style: normal;
            font-weight: 500;
            transform: scaleX(-1)
        }


        .form-wrapper .input-container button:hover {
            color: #f37e7e;
        }

        .form-wrapper-light {
            padding: 5px 15px;
        }


        @media(max-width:1220px) {
            .cat-wrapper {
                flex-direction: column;
            }
        }

        @media(max-width:800px) {
            .cat-wrapper .left-part .cat-container {
                flex-direction: column-reverse;
                gap: 0;
            }

            .cat-wrapper .cat-container {
                padding: 0 10px;
            }

            .cat-wrapper .left-part .img-container {
                justify-content: center;
                width: 100%;
            }
        }
    </style>
@endpushOnce


<v-cat>
</v-cat>

@pushOnce('scripts')
    <script type="text/x-template" id="v-cat-template">
      <div class="cat-wrapper">
        <div class="left-part">
            <div class="cat-container">
                <div class="img-container">
                    <img  src="{{bagisto_asset('images/glanum/phone-v2.png') }}"/>
                </div>
                <div class="infos-container">
                    <div class="title">RUCKFIELD SUR<br/>LES Réseaux</div>
                    <div class="para">Envie de suivre toute notre actualité ? De rester à l'affût de nos dernières exclus ?</div>
                    <div class="font-[600]  ">Suivez-nous sur:</div>
                    <div class="icons-container">
                        <img class="icon" src="{{bagisto_asset('images/glanum/instagram-svgrepo-com.svg') }}">
                        <img class="icon" src="{{bagisto_asset('images/glanum/facebook-svgrepo-com.svg') }}">
                        <img class="icon" src="{{bagisto_asset('images/glanum/youtube-svgrepo-com.svg') }}">
                        <img class="icon" src="{{bagisto_asset('images/glanum/linkedin-svgrepo-com.svg') }}">
                    </div>
                </div>
            </div>
        </div>
        <div class="right-part">
            <div class="cat-container">
            <div class="infos-container">
                <div class="title">10€ offert !<br/> Inscrivez-vous</div>
                <div class="para">Pas trop réseaux sociaux? Vous pouvez vous abonner à notre newsletter ! <strong> Recevez un cadeau de bienvenue d'une valeur de 10€ </strong></div>
                <form type="POST" class="form-wrapper inline-block">
                    <div class="input-container input-newsletter">
                        <input type="text" placeholder="Votre adresse e-mail"/>
                        <button type="button">OK</button>
                    </div>
                </form>
            </div>
            </div>
        </div>
      </div>
    </script>

    <script type="module">
        app.component("v-cat", {
            template: '#v-cat-template',
            setup() {
                console.log('');
            },
            mounted() {

            }
        })
    </script>
    <script></script>
@endpushOnce