@{
    ViewData["Title"] = "Home";
}

@if (ViewBag.Sections != null && ViewBag.Sections.Count > 0)
{
    @foreach (var sect in ViewBag.Sections)
    {
        @if (sect.SectionType == "hero")
        {
            <!-- Hero Section -->
            <section class="hero">
                <div class="hero-content">
                    <h2>@sect.Title</h2>
                    @if (!string.IsNullOrEmpty(sect.Subtitle))
                    {
                        <p>@sect.Subtitle</p>
                    }
                    @if (!string.IsNullOrEmpty(sect.Content))
                    {
                        <div class="hero-description">
                            @Html.Raw(sect.Content)
                        </div>
                    }
                    @if (!string.IsNullOrEmpty(sect.ButtonText) && !string.IsNullOrEmpty(sect.ButtonUrl))
                    {
                        <a href="@sect.ButtonUrl" class="btn btn-primary">@sect.ButtonText</a>
                    }
                </div>
                @if (!string.IsNullOrEmpty(sect.ImageUrl))
                {
                    <div class="hero-image">
                        <img src="@sect.ImageUrl" alt="@sect.Title" loading="lazy" />
                    </div>
                }
            </section>
        }
        else if (sect.SectionType == "inspiration")
        {
            <!-- Inspiration Section -->
            <section class="inspiration">
                <div class="container">
                    <h2>@sect.Title</h2>
                    <div class="inspiration-content">
                        <div class="inspiration-text">
                            @Html.Raw(sect.Content)
                        </div>
                        @if (!string.IsNullOrEmpty(sect.ImageUrl))
                        {
                            <div class="inspiration-image">
                                <img src="@sect.ImageUrl" alt="@sect.Title" loading="lazy" />
                            </div>
                        }
                    </div>
                    @if (!string.IsNullOrEmpty(sect.ButtonText) && !string.IsNullOrEmpty(sect.ButtonUrl))
                    {
                        <a href="@sect.ButtonUrl" class="btn btn-secondary">@sect.ButtonText</a>
                    }
                </div>
            </section>
        }
        else if (sect.SectionType == "promotion")
        {
            <!-- Promotion Section -->
            <section class="promotion" id="promotion">
                <div class="container">
                    @Html.Raw(sect.Content)
                </div>
            </section>
        }
        else if (sect.SectionType == "collection")
        {
            <!-- Collection Section -->
            <section class="collection">
                <div class="container">
                    <h2>@sect.Title</h2>
                    @if (!string.IsNullOrEmpty(sect.Subtitle))
                    {
                        <p class="section-subtitle">@sect.Subtitle</p>
                    }
                    @Html.Raw(sect.Content)
                    @if (!string.IsNullOrEmpty(sect.ButtonText) && !string.IsNullOrEmpty(sect.ButtonUrl))
                    {
                        <a href="@sect.ButtonUrl" class="btn btn-secondary">@sect.ButtonText</a>
                    }
                </div>
            </section>
        }
        else if (sect.SectionType == "custom")
        {
            <!-- Custom Section -->
            <section class="custom-section">
                <div class="container">
                    @if (!string.IsNullOrEmpty(sect.Title))
                    {
                        <h2>@sect.Title</h2>
                    }
                    @if (!string.IsNullOrEmpty(sect.Subtitle))
                    {
                        <p class="section-subtitle">@sect.Subtitle</p>
                    }
                    @Html.Raw(sect.Content)
                    @if (!string.IsNullOrEmpty(sect.ImageUrl))
                    {
                        <img src="@sect.ImageUrl" alt="@sect.Title" class="img-fluid my-3" loading="lazy" />
                    }
                    @if (!string.IsNullOrEmpty(sect.ButtonText) && !string.IsNullOrEmpty(sect.ButtonUrl))
                    {
                        <a href="@sect.ButtonUrl" class="btn btn-primary mt-3">@sect.ButtonText</a>
                    }
                </div>
            </section>
        }
    }
}
else
{
    <!-- Default Hero Section (Fallback) -->
    <section class="hero">
        <div class="hero-content">
            <h2>Scrapbooking and Journaling Fun</h2>
            <p>Explore the world of creativity and self-expression.</p>
            <a href="/Shop" class="btn btn-primary">Shop Now</a>
        </div>
        <div class="hero-image">
            <img src="~/assets/images/hero-craft.jpg" alt="Scrapbooking and crafts" loading="lazy" />
        </div>
    </section>
}

<!-- Top Sellers Section -->
<section class="top-sellers" id="top-sellers">
    <div class="container">
        <h2>Top Sellers</h2>
        <div class="products-grid">
            @if (ViewBag.TopProducts != null && ViewBag.TopProducts.Count > 0)
            {
                @foreach (var product in ViewBag.TopProducts)
                {
                    <div class="product-card">
                        <a href="/shop/product/@product.Id" class="product-link">
                            <div class="product-image">
                                @{
                                    var imgSrc = !string.IsNullOrEmpty(product.ImageUrl) 
                                        ? product.ImageUrl 
                                        : (product.Images != null && product.Images.Count > 0 
                                            ? product.Images[0] 
                                            : "~/assets/images/products/placeholder.jpg");
                                }
                                <img src="@imgSrc" alt="@product.Name" loading="lazy" />
                            </div>
                            <h3>@product.Name</h3>
                            <p class="price">$@product.Price.ToString("F2")</p>
                        </a>
                        <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
                            <button class="btn btn-small btn-icon"
                                onclick="addToWishlist('@product.Id', '@product.Name', @product.Price, '@(product.Images != null && product.Images.Count > 0 ? product.Images[0] : product.ImageUrl ?? "/assets/images/placeholder.jpg")')"
                                aria-label="Add to wishlist">
                                <i class="bi bi-heart"></i>
                            </button>
                            <button class="btn btn-small btn-icon"
                                onclick="addToCart('@product.Id', '@product.Name', @product.Price, '@(product.Images != null && product.Images.Count > 0 ? product.Images[0] : product.ImageUrl ?? "/assets/images/placeholder.jpg")')"
                                aria-label="Add to cart">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                                    <path
                                        d="M7 4h-2l-1 2h-2v2h2l3.6 7.59-1.35 2.44c-.16.28-.25.61-.25.97 0 1.1.9 2 2 2h12v-2h-11.1c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.42c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1h-14.31l-.94-2zm3 17c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm8 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
                                </svg>
                            </button>
                        </div>
                    </div>
                }
            }
            else
            {
                <div class="product-card">
                    <div class="product-image">
                        <img src="~/assets/images/products/product-1.jpg" alt="Product 1" loading="lazy" />
                    </div>
                    <h3>Washi Tape Set</h3>
                    <p class="price">$15.99</p>
                    <button class="btn btn-small">Add to Cart</button>
                </div>
                <div class="product-card">
                    <div class="product-image">
                        <img src="~/assets/images/products/product-2.jpg" alt="Product 2" loading="lazy" />
                    </div>
                    <h3>Sticker Pack</h3>
                    <p class="price">$8.99</p>
                    <button class="btn btn-small">Add to Cart</button>
                </div>
                <div class="product-card">
                    <div class="product-image">
                        <img src="~/assets/images/products/product-3.jpg" alt="Product 3" loading="lazy" />
                    </div>
                    <h3>Journal Bundle</h3>
                    <p class="price">$24.99</p>
                    <button class="btn btn-small">Add to Cart</button>
                </div>
                <div class="product-card">
                    <div class="product-image">
                        <img src="~/assets/images/products/product-4.jpg" alt="Product 4" loading="lazy" />
                    </div>
                    <h3>Craft Kit</h3>
                    <p class="price">$32.99</p>
                    <button class="btn btn-small">Add to Cart</button>
                </div>
            }
        </div>
    </div>
</section>

@section Scripts {
    <script>
        // Cart functionality now loaded from cart.js
    </script>
}