@inherits LayoutComponentBase

<div class="water-background">

    <div class="blotch blotch-light-main"></div>
    <div class="blotch blotch-dark-main"></div>
    <div class="blotch blotch-accent-1"></div>
    <div class="blotch blotch-accent-2"></div>

    <div class="noise-overlay"></div>

    <div class="glass-panel">

        <header class="top-bar">
            <span class="brand-text">midrandbooks.co.za</span>

            <nav class="top-nav-icons">
                <button class="icon-btn" title="Ebooks" aria-label="Ebooks">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
                    </svg>
                </button>

                <button class="icon-btn" title="Audiobooks" aria-label="Audiobooks">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M3 18v-6a9 9 0 0 1 18 0v6" />
                        <path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" />
                    </svg>
                </button>

                <button class="icon-btn" title="Library" aria-label="Library">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="3" width="7" height="7" />
                        <rect x="14" y="3" width="7" height="7" />
                        <rect x="14" y="14" width="7" height="7" />
                        <rect x="3" y="14" width="7" height="7" />
                    </svg>
                </button>

                <button class="icon-btn" title="My Collection" aria-label="My Collection">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
                    </svg>
                </button>
            </nav>
        </header>

        <main class="content-area">
            @Body
        </main>

    </div>
</div>