@extends('layouts.main-app')

@section('title', 'Home')

@section('content')

@include('layouts.navbar')

<div class="relative ">
    <img src="{{asset('images/shader.jpg')}}" class="absolute inset-0 object-cover object-bottom w-full h-full" alt="">
    <div class="container relative max-w-screen-xl pt-20 mx-auto ">
        <h1 class="text-4xl font-bold text-center">Accredited Brokers</h1>
        <h1 class="text-5xl font-semibold text-center">LEADING WITH EXCELLENCE</h1>
        <div class="pt-20 space-y-4">
            <hr class="border border-black">
            <p class="text-base">
                By offering and delivering some of the best investments in real estate that anyone can make in Davao City and beyond, we constantly strive to partner with real estate professionals and brokerages that seek to deliver their clients superior value. If you are interested to add our properties to your portfolio, click <span class="font-semibold underline">here</span>.
            </p>
        </div>
    </div>
</div>


    
<div class="container max-w-screen-xl px-4 py-12 mx-auto space-y-8 relative">
   
    <!--<div data-aos="fade-up" data-aos-duration="1500" class="space-y-8">-->
   
        
    <!--</div>-->



@foreach (['Lead brokers', 'Sales Director', 'Sales Manager', 'Property Consultant'] as $type)
    <div data-aos="fade-up" data-aos-duration="1500" class="space-y-4">
        <h2 class="text-2xl font-semibold">Top 3 {{ $type }}</h2>
        <div class="grid grid-cols-2 gap-12 md:grid-cols-3">
            @foreach ($brokersByType[$type] ?? [] as $broker)
            <a data-aos="zoom-in" data-aos-duration="1500" href="{{ url('brokers_details', $broker->id) }}">
                <div class="border shadow rounded-xl">
                    <img src="{{ asset($broker->image) }}" alt="{{ $broker->name }}" class="rounded-t-xl">
                    <div class="p-2 pb-12 bg-white">
                        <h1 class="text-sm md:text-md lg:text-xl">{{ $broker->name }}</h1>
                    </div>
                </div>
            </a>
            @endforeach
        </div>
    </div>
@endforeach
</div>

@include('layouts.footer')
@endsection