@extends('layouts.frontend')
@section('title', 'Our Branches - ' . church_name())
@section('description', 'Find a church branch near you')

@section('content')
@php
    $allBranches = collect();
    if ($currentChurch) {
        $allBranches->push($currentChurch);
    }
    $allBranches = $allBranches->merge($branches);
@endphp

<section class="relative py-20 bg-gradient-to-br from-gold-500/10 via-royal-600/5 to-gold-500/10">
    <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cg fill=\"none\" fill-rule=\"evenodd\"%3E%3Cg fill=\"%23d4af37\" fill-opacity=\"0.05\"%3E%3Cpath d=\"M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-50"></div>
    <div class="container mx-auto px-4 relative z-10">
        <div class="text-center max-w-3xl mx-auto">
            <span class="inline-block px-4 py-1 rounded-full bg-gold-500/20 text-gold-500 text-sm font-medium mb-4">
                <i class="fas fa-church mr-2"></i> Our Family of Churches
            </span>
            <h1 class="text-4xl md:text-5xl font-cinzel font-bold text-[var(--text-primary)] mb-4">
                Our Branches
            </h1>
            <p class="text-lg text-[var(--text-secondary)]">
                Find a church branch near you. We're one family, many locations, serving communities across the region.
            </p>
        </div>
    </div>
</section>

<section class="py-16 bg-[var(--bg-card)]">
    <div class="container mx-auto px-4">
        @if($allBranches->count() > 0)
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($allBranches as $branch)
            <div class="group bg-[var(--bg-primary)] rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 border border-[var(--border-color)] hover:border-gold-500/50">
                @if($branch->logo)
                    <div class="h-48 overflow-hidden bg-[var(--bg-secondary)] flex items-center justify-center">
                        <img src="{{ asset('storage/' . $branch->logo) }}" alt="{{ $branch->name }}" class="object-contain transition-transform duration-500 group-hover:scale-105" style="width: 160px; height: 160px;">
                    </div>
                @else
                    <div class="h-48 bg-gradient-to-br from-gold-500/20 to-royal-600/20 flex items-center justify-center">
                        <div class="w-40 h-40 rounded-full bg-gradient-to-br from-gold-500 to-royal-600 flex items-center justify-center">
                            <i class="fas fa-church text-white text-5xl"></i>
                        </div>
                    </div>
                @endif
                
                <div class="p-6">
                    <div class="flex items-center gap-2 mb-3">
                        <span class="px-3 py-1 rounded-full bg-gold-500/10 text-gold-500 text-xs font-medium uppercase">
                            {{ str_replace('-', ' ', $branch->type) }}
                        </span>
                    </div>
                    
                    <h3 class="text-xl font-cinzel font-bold text-[var(--text-primary)] mb-2 group-hover:text-gold-500 transition-colors">
                        {{ $branch->name }}
                    </h3>
                    
                    @if($branch->tagline)
                        <p class="text-sm text-[var(--text-secondary)] mb-4">{{ Str::limit($branch->tagline, 80) }}</p>
                    @endif
                    
                    <div class="space-y-2 text-sm text-[var(--text-secondary)]">
                        @if($branch->location)
                            <div class="flex items-center gap-2">
                                <i class="fas fa-map-marker-alt text-gold-500 w-5"></i>
                                <span>{{ $branch->location }}</span>
                            </div>
                        @endif
                        @if($branch->address)
                            <div class="flex items-center gap-2">
                                <i class="fas fa-location-dot text-gold-500 w-5"></i>
                                <span>{{ $branch->address }}</span>
                            </div>
                        @endif
                        @if($branch->phone)
                            <div class="flex items-center gap-2">
                                <i class="fas fa-phone text-gold-500 w-5"></i>
                                <span>{{ $branch->phone }}</span>
                            </div>
                        @endif
                        @if($branch->email)
                            <div class="flex items-center gap-2">
                                <i class="fas fa-envelope text-gold-500 w-5"></i>
                                <span>{{ $branch->email }}</span>
                            </div>
                        @endif
                        @if($branch->service_times)
                            <div class="flex items-start gap-2">
                                <i class="fas fa-clock text-gold-500 w-5 mt-0.5"></i>
                                <span class="text-xs">{{ $branch->service_times }}</span>
                            </div>
                        @endif
                    </div>
                    
                    <div class="mt-4 pt-4 border-t border-[var(--border-color)]">
                        <a href="https://www.google.com/maps/search/?api=1&query={{ urlencode($branch->location ?? $branch->address ?? $branch->name) }}" 
                           target="_blank"
                           class="inline-flex items-center gap-2 text-gold-500 hover:text-gold-600 text-sm font-medium transition-colors">
                            <i class="fas fa-directions"></i>
                            Get Directions
                            <i class="fas fa-external-link-alt text-xs"></i>
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @else
        <div class="text-center py-12">
            <div class="w-20 h-20 rounded-full bg-gold-500/10 flex items-center justify-center mx-auto mb-6">
                <i class="fas fa-church text-gold-500 text-3xl"></i>
            </div>
            <h3 class="text-xl font-cinzel font-bold text-[var(--text-primary)] mb-2">Single Location</h3>
            <p class="text-[var(--text-secondary)]">Currently, we have one location. More branches coming soon!</p>
        </div>
        @endif
    </div>
</section>

<section class="py-16 bg-gradient-to-r from-gold-500/10 to-royal-600/10">
    <div class="container mx-auto px-4 text-center">
        <div class="max-w-2xl mx-auto">
            <h2 class="text-2xl font-cinzel font-bold text-[var(--text-primary)] mb-4">Want to Open a New Branch?</h2>
            <p class="text-[var(--text-secondary)] mb-6">
                If you're interested in starting a new branch in your community, we'd love to hear from you. 
                Reach out to learn more about our church planting opportunities.
            </p>
            <a href="{{ route('frontend.contact') }}" class="inline-flex items-center gap-2 px-8 py-3 bg-gold-500 text-white rounded-lg hover:bg-gold-600 transition-colors font-medium">
                <i class="fas fa-envelope"></i>
                Contact Us
            </a>
        </div>
    </div>
</section>
@endsection