@model List<SkyArtShop.Models.PortfolioCategory>
@{
    ViewData["Title"] = "Portfolio";
}

<section class="portfolio-hero">
    <div class="container">
        <h1>Sky Art Shop Projects</h1>
        <p class="hero-subtitle">Welcome to our portfolio. Here you'll find a selection of our work. Explore our projects to learn more about what we do.</p>
    </div>
</section>

<section class="portfolio-gallery">
    <div class="container">
        <div class="portfolio-grid">
            @foreach (var category in Model)
            {
                <div class="portfolio-category">
                    <a href="/portfolio/category/@category.Slug" class="category-link">
                        <div class="category-image">
                            <img src="@(string.IsNullOrEmpty(category.FeaturedImage) ? "/assets/images/portfolio/default.jpg" : category.FeaturedImage)" alt="@category.Name" />
                            <div class="category-overlay">
                                <h2>@category.Name</h2>
                                @if (!string.IsNullOrEmpty(category.Description))
                                {
                                    <p>@category.Description</p>
                                }
                            </div>
                        </div>
                    </a>
                </div>
            }
        </div>
    </div>
</section>