@extends("frontend.layouts.app")

@section("title")
    {{ app_name() }}
@endsection

@section("content")
    <style>
        .hero-section.banner-inner{
            display: none;
        }
    </style>
    <section class="hero-section">
        <div class="container">
        <div class="row">
            <div class="hero-content col-sm-12">
            <h1>Find Trusted Brokers for Your Loans.</h1>
            <p style="display: inline-block; width: 32em; max-width: 100%;">Connect with verified mortgage brokers to find the best home loan deals—quickly and easily.</p>
            <form method="GET" action="{{ route('search.broker') }}" class="search-bar ">
                <input type="text" name="search" class="form-control" placeholder="Search by Name, Location...">
                <button class="btn btn-danger btn-search">Search</button>
            </form>
            <div class="categories ">
                <div class="category-card">
                <figure><img src="{{ asset('images/ban-icon-1.png') }}" alt=""></figure>
                <p>Residential</p>
                </div>
                <div class="category-card">
                <figure><img src="{{ asset('images/ban-icon-2.png') }}" alt=""></figure>
                <p>Commercial</p>
                </div>
                <div class="category-card">
                <figure><img src="{{ asset('images/ban-icon-3.png') }}" alt=""></figure>
                <p>Construction</p>
                </div>
                <div class="category-card">
                <figure><img src="{{ asset('images/ban-icon-4.png') }}" alt="">  </figure>
                <p>Investment</p>
                </div>
            </div>
            </div>
        </div>
        </div>
    </section>
    <section class="featured_broker">
        <div class="container">
            <div class="row">
                <div class="heading col-sm-12 ">
                    <h4 class="sub-heading">Trusted Experts, Ready Now</h4>
                    <h2>Top Featured Brokers in Your Area</h2>
                </div>
                {{-- @php
                dd($testimonials);
                @endphp --}}
                @foreach($users as $user)
                <div class="col-sm-3">
                    <a href="{{route('broker.profile', $user->id)}}">
                        <div class="box">
                            <figure>
                                <img src="{{ asset($user->avatar) }}" alt="">
                            </figure>
                            <div class="broker-info">
                                <h4>{{ $user->brokerProfile->contact_name ?? $user->name }}</h4>
                                <!--<p>Agent 1</p>-->
                                <p><a href="mailto:{{ $user->email }}">{{ $user->email }}</a></p>
                                <p><a href="tel:{{ $user->brokerProfile->enquire_now }}">{{ $user->brokerProfile->enquire_now ?? $user->mobile }}</a></p>
                            </div>
                        </div>
                    </a>
                </div>
                @endforeach

            </div>
        </div>
    </section>
    <section class="counter-section">
        <div class="container">
            <div class="row">
                <div class="counter-box col-sm-4">
                    <h2 class="counter-value" data-target="{{ $testimonials_count }}">0</h2>
                    <h4 class="counter-text">Listing</h4>
                </div>
                <div class="counter-box col-sm-4">
                    <h2 class="counter-value" data-target="{{ $broker_count }}">0</h2>
                    <h4 class="counter-text">No. of Brokers</h4>
                </div>
                <div class="counter-box col-sm-4">
                    <h2 class="counter-value" data-target="{{ $user_count }}">0</h2>
                    <h4 class="counter-text">Client Served</h4>
                </div>
            </div>
        </div>
    </section>
    <section class="top_featured">
        <div class="container">
            <div class="row">
                <div class="heading col-sm-12 ">
                    <h4 class="sub-heading">Why Choose Our Platform?</h4>
                    <h2>Top Platform Features</h2>
                </div>

                <div class="col-sm-3">
                    <div class="box">
                        <figure>
                            <img src="{{ asset('images/top-1.png') }}" alt="">
                        </figure>
                        <div class="broker-info">
                            <h4>Verified & Trusted Brokers</h4>
                            <p>Only pre-screened brokers make it to our platform. Connect confidently with professionals you can trust.</p>
                            <p><a href="#">Learn More <i class="fa-solid fa-arrow-right"></i></a></p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="box">
                        <figure>
                            <img src="{{ asset('images/top-2.png') }}" alt="">
                        </figure>
                        <div class="broker-info">
                            <h4>Direct Contact with Brokers</h4>
                            <p>Skip the middleman. Our platform lets you contact brokers directly via phone or email with ease.</p>
                            <p><a href="#">Learn More <i class="fa-solid fa-arrow-right"></i></a></p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="box">
                        <figure>
                            <img src="{{ asset('images/top-3.png') }}" alt="">
                        </figure>
                        <div class="broker-info">
                            <h4>Personalized Search Experience</h4>
                            <p>Refine your search by location, specialty, and more to find the perfect broker match for your needs.</p>
                             <p><a href="#">Learn More <i class="fa-solid fa-arrow-right"></i></a></p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="box">
                        <figure>
                            <img src="{{ asset('images/top-4.png') }}" alt="">
                        </figure>
                        <div class="broker-info">
                            <h4>Comprehensive Broker Profiles</h4>
                            <p>View detailed profiles with photos, videos, reviews, and availability to make informed decisions on who to work with.</p>
                             <p><a href="#">Learn More <i class="fa-solid fa-arrow-right"></i></a></p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>


    <section class="testimonial-sec">
        <div class="container">
            <div class="row">
                <div class="heading col-sm-12 mb-5">
                    <h2 class="text-center">What our customers say?</h2>
                    <p class="text-center">Hear from our satisfied customers and clients.</p>
                </div>
                <div class="col-sm-12">
                    <div class="owl-carousel owl-theme" id="owl-demo-1">
                        @foreach($testimonials as $testimonial)
                        <div class="item">
                            <div class="item-box">
                                <figure>
                                    <img src="{{ asset($testimonial->image) }}" alt="">
                                </figure>
                                <div class="item-content">
                                    <h4>{{ $testimonial->name }}</h4>
                                    <div class="rating">
                                        <span>{{ $testimonial->stars }} </span>
                                        @for ($i = 1; $i <= 5; $i++)
                                            <i class="fas fa-star {{ $i <= $testimonial->stars ? 'text-warning' : 'text-muted' }}"></i>
                                        @endfor
                                    </div>
                                    <p>“{{ $testimonial->description }}”</p>
                                </div>
                            </div>

                        </div>
                        @endforeach
                    </div>
                </div>

            </div>
        </div>
    </section>

    <section class="blog-sec">
        <div class="container">
            <div class="row">
                <div class="heading col-sm-12 mb-5">
                    <h4 class="sub-heading">Insights & Tips</h4>
                    <h2>Latest Blogs and Updates</h2>
                </div>
                <div class="col-sm-12">
                    <div class="owl-carousel owl-theme" id="owl-demo-2">
                        @foreach($blogs as $blog)
                        <div class="item">
                            <div class="item-box">
                                <div class="item-content">
                                    <h4>{{ $blog->title }}</h4>
                                    <p>{!! Str::words($blog->content, 30) !!}</p>
                                    <p><a href="">Read more...</a></p>
                                    <p>{{ $blog->published_at->format('d M, Y') }}</p>
                                </div>
                                <figure>
                                    <img src="{{ asset($blog->featured_image) }}" alt="">
                                </figure>
                            </div>

                        </div>
                        @endforeach



                    </div>



                    <div class="btn-box text-center mt-3"><a href="{{ route('blog') }}" class="btn">View More</a></div>
                </div>


            </div>
        </div>
    </section>

    <div class="browse-sec">
        <div class="container">
            <div class="row browse-row">
                <div class="col-sm-6 mx-auto browse-info">
                    <h2>Ready to take your business next level? </h2>
                    <p>Let us manage your loan processing from client needs to the settlement.</p>
                    <div class="btn-box text-center mt-4"><a href="{{ route('contact') }}" class="btn btn-warning">Get in Touch</a></div>
                </div>
            </div>
        </div>
    </div>



@endsection