@model ConstructorAppUI.ViewModels.HomeCompanyInfoAndVideoViewModel

<section class="section novi-background bg-cover section-lg section-inset-3 bg-white parallax-scene-js" id="company-info-scene">
    <div class="container">
        <div class="row row-50 justify-content-md-between">
            <!-- Sol taraf: Başlık + video -->
            <div class="col-md-6">
                <h3 class="wow fadeInRight">Ödüllü<br>Mimarlık şirketiniz</h3>
                <h6 class="title-style-1 wow fadeInRight" data-wow-delay=".05s">En iyi çözümleri sunuyoruz</h6>
                <article class="video-classic wow blurIn">
                    <div class="video-classic-figure">
                        <img src="~/SeedData/CompanyinfoVideo_bg.png" alt="" width="533" height="362" />
                    </div>
                    <a class="video-classic-link" data-lightgallery="item" href="@Model.CompanyInfoVideo.VideoUrl">
                        <span class="icon mdi mdi-play"></span>
                    </a>
                </article>
            </div>

            <!-- Sağ taraf: Dinamik CompanyInfo kutucukları -->
            <div class="col-md-4 col-xl-3 inset-xl-top-70">
                <div class="row row-30 row-md-50 justify-content-center justify-content-md-start">
                    @if (Model.CompanyInfo != null && Model.CompanyInfo.Any())
                    {
                        double delay = 0;
                        foreach (var item in Model.CompanyInfo.OrderBy(x => x.CompanyInfoID))
                        {
                            <div class="col-6 col-sm-4 col-md-12 col-lg-11 wow fadeInRight" data-wow-delay="@($"{delay:0.##}s")">
                                <article class="counter-classic">
                                    <div class="counter-classic-header">
                                        <div class="heading-1 counter-classic-number"><span class="counter">@item.Value</span></div>
                                        <h6 class="counter-classic-title">@item.Title</h6>
                                    </div>
                                    <div class="counter-classic-text">@item.SubTitle</div>
                                </article>
                            </div>
                            delay += 0.05;
                        }
                    }

                    <!-- İsteğe bağlı sabit buton -->
                    <div class="col-xl-12 wow fadeInUp">
                        <a class="button button-jerry button-primary" href="#contacts">
                            İletişim
                            <span class="button-jerry-line"></span><span class="button-jerry-line"></span><span class="button-jerry-line"></span><span class="button-jerry-line"></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Parallax görsel -->
    <div class="layer-wrap layer-2">
        <div class="layer" data-depth="0.4">
            <img src="@Url.Content("~/SeedData/Companyinfo_bg.jpg")" alt="Company Info Background" width="853" height="574" />
        </div>
    </div>
</section>

<!-- Parallax.js script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var scene = document.getElementById('company-info-scene');
        var parallaxInstance = new Parallax(scene);
    });
</script>