{% extends 'core/front/front.layout.html.twig' %}

{% block title %}{{ 'agencies.title'|trans({}, 'app') }}{% endblock %}

{% block front %}
    {{ breadcrumb(
        'agencies.title'|trans({}, 'app'),
        '',
        [{link: null, name: 'agencies.breadcrumb'|trans({}, 'app')}]
    ) }}

    <section class="section section-agencies bg-white pt-3 pt-lg-5 ">
        <div class="container">
            <div class="d-flex flex-column flex-lg-row gap-3 gap-lg-5 justify-content-between align-items-center align-items-lg-end">
                <div class="section-head section-head-full section-headLeft">
                    <span class="text-subheading">{{ 'agencies.subtitle'|trans({}, 'app') }}</span>
                    <h2>{{ 'agencies.heading'|trans({}, 'app') }}</h2>
                    <p>{{ 'agencies.description'|trans({}, 'app') }}</p>
                </div>
                <div class="form-search-container">
                    <form>
                        <div class="form-group">
                            <input type="text" placeholder="{{ 'agencies.search'|trans({}, 'app') }}"/>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="listing-agencies pt-3 pt-lg-5">
            <div class="container container-custom">
                {{ render(controller("App\\Business\\Controller\\Public\\EmbedController::agencies")) }}
            </div>
        </div>
    </section>

    <section class="section section-contact pt-3 pt-lg-5">
        <div class="container pt-lg-5">
            <div class="section-head text-center">
                <span class="text-subheading-circle">{{ 'contact.subtitle'|trans({}, 'app') }}</span>
                <h2>{{ 'contact.heading'|trans({}, 'app') }}</h2>
                <p>{{ 'contact.description'|trans({}, 'app') }}</p>
            </div>
        </div>
        <div class="container">
            <div class="row m-0">
                <div class="col-sm-12 p-0">
                    <div class="imgFull-container mt-5">
                        <img alt=" " src="{{ asset('vendors/assets/img/full-image.jpg') }}"/>
                    </div>
                </div>
                <div class="col-md-6 contact-text item-value p-0">
                    <div class="item-value-content d-flex flex-column gap-5 p-4 align-items-start bg-light1 h-100">
                        <div class="box-icon bg-greenbtn">
                            <img alt=" " src="{{ asset('vendors/assets/img/icon-message-chat-circle.svg') }}"/>
                        </div>
                        <div>
                            <h3 class="fw-bold mb-1">{{ 'contact.email.title'|trans({}, 'app') }}</h3>
                            <p>{{ 'contact.email.text'|trans({}, 'app') }}</p>
                            <p><a href="mailto:contact@bangebj.com" title="{{ 'contact.email.link'|trans({}, 'app') }}">contact@bangebj.com</a></p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 contact-text item-value p-0">
                    <div class="item-value-content d-flex flex-column gap-5 p-4 align-items-start bg-light2 h-100">
                        <div class="box-icon bg-greenbtn">
                            <img alt=" " src="{{ asset('vendors/assets/img/icon-phone-white.svg') }}"/>
                        </div>
                        <div>
                            <h3 class="fw-bold mb-1">{{ 'contact.phone.title'|trans({}, 'app') }}</h3>
                            <p>{{ 'contact.phone.text'|trans({}, 'app') }}</p>
                            <p><a href="tel:+22952679595" title="{{ 'contact.phone.link'|trans({}, 'app') }}">+229 52 67 95 95</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}