CatherineLynwood/CatherineLynwood/Views/Reckoning/IndexMobile.cshtml

@model CatherineLynwood.Models.TitlePageViewModel

@{
    ViewData["Title"] = "The Alpha Flame: Reckoning";
    bool showReviews = Model.Reviews.Items.Any();
}

<div class="reckoning-mobile-page">

    <header class="reckoning-mobile-hero">
        <div class="reckoning-mobile-hero-inner">
            <div class="reckoning-mobile-stamp">RESTRICTED</div>
            <div class="reckoning-mobile-kicker">WEST MIDLANDS POLICE</div>
            <h1>The Alpha Flame: Reckoning</h1>
            <p class="reckoning-mobile-ref">Case Ref: AFR-1983-06</p>
            <p class="reckoning-mobile-status">Status: Active Investigation</p>
        </div>
    </header>

    <section class="reckoning-mobile-props">
        <div class="reckoning-mobile-props-scroll">
            <div class="reckoning-mobile-polaroid polaroid-tilt-left">
                <responsive-image src="the-alpha-flame-reckoning-cover.png"
                                  class="img-polaroid"
                                  alt="The Alpha Flame: Reckoning book cover"
                                  display-width-percentage="50"></responsive-image>
            </div>


            <div class="reckoning-mobile-polaroid polaroid-tilt-right">
                <responsive-image src="sophie-jones-nightclub.png"
                                  class="img-polaroid"
                                  alt="Sophie Jones"
                                  display-width-percentage="50"></responsive-image>
            </div>

            <div class="reckoning-mobile-polaroid polaroid-tilt-slight">
                <responsive-image src="flyover-at-night.png"
                                  class="img-polaroid"
                                  alt="The Rubery flyover at night time"
                                  display-width-percentage="50"></responsive-image>
            </div>
        </div>
    </section>

    <nav class="reckoning-mobile-nav">
        <a href="#summary">Summary</a>
        <a href="#subjects">Subjects</a>
        <a href="#evidence">Evidence</a>
        <a href="#review">Review</a>
        <a href="#purchase">Buy</a>
        <a href="#restricted">Restricted</a>
    </nav>

    <main class="reckoning-mobile-file">

        <section id="summary" class="reckoning-mobile-section">
            <div class="reckoning-mobile-tab reckoning-tab-summary">Summary</div>
            <div class="reckoning-mobile-paper">
                @await Html.PartialAsync("_ReckoningSummary", Model)
            </div>
        </section>

        <section id="subjects" class="reckoning-mobile-section">
            <div class="reckoning-mobile-tab reckoning-tab-subjects">Subjects</div>
            <div class="reckoning-mobile-paper">
                @await Html.PartialAsync("_ReckoningSubjects", Model)
            </div>
        </section>

        <section id="evidence" class="reckoning-mobile-section">
            <div class="reckoning-mobile-tab reckoning-tab-evidence">Evidence</div>
            <div class="reckoning-mobile-paper">
                @await Html.PartialAsync("_ReckoningEvidence", Model)
            </div>
        </section>

        <section id="review" class="reckoning-mobile-section">
            <div class="reckoning-mobile-tab reckoning-tab-review">Review</div>
            <div class="reckoning-mobile-paper">
                @await Html.PartialAsync("_ReckoningReview", Model)
            </div>
        </section>

        <section id="purchase" class="reckoning-mobile-section">
            <div class="reckoning-mobile-tab reckoning-tab-purchase">Purchase</div>
            <div class="reckoning-mobile-paper">
                @await Html.PartialAsync("_ReckoningBuy", Model)
            </div>
        </section>

        <section id="restricted" class="reckoning-mobile-section">
            <div class="reckoning-mobile-tab reckoning-tab-restricted">Restricted</div>
            <div class="reckoning-mobile-paper">
                @await Html.PartialAsync("_ReckoningRestricted", Model)
            </div>
        </section>

    </main>
</div>

@section BackgroundVideo {
    <div></div>
}

@section CSS {
    <link href="~/css/reckoning-mobile.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Shadows+Into+Light&display=swap" rel="stylesheet">
}

@section Scripts {
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const trigger = document.querySelector(".casefile-audio-trigger");
            const audio = document.getElementById("evidenceTapeAudio");

            if (!trigger || !audio) return;

            trigger.addEventListener("click", function () {
                if (audio.paused) {
                    audio.play().then(function () {
                        trigger.classList.add("is-playing");
                    }).catch(function () {
                    });
                } else {
                    audio.pause();
                    trigger.classList.remove("is-playing");
                }
            });

            audio.addEventListener("pause", function () {
                if (!audio.ended) {
                    trigger.classList.remove("is-playing");
                }
            });

            audio.addEventListener("ended", function () {
                trigger.classList.remove("is-playing");
                audio.currentTime = 0;
            });
        });
    </script>
}