@extends('layouts.shared')

@php
    $photos = $property->photos ?? collect();
    $videos = $property->videos ?? collect();
    $primaryPhoto = $photos->firstWhere('is_primary', true) ?? $photos->first();
    $otherPhotos = $photos->filter(fn($p) => $p->id !== ($primaryPhoto->id ?? null));
    $allPhotos = $photos->values();
    $hasVideos = $videos->isNotEmpty();

    $propertyTypeLabel = match($property->property_type) {
        'casa' => 'Casa',
        'apartamento' => 'Apartamento',
        'townhouse' => 'Townhouse',
        'local' => 'Local Comercial',
        'terreno' => 'Terreno',
        default => $property->property_type,
    };

    $operationLabel = $property->operation_type === 'venta' ? 'Venta' : 'Alquiler';
    $operationBadge = $property->operation_type === 'venta' ? '#007bff' : '#28a745';

    $statusLabel = match($property->status) {
        'disponible' => 'Disponible',
        'reservada' => 'Reservada',
        'vendida' => 'Vendida',
        'alquilada' => 'Alquilada',
        'inactiva' => 'Inactiva',
        default => $property->status,
    };

    $statusBadge = match($property->status) {
        'disponible' => '#28a745',
        'reservada' => '#ffc107',
        'vendida' => '#dc3545',
        'alquilada' => '#fd7e14',
        'inactiva' => '#6c757d',
        default => '#6c757d',
    };

    $shareUrl = url('/compartir/' . $property->shared_token);
    $shareText = $propertyTypeLabel . ' en ' . $property->city . ' - $' . number_format($property->price, 2);

    $agency = $property->agency;
    $agent = $property->agent;

    $agencySocials = [];
    if ($agency) {
        $socialFields = ['facebook', 'instagram', 'linkedin', 'twitter', 'youtube', 'tiktok'];
        foreach ($socialFields as $s) {
            if ($agency->$s) {
                $agencySocials[$s] = $agency->$s;
            }
        }
    }
@endphp

@section('title', $propertyTypeLabel . ' en ' . $property->city)

@push('meta')
    <meta property="og:title" content="{{ $propertyTypeLabel }} en {{ $property->city }}">
    <meta property="og:description" content="{{ $property->observations ?? 'Propiedad inmobiliaria' }}">
    @if($primaryPhoto)
        <meta property="og:image" content="{{ $primaryPhoto->url }}">
    @endif
@endpush

@section('content')
<div class="shared-container">

    {{-- MAIN PHOTO --}}
    <div class="main-photo" id="mainPhotoContainer" onclick="openLightbox(currentPhotoIndex)">
        @if($primaryPhoto)
            <img id="mainPhotoImg" src="{{ $primaryPhoto->url }}" alt="{{ $propertyTypeLabel }}">
        @else
            <div class="no-photo">Sin imagen disponible</div>
        @endif
        <div class="photo-badges">
            <span class="badge" style="background:{{ $operationBadge }};color:white;">{{ $operationLabel }}</span>
            <span class="badge" style="background:{{ $statusBadge }};color:white;">{{ $statusLabel }}</span>
        </div>
        @if($allPhotos->count() > 1)
            <button class="photo-nav photo-prev" onclick="event.stopPropagation();changePhoto(-1)" id="prevBtn">‹</button>
            <button class="photo-nav photo-next" onclick="event.stopPropagation();changePhoto(1)" id="nextBtn">›</button>
            <div class="photo-counter" id="photoCounter">1 / {{ $allPhotos->count() }}</div>
        @endif
    </div>

    {{-- THUMBNAILS + VIDEOS TAB --}}
    @if($allPhotos->isNotEmpty() || $hasVideos)
        <div class="media-tabs">
            <button class="media-tab active" data-tab="photos" onclick="switchTab('photos')">Fotos ({{ $allPhotos->count() }})</button>
            @if($hasVideos)
                <button class="media-tab" data-tab="videos" onclick="switchTab('videos')">Videos ({{ $videos->count() }})</button>
            @endif
        </div>

        <div id="photosTab" class="media-panel">
            <div class="thumbnails-grid">
                @foreach($allPhotos as $index => $photo)
                    <div class="thumb-item {{ $index === 0 ? 'active' : '' }}"
                         data-index="{{ $index }}"
                         onclick="selectPhoto({{ $index }})">
                        <img src="{{ $photo->url }}" alt="">
                    </div>
                @endforeach
            </div>
        </div>

        @if($hasVideos)
            <div id="videosTab" class="media-panel" style="display:none;">
                <div class="videos-list">
                    @foreach($videos as $video)
                        <div class="video-card">
                            @php
                                $isExternal = $video->file_path ? (str_starts_with($video->file_path, 'http://') || str_starts_with($video->file_path, 'https://')) : false;
                            @endphp
                            @if($isExternal)
                                <div class="video-embed">
                                    <div class="video-external-placeholder">
                                        <svg viewBox="0 0 24 24" fill="currentColor" width="48" height="48"><path d="M8 5v14l11-7z"/></svg>
                                        <p>Video externo</p>
                                        <a href="{{ $video->url }}" target="_blank" rel="noopener" class="btn-play">Ver video</a>
                                    </div>
                                </div>
                            @else
                                <video controls class="video-player" preload="metadata">
                                    <source src="{{ $video->url }}" type="{{ $video->mime_type ?? 'video/mp4' }}">
                                </video>
                            @endif
                            @if($video->file_name)
                                <p class="video-name">{{ $video->file_name }}</p>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    @endif

    {{-- PRICE & TITLE --}}
    <div class="section info-section">
        <h1 class="property-title">{{ $propertyTypeLabel }} en {{ $property->city }}</h1>
        <div class="property-price">${{ number_format($property->price, 2) }}</div>
        @if($property->price_negotiable)
            <p class="negotiable">💰 Precio negociable</p>
        @endif
        <p class="property-location">📍 {{ $property->street_address ?: ($property->urbanization ?: $property->city) }}</p>
    </div>

    {{-- FEATURES --}}
    <div class="section">
        <h2 class="section-title">Características</h2>
        <div class="features-grid">
            @if($property->rooms_total)
                <div class="feature-item"><span class="feature-icon">🛏️</span><span class="feature-value">{{ $property->rooms_total }} Hab.</span></div>
            @endif
            @if($property->bathrooms_total)
                <div class="feature-item"><span class="feature-icon">🚿</span><span class="feature-value">{{ $property->bathrooms_total }} Baños</span></div>
            @endif
            @if($property->parking_spaces)
                <div class="feature-item"><span class="feature-icon">🚗</span><span class="feature-value">{{ $property->parking_spaces }} Estac.</span></div>
            @endif
            @if($property->land_area)
                <div class="feature-item"><span class="feature-icon">📐</span><span class="feature-value">{{ $property->land_area }} m² Terr.</span></div>
            @endif
            @if($property->construction_area)
                <div class="feature-item"><span class="feature-icon">🏗️</span><span class="feature-value">{{ $property->construction_area }} m² Const.</span></div>
            @endif
            @if($property->antiquity_years)
                <div class="feature-item"><span class="feature-icon">📅</span><span class="feature-value">{{ $property->antiquity_years }} Años</span></div>
            @endif
        </div>
    </div>

    {{-- DESCRIPTION --}}
    @if($property->observations)
        <div class="section">
            <h2 class="section-title">Descripción</h2>
            <p class="description-text">{{ $property->observations }}</p>
        </div>
    @endif

    {{-- LOCATION --}}
    <div class="section">
        <h2 class="section-title">Ubicación</h2>
        <table class="details-table">
            @if($property->municipality)<tr><td>Municipio</td><td>{{ $property->municipality }}</td></tr>@endif
            @if($property->urbanization)<tr><td>Urbanización</td><td>{{ $property->urbanization }}</td></tr>@endif
            @if($property->street_address)<tr><td>Dirección</td><td>{{ $property->street_address }}</td></tr>@endif
            @if($property->building_name)<tr><td>Edificio</td><td>{{ $property->building_name }}</td></tr>@endif
            @if($property->floor_number)<tr><td>Piso</td><td>{{ $property->floor_number }}</td></tr>@endif
            @if($property->house_apartment_number)<tr><td>Nro</td><td>{{ $property->house_apartment_number }}</td></tr>@endif
            @if($property->furnished_status)<tr><td>Amueblado</td><td>{{ $property->furnished_status }}</td></tr>@endif
        </table>
    </div>

    {{-- AGENCY --}}
    @if($agency)
    <div class="section">
        <h2 class="section-title">
            <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20" style="vertical-align:middle;margin-right:0.35rem;"><path d="M10 2v2.343l-2.536-.707-1.414 1.414L8.586 5.83l-.707 2.536h2l.707-2.536L12 7.657l1.414-1.414-1.414-1.414 2.536.707 1.414-1.414L14 4.343V2h-4zM5 8.5A1.5 1.5 0 016.5 7h11A1.5 1.5 0 0119 8.5V20H5V8.5zM7 10v8h2v-8H7zm4 0v8h2v-8h-2zm4 0v8h2v-8h-2z"/></svg>
            Inmobiliaria
        </h2>

        <div class="card-agency">
            <div class="agency-header">
                @if($agency->logo_url)
                    <img src="{{ $agency->logo_url }}" alt="{{ $agency->name }}" class="agency-logo" onerror="this.style.display='none'">
                @endif
                @if(!$agency->logo_url)
                    <div class="agency-logo-placeholder">{{ mb_substr($agency->name, 0, 1) }}</div>
                @endif
                <div>
                    <strong class="agency-name">{{ $agency->name }}</strong>
                    @if($agency->legal_name && $agency->legal_name !== $agency->name)
                        <p class="agency-legal">{{ $agency->legal_name }}</p>
                    @endif
                    @if($agency->nif)
                        <p class="agency-nif">NIF: {{ $agency->nif }}</p>
                    @endif
                </div>
            </div>

            <div class="agency-details-grid">
                <div class="agency-col">
                    <h4>Contacto</h4>
                    @if($agency->phone_primary)
                        <p><span class="label">Tel.:</span> <a href="tel:{{ $agency->phone_primary }}">{{ $agency->phone_primary }}</a></p>
                    @endif
                    @if($agency->phone_secondary)
                        <p><span class="label">Tel. 2:</span> <a href="tel:{{ $agency->phone_secondary }}">{{ $agency->phone_secondary }}</a></p>
                    @endif
                    @if($agency->email_general)
                        <p><span class="label">Email:</span> <a href="mailto:{{ $agency->email_general }}">{{ $agency->email_general }}</a></p>
                    @endif
                    @if($agency->email_commercial)
                        <p><span class="label">Comercial:</span> <a href="mailto:{{ $agency->email_commercial }}">{{ $agency->email_commercial }}</a></p>
                    @endif
                    @if($agency->website)
                        <p><span class="label">Web:</span> <a href="{{ $agency->website }}" target="_blank" rel="noopener">{{ $agency->website }}</a></p>
                    @endif
                </div>

                <div class="agency-col">
                    <h4>Dirección</h4>
                    <p>
                        @php
                            $addrParts = array_filter([$agency->address, $agency->city, $agency->province, $agency->country]);
                        @endphp
                        {{ implode(', ', $addrParts) ?: 'No disponible' }}
                    </p>
                    @if($agency->years_experience)
                        <p style="margin-top:0.5rem;"><span class="label">Experiencia:</span> {{ $agency->years_experience }} años</p>
                    @endif
                </div>
            </div>

            @if($agency->description)
                <div class="agency-description">
                    <p>{{ $agency->description }}</p>
                </div>
            @endif

            @if($agencySocials)
                <div class="agency-socials">
                    <h4>Redes Sociales</h4>
                    <div class="social-links">
                        @foreach($agencySocials as $network => $url)
                            <a href="{{ $url }}" target="_blank" rel="noopener" class="social-link {{ $network }}" title="{{ ucfirst($network) }}">
                                @if($network === 'facebook')
                                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                                @elseif($network === 'instagram')
                                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
                                @elseif($network === 'linkedin')
                                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                                @elseif($network === 'twitter')
                                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                                @elseif($network === 'youtube')
                                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
                                @elseif($network === 'tiktok')
                                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
                                @endif
                                <span>{{ ucfirst($network) }}</span>
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif

            @if($agency->representative_name)
                <div class="agency-representative">
                    <h4>Representante Legal</h4>
                    <p><strong>{{ $agency->representative_name }}</strong></p>
                    @if($agency->representative_position)
                        <p class="sub">{{ $agency->representative_position }}</p>
                    @endif
                    <div class="rep-contact">
                        @if($agency->representative_phone)
                            <a href="tel:{{ $agency->representative_phone }}">📞 {{ $agency->representative_phone }}</a>
                        @endif
                        @if($agency->representative_email)
                            <a href="mailto:{{ $agency->representative_email }}">✉️ {{ $agency->representative_email }}</a>
                        @endif
                    </div>
                </div>
            @endif
        </div>
    </div>
    @endif

    {{-- AGENT --}}
    @if($agent)
    <div class="section">
        <h2 class="section-title">
            <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20" style="vertical-align:middle;margin-right:0.35rem;"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
            Asesor Inmobiliario
        </h2>

        <div class="card-agent">
            <div class="agent-header">
                @if($agent->photo_url)
                    <img src="{{ $agent->photo_url }}" alt="{{ $agent->name }}" class="agent-photo" onerror="this.style.display='none'">
                @endif
                @if(!$agent->photo_url)
                    <div class="agent-photo-placeholder">{{ mb_substr($agent->name, 0, 1) }}</div>
                @endif
                <div>
                    <strong class="agent-name">{{ $agent->name }}</strong>
                    @if($agent->position)
                        <p class="agent-position">{{ $agent->position }}</p>
                    @elseif($agent->company_position)
                        <p class="agent-position">{{ $agent->company_position }}</p>
                    @endif
                </div>
            </div>

            <div class="agent-details-grid">
                <div class="agent-col">
                    <h4>Contacto</h4>
                    @if($agent->phone)
                        <p><span class="label">Tel.:</span> <a href="tel:{{ $agent->phone }}">{{ $agent->phone }}</a></p>
                    @endif
                    @if($agent->phone_alternative)
                        <p><span class="label">Tel. 2:</span> <a href="tel:{{ $agent->phone_alternative }}">{{ $agent->phone_alternative }}</a></p>
                    @endif
                    @if($agent->email)
                        <p><span class="label">Email:</span> <a href="mailto:{{ $agent->email }}">{{ $agent->email }}</a></p>
                    @endif
                    @if($agent->website)
                        <p><span class="label">Web:</span> <a href="{{ $agent->website }}" target="_blank" rel="noopener">{{ $agent->website }}</a></p>
                    @endif
                    @if($agent->linkedin_profile)
                        <p><span class="label">LinkedIn:</span> <a href="{{ $agent->linkedin_profile }}" target="_blank" rel="noopener">Ver perfil</a></p>
                    @endif
                </div>

                <div class="agent-col">
                    <h4>Información</h4>
                    @if($agent->experience_years)
                        <p><span class="label">Experiencia:</span> {{ $agent->experience_years }} años</p>
                    @endif
                    @if($agent->specialization_areas && is_array($agent->specialization_areas) && count($agent->specialization_areas))
                        <p><span class="label">Especialización:</span></p>
                        <ul class="agent-tags">
                            @foreach($agent->specialization_areas as $area)
                                <li>{{ $area }}</li>
                            @endforeach
                        </ul>
                    @endif
                    @if($agent->languages && is_array($agent->languages) && count($agent->languages))
                        <p style="margin-top:0.5rem;"><span class="label">Idiomas:</span></p>
                        <ul class="agent-tags">
                            @foreach($agent->languages as $lang)
                                <li>{{ $lang }}</li>
                            @endforeach
                        </ul>
                    @endif
                </div>
            </div>

            @php
                $waNumber = $agent->whatsapp_number ?: ($agent->whatsapp_same_as_primary ? $agent->phone : null);
                $waEnabled = $agent->whatsapp_enabled && $waNumber;
            @endphp
            @if($waEnabled)
                <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $waNumber) }}?text={{ urlencode('Hola, vi la propiedad ' . $shareUrl . ' y me gustaría recibir más información.') }}"
                   target="_blank" rel="noopener" class="btn-whatsapp">
                    <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                    Contactar por WhatsApp
                </a>
            @endif
        </div>
    </div>
    @endif

    {{-- SHARE BUTTONS --}}
    <div class="section share-section">
        <h2 class="section-title">
            <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20" style="vertical-align:middle;margin-right:0.35rem;"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>
            Compartir
        </h2>
        <div class="share-buttons">
            <a href="https://wa.me/?text={{ urlencode($shareText . ' ' . $shareUrl) }}" target="_blank" rel="noopener" class="share-btn whatsapp" title="WhatsApp">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
            </a>
            <a href="https://www.facebook.com/sharer.php?u={{ urlencode($shareUrl) }}" target="_blank" rel="noopener" class="share-btn facebook" title="Facebook">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
            </a>
            <a href="https://twitter.com/intent/tweet?text={{ urlencode($shareText) }}&url={{ urlencode($shareUrl) }}" target="_blank" rel="noopener" class="share-btn twitter" title="Twitter / X">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
            </a>
            <button class="share-btn instagram" title="Instagram" onclick="copyLink()">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
            </button>
            <button class="share-btn tiktok" title="TikTok" onclick="copyLink()">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
            </button>
            <a href="mailto:?subject={{ urlencode($shareText) }}&body={{ urlencode($shareText . "\n\n" . $shareUrl) }}" class="share-btn email" title="Email">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
            </a>
            <button class="share-btn copy" title="Copiar enlace" onclick="copyLink()">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
            </button>
        </div>
        <div id="copyFeedback" class="copy-feedback" style="display:none;">✓ Enlace copiado al portapapeles</div>
    </div>
</div>

{{-- LIGHTBOX --}}
<div id="lightbox" class="lightbox" onclick="closeLightbox(event)" style="display:none;">
    <button class="lightbox-close" onclick="closeLightbox()">✕</button>
    <button class="lightbox-nav lightbox-prev" onclick="lightboxPhoto(-1)">‹</button>
    <img id="lightboxImg" class="lightbox-img" src="" alt="">
    <button class="lightbox-nav lightbox-next" onclick="lightboxPhoto(1)">›</button>
    <div class="lightbox-counter" id="lightboxCounter"></div>
</div>

<script>
let currentPhotoIndex = 0;
const photos = [
    @foreach($allPhotos as $photo)
        { url: '{{ $photo->url }}', alt: '{{ $photo->file_name ?? '' }}' },
    @endforeach
];

function selectPhoto(index) {
    if (index < 0 || index >= photos.length) return;
    currentPhotoIndex = index;
    const img = document.getElementById('mainPhotoImg');
    if (img) {
        img.src = photos[index].url;
        img.alt = photos[index].alt;
    }
    const counter = document.getElementById('photoCounter');
    if (counter) counter.textContent = (index + 1) + ' / ' + photos.length;
    document.querySelectorAll('.thumb-item').forEach(el => {
        el.classList.toggle('active', parseInt(el.dataset.index) === index);
    });
}

function changePhoto(dir) {
    let idx = currentPhotoIndex + dir;
    if (idx < 0) idx = photos.length - 1;
    if (idx >= photos.length) idx = 0;
    selectPhoto(idx);
}

function openLightbox(index) {
    if (!photos.length) return;
    const lb = document.getElementById('lightbox');
    const img = document.getElementById('lightboxImg');
    const counter = document.getElementById('lightboxCounter');
    currentPhotoIndex = index;
    img.src = photos[index].url;
    counter.textContent = (index + 1) + ' / ' + photos.length;
    lb.style.display = 'flex';
    document.body.style.overflow = 'hidden';
}

function closeLightbox(e) {
    if (e && e.target !== e.currentTarget) return;
    document.getElementById('lightbox').style.display = 'none';
    document.body.style.overflow = '';
}

function lightboxPhoto(dir) {
    let idx = currentPhotoIndex + dir;
    if (idx < 0) idx = photos.length - 1;
    if (idx >= photos.length) idx = 0;
    openLightbox(idx);
}

document.addEventListener('keydown', function(e) {
    const lb = document.getElementById('lightbox');
    if (lb.style.display === 'none') return;
    if (e.key === 'Escape') closeLightbox();
    if (e.key === 'ArrowLeft') lightboxPhoto(-1);
    if (e.key === 'ArrowRight') lightboxPhoto(1);
});

function switchTab(tab) {
    document.querySelectorAll('.media-tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.media-panel').forEach(p => p.style.display = 'none');
    document.querySelector('.media-tab[data-tab="' + tab + '"]')?.classList.add('active');
    document.getElementById(tab + 'Tab').style.display = 'block';
}

function copyLink() {
    const url = '{{ $shareUrl }}';
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(url).then(() => showCopyFeedback()).catch(() => fallbackCopy(url));
    } else {
        fallbackCopy(url);
    }
}

function fallbackCopy(text) {
    const ta = document.createElement('textarea');
    ta.value = text;
    ta.style.position = 'fixed';
    ta.style.left = '-9999px';
    document.body.appendChild(ta);
    ta.select();
    document.execCommand('copy');
    document.body.removeChild(ta);
    showCopyFeedback();
}

function showCopyFeedback() {
    const el = document.getElementById('copyFeedback');
    el.style.display = 'block';
    setTimeout(() => { el.style.display = 'none'; }, 3000);
}
</script>

<style>
.shared-container { max-width: 720px; margin: 0 auto; background: white; min-height: 100vh; }

/* Main Photo */
.main-photo { position: relative; width: 100%; height: 420px; overflow: hidden; background: #e0e0e0; cursor: pointer; }
.main-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.3s; }
.no-photo { display: flex; align-items: center; justify-content: center; height: 100%; color: #999; font-size: 1.1rem; }
.photo-badges { position: absolute; top: 1rem; left: 1rem; display: flex; gap: 0.5rem; }
.badge { display: inline-block; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.photo-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: white; border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; z-index: 2; }
.photo-nav:hover { background: rgba(0,0,0,0.8); }
.photo-prev { left: 0.75rem; }
.photo-next { right: 0.75rem; }
.photo-counter { position: absolute; bottom: 0.75rem; right: 0.75rem; background: rgba(0,0,0,0.6); color: white; padding: 0.25rem 0.6rem; border-radius: 4px; font-size: 0.75rem; }

/* Media Tabs */
.media-tabs { display: flex; border-bottom: 2px solid #eee; }
.media-tab { flex: 1; padding: 0.75rem 1rem; background: none; border: none; font-size: 0.9rem; color: #888; cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.2s; font-weight: 500; }
.media-tab:hover { color: #555; }
.media-tab.active { color: #007bff; border-bottom-color: #007bff; }
.media-panel { padding: 0.75rem; }

/* Thumbnails */
.thumbnails-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
.thumb-item { border-radius: 6px; overflow: hidden; cursor: pointer; border: 3px solid transparent; transition: border-color 0.2s; }
.thumb-item.active { border-color: #007bff; }
.thumb-item:hover { opacity: 0.85; }
.thumb-item img { width: 100%; height: 70px; object-fit: cover; display: block; }

/* Videos */
.videos-list { display: flex; flex-direction: column; gap: 1rem; }
.video-card { border-radius: 8px; overflow: hidden; background: #f8f9fa; }
.video-player { width: 100%; display: block; }
.video-embed { position: relative; width: 100%; aspect-ratio: 16/9; }
.video-external-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; background: #222; color: white; gap: 0.5rem; }
.video-external-placeholder svg { opacity: 0.6; }
.video-external-placeholder p { font-size: 0.9rem; color: #aaa; }
.btn-play { display: inline-block; padding: 0.5rem 1.5rem; background: #dc3545; color: white; border-radius: 6px; text-decoration: none; font-size: 0.9rem; font-weight: 500; }
.btn-play:hover { background: #c82333; }
.video-name { padding: 0.5rem 0.75rem; font-size: 0.8rem; color: #666; }

/* Sections */
.section { padding: 1.5rem; border-bottom: 1px solid #eee; }
.section-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 1rem 0; color: #333; }
.property-title { font-size: 1.5rem; margin: 0 0 0.5rem 0; color: #222; }
.property-price { font-size: 2rem; font-weight: bold; color: #007bff; margin-bottom: 0.25rem; }
.negotiable { color: #ffc107; font-weight: 500; font-size: 0.9rem; margin: 0 0 0.25rem 0; }
.property-location { color: #666; font-size: 0.9rem; margin: 0; }
.features-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.feature-item { display: flex; align-items: center; gap: 0.35rem; background: #f8f9fa; padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.9rem; }
.feature-icon { font-size: 1.1rem; }
.feature-value { font-weight: 500; color: #333; }
.description-text { color: #555; line-height: 1.6; font-size: 0.95rem; margin: 0; }
.details-table { width: 100%; border-collapse: collapse; }
.details-table td { padding: 0.5rem 0; border-bottom: 1px solid #f0f0f0; font-size: 0.9rem; }
.details-table td:first-child { color: #888; width: 40%; }
.details-table td:last-child { color: #333; font-weight: 500; }

/* Agency Card */
.card-agency, .card-agent { background: #f8f9fa; border-radius: 12px; padding: 1.25rem; }
.agency-header, .agent-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.agency-logo { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; border: 1px solid #eee; flex-shrink: 0; background: white; }
.agency-logo-placeholder, .agent-photo-placeholder { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; flex-shrink: 0; color: white; }
.agency-logo-placeholder { background: #007bff; border-radius: 8px; }
.agent-photo { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; border: 2px solid #ddd; flex-shrink: 0; }
.agent-photo-placeholder { background: #6c757d; border-radius: 50%; }
.agency-name, .agent-name { font-size: 1.1rem; color: #222; }
.agency-legal { font-size: 0.8rem; color: #888; }
.agency-nif { font-size: 0.8rem; color: #888; }
.agent-position { font-size: 0.85rem; color: #666; margin-top: 0.15rem; }

.agency-details-grid, .agent-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0.5rem; }
@media (max-width: 500px) { .agency-details-grid, .agent-details-grid { grid-template-columns: 1fr; } }

.agency-col h4, .agent-col h4 { font-size: 0.85rem; font-weight: 600; color: #555; margin: 0 0 0.5rem 0; text-transform: uppercase; letter-spacing: 0.5px; }
.agency-col p, .agent-col p { font-size: 0.85rem; color: #444; margin: 0.3rem 0; }
.agency-col a, .agent-col a { color: #007bff; text-decoration: none; }
.agency-col a:hover, .agent-col a:hover { text-decoration: underline; }
.label { color: #888; font-weight: 500; }

.agent-tags { list-style: none; padding: 0; margin: 0.25rem 0 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.agent-tags li { background: #e9ecef; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.8rem; color: #555; }

.agency-description { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #e0e0e0; }
.agency-description p { font-size: 0.85rem; color: #555; line-height: 1.5; margin: 0; }

.agency-socials { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #e0e0e0; }
.agency-socials h4 { font-size: 0.85rem; font-weight: 600; color: #555; margin: 0 0 0.5rem 0; text-transform: uppercase; letter-spacing: 0.5px; }
.social-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.social-link { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.75rem; border-radius: 6px; font-size: 0.8rem; text-decoration: none; color: white; transition: opacity 0.2s; }
.social-link:hover { opacity: 0.85; }
.social-link svg { width: 16px; height: 16px; }
.social-link.facebook { background: #1877F2; }
.social-link.instagram { background: #E4405F; }
.social-link.linkedin { background: #0A66C2; }
.social-link.twitter { background: #000; }
.social-link.youtube { background: #FF0000; }
.social-link.tiktok { background: #000; }

.agency-representative { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #e0e0e0; }
.agency-representative h4 { font-size: 0.85rem; font-weight: 600; color: #555; margin: 0 0 0.35rem 0; text-transform: uppercase; letter-spacing: 0.5px; }
.agency-representative p { font-size: 0.85rem; color: #444; margin: 0; }
.agency-representative .sub { color: #888; font-size: 0.8rem; margin-top: 0.1rem; }
.rep-contact { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }
.rep-contact a { font-size: 0.85rem; color: #007bff; text-decoration: none; }
.rep-contact a:hover { text-decoration: underline; }

/* Agent WhatsApp button */
.btn-whatsapp { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; padding: 0.6rem 1.25rem; background: #25D366; color: white; border-radius: 8px; text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: background 0.2s; }
.btn-whatsapp:hover { background: #1da851; }

/* Share */
.share-section { background: #f8f9fa; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.share-btn { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; transition: transform 0.2s, opacity 0.2s; text-decoration: none; padding: 0; }
.share-btn:hover { transform: scale(1.1); opacity: 0.9; }
.share-btn svg { width: 22px; height: 22px; }
.share-btn.whatsapp { background: #25D366; color: white; }
.share-btn.facebook { background: #1877F2; color: white; }
.share-btn.twitter { background: #000; color: white; }
.share-btn.instagram { background: #E4405F; color: white; }
.share-btn.tiktok { background: #000; color: white; }
.share-btn.email { background: #6c757d; color: white; }
.share-btn.copy { background: #007bff; color: white; }
.copy-feedback { margin-top: 0.75rem; color: #28a745; font-weight: 500; font-size: 0.9rem; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 4px; }
.lightbox-close { position: absolute; top: 1rem; right: 1.5rem; background: none; border: none; color: white; font-size: 2rem; cursor: pointer; z-index: 10; opacity: 0.7; }
.lightbox-close:hover { opacity: 1; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); color: white; border: none; width: 50px; height: 50px; border-radius: 50%; font-size: 2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; z-index: 10; }
.lightbox-nav:hover { background: rgba(255,255,255,0.3); }
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }
.lightbox-counter { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: 0.9rem; }

@media (max-width: 600px) {
    .main-photo { height: 280px; }
    .property-title { font-size: 1.2rem; }
    .property-price { font-size: 1.6rem; }
    .thumbnails-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
    .thumb-item img { height: 55px; }
    .lightbox-nav { width: 40px; height: 40px; font-size: 1.5rem; }
    .lightbox-prev { left: 0.5rem; }
    .lightbox-next { right: 0.5rem; }
    .lightbox-close { top: 0.5rem; right: 0.75rem; font-size: 1.5rem; }
}
</style>
@endsection