@page "/explore-the-region"
@using TIAMSharedUI.Pages.Components
@using TIAMSharedUI.Shared
@using TIAMWebApp.Shared.Application.Models
@using TIAMWebApp.Shared.Application.Models.ClientSide.UI
@using TIAMWebApp.Shared.Application.Services
@inject BlogService BlogService

<HeroSlider SliderItems="@sliders" PBottom="50px" Height="30vh"></HeroSlider>

<div class="container pb-5">
    <h1 class="mb-4">Blog Posts</h1>
    <p class="lead">
        Discover the hidden gems and breathtaking landscapes of Hungary! Our blog features inspiring destinations, scenic routes, and must-see spots that invite you to explore the natural beauty of this enchanting country. Whether you're planning your next adventure or simply dreaming of a getaway, let these stories guide your journey.
    </p>

    @if (posts == null)
    {
        <p>Loading blog posts...</p>
    }
    else if (posts.Count == 0)
    {
        <p>No blog posts found.</p>
    }
    else
    {
        @* <section class="game-section" style="max-width: 100%; overflow-x:hidden"> *@
        <div class="row">
            @foreach (var post in posts)
            {
                <div class="col-md-4 mb-4">
                    <div class="card rounded h-100 shadow">
                        @if (!string.IsNullOrEmpty(post.CoverImage))
                        {
                            <img src="@post.CoverImage" class="card-img-top" alt="@post.Title">
                        }
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title">@post.Title</h5>
                            @if (!string.IsNullOrEmpty(post.Lead))
                            {

                                <p class="card-title">@post.Lead</p>
                            }
                            @if (post.Tags?.Count > 0)
                            {
                                <p class="card-text text-muted small">
                                    @string.Join(", ", post.Tags)
                                </p>
                            }
                            <a href="@($"/blogpost/{post.Id}")" class="btn btn-primary mt-auto">Read More</a>
                        </div>
                    </div>
                </div>
                @* <a href="@($"/blogpost/{post.Id}")">
                    <div class="item" style="background-image: url(@post.CoverImage);">
                        <div class="item-desc" style="height: 100%; background-color: rgba(0,0,0,0.3);">
                            <h3 class="card-title" style="margin-top: 80px;">@post.Title</h3>
                            <p>@post.Tags</p>
                            <p>@post.Lead</p>
                            <p>@post.Id</p>
                            <div class="glass" style="position: absolute; top:0px; left:0px; padding:10px; width:100%">
                                <span>by</span>
                                <svg width="30%" viewBox="0 0 112 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="Logó"><path d="M99.636,13.719c-0.569,1.804 -1.048,3.323 -1.542,4.889l3.215,0c-0.549,-1.606 -1.062,-3.104 -1.673,-4.889m11.754,11.595c-2.575,0 -4.95,0.027 -7.323,-0.036c-0.267,-0.007 -0.637,-0.476 -0.76,-0.805c-0.592,-1.582 -0.567,-1.591 -2.263,-1.592c-1.452,0 -2.903,0 -4.316,0c-0.913,2.437 -0.913,2.437 -3.473,2.437l-3.674,0c2.395,-6.454 4.723,-12.727 7.07,-19.049c2.38,0 4.725,-0.037 7.065,0.044c0.312,0.01 0.736,0.565 0.884,0.953c2.099,5.504 4.159,11.022 6.228,16.537c0.16,0.426 0.318,0.854 0.562,1.511" style="fill:#fff;fill-opacity:0.8;fill-rule:nonzero;"></path><path d="M89.146,6.271c-2.087,2.974 -4.038,5.753 -6.039,8.604c1.968,3.411 3.942,6.833 6.02,10.434c-2.908,0 -5.596,0.014 -8.284,-0.025c-0.228,-0.003 -0.526,-0.317 -0.663,-0.559c-0.559,-0.986 -1.068,-2.001 -1.698,-3.202c-0.649,1.062 -1.269,1.982 -1.786,2.957c-0.348,0.658 -0.797,0.87 -1.523,0.853c-1.934,-0.045 -3.869,-0.015 -6.019,-0.015c1.733,-2.622 3.245,-5.103 4.963,-7.431c0.923,-1.251 0.94,-2.138 0.063,-3.432c-1.751,-2.579 -3.285,-5.306 -4.969,-8.072c0.297,-0.045 0.516,-0.107 0.735,-0.108c2.344,-0.007 4.689,0.018 7.032,-0.019c0.622,-0.009 0.972,0.195 1.247,0.741c0.475,0.94 1.019,1.846 1.607,2.898c0.707,-1.095 1.311,-2.088 1.982,-3.033c0.192,-0.269 0.577,-0.558 0.879,-0.565c2.058,-0.05 4.117,-0.026 6.453,-0.026" style="fill:#fff;fill-opacity:0.8;fill-rule:nonzero;"></path><path d="M59.654,6.335l0,5.691l-5.73,0l0,13.193l-7.515,0l0,-13.147l-5.731,0l0,-5.737l18.976,0Z" style="fill:#fff;fill-opacity:0.8;fill-rule:nonzero;"></path><rect x="61.187" y="6.342" width="6.698" height="18.911" style="fill:#fff;fill-opacity:0.8;"></rect><path d="M28.354,21.366c0.306,4.69 -5.098,5.2 -6.831,2.855c-2.169,-2.934 -5.05,-2.797 -6.619,-1.438c-1.569,-1.359 -4.449,-1.496 -6.618,1.438c-1.733,2.345 -7.137,1.835 -6.831,-2.855c0,0 -2.763,4.258 0.611,8.055c3.263,3.671 8.689,3.784 12.032,0.918c0.305,-0.262 0.568,-0.53 0.806,-0.802c0.238,0.272 0.501,0.54 0.807,0.802c3.343,2.866 8.768,2.753 12.031,-0.918c3.375,3.796 0.612,-8.055 0.612,-8.055Z" style="fill:#fff;fill-opacity:0.8;fill-rule:nonzero;"></path><path d="M28.354,11.37c0.306,-4.69 -5.098,-5.2 -6.831,-2.855c-2.169,2.934 -5.05,2.797 -6.619,1.438c-1.569,1.359 -4.449,1.496 -6.618,-1.438c-1.733,-2.345 -7.137,-1.835 -6.831,2.855c0,0 -2.763,-4.258 0.611,-8.055c3.263,-3.671 8.689,-3.784 12.032,-0.918c0.305,0.262 0.568,0.53 0.806,0.802c0.238,-0.272 0.501,-0.54 0.807,-0.802c3.343,-2.866 8.768,-2.753 12.031,0.918c3.375,3.796 0.612,8.055 0.612,8.055Z" style="fill:#fff;fill-opacity:0.8;fill-rule:nonzero;"></path><circle cx="12.241" cy="16.368" r="1.332" style="fill:#fff;fill-opacity:0.8;"></circle><circle cx="16.902" cy="16.368" r="1.332" style="fill:#fff;fill-opacity:0.8;"></circle></g></svg>
                            </div>
                        </div>
                    </div>
                </a> *@
            }
            @* </section> *@
        </div>
    }
</div>

<CallToActionComponent></CallToActionComponent>

@code {
    private List<BlogPostMetadata>? posts;

    protected override async Task OnInitializedAsync()
    {
        posts = await BlogService.GetAllPostsAsync();
    }

    public List<HeroSliderItem> sliders = new()
    {
        new HeroSliderItem
        {
            Title = "Experience Hungary on Your Terms",
            Subtitle = "Discover the freedom of personalized travel with expert private transfers and curated inspiration.",
            ImageUrl = "https://images.unsplash.com/photo-1551867633-194f125bddfa?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
            ButtonText = "Explore Our Programs",
            ButtonUrl= "/signature-ride-packages"
        },
        new HeroSliderItem
        {
            Title = "Experience Hungary on Your Terms",
            Subtitle = "Discover the freedom of personalized travel with expert private transfers and curated inspiration.",
            ImageUrl = "https://images.unsplash.com/photo-1549877452-9c387954fbc2?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
            ButtonText = "Book now",
            ButtonUrl= "/transfer"
        },
        new HeroSliderItem
        {
            Title = "Experience Hungary on Your Terms",
            Subtitle = "",
            ImageUrl = "https://images.unsplash.com/photo-1507622560124-621e26755fb8?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
            ButtonText = "",
            ButtonUrl= ""
        }
    };
}