<?php
$backgroundImage = $block->getBackgroundImageMobile();
$backgroundSources = $block->getBackgroundSources();
$brandTitle = $block->getBrandTitle();
$motto = $block->getMotto();
$height = $block->getHeight();
$logo = $block->getLogo();
?>
<div class="manufacturer-hero" style="height: <?= $escaper->escapeHtmlAttr((string)$height) ?>px;">
    <?php if ($backgroundImage): ?>
        <picture class="manufacturer-hero-media">
            <?php foreach ($backgroundSources as $media => $source): ?>
                <source media="<?= $escaper->escapeHtmlAttr($media) ?>"
                        srcset="<?= $escaper->escapeUrl($source) ?>" />
            <?php endforeach; ?>
            <img src="<?= $escaper->escapeUrl($backgroundImage) ?>"
                 alt="" fetchpriority="high" decoding="async" />
        </picture>
    <?php endif; ?>

    <div class="manufacturer-hero-content">
        <?php if ($logo): ?>
            <h1 class="manufacturer-logo">
                <img src="<?= $escaper->escapeUrl($logo) ?>"
                     alt="<?= $escaper->escapeHtmlAttr($brandTitle) ?>" />
            </h1>
        <?php elseif ($brandTitle): ?>
            <h1 class="manufacturer-brand">
                <?= $escaper->escapeHtml($brandTitle) ?>
            </h1>
        <?php endif; ?>

        <?php if ($motto): ?>
            <div class="manufacturer-motto">
                <?= $escaper->escapeHtml($motto) ?>
            </div>
        <?php endif; ?>
    </div>

    <?php if ($logo): ?>
        <script>
            document.querySelectorAll('.manufacturer-hero .manufacturer-logo').forEach(function (logo) {
                var img = logo.querySelector('img');
                var classify = function () {
                    if (logo.classList.contains('is-ready')
                        || !img.naturalWidth
                        || img.currentSrc.indexOf('data:') === 0
                    ) {
                        return;
                    }

                    try {
                        var canvas = document.createElement('canvas');
                        var context = canvas.getContext('2d');
                        var luminance = 0;
                        var weight = 0;
                        var pixels, alpha, i;

                        canvas.width = 64;
                        canvas.height = 32;
                        context.drawImage(img, 0, 0, canvas.width, canvas.height);
                        pixels = context.getImageData(0, 0, canvas.width, canvas.height).data;

                        for (i = 0; i < pixels.length; i += 4) {
                            alpha = pixels[i + 3] / 255;
                            luminance += (0.2126 * pixels[i] + 0.7152 * pixels[i + 1] + 0.0722 * pixels[i + 2]) * alpha;
                            weight += alpha;
                        }

                        if (weight && luminance / weight / 255 > 0.65) {
                            logo.classList.add('is-light');
                        }
                    } catch (e) {
                    }

                    logo.classList.add('is-ready');
                };

                img.addEventListener('load', classify);
                classify();
            });
        </script>
    <?php endif; ?>
</div>
