{% extends 'main_base.html.twig' %}
{% block styles %}{% endblock %}
{% block content %}
    <section id="homeSlider">
        <div class="container-main">
            <div class="swiper" id="homeSwiper">
                <div class="swiper-wrapper">
                    {% set homeSwiperContent = [
                        {
                            'title': '<p><b>Crowdtolive</b><br> YATIRIM TURUNA ÇIKTI</p>',
                            'text': '<p>Crowdtolive is raising on Seedrs <br> Own your home without incurring debt, whilst investors can get the benefits of property investment.</p>',
                            'imageUrl': asset('assets/main/img/banner.jpg')
                        },
                        {
                            'title': '<p><b>Crowdtolive</b><br> YATIRIM TURUNA ÇIKTI</p>',
                            'text': '<p>Crowdtolive is raising on Seedrs <br> Own your home without incurring debt, whilst investors can get the benefits of property investment.</p>',
                            'imageUrl': asset('assets/main/img/banner-2.jpg')
                        },
                        {
                            'title': '<p><b>Crowdtolive</b><br> YATIRIM TURUNA ÇIKTI</p>',
                            'text': '<p>Crowdtolive is raising on Seedrs <br> Own your home without incurring debt, whilst investors can get the benefits of property investment.</p>',
                            'imageUrl': asset('assets/main/img/banner.jpg')
                        },
                        {
                            'title': '<p><b>Crowdtolive</b><br> YATIRIM TURUNA ÇIKTI</p>',
                            'text': '<p>Crowdtolive is raising on Seedrs <br> Own your home without incurring debt, whilst investors can get the benefits of property investment.</p>',
                            'imageUrl': asset('assets/main/img/banner-2.jpg')
                        }
                    ] %}
                    {% for content in homeSwiperContent %}
                        <div class="swiper-slide">
                            <div class="slide-img-cover">
                                <img src="{{ content.imageUrl }}" alt="Banner" class="slide-img img-fluid fit-cover">
                            </div>
                            <div class="slide-context">
                                <h2 class="fw-normal fs-xl-2 fs-lg-3 fs-md-4 fs-sm-5 fs-6 text-reset">{{ content.title|striptags('<b><br>')|raw }}</h2>
                                <p class="d-none d-lg-block my-xl-10 fs-xl-3">{{ content.text|striptags('<br>')|raw }}</p>
                                <a href="" class="btn btn-white btn-text-dark rounded-pill">Detaylı İncele</a>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                <div class="home-swiper-pagination"></div>
                <div id="homeSwiperPlay">
                    <div class="ripple">
                        <span></span>
                        <span></span>
                    </div>
                    <img src="{{ asset('assets/main/img/play.png') }}" width="40" height="40" alt="Play">
                </div>
            </div>
            <div class="scroll-down d-none d-xl-flex">
                <div class="scroll-down-item"></div>
                <div class="scroll-down-item"></div>
                <div class="scroll-down-item"></div>
                <div class="scroll-down-item"></div>
                <div class="scroll-down-item">
                    <img src="{{ asset('assets/main/img/icons/mouse.svg') }}" width="21" height="34" alt="Mouse">
                    <span class="mt-3">AŞAĞI KAYDIR</span>
                </div>
                <div class="scroll-down-item"></div>
                <div class="scroll-down-item"></div>
                <div class="scroll-down-item"></div>
                <div class="scroll-down-item"></div>
            </div>
        </div>
    </section>
    <section class="h-175px d-flex align-items-center" id="istatistikler">
        <div class="container-main container-fluid">
            <div class="swiper" id="istatistikSwiper">
                <div class="swiper-wrapper">
                    {% set istatistikContent = [
                        {
                            'baslik': 'Toplam Yatırım',
                            'altBaslik': 'Alt Yapı Yatırılmış Sermaye Bedeli',
                            'icon': asset('assets/main/img/icons/yatirim-1.svg'),
                            'sayi': '15',
                            'prefix': '₺',
                            'label': 'Milyon'
                        },
                        {
                            'baslik': 'Partner Sayısı',
                            'altBaslik': 'Bize katılan yatırımcı partnerlerimiz',
                            'icon': asset('assets/main/img/icons/yatirim-2.svg'),
                            'sayi': '45',
                            'prefix': '+',
                            'label': 'Kişi'
                        },
                        {
                            'baslik': 'Girişim Başvuruları',
                            'altBaslik': 'Sistemimize başvuran girişimci sayısı',
                            'icon': asset('assets/main/img/icons/yatirim-3.svg'),
                            'sayi': '120',
                            'prefix': '+',
                            'label': 'Kişi'
                        },
                        {
                            'baslik': 'Toplam Fonlama Talebi',
                            'altBaslik': 'Sistemimize başvuran girişimci sayısı',
                            'icon': asset('assets/main/img/icons/yatirim-4.svg'),
                            'sayi': '400',
                            'prefix': '₺',
                            'label': 'Milyon'
                        }
                    ] %}
                    {% for istatistik in istatistikContent %}
                        <div class="swiper-slide">
                            <div class="d-flex align-items-center animate__animated" data-animate="animate__fadeIn">
                                <img src="{{ istatistik.icon }}" width="60" height="60" alt="{{ istatistik.baslik }}">
                                <div class="ps-3">
                                    <strong>{{ istatistik.baslik }}</strong>
                                    <p class="mb-2">{{ istatistik.altBaslik }}</p>
                                    <div class="text-main">
                                        <span class="fs-2" data-kt-countup="true" data-kt-countup-value="{{ istatistik.sayi }}" data-kt-countup-prefix="{{ istatistik.prefix }}"></span>
                                        <span class="fs-2">{{ istatistik.label }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </section>
    <section class="py-20" id="fonlananProjeler">
        <div class="container-main container-fluid">
            <div class="d-flex justify-content-between align-items-center mb-lg-15 mb-md-10 mb-5">
                <h2 class="mb-0">Fonlanmaya Açık Projeler</h2>
                <a href="{{ path('app_main_yatirim') }}" class="btn btn-success btn-active-dark rounded-pill">Açık Projelere Gözat</a>
            </div>
            <div class="swiper">
                <div class="swiper-wrapper">
                    {% for i in 1..3 %}
                        <div class="swiper-slide h-auto">
                            <div class="card shadow-sm animate__animated animate__delay-{{ loop.index-1 }}s" data-animate="animate__fadeIn">
                                <div class="card-header border-0 px-0">
                                    <img class="w-100" src="{{ asset('assets/main/img/plus-vc.png') }}" alt="">
                                </div>
                                <div class="card-body py-xxl-5 py-xl-3">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <h3 class="card-title mb-0">Plus.vc</h3>
                                        <a href="" class="btn btn-icon btn-secondary rounded-circle fs-xxl-8">
                                            <img src="{{ asset('assets/main/img/icons/growth.svg') }}" alt="">
                                        </a>
                                    </div>
                                    <p>Accent, Moskova ve Rusya Federasyonu’nun diğer büyük şehirlerindeki ticari gayrimenkul yatırımlarına odaklanmaktadır.</p>
                                    <div class="d-flex align-items-center flex-column">
                                        <div class="w-100 d-flex justify-content-between">
                                            <span class="fw-bold fs-7">HEDEFLENEN</span>
                                            <span class="fw-bolder fs-7">14.500.000₺</span>
                                        </div>
                                        <div class="w-100 bg-light my-1">
                                            <div class="bg-success rounded h-5px" role="progressbar" style="width: 50%;"
                                                 aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                        <div class=" w-100 d-flex justify-content-between">
                                            <span class="fw-bold fs-7">BİRİKEN</span>
                                            <span class="fw-bolder fs-7">2.500.000₺</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer d-flex justify-content-between py-3 bg-dark">
                                    <div class="d-flex align-items-center">
                                        <img src="{{ asset('assets/main/img/icons/time-out.svg') }}" alt="">
                                        <span class="d-flex flex-column ps-3 lh-1 fs-xl-3">
                                        <b class="text-main">20</b>
                                        <small class="fs-xl-7 text-white">GÜN</small>
                                    </span>
                                    </div>
                                    <div class="d-flex align-items-center">
                                    <span class="d-flex flex-column pe-3 lh-1 fs-xl-3 text-end">
                                        <b class="text-main">79</b>
                                        <small class="fs-xl-7 text-white">KİŞİ</small>
                                    </span>
                                        <img src="{{ asset('assets/main/img/icons/search-person.svg') }}" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                    <div class="swiper-slide h-auto">
                        <div class="card shadow-sm h-100 bg-success animate__animated animate__delay-3s" data-animate="animate__fadeInRight">
                            <div class="card-body d-flex flex-column">
                                <h5 class="mt-auto text-uppercase text-white fs-3">Projenize yatırımcı mı arıyorsunuz?</h5>
                                <h3 class="mt-3 mb-auto display-6">Fonuniq'e Startup Olarak Hemen Başvur!</h3>
                                <a href="" class="btn btn-white btn-active-dark rounded-pill d-flex align-items-center">
                                    <span class="mx-auto">Hesap Oluştur</span>
                                    <img src="{{ asset('assets/main/img/icons/check.svg') }}" alt="">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="py-20" id="fonlanacakProjeler">
        <div class="container-main container-fluid">
            <div class="d-flex justify-content-between align-items-center mb-lg-15 mb-md-10 mb-5">
                <h2 class="mb-0">Fonlanmaya Açılacak Projeler</h2>
                <a href="{{ path('app_main_yatirim') }}" class="btn btn-success btn-active-dark rounded-pill">Tüm
                    Projelere Gözat</a>
            </div>
            <div class="swiper">
                <div class="swiper-wrapper">
                    {% for i in 1..3 %}
                        <div class="swiper-slide h-auto">
                            <div class="card shadow-sm h-100 animate__animated animate__delay-{{ loop.index-1 }}s" data-animate="animate__fadeIn">
                                <div class="card-header border-0 px-0">
                                    <img class="w-100" src="{{ asset('assets/main/img/plus-vc.png') }}" alt="">
                                </div>
                                <div class="card-body py-xxl-5">
                                    <h3 class="card-title">Plus.vc</h3>
                                    <p class="mb-0">Accent, Moskova ve Rusya Federasyonu’nun diğer büyük
                                        şehirlerindeki ticari gayrimenkul yatırımlarına
                                        odaklanmaktadır.</p>
                                </div>
                                <div class="card-footer py-3 d-flex justify-content-between align-items-center bg-success">
                                    <p class="mb-0 text-white">Sistem Onayı Bekliyor!</p>
                                    <img src="{{ asset('assets/main/img/icons/time-out.svg') }}" alt="">
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                    <div class="swiper-slide h-auto">
                        <div class="card shadow-sm h-100 bg-dark animate__animated animate__delay-3s" data-animate="animate__fadeInRight">
                            <div class="card-body d-flex flex-column">
                                <img src="{{ asset('assets/main/img/takas-istanbul.png') }}" class="me-auto img-fluid" alt="">
                                <p class="mt-xl-10 fs-xl-4 text-white">YATIRIMLARINIZ TAKAS BANK GÜVENCESİNDE</p>
                                <p class="fs-1 text-main">Fonuniq'e Yatırımcı Olarak Hemen Başvur!</p>
                                <a href="" class="btn btn-white btn-active-success btn-text-success rounded-pill d-flex align-items-center mt-auto">
                                    <span class="mx-auto">Hesap Oluştur</span>
                                    <img src="{{ asset('assets/main/img/icons/check.svg') }}" alt="">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="py-20" id="fonlanmisProjeler">
        <div class="container-main container-fluid">
            <div class="row">
                <div class="col-lg-3 animate__animated" data-animate="animate__fadeInLeft">
                    <div class="h-100 d-flex flex-column px-sm-0 px-9">
                        <div class="justify-content-between align-items-center my-15">
                            <h3 class="mb-sm-0 mb-5 mx-sm-0 mx-auto h1">Hedefine Ulaşan Projeler
                            </h3>
                            <a href="/fonuniq/public/index.php/tr/yatirim"
                               class="btn btn-active-dark btn-sm sistem-onayi btn-text-dark mt-md-5 mx-auto mx-sm-0 rounded-pill w-50">
                                <img src="/fonuniq/public/assets/main/img/icons/external.svg" alt="" class="h-20px">
                                <span class="ms-5">Tümünü İncele</span>
                            </a>
                        </div>
                        <p class="fs-3">Uzun yıllara dayanan tecrübeli ekip arkadaşlarımızla girişimcileri yatırımcılarını aynı çatı altında buluşturarak başarı hikayelerinde yerimizi alıyoruz.</p>
                    </div>
                </div>
                {% for i in 1..3 %}
                    <div class="col-lg-3 col-sm-6 mb-sm-5 animate__animated animate__delay-1 }}s"
                         data-animate="animate__fadeInUp">
                        <div  class="h-100 border-style-none card position-relative bg-white text-dark">

                            <div class="">
                                <div class="rounded-pill bo bilgilendirme-daire-left w-20px h-20px position-absolute bottom-25"></div>
                                <div class="rounded-pill bo bilgilendirme-daire-right w-20px h-20px position-absolute bottom-25"></div>
                            </div>
                            <div id="ulasanCardlar" class="card-body text-center">
                                <div class="card p-2 position-absolute" style="top: -76px;left:50%;transform:translateX(-50%);">
                                    <img id="hedefeUlasanImage" src="/fonuniq/public/assets/main/img/hedefe-ulasan-gorsel.jpg">
                                </div>
                                <img class="mt-15" src="{{ asset('assets/main/img/system-safe.png') }}" width="78"
                                     height="78"
                                     alt="">
                                <h3 class="card-title fs-5 mt-15 text-black" style="font-family: 'Montserrat', sans-serif;font-weight: normal;">PLUS.VC
                                </h3>
                                <p class="card-title fs-6 mt-15 text-dark fw-light" style="font-family: 'Montserrat', sans-serif">Accent, Moskova ve Rusya
                                    Federasyonu’nun diğer büyük şehirlerindeki ticari gayrimenkul yatırımlarına
                                    odaklanmaktadır
                                </p>
                                <div class="mt-10 d-flex justify-content-between">
                                    <div>
                                        <div class="d-flex flex-column">
                                            <div class="text-darkblue card-title fs-8 fw-bolder">%100</div>
                                            <div class="text-darkblue card-title fs-8 fw-light">FON ORANI</div>
                                        </div>
                                        <div class="mt-5">
                                            <div class="text-darkblue card-title fs-8 fw-bolder">1.800.000 ₺</div>
                                            <div class="text-darkblue card-title fs-8 fw-light">HEDEFLENEN</div>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="d-flex flex-column">
                                            <div class="text-darkblue card-title fs-8 fw-bolder">234</div>
                                            <div class="text-darkblue card-title fs-8 fw-light">FONLAYAN</div>
                                        </div>
                                        <div class="mt-5">
                                            <div class="text-darkblue card-title fs-8 fw-bolder">1.800.000 ₺</div>
                                            <div class="text-darkblue card-title fs-8 fw-light">FONLANAN</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
                </div>
            </div>
        </div>
    </section>
    <section class="py-20 px-5 px-xl-0" id="bilgilendirme">
        <div class="row g-0">
            <div class="col-lg-9 ms-auto">
                <div class="d-flex justify-content-between align-items-center mb-lg-15 mb-md-10 mb-5">
                    <h2>FONUNIQ Bilgilendirme</h2>
                    <a href="{{ path('app_main_bilgilendirme') }}"
                       class="btn btn-bg-dark btn-active-success btn-text-light rounded-pill">
                        <img src="{{ asset('assets/main/img/icons/chartpaper.svg') }}" class="me-3" width="24" height="24"
                             alt="">
                        Tüm Bilgilendirmeler
                    </a>
                </div>
            </div>
            <div class="col-lg-1"></div>
        </div>
        <div class="row g-0 overflow-hidden">
            <div class="col-lg-10 ms-auto me-xl-n10">
                <div class="swiper" id="bilgilendirmeSwiper">
                    <div class="swiper-wrapper">
                        {% for i in 1..5 %}
                            <div class="swiper-slide animate__animated animate__delay-{{ loop.index-1 }}s" data-animate="animate__fadeIn">
                                <div class="card position-relative overflow-hidden border-0 bg-success bg-hover-dark text-dark text-hover-light">
                                    <div class="">
                                        <div class="rounded-pill bo bilgilendirme-daire-left w-20px h-20px position-absolute bottom-25"></div>
                                        <div class="rounded-pill bo bilgilendirme-daire-right w-20px h-20px position-absolute bottom-25"></div>
                                    </div>
                                    <div class="card-body text-center">
                                        <img class="mt-15" src="{{ asset('assets/main/img/system-safe.png') }}" width="78"
                                             height="78"
                                             alt="">
                                        <h3 class="card-title fs-6 mt-15 text-light">Sisteme nasıl güvenirim?</h3>
                                        <p class="h-150px mb-0 fw-bolder mt-6 fs-5">Accent, Moskova ve Rusya Federasyonu’nun diğer büyük şehirlerindeki ticari gayrimenkul yatırımlarına odaklanmaktadır.</p>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="py-20" id="paydaslar">
        <div class="container-main container-fluid">
            <div class="row">
                <div class="col-lg-3">
                    <div class="animate__animated" data-animate="animate__fadeInLeft">
                        <h2 class="mt-10">Paydaşlarımız</h2>
                        <p class="fs-3">Uzun yıllara dayanan tecrübeli ekip arkadaşlarımızla girişimcileri yatırımcılarını aynı çatı altında buluşturarak başarı hikayelerinde yerimizi alıyoruz.</p>
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="swiper">
                        <div class="swiper-wrapper">
                            {% for i in 1..4 %}
                                <div class="swiper-slide h-auto">
                                    <div class="card shadow-sm bg-white bg-hover-dark animate__animated animate__delay-{{ loop.index-1 }}s" data-animate="animate__fadeInUp">
                                        <div class="card-body d-flex justify-content-center align-items-center">
                                            <img src="{{ asset('assets/main/img/british-council.png') }}" class="img-fluid" alt="">
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block scripts %}
    <script>
        $(function () {
            const homeSwiper = new Swiper('#homeSwiper', {
                loop: true,
                effect: 'fade',
                pagination: {
                    el: '.home-swiper-pagination',
                    bulletClass: 'home-swiper-bar',
                    bulletActiveClass: 'home-swiper-bar-active',
                    renderBullet: function (index, className) {
                        return '' +
                            '<div class="' + className + '">' +
                            '<span class="state-bar"></span>' +
                            '</div>';
                    },
                }
            });

            const fonlananSwiper = new Swiper('#fonlananProjeler .swiper', {
                slidesPerView: 1,
                spaceBetween: 15,
                breakpoints: {
                    768: {
                        slidesPerView: 2,
                    },
                    991: {
                        slidesPerView: 3,
                    },
                    1200: {
                        slidesPerView: 4,
                    }
                }
            });

            const fonlanacakSwiper = new Swiper('#fonlanacakProjeler .swiper', {
                slidesPerView: 1,
                spaceBetween: 15,
                breakpoints: {
                    768: {
                        slidesPerView: 2,
                    },
                    991: {
                        slidesPerView: 3,
                    },
                    1200: {
                        slidesPerView: 4,
                    }
                }
            });

            const fonlanmisSwiper = new Swiper('#fonlanmisProjeler .swiper', {
                slidesPerView: 1,
                spaceBetween: 15,
                breakpoints: {
                    768: {
                        slidesPerView: 2,
                    },
                    1200: {
                        slidesPerView: 3,
                    }
                }
            });

            const bilgilendirmeSwiper = new Swiper('#bilgilendirmeSwiper', {
                slidesPerView: 1,
                spaceBetween: 15,
                breakpoints: {
                    768: {
                        slidesPerView: 2,
                    },
                    991: {
                        slidesPerView: 3,
                    },
                    1200: {
                        slidesPerView: 4,
                    }
                }
            });

            const istatistikSwiper = new Swiper('#istatistikSwiper', {
                slidesPerView: 1,
                spaceBetween: 15,
                breakpoints: {
                    768: {
                        slidesPerView: 2,
                    },
                    991: {
                        slidesPerView: 3,
                    },
                    1200: {
                        slidesPerView: 4,
                    }
                }
            });

            const paydaslarSwiper = new Swiper('#paydaslar .swiper', {
                slidesPerView: 1,
                spaceBetween: 15,
                breakpoints: {
                    768: {
                        slidesPerView: 2,
                    },
                    991: {
                        slidesPerView: 3,
                    },
                    1400: {
                        slidesPerView: 4,
                    }
                }
            });

            $("#homeSwiper .home-swiper-pagination").on('animationend', (event) => {
                homeSwiper.slideNext();
            });
        })
    </script>
{% endblock %}