@model SkyArtShop.Models.Page
@{
    ViewData["Title"] = Model?.Title ?? "About";
}

<!-- About Hero Section -->
<section class="about-hero">
    <div class="container">
        <h1>@(Model?.Title ?? "About Sky Art Shop")</h1>
        @if (!string.IsNullOrEmpty(Model?.Subtitle))
        {
            <p class="hero-subtitle">@Model.Subtitle</p>
        }
    </div>
</section>

<!-- About Content Section -->
<section class="about-content">
    <div class="container">
        <div class="about-layout">
            <div class="about-main-content">
                @if (!string.IsNullOrEmpty(Model?.Content))
                {
                    <div class="content-wrapper">
                        @Html.Raw(Model.Content)
                    </div>
                }
                else
                {
                    <div class="about-text">
                        <h2>Our Story</h2>
                        <p>
                            Sky Art Shop specializes in scrapbooking, journaling, cardmaking,
                            and collaging stationery. We are passionate about helping people
                            express their creativity and preserve their memories.
                        </p>
                        <p>
                            Our mission is to promote mental health and wellness through
                            creative art activities. We believe that crafting is more than
                            just a hobby—it's a therapeutic journey that brings joy,
                            mindfulness, and self-expression.
                        </p>

                        <h2>What We Offer</h2>
                        <p>Our carefully curated collection includes:</p>
                        <ul>
                            <li>Washi tape in various designs and patterns</li>
                            <li>Unique stickers for journaling and scrapbooking</li>
                            <li>High-quality journals and notebooks</li>
                            <li>Card making supplies and kits</li>
                            <li>Scrapbooking materials and embellishments</li>
                            <li>Collage papers and ephemera</li>
                        </ul>
                    </div>
                }
            </div>

            @if (Model?.ImageGallery != null && Model.ImageGallery.Any())
            {
                <div class="about-sidebar">
                    <div class="sidebar-images">
                        @foreach (var image in Model.ImageGallery)
                        {
                            <div class="sidebar-image-item">
                                <img src="@image" alt="Gallery image" />
                            </div>
                        }
                    </div>
                </div>
            }
        </div>
    </div>
</section>

@if (Model?.TeamMembers != null && Model.TeamMembers.Any())
{
    <!-- Team Section -->
    <section class="team-section">
        <div class="container">
            <div class="section-header text-center mb-5">
                <h2>Meet Our Team</h2>
                <p class="lead">The creative minds behind Sky Art Shop</p>
            </div>
            <div class="team-grid">
                @foreach (var member in Model.TeamMembers)
                {
                    <div class="team-member-card">
                        <div class="team-member-info">
                            <h3 class="member-name">@member.Name</h3>
                            @if (!string.IsNullOrEmpty(member.Role))
                            {
                                <p class="member-role">@member.Role</p>
                            }
                            @if (!string.IsNullOrEmpty(member.Bio))
                            {
                                <p class="member-bio">@member.Bio</p>
                            }
                        </div>
                        <div class="team-member-photo">
                            <img src="@(!string.IsNullOrEmpty(member.PhotoUrl) ? member.PhotoUrl : "/assets/images/placeholder.jpg")" 
                                 alt="@member.Name" />
                        </div>
                    </div>
                }
            </div>
        </div>
    </section>
}