@extends('layouts.app')

@section('content')
    <section class="py-20 bg-gradient-to-br from-white to-blue-50 dark:from-gray-900 dark:to-gray-800">
        <div class="container max-w-3xl px-4 mx-auto text-center">
            {{-- Foto --}}
            <div class="relative w-36 h-36 mx-auto mb-6">
                <img src="{{ $personel->photo ? asset('storage/' . $personel->photo) : asset('images/default-avatar.png') }}"
                     alt="{{ $personel->name }}"
                     class="rounded-full object-cover w-full h-full shadow-lg ring-4 ring-[color:var(--primary-color)] transition duration-300 hover:scale-105">
            </div>

            {{-- Nama & Posisi --}}
            <h1 class="text-4xl font-bold text-gray-800 dark:text-white">{{ $personel->name }}</h1>
            <p class="mt-1 text-blue-600 dark:text-blue-400 text-sm uppercase tracking-wide font-medium">{{ $personel->position }}</p>

            {{-- Email --}}
            @if ($personel->email)
                <p class="mt-3 text-sm text-gray-500 dark:text-gray-400">
                    📧 <a href="mailto:{{ $personel->email }}" class="text-blue-600 hover:underline">{{ $personel->email }}</a>
                </p>
            @endif

            {{-- Bio --}}
            <div class="mt-6 text-left text-gray-700 dark:text-gray-300 leading-relaxed text-base">
                {{ $personel->bio ?? 'Belum ada deskripsi.' }}
            </div>

            {{-- Social Links --}}
            @php
                $links = $personel->social_links;

                if (is_string($links)) {
                    $decoded = json_decode($links, true);
                    $links = is_array($decoded) ? $decoded : null;
                }
            @endphp

            @if (is_array($links) && !empty($links))
                <div class="mt-8 flex justify-center space-x-5 text-2xl text-gray-400 dark:text-gray-500">
                    @foreach ($links as $platform => $url)
                        <a href="{{ $url }}" target="_blank" title="{{ ucfirst($platform) }}"
                           class="transition hover:text-[color:var(--primary-color)] dark:hover:text-white">
                            <i class="fab fa-{{ strtolower($platform) }}"></i>
                        </a>
                    @endforeach
                </div>
            @elseif (is_string($personel->social_links) && trim($personel->social_links) !== '')
                <div class="mt-8 text-sm text-gray-600 dark:text-gray-300 whitespace-pre-line">
                    {!! nl2br(e($personel->social_links)) !!}
                </div>
            @endif

            {{-- Tombol Kembali --}}
            <div class="mt-10">
                <a href="{{ route('frontend.personel.index') }}"
                   class="inline-block px-6 py-2 text-sm font-semibold text-white bg-[color:var(--primary-color)] rounded-full shadow hover:brightness-110 transition">
                    ← Kembali ke Daftar Personel
                </a>
            </div>
        </div>
    </section>
@endsection