@extends('mini-index')
@section('title', 'VCard')

@section('content')
    <style>
        body {
            background: linear-gradient(135deg, #e8fdf5 0%, #d3f4eb 100%);
            font-family: 'Inter', sans-serif;
        }

        .vcard {
            max-width: 400px;
            width: 100%;
            border-radius: 20px;
            overflow: hidden;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }

        .vcard:hover {
            transform: translateY(-6px);
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
        }

        .vcard-header {
            background: linear-gradient(135deg, #198754, #20c997);
            color: #fff;
            text-align: center;
            padding: 2rem 1.5rem;
            position: relative;
        }

        .vcard-header img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.9);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        .vcard .name {
            font-size: 1.5rem;
            font-weight: 700;
        }

        .vcard .role {
            font-size: 0.95rem;
            opacity: 0.95;
        }

        .action-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .action-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.15);
        }

        .vcard-body {
            background: #fff;
            padding: 2rem;
            border-radius: 0 0 20px 20px;
        }

        .contact-list li {
            display: flex;
            align-items: center;
            margin-bottom: 0.75rem;
            color: #333;
        }

        .contact-list i {
            color: #198754;
            margin-right: 0.75rem;
            font-size: 1.1rem;
        }

        .social-links a {
            color: #198754;
            transition: all 0.3s;
        }

        .social-links a:hover {
            color: #0a6847;
            transform: scale(1.2);
        }

        .description {
            font-size: 0.9rem;
            color: #6c757d;
            line-height: 1.6;
        }
    </style>
    <div
        class="filigrane-logo position-fixed top-0 start-50 w-100 h-100 d-flex justify-content-center align-items-center pointer-events-none ">
        <img src="{{ asset('assets/images/logo.png') }}" alt="Logo" class="opacity-25 transition-opacity duration-1000"
            style="filter: grayscale(80%); transition: 0.5s;">
    </div>

    <div class="d-flex justify-content-center align-items-center py-5">
        <div class="vcard" data-aos="fade-up" data-aos-duration="1000">
            <!-- HEADER -->
            <div class="vcard-header" data-aos="zoom-in" data-aos-delay="200">
                <img src="{{ asset('assets/images/membres/' . $membre->image) }}" alt="Photo de {{ $membre->name }}"
                    data-aos="flip-up" data-aos-delay="400">
                <h2 class="name mt-3 mb-1" data-aos="fade-down" data-aos-delay="600">{{ $membre->name }}</h2>
                <p class="role mb-0" data-aos="fade-down" data-aos-delay="700">
                    <i class="bi bi-briefcase-fill me-1"></i>{{ $membre->fonction }}
                </p>
                <p class="small mb-0" data-aos="fade-down" data-aos-delay="800">
                    <i class="bi bi-building me-1"></i>{{ $membre->organisation }}
                </p>

                <div class="d-flex justify-content-center gap-3 mt-3" data-aos="zoom-in" data-aos-delay="900">
                    <a href="mailto:{{ $membre->email }}" class="action-btn"><i
                            class="bi bi-envelope-fill text-white"></i></a>
                    <a href="tel:{{ $membre->telephone }}" class="action-btn"><i
                            class="bi bi-telephone-fill text-white"></i></a>
                    <a href="https://maps.google.com?q={{ urlencode($membre->adresse) }}" target="_blank"
                        class="action-btn"><i class="bi bi-geo-alt-fill text-white"></i></a>
                    <a href="{{ route('membres.download', $membre->id) }}" class="action-btn"><i
                            class="bi bi-person-plus-fill text-white"></i></a>
                </div>
            </div>

            <!-- BODY -->
            <div class="vcard-body" data-aos="fade-up" data-aos-delay="400">
                <ul class="list-unstyled contact-list mb-4">
                    @if ($membre->email)
                        <li data-aos="fade-right" data-aos-delay="500"><i
                                class="bi bi-envelope-fill"></i>{{ $membre->email }}</li>
                    @endif
                    @if ($membre->telephone)
                        <li data-aos="fade-right" data-aos-delay="600"><i
                                class="bi bi-telephone-fill"></i>{{ $membre->telephone }}</li>
                    @endif
                    @if ($membre->adresse)
                        <li data-aos="fade-right" data-aos-delay="700"><i
                                class="bi bi-geo-alt-fill"></i>{{ $membre->adresse }}</li>
                    @endif
                    @if ($membre->site)
                        <li data-aos="fade-right" data-aos-delay="800"><i class="bi bi-globe"></i>{!! $membre->site !!}
                        </li>
                    @endif
                </ul>

                @if ($membre->reseaux)
                    <div class="social-links d-flex justify-content-center gap-3 mb-3" data-aos="zoom-in"
                        data-aos-delay="900">
                        @foreach ($membre->reseaux ?? [] as $icon => $link)
                            @if ($link)
                                <a href="{{ $link }}" target="_blank"><i
                                        class="bi bi-{{ $icon }} fs-5"></i></a>
                            @endif
                        @endforeach
                    </div>
                @endif

                @if ($membre->description)
                    <div class="text-center">
                        <p class="description">{!! $membre->description !!}</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection