midrandbooks/MidrandBookshop/Components/Pages/Home.razor

@page "/"
@rendermode InteractiveServer
@inject NavigationManager Navigation

<div id="top-target" class="container text-center text-hero-wrapper">
    <h1 class="display-3 text-dark mb-3 px-2 master-headline">
        Discover thoughtfully curated<br>books for every reader.
    </h1>
    <p class="text-muted mx-auto mb-0 sub-headline">
        Explorations into books, reading culture, and the art of thoughtful curation from Midrand to the world.
    </p>
</div>

<div class="container mb-5 px-md-5">
    <div class="row align-items-center justify-content-between pb-3 g-3">

        <div class="col-12 col-md-8">
            <div class="d-flex flex-wrap gap-2 align-items-center justify-content-start">
                @foreach (var category in MainCategories)
                {
                    var catName = category;
                    <button class="btn btn-sm rounded-pill px-3 py-1-5 fw-medium transition-smooth
                        @(ActiveCategory == catName ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle bg-white")"
                            @onclick="() => SelectCategory(catName)">
                        @catName
                    </button>
                }

                <button class="btn btn-link text-muted btn-sm text-decoration-none fw-medium transition-smooth d-inline-flex align-items-center gap-1 p-1 ms-1"
                        @onclick="ToggleExtraCategories">
                    <span>@(ShowExpandedCategories ? "Show Less" : "See More")</span>
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
                         style="transform: @(ShowExpandedCategories ? "rotate(180deg)" : "rotate(0deg)"); transition: transform 0.2s ease;">
                        <polyline points="6 9 12 15 18 9"></polyline>
                    </svg>
                </button>
            </div>
        </div>

        <div class="col-12 col-md-4">
            <div class="d-flex align-items-center justify-content-start justify-content-md-end gap-2">

                <button class="btn btn-sm rounded-pill px-3 py-1-5 fw-medium transition-smooth border border-light-subtle bg-white text-dark d-inline-flex align-items-center gap-2"
                        style="height: 32px; font-size: 0.8rem;"
                        @onclick="ToggleFilterMenu">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
                    </svg>
                    <span>Filter & Sort</span>
                </button>

                <div class="d-flex align-items-center bg-light p-1 rounded-pill border border-light-subtle" style="height: 32px;">
                    <button class="btn btn-sm rounded-circle p-0 d-flex align-items-center justify-content-center transition-smooth
                        @(CurrentViewMode == ViewMode.Grid ? "bg-white text-dark shadow-sm" : "text-muted border-0 bg-transparent")"
                            style="width: 24px; height: 24px;"
                            @onclick="() => SetViewMode(ViewMode.Grid)">
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect width="7" height="7" x="3" y="3" rx="1" /><rect width="7" height="7" x="14" y="3" rx="1" /><rect width="7" height="7" x="14" y="14" rx="1" /><rect width="7" height="7" x="3" y="14" rx="1" /></svg>
                    </button>
                    <button class="btn btn-sm rounded-circle p-0 d-flex align-items-center justify-content-center transition-smooth
                        @(CurrentViewMode == ViewMode.List ? "bg-white text-dark shadow-sm" : "text-muted border-0 bg-transparent")"
                            style="width: 24px; height: 24px; margin-left: 2px;"
                            @onclick="() => SetViewMode(ViewMode.List)">
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" /></svg>
                    </button>
                </div>

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

    @if (ShowExpandedCategories)
    {
        <div class="d-flex flex-wrap gap-2 align-items-center justify-content-start pt-3 pb-2 border-top border-light-subtle mt-2 animate-fade-in">
            @foreach (var category in DynamicExtendedCategories)
            {
                var catName = category;
                <button class="btn btn-sm rounded-pill px-3 py-1-5 fw-medium transition-smooth
                    @(ActiveCategory == catName ? "btn-dark" : "btn-outline-secondary text-dark border-light-subtle bg-white")"
                        @onclick="() => SelectCategory(catName)">
                    @catName
                </button>
            }
        </div>
    }

    @if (ShowFilterMenu)
    {
        <div class="p-4 bg-light border border-light-subtle mt-3 animate-fade-in filter-dropdown-panel">
            <div class="row g-4">
                <div class="col-12 col-sm-4">
                    <p class="text-dark font-monospace small fw-bold mb-2 opacity-50 panel-section-heading">SORT ORDER</p>
                    <div class="d-flex flex-column gap-1">
                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "default" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("default")'>Curated Default</button>
                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "price-low" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("price-low")'>Price: Low to High</button>
                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "price-high" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("price-high")'>Price: High to Low</button>
                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(SelectedSortOption == "title-asc" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangeSort("title-asc")'>Title: A-Z</button>
                    </div>
                </div>
                <div class="col-12 col-sm-4">
                    <p class="text-dark font-monospace small fw-bold mb-2 opacity-50 panel-section-heading">PRICE RANGE</p>
                    <div class="d-flex flex-column gap-1">
                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "all" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("all")'>All Prices</button>
                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "under-500" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("under-500")'>Under R 500</button>
                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "500-1000" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("500-1000")'>R 500 – R 1,000</button>
                        <button type="button" class="btn btn-sm text-start py-1 px-2 rounded @(ActivePriceFilter == "over-1000" ? "fw-bold text-dark bg-white shadow-sm" : "text-muted bg-transparent border-0")" @onclick='() => ChangePriceFilter("over-1000")'>Over R 1,000</button>
                    </div>
                </div>
                <div class="col-12 col-sm-4">
                    <p class="text-dark font-monospace small fw-bold mb-2 opacity-50 panel-section-heading">RELEASE AVAILABILITY</p>
                    <div class="form-check form-switch pt-1 ms-1">
                        <input class="form-check-input style-track-switch" type="checkbox" id="newArrivalsToggle" checked="@OnlyShowNew" @onchange="ToggleNewArrivalsOnly" style="cursor: pointer;">
                        <label class="form-check-label small text-dark fw-medium ps-1" for="newArrivalsToggle" style="cursor: pointer;">Only New Acquisitions</label>
                    </div>
                    <button type="button" class="btn btn-sm btn-link text-danger text-decoration-none mt-3 p-0 font-monospace reset-link-btn" @onclick="ResetFilters">RESET ALL FILTERS</button>
                </div>
            </div>
        </div>
    }

    <div class="position-relative w-100 custom-milled-line">
        <div class="position-absolute start-50 translate-middle-x center-bloom-shadow"></div>
        <div class="position-absolute w-100 core-horizontal-rule"></div>
    </div>
</div>

<div class="container px-md-5 pb-5">

    @if (!PaginatedBooks.Any())
    {
        <div class="text-center text-muted py-5">
            <p class="mb-0 small style-track" style="letter-spacing: 1px;">NO PRODUCTS MATCH YOUR TARGET SELECTION SPECIFICATIONS</p>
        </div>
    }
    else if (CurrentViewMode == ViewMode.Grid)
    {
        <div class="row g-4 animate-fade-in">
            @foreach (var book in PaginatedBooks)
            {
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="card border-0 p-4 d-flex flex-column position-relative justify-content-between book-grid-card"
                         style="cursor: pointer;"
                         @onclick="() => NavigateToProduct(book.Id)">
                        <div class="d-flex justify-content-between align-items-center">
                            @if (book.IsNew)
                            {
                                <span class="badge rounded-pill px-3 py-2 badge-new-arrival">New</span>
                            }
                            else
                            {
                                <div></div>
                            }
                            <button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-0 shadow-sm border-0" style="width: 32px; height: 32px;">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1A1A1A" stroke-width="2.5"><line x1="7" y1="17" x2="17" y2="7" /><polyline points="7,7 17,7 17,17" /></svg>
                            </button>
                        </div>
                        <div class="d-flex justify-content-center align-items-center my-auto py-3">
                            <div class="book-spine-fallback bg-dark d-flex align-items-center justify-content-center text-center p-4 text-white-50">
                                @book.Category.ToUpper()<br><span class="opacity-50" style="font-size:0.55rem;">EDITION</span>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-start mt-3 px-2" style="cursor: pointer;" @onclick="() => NavigateToProduct(book.Id)">
                        <div>
                            <h3 class="text-dark m-0 lh-sm product-card-title">@book.Title</h3>
                            <p class="text-muted m-0 mt-1 small" style="font-size: 0.8rem;">by @book.Author</p>
                        </div>
                        <span class="text-muted fw-semibold" style="font-size: 0.95rem;">R @book.Price.ToString("N0")</span>
                    </div>
                </div>
            }
        </div>
    }
    else
    {
        <div class="d-flex flex-column border-top border-light-subtle animate-fade-in">
            @foreach (var book in PaginatedBooks)
            {
                <div class="d-flex align-items-center justify-content-between py-3 px-2 list-row-item"
                     style="cursor: pointer;"
                     @onclick="() => NavigateToProduct(book.Id)">
                    <div class="d-flex align-items-center gap-4 structural-list-left">
                        <span class="text-dark fw-medium list-item-title">@book.Title</span>
                        <span class="text-muted small list-item-author">by @book.Author</span>
                        <span class="badge bg-light text-secondary border rounded-pill px-2.5 py-1 font-monospace list-item-tag">@book.Category.ToUpper()</span>
                    </div>
                    <div class="d-flex align-items-center gap-4">
                        @if (book.IsNew)
                        {
                            <span class="badge rounded-pill bg-danger-subtle text-danger px-2.5 py-1 list-new-badge">NEW</span>
                        }
                        <span class="text-dark font-monospace fw-medium list-item-price">R @book.Price.ToString("N0")</span>
                        <button class="btn btn-link text-dark p-1">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="7" y1="17" x2="17" y2="7" /><polyline points="7,7 17,7 17,17" /></svg>
                        </button>
                    </div>
                </div>
            }
        </div>
    }

    @if (HasMoreItems)
    {
        <div class="d-flex flex-column align-items-center justify-content-center mt-5 pt-4">
            <button class="btn btn-outline-dark rounded-pill px-5 py-2.5 fw-medium shadow-sm" style="font-size: 0.85rem;" @onclick="LoadNextPage">
                <span>Show More Artifacts</span>
            </button>
        </div>
    }
</div>

<a class="back-to-top-btn d-flex align-items-center justify-content-center"
   aria-label="Back to top"
   href="#top-target"
   onclick="window.scrollTo({ top: 0, behavior: 'smooth' });">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
        <line x1="12" y1="19" x2="12" y2="5"></line>
        <polyline points="5 12 12 5 19 12"></polyline>
    </svg>
</a>