@php
    $introSeminarSlug = 'Introductory-seminar';
    $seminarTargetUrl = url('/course/'.$introSeminarSlug);
    $coursesUrl = url('/classes');
    $seminarBgUrl = asset('assets/default/img/montessori-premium/seminar-hero-classroom.jpg');
    $seminarVideoRel = 'assets/default/img/montessori-premium/seminar-hero-classroom.mp4';
    $seminarVideoPath = public_path($seminarVideoRel);
    $seminarVideoUrl = is_file($seminarVideoPath) ? asset($seminarVideoRel) : null;
    $seminarWebinar = App\Models\Webinar::where('slug', $introSeminarSlug)->first();
    $seminarTitle = $seminarWebinar ? $seminarWebinar->title : trans('home.seminar_hero_default_title');
@endphp

<style>
    #home-seminar-hero-wrap {
        margin-bottom: 32px;
    }
    #home-seminar-hero-wrap .seminar-hero-link {
        display: block;
        text-decoration: none !important;
        color: inherit;
        cursor: pointer;
    }
    #home-seminar-hero-wrap .seminar-hero-link:focus-visible {
        outline: 3px solid rgba(201, 168, 76, 0.55);
        outline-offset: 4px;
        border-radius: 6px;
    }
    #home-seminar-hero-wrap .seminar-hero-visual {
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        min-height: 380px;
        padding: 120px 20px 90px;
        background-color: #0f1115;
        box-shadow: 0 16px 48px rgba(15, 30, 60, 0.15);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease;
    }
    #home-seminar-hero-wrap .seminar-hero-media {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
    }
    #home-seminar-hero-wrap .seminar-hero-bg,
    #home-seminar-hero-wrap .seminar-hero-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }
    #home-seminar-hero-wrap .seminar-hero-video {
        background: #0f1115;
    }
    @media (prefers-reduced-motion: no-preference) {
        #home-seminar-hero-wrap .seminar-hero-bg--kenburns {
            animation: seminarHeroKenBurns 32s ease-in-out infinite alternate;
            will-change: transform;
        }
    }
    @keyframes seminarHeroKenBurns {
        0% {
            transform: scale(1) translate(0, 0);
        }
        100% {
            transform: scale(1.1) translate(-1.2%, -0.8%);
        }
    }
    #home-seminar-hero-wrap .seminar-hero-media--has-video .seminar-hero-bg--behind-video {
        display: none;
    }
    @media (prefers-reduced-motion: reduce) {
        #home-seminar-hero-wrap .seminar-hero-media--has-video .seminar-hero-video {
            display: none !important;
        }
        #home-seminar-hero-wrap .seminar-hero-media--has-video .seminar-hero-bg--behind-video {
            display: block !important;
        }
        #home-seminar-hero-wrap .seminar-hero-bg--kenburns {
            animation: none !important;
        }
    }
    #home-seminar-hero-wrap .seminar-hero-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(125deg, rgba(15, 32, 68, 0.82) 0%, rgba(27, 61, 47, 0.55) 100%);
        pointer-events: none;
    }
    @media (min-width: 992px) {
        #home-seminar-hero-wrap .seminar-hero-visual {
            min-height: 420px;
            padding-top: 140px;
            padding-bottom: 100px;
        }
    }
    #home-seminar-hero-wrap .seminar-hero-link:hover .seminar-hero-visual {
        transform: translateY(-4px);
        box-shadow: 0 22px 56px rgba(31, 59, 100, 0.2);
    }
    #home-seminar-hero-wrap .seminar-hero-banner {
        position: absolute;
        top: 14%;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 2;
        background: linear-gradient(135deg, #c9a84c 0%, #a68a3e 100%);
        color: #fff;
        font-weight: 800;
        font-size: clamp(0.88rem, 2.8vw, 1.15rem);
        line-height: 1.45;
        padding: 14px 22px;
        border-radius: 10px;
        text-align: center;
        max-width: min(540px, 92%);
        box-shadow: 0 10px 36px rgba(0, 0, 0, 0.28);
    }
    #home-seminar-hero-wrap .seminar-hero-play-wrap {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: clamp(28px, 6vw, 48px);
    }
    #home-seminar-hero-wrap .seminar-hero-play {
        width: 132px;
        height: 132px;
        border-radius: 50%;
        background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.35s ease, box-shadow 0.35s ease;
        color: #0f172a;
    }
    @media (max-width: 767px) {
        #home-seminar-hero-wrap .seminar-hero-play {
            width: 96px;
            height: 96px;
        }
    }
    #home-seminar-hero-wrap .seminar-hero-link:hover .seminar-hero-play {
        transform: scale(1.06);
        box-shadow:
            0 0 56px rgba(255, 255, 255, 0.28),
            0 22px 50px rgba(201, 168, 76, 0.35);
    }
    #home-seminar-hero-wrap .seminar-hero-play svg {
        width: 42px;
        height: 42px;
        margin-inline-start: 6px;
    }
    @media (max-width: 767px) {
        #home-seminar-hero-wrap .seminar-hero-play svg {
            width: 32px;
            height: 32px;
        }
    }
    #home-seminar-hero-wrap .seminar-hero-caption {
        padding: 22px 12px 8px;
        text-align: center;
    }
    #home-seminar-hero-wrap .seminar-hero-caption h2 {
        font-size: clamp(1.1rem, 3vw, 1.55rem);
        font-weight: 800;
        color: #0f2044 !important;
        margin: 0;
        line-height: 1.45;
    }
    #home-seminar-hero-wrap .seminar-hero-tools {
        margin-top: 18px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
        align-items: center;
    }
    @media (prefers-reduced-motion: reduce) {
        #home-seminar-hero-wrap .seminar-hero-visual,
        #home-seminar-hero-wrap .seminar-hero-play {
            transition: none !important;
        }
        #home-seminar-hero-wrap .seminar-hero-link:hover .seminar-hero-visual {
            transform: none;
        }
        #home-seminar-hero-wrap .seminar-hero-link:hover .seminar-hero-play {
            transform: none;
        }
    }
</style>

<section id="home-seminar-hero-wrap" class="home-sections section-premium section-skin-cream py-30 py-lg-35 reveal-up">
    <div class="container">
        <a href="{{ $seminarTargetUrl }}" class="seminar-hero-link" aria-label="{{ trans('home.seminar_hero_aria') }}">
            <div class="seminar-hero-visual">
                <div class="seminar-hero-media @if($seminarVideoUrl)seminar-hero-media--has-video @endif">
                    {{-- Add seminar-hero-classroom.mp4 next to the .jpg in montessori-premium for a looping video background --}}
                    @if($seminarVideoUrl)
                        <video
                            class="seminar-hero-video"
                            autoplay
                            muted
                            loop
                            playsinline
                            preload="metadata"
                            poster="{{ $seminarBgUrl }}"
                            aria-hidden="true"
                        >
                            <source src="{{ $seminarVideoUrl }}" type="video/mp4">
                        </video>
                    @endif
                    <img
                        class="seminar-hero-bg seminar-hero-bg--kenburns{{ $seminarVideoUrl ? ' seminar-hero-bg--behind-video' : '' }}"
                        src="{{ $seminarBgUrl }}"
                        alt=""
                        width="1600"
                        height="900"
                        decoding="async"
                        fetchpriority="high"
                    >
                </div>
                <div class="seminar-hero-overlay" aria-hidden="true"></div>
                <div class="seminar-hero-banner">{{ trans('home.seminar_hero_banner') }}</div>
                <div class="seminar-hero-play-wrap">
                    <span class="seminar-hero-play" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
                    </span>
                </div>
            </div>
            <div class="seminar-hero-caption">
                <h2>{{ $seminarTitle }}</h2>
            </div>
        </a>
        <div class="seminar-hero-tools">
            <a href="{{ $coursesUrl }}" class="btn btn-outline-premium rounded-sm">{{ trans('home.courses_promo_btn') }}</a>
        </div>
    </div>
</section>