@php
    $logo = $parceiro->galleryLogo;
@endphp

@extends('v2-portal::app-layout', [
    'pageTitle'             => 'Preview — ' . $parceiro->name,
    'fullWidthMain'         => true,
    'showHeader'            => false,
    'showMainHeader'        => false,
    'showMainFooter'        => false,
    'showFooter'            => false,
    'showAccessibilityBar'  => false,
    'showMainLeftArea'      => false,
    'showMainRightArea'     => false,
])

@section('main-section-area')

<style>
.preview-notice {
    background: #fff3cd;
    color: #856404;
    text-align: center;
    padding: 10px;
    font-size: var(--text-base);
    font-weight: 600;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    border-top: 2px solid #f0c27b;
}
.preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 44px;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
}
.preview-modal-card {
    background: #fff;
    border-radius: 16px;
    max-width: 560px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 25px 80px rgba(0,0,0,.3);
}
.preview-modal-card .modal-header {
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem 1rem 0;
    border: none;
}
.preview-modal-card .modal-body {
    padding: 0 2rem 2rem;
    text-align: center;
}
</style>

{{-- Simulated portal background --}}
<section class="team-section section-padding section-bg" style="min-height: 100vh;">
    <div class="container">
        <div class="text-center py-4">
            <i class="bi bi-people display-1 text-muted d-block mb-2" style="opacity: 0.2;"></i>
            <p class="text-muted small" style="opacity: 0.4;">Página de Parceiros — preview do modal</p>
        </div>
    </div>
</section>

{{-- Simulated modal --}}
<div class="preview-overlay">
    <div class="preview-modal-card shadow">
        <div class="modal-header">
            <button type="button" class="btn-close" disabled aria-label="Fechar"></button>
        </div>
        <div class="modal-body">
            @if($logo && $logo->file_path)
                @include('v2-service-media::components.picture', [
                    'originalPath' => $logo->file_path,
                    'variants'     => $logo->variants ?? [],
                    'alt'          => $logo->alt_text ?: $parceiro->name,
                    'class'        => 'rounded mb-3',
                    'style'        => 'width: 160px; height: 160px; object-fit: contain; margin: 0 auto;',
                    'lazy'         => false,
                ])
            @else
                <div class="d-flex align-items-center justify-content-center mx-auto mb-3 rounded bg-light"
                     style="width: 160px; height: 160px;">
                    <i class="bi bi-building display-3 text-muted"></i>
                </div>
            @endif

            <h3 class="h4 fw-bold mb-1" style="color: var(--tenant-primary, #1075ad);">{{ $parceiro->name }}</h3>

            @if($parceiro->address)
                <p class="text-muted small mb-2">
                    <i class="bi bi-geo-alt me-1"></i> {{ $parceiro->address }}
                    @if($parceiro->google_maps_url)
                        <br>
                        <a href="{{ $parceiro->google_maps_url }}" target="_blank" rel="noopener noreferrer" class="text-decoration-none small">
                            <i class="bi bi-map"></i> Ver no mapa
                        </a>
                    @endif
                </p>
            @endif

            <hr class="my-3" style="width: 50px; margin-inline: auto; border-color: #f7941d; border-width: 2px; opacity: 1;">

            @if(!empty($htmlContent))
                <div class="text-muted mb-3" style="line-height: 1.8; text-align: center; font-size: var(--text-base);">
                    {!! $htmlContent !!}
                </div>
            @endif

            @if($parceiro->url || $parceiro->linkedin_url || $parceiro->instagram_url || $parceiro->facebook_url)
                <div class="d-flex justify-content-center gap-3 mt-3">
                    @if($parceiro->url)
                        <a href="{{ $parceiro->url }}" target="_blank" rel="noopener noreferrer"
                           class="btn btn-sm btn-outline-primary rounded-circle d-flex align-items-center justify-content-center"
                           style="width: 40px; height: 40px;" title="Site">
                            <i class="bi bi-globe2"></i>
                        </a>
                    @endif
                    @if($parceiro->linkedin_url)
                        <a href="{{ $parceiro->linkedin_url }}" target="_blank" rel="noopener noreferrer"
                           class="btn btn-sm btn-outline-primary rounded-circle d-flex align-items-center justify-content-center"
                           style="width: 40px; height: 40px;" title="LinkedIn">
                            <i class="bi bi-linkedin"></i>
                        </a>
                    @endif
                    @if($parceiro->instagram_url)
                        <a href="{{ $parceiro->instagram_url }}" target="_blank" rel="noopener noreferrer"
                           class="btn btn-sm btn-outline-primary rounded-circle d-flex align-items-center justify-content-center"
                           style="width: 40px; height: 40px;" title="Instagram">
                            <i class="bi bi-instagram"></i>
                        </a>
                    @endif
                    @if($parceiro->facebook_url)
                        <a href="{{ $parceiro->facebook_url }}" target="_blank" rel="noopener noreferrer"
                           class="btn btn-sm btn-outline-primary rounded-circle d-flex align-items-center justify-content-center"
                           style="width: 40px; height: 40px;" title="Facebook">
                            <i class="bi bi-facebook"></i>
                        </a>
                    @endif
                </div>
            @endif
        </div>
    </div>
</div>

<div class="preview-notice">
    <i class="bi bi-eye me-1"></i> Preview — o modal é exibido sobre a página de Parceiros do portal
</div>
@endsection