@include('user_layout.header')

<section id="team" class="team-section">
    <div class="container">
        <h2 class="section-title" style="margin-top:40px;">Meet Our Team</h2>

        {{-- ================= FOUNDER ================= --}}
        @if($founder)
        <div class="team-row row-1">
            <div>
                <div class="founder-frame">
                    <img src="{{ asset('storage/'.$founder->image) }}"
                         alt="{{ $founder->name }}">
                </div>
                <h3>{{ $founder->name }}</h3>
                <p>{{ $founder->designation }}</p>

                <a href="{{ url('/founder') }}" class="bio-btn">
                    Read More About Director
                </a>
            </div>
        </div>
        @endif

       {{-- ================= TEAM MEMBERS (ROW CONTROLLED) ================= --}}

@php
    // Convert collection to array chunks
    $row2 = $members->slice(0, 2);       // first 2
    $row3 = $members->slice(2, 3);       // next 3
    $remaining = $members->slice(5);     // rest (4 per row)
@endphp

{{-- ROW 2 (2 MEMBERS) --}}
@if($row2->count())
<div class="team-row row-2">
    @foreach($row2 as $member)
        <div class="member">
            <img src="{{ asset('storage/'.$member->image) }}" alt="{{ $member->name }}">
            <h3>{{ $member->name }}</h3>
            <p>{!! nl2br(e($member->designation)) !!}</p>
        </div>
    @endforeach
</div>
@endif

{{-- ROW 3 (3 MEMBERS) --}}
@if($row3->count())
<div class="team-row row-3">
    @foreach($row3 as $member)
        <div class="member">
            <img src="{{ asset('storage/'.$member->image) }}" alt="{{ $member->name }}">
            <h3>{{ $member->name }}</h3>
            <p>{!! nl2br(e($member->designation)) !!}</p>
        </div>
    @endforeach
</div>
@endif

{{-- ROW 4+ (4 MEMBERS EACH ROW) --}}
@foreach($remaining->chunk(4) as $chunk)
<div class="team-row row-4">
    @foreach($chunk as $member)
        <div class="member">
            <img src="{{ asset('storage/'.$member->image) }}" alt="{{ $member->name }}">
            <h3>{{ $member->name }}</h3>
            <p>{!! nl2br(e($member->designation)) !!}</p>
        </div>
    @endforeach
</div>
@endforeach

    </div>
</section>

{{-- ================= CTA SECTION (UNCHANGED) ================= --}}
<section class="our-cta2 p0" style="overflow: hidden;">
    <div class="cta-banner2 bgc-thm maxw1600 mx-auto pt100 pt50-md pb85 pb50-md px30-md bdrs12 position-relative">
        <div class="img-box-5">
            <img class="img-1 spin-right" src="{{ asset('uploads/element-1.png') }}" alt="">
        </div>
        <div class="img-box-6">
            <img class="img-1 spin-left" src="{{ asset('uploads/element-2.png') }}" alt="">
        </div>

        <div class="cta-style2 d-none d-lg-block">
            <img src="{{ asset('uploads/cta-img-1.png') }}" alt="">
        </div>

        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-xl-6">
                    <div class="cta-style2">
                        <h2 class="cta-title">Need help? Talk to our expert</h2>
                        <p class="cta-text">
                            "Join us on this exciting journey as we shape the future of Real Estate"
                        </p>

                        <a href="{{ url('/contact') }}" class="ud-btn btn-dark mt10">
                            Learn More <i class="fa fa-long-arrow-right"></i>
                        </a>
                        <br><br>
                        <a href="tel:8527520000" class="ud-btn btn-dark">
                            <span class="fa fa-mobile pe-2"></span> 8527520000
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- ================= STYLES (UNCHANGED) ================= --}}
<style>
.team-section {
  background: url("{{ asset('uploads/team-bg1.png') }}") center/cover no-repeat;
  color: #fff;
  padding: 100px 20px;
  text-align: center;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffd700;
  margin-bottom: 60px;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.team-row {
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
  margin-bottom: 80px;
}

.member {
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  border-radius: 15px;
  padding: 20px;
  width: 230px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.member:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
}

.member img {
  width: 180px;
  height: 250px;
  border-radius: 10px;
  object-fit: cover;
  border: 3px solid gold;
  margin-bottom: 10px;
}

.founder-frame {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 0 auto 15px;
  border-radius: 50%;
  background: linear-gradient(135deg, gold, #c19a2c);
  padding: 5px;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
}

.founder-frame img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 6px solid #fff;
  object-fit: cover;
}

.bio-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 12px 30px;
  background-color: #d4af37;
  color: #000;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
}

@media (max-width: 768px) {
  .team-row { flex-direction: column; align-items: center; }
  .member { width: 80%; }
}
</style>

@include('user_layout.footer')