{% extends 'layout.html.twig' %}

{% set seo_entity = page %}
{% set seo_fallback = {'og_image': page.bannerImage ? page.bannerImage.publicUrl} %}

{% block styles %}
    <style>
        {% if page.bannerImageMobile %}
            .home-banner-image { background-image: url('{{ page.bannerImageMobile.publicUrl }}') }
        {% endif %}
        {% if page.bannerImage %}
            @media (min-width: 768px) { .home-banner-image { background-image: url('{{ page.bannerImage.publicUrl }}') } }
        {% endif %}
    </style>
{% endblock %}

{% block scripts %}
    <script src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
{% endblock %}

{% block site_breadcrumbs_wrapper %}{% endblock %}

{% block content %}
    {# TODO: Add or reuse an entry field #}
    <h1 class="sr-only">Business Cards, Docket Books, Online Print &amp; Design</h1>
    <div class="page home">
        <div class="page-content">
            <section class="home-banner{% if page.bannerLight %} home-banner-light{% endif %}">
                <div class="home-banner-image"></div>
                <div class="container">
                    <div class="home-banner-content">
                        <h3 class="home-banner-content-title">{{ page.bannerHeading }}</h3>
                        <div class="home-banner-content-body">{{ page.bannerContent|raw }}</div>
                        {% if page.bannerButtonText %}
                            <div class="home-banner-content-button">
                                <a href="{{ page.bannerButtonUrl }}" class="btn btn-lg {% if page.bannerLight %}btn-secondary{% else %}btn-primary{% endif %}">{{ page.bannerButtonText }}</a>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </section>

            <section class="container home-trustpilot">
                <div class="trustpilot-widget" data-locale="en-GB" data-template-id="5406e65db0d04a09e042d5fc" data-businessunit-id="5e9d2395bcad3f0001f4143c" data-style-height="28px" data-style-width="100%" data-theme="light"></div>
            </section>

            <section class="container home-badges">
                <div class="row">
                    {% for badge in page.badges %}
                        <div class="col-sm-4">
                            {% if badge.linkUrl is not empty %}
                                <a href="{{ badge.linkUrl }}" class="home-badges-item home-badges-item-{{ badge.colour }}">
                                    <img src="{{ badge.icon ? badge.icon.publicUrl }}" width="64" height="64" class="home-badges-item-img" alt="{{ badge.icon ? badge.icon.altText }}">
                                    <div class="home-badges-item-text">{{ badge.content|nl2br|raw }}</div>
                                </a>
                            {% else %}
                                <div class="home-badges-item home-badges-item-{{ badge.colour }}">
                                    <img src="{{ badge.icon ? badge.icon.publicUrl }}" width="64" height="64" class="home-badges-item-img" alt="{{ badge.icon ? badge.icon.altText }}">
                                    <div class="home-badges-item-text">{{ badge.content|nl2br|raw }}</div>
                                </div>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
            </section>

            <section class="container home-categories">
                <div class="products">
                    {% for category in page.categories %}
                        <article class="products-item">
                            <a href="{{ category.linkUrl }}">
                                <div class="products-item-img">
                                    <img src="{{ category.image ? category.image.publicUrl }}" width="300" height="200" alt="{{ category.image ? category.image.altText }}">
                                </div>
                                <div class="products-item-content">
                                    <h3 class="products-item-title">{{ category.title }}</h3>
                                    <div class="products-item-excerpt">{{ category.excerpt|raw }}</div>
                                    <div class="products-item-more">Shop now</div>
                                </div>
                            </a>
                        </article>
                    {% endfor %}
                </div>
            </section>

            <section class="container home-content" role="main">
                <h2 class="home-content-title">Take your print marketing to the next&nbsp;level</h2>
                <div class="home-content-body">{{ page.content|raw }}</div>

                <div class="home-content-features">
                    <div class="row">
                        {% for feature in page.features %}
                            <div class="col-md-4">
                                <div class="home-content-feature">
                                    <div class="home-content-feature-image">
                                        <img src="{{ feature.icon ? feature.icon.publicUrl }}" alt="{{ feature.icon ? feature.icon.altText }}">
                                    </div>
                                    <div class="home-content-feature-content">
                                        <h3 class="home-content-feature-content-title">{{ feature.title }}</h3>
                                        <div class="home-content-feature-content-body">{{ feature.content|raw }}</div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>

                <div class="home-content-button">
                    <a href="/team-and-vision" class="btn btn-lg btn-primary">Learn More About Print Storm</a>
                </div>
            </section>

            <section class="container home-clients">
                <h2 class="home-clients-title">{{ page.clientsHeading }}</h2>
                <div class="home-clients-inner" data-component="home-clients">
                    {% for logo in page.clientLogos %}
                        {% if logo.linkUrl %}
                            <a href="{{ logo.linkUrl }}" target="_blank" rel="noopener noreferer" class="home-client">
                                <img src="{{ logo.image.publicUrl }}" alt="{{ logo.image.altText }}">
                            </a>
                        {% else %}
                            <div class="home-client">
                                <img src="{{ logo.image.publicUrl }}" alt="{{ logo.image.altText }}">
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </section>

            <section class="container home-testimonials">
                <div class="trustpilot-widget" data-locale="en-GB" data-template-id="54ad5defc6454f065c28af8b" data-businessunit-id="5e9d2395bcad3f0001f4143c" data-style-height="240px" data-style-width="100%" data-theme="light" data-stars="1,2,3,4,5"></div>
            </section>
        </div>
    </div>
{% endblock %}