@page "/about"
@rendermode InteractiveServer
@inject IJSRuntime JSRuntime

<div class="editorial-page-container py-5">
    <header class="editorial-header mb-5">
        <span class="text-uppercase font-monospace text-muted tracking-wider small d-block mb-1">Our Story & Vision</span>
        <h1 class="editorial-main-title fw-bold">For the Love of the Written Word</h1>
        <p class="text-muted small font-monospace mt-2">
            Midrand Books is an independent literary imprint and online bookstore operated by <strong>Lite Charms (Pty) Ltd</strong>.
        </p>
    </header>

    <div class="row g-5">
        <div class="col-lg-3 d-none d-lg-block">
            <div class="editorial-nav-index font-monospace text-uppercase small gap-3 d-flex flex-column">
                <button @onclick='() => ScrollToSection("about-bookshelf")' class="index-btn text-start">1. The Bookshelf</button>
                <button @onclick='() => ScrollToSection("about-publishing")' class="index-btn text-start">2. Independent Publishing</button>
                <button @onclick='() => ScrollToSection("about-community")' class="index-btn text-start">3. Our Community</button>
            </div>
        </div>

        <div class="col-lg-9">
            <article class="editorial-article-body">

                <section id="about-bookshelf" class="editorial-section mb-5">
                    <h3 class="section-title">1. A Curated Space for Readers</h3>
                    <p>
                        At Midrand Books, we believe that an online bookstore should feel just as warm, inspiring, and intentional as a physical corner shop. We aren’t interested in mass-market commercial algorithms; we are interested in books that leave a mark.
                    </p>
                    <p>
                        Operated proudly under Lite Charms (Pty) Ltd, our storefront is designed to showcase beautiful storytelling, critical histories, academic research, and deep technical disciplines. We source fine press editions and trusted literary brands, ensuring that every book we package and deliver across South Africa feels special from the moment it reaches your hands.
                    </p>
                </section>

                <section id="about-publishing" class="editorial-section mb-5">
                    <h3 class="section-title">2. Empowering New & Independent Voices</h3>
                    <p>
                        Beyond our role as a bookseller, our truest passion lies in cultivating the next chapter of South African literature. We know how daunting the modern publishing landscape can be for emerging storytellers, experts, and independent creators.
                    </p>
                    <p>
                        That is why we have integrated custom distribution channels into our platform to help self-publishers and local authors get their manuscripts beautifully styled, correctly indexed, and directly in front of avid readers. Side-by-side with heritage publishing houses, we champion the creative freedom of the indie writer.
                    </p>
                </section>

                <section id="about-community" class="editorial-section mb-5 protective-credo-callout">
                    <h3 class="section-title text-muted-serif">3. Our Creative Guarantee</h3>
                    <p>
                        Whether you are an established global author footprint looking for a seamless marketplace, a first-time writer ready to publish your debut book, or a reader hunting for your next great obsession, we welcome you. Midrand Books operates in full compliance with the South African Companies Act, ensuring that your data, transactions, and intellectual property are kept fully safe.
                    </p>
                </section>

            </article>
        </div>
    </div>
</div>

@code {
    private async Task ScrollToSection(string elementId)
    {
        await JSRuntime.InvokeVoidAsync("eval", $@"
            var el = document.getElementById('{elementId}');
            if (el) {{
                el.scrollIntoView({{ behavior: 'smooth', block: 'start' }});
            }}
        ");
    }
}