{{--
    Header for pages using the "Landing Page" template (see front/layouts/front.blade.php).
    A translucent bar with the logo and phone number sits over the hero, and the tagline
    sits at the bottom of the hero.

    The hero comes from the page's Banner in the admin (falls back to the Site settings banner):
      Banner type Video: Short Mp4 / Short Webm play muted on a loop; the Cover / Poster Image
                         shows while the video loads. (The Video URL field is not used here.)
      Banner type Image: the first image is shown.

    The tagline (the page's H1):
      1. The page's Description field, if filled. Bold text in it is shown heavier, e.g.
         "**Extraordinary Landscapes.** Beautifully Designed."
      2. Otherwise, for an image banner: Image Title (heavier) + Image Subtitle.
    (A video banner has no title fields, and switching a banner to Video deletes its images,
    so for a video use the Description.)

    The phone number comes from APP_PHONENO in .env, falling back to the number below.
--}}
@php
    $pageBanner = (isset($post) && isset($post->banner)) ? $post->banner : null;
    $usable = function ($banner) {
        if (!$banner) return false;
        if ($banner->type === 'video') return !empty($banner->video_mp4) || !empty($banner->video_webm) || !empty($banner->cover);
        if ($banner->type === 'image') return count($banner->images) > 0;
        return false;
    };
    $heroBanner = $usable($pageBanner) ? $pageBanner : (($usable($site->banner ?? null)) ? $site->banner : null);

    $heroVideo = ($heroBanner && $heroBanner->type === 'video') ? $heroBanner : null;
    $heroSlide = ($heroBanner && $heroBanner->type === 'image') ? $heroBanner->images->first() : null;

    // Tagline: page Description (keeping only bold/italic/line breaks), else image title/subtitle.
    $taglineHtml = isset($post) ? trim(strip_tags($post->description ?? '', '<strong><b><em><i><br>')) : '';

    $phone = config('env.APP_PHONENO') ?: '0417 685 541';
    $phoneLink = preg_replace('/[^0-9+]/', '', $phone);
@endphp

<header class="landing-header">
    <div class="landing-header__bar">
        <div class="container landing-header__inner">
            <a href="/" class="landing-header__logo">
                <img src="/uploads/images/logo/costata_logo_white.png" alt="{{ $site->title ?? 'Costata Landscape Design' }} logo" width="265" height="72">
            </a>

            <a href="tel:{{ $phoneLink }}" class="landing-header__phone">
                <img class="landing-header__phone-icon" src="/uploads/images/icons/Icon%20awesome-phone-alt.svg" alt="" aria-hidden="true">

                <span>{{ $phone }}</span>
            </a>
        </div>
    </div>

    @if($heroVideo || $heroSlide)
        <div class="landing-header__hero">
            @if($heroVideo && ($heroVideo->video_mp4 || $heroVideo->video_webm))
                {{-- muted + playsinline are what let phones autoplay it. --}}
                <video class="landing-header__image" autoplay muted loop playsinline preload="auto"
                       @if($heroVideo->cover) poster="{{ $heroVideo->cover }}" @endif aria-hidden="true">
                    @if($heroVideo->video_webm)
                        <source src="{{ $heroVideo->video_webm }}" type="video/webm">
                    @endif
                    @if($heroVideo->video_mp4)
                        <source src="{{ $heroVideo->video_mp4 }}" type="video/mp4">
                    @endif
                </video>
            @elseif($heroVideo)
                <img class="landing-header__image" src="{{ $heroVideo->cover }}" alt="">
            @else
                <img class="landing-header__image" src="{{ $heroSlide->image }}" alt="{{ $heroSlide->alt_text ?? '' }}">
            @endif

            @if($taglineHtml !== '' || ($heroSlide && (!empty($heroSlide->title) || !empty($heroSlide->subtitle))))
                <div class="landing-header__tagline">
                    <div class="container">
                        <h1>
                            @if($taglineHtml !== '')
                                {!! $taglineHtml !!}
                            @else
                                @if(!empty($heroSlide->title))<strong>{{ $heroSlide->title }}</strong>@endif
                                {{ $heroSlide->subtitle ?? '' }}
                            @endif
                        </h1>
                    </div>
                </div>
            @endif
        </div>
    @endif
</header>