@extends('layouts.site')
@section('title', ($speaker->meta_title ?: $speaker->name).' — Faith & Future Summit')
@section('meta_description', $speaker->meta_description ?: Str::limit(strip_tags($speaker->bio), 160))
@section('og_image', $speaker->og_image ? asset('storage/'.$speaker->og_image) : ($speaker->photo ? asset('storage/'.$speaker->photo) : null))

@section('content')

{{-- Hero --}}
<section class="relative pt-28 pb-12 md:py-32 px-margin-mobile overflow-hidden">
  <div class="absolute inset-0 z-0">
    <div class="absolute top-0 right-0 h-96 w-96 rounded-full bg-primary/5 blur-3xl"></div>
    <div class="absolute bottom-0 left-1/4 h-64 w-64 rounded-full bg-tertiary/5 blur-3xl"></div>
  </div>
  <div class="max-w-6xl mx-auto relative z-10">
    <a href="{{ route('speakers.index') }}" class="inline-flex items-center gap-2 text-on-surface-variant hover:text-white transition-colors text-sm mb-8 reveal">
      <span class="material-symbols-outlined text-sm">arrow_back</span> All Speakers
    </a>
    <div class="grid md:grid-cols-12 gap-8 md:gap-12 items-center reveal">
      <div class="md:col-span-4 lg:col-span-3">
        <div class="relative">
          @if($speaker->photo)
          <img src="{{ asset('storage/'.$speaker->photo) }}" alt="{{ $speaker->name }}" class="aspect-square w-full rounded-2xl border border-border-subtle object-cover shadow-2xl"/>
          @else
          <div class="aspect-square w-full rounded-2xl border border-border-subtle bg-surface-elevation-1 grid place-items-center">
            <span class="font-display-xl text-6xl font-bold text-muted/30">{{ strtoupper(mb_substr($speaker->name, 0, 1)) }}</span>
          </div>
          @endif
          @if($speaker->is_featured)
          <span class="absolute -top-2 -right-2 px-3 py-1 bg-primary text-white text-[10px] font-bold rounded-full uppercase tracking-widest">Featured</span>
          @endif
        </div>
      </div>
      <div class="md:col-span-8 lg:col-span-9">
        @if($speaker->country)
        <span class="inline-flex items-center gap-2 text-sm text-on-surface-variant mb-3">
          <span class="material-symbols-outlined text-primary text-sm">location_on</span> {{ $speaker->country }}
        </span>
        @endif
        <h1 class="font-display-xl text-3xl md:text-5xl text-white mb-4 leading-tight">{{ $speaker->name }}</h1>
        @if($speaker->role)
        <p class="text-lg text-tertiary mb-6 font-medium">{{ $speaker->role }}</p>
        @endif
        @if($speaker->socials)
        <div class="flex flex-wrap gap-2">
          @foreach($speaker->socials as $platform => $url)
          @if($url)
          <a href="{{ $url }}" target="_blank" rel="noopener" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-surface-elevation-1 border border-border-subtle text-sm text-on-surface-variant hover:border-primary hover:text-white transition-all">
            @if($platform === 'facebook')<svg class="w-4 h-4" 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($platform === 'instagram')<svg class="w-4 h-4" 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($platform === 'linkedin')<svg class="w-4 h-4" 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.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 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($platform === 'youtube')<svg class="w-4 h-4" 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>
            @endif
            <span class="capitalize">{{ $platform }}</span>
          </a>
          @endif
          @endforeach
        </div>
        @endif
      </div>
    </div>
  </div>
</section>

{{-- Bio --}}
@if($speaker->bio)
<section class="max-w-4xl mx-auto px-margin-mobile pb-stack-lg reveal">
  <div class="rounded-3xl bg-surface-elevation-1 border border-border-subtle p-8 md:p-12">
    <h2 class="font-headline-lg text-2xl text-white mb-6 flex items-center gap-3">
      <span class="w-8 h-px bg-primary"></span> About {{ explode(' ', $speaker->name)[0] }}
    </h2>
    <div class="prose prose-invert max-w-none text-on-surface-variant leading-relaxed text-[17px]">
      {!! $speaker->bio !!}
    </div>
  </div>
</section>
@endif

{{-- Profile Facts --}}
@php $hasProfileFacts = $speaker->country || $speaker->organization || $speaker->edition_attended || $speaker->topic_area || $speaker->socials @endphp
@if($hasProfileFacts)
<section class="max-w-4xl mx-auto px-margin-mobile pb-stack-lg reveal">
  <div class="rounded-3xl bg-surface-elevation-1 border border-border-subtle p-8 md:p-12">
    <h2 class="font-headline-lg text-2xl text-white mb-8 flex items-center gap-3">
      <span class="w-8 h-px bg-primary"></span> Profile Facts
    </h2>
    <div class="grid grid-cols-2 md:grid-cols-3 gap-6">
      @if($speaker->country)
      <div>
        <span class="text-xs font-bold tracking-widest uppercase text-primary mb-1.5 block">Country</span>
        <span class="text-white text-sm font-medium">{{ $speaker->country }}</span>
      </div>
      @endif
      @if($speaker->organization)
      <div>
        <span class="text-xs font-bold tracking-widest uppercase text-primary mb-1.5 block">Organization</span>
        <span class="text-white text-sm font-medium">{{ $speaker->organization }}</span>
      </div>
      @endif
      @if($speaker->edition_attended)
      <div>
        <span class="text-xs font-bold tracking-widest uppercase text-primary mb-1.5 block">Edition Attended</span>
        <span class="text-white text-sm font-medium">{{ $speaker->edition_attended }}</span>
      </div>
      @endif
      @if($speaker->topic_area)
      <div>
        <span class="text-xs font-bold tracking-widest uppercase text-primary mb-1.5 block">Topic Area</span>
        <span class="text-white text-sm font-medium">{{ $speaker->topic_area }}</span>
      </div>
      @endif
      @if($speaker->socials)
      @php $hasSocials = collect($speaker->socials)->filter()->isNotEmpty() @endphp
      @if($hasSocials)
      <div class="col-span-2 md:col-span-3 pt-4" style="border-top:1px solid rgba(245,237,220,0.08)">
        <span class="text-xs font-bold tracking-widest uppercase text-primary mb-3 block">Social Links</span>
        <div class="flex flex-wrap gap-2">
          @foreach($speaker->socials as $platform => $url)
          @if($url)
          <a href="{{ $url }}" target="_blank" rel="noopener" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-surface-elevation-2 border border-border-subtle text-sm text-on-surface-variant hover:border-primary hover:text-white transition-all">
            @if($platform === 'facebook')<svg class="w-4 h-4" 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($platform === 'instagram')<svg class="w-4 h-4" 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($platform === 'linkedin')<svg class="w-4 h-4" 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.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 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($platform === 'youtube')<svg class="w-4 h-4" 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($platform === 'x' || $platform === 'twitter')<svg class="w-4 h-4" 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($platform === 'website')<span class="material-symbols-outlined text-sm">language</span>
            @endif
            <span class="capitalize">{{ $platform === 'x' ? 'X' : ($platform === 'website' ? 'Website' : $platform) }}</span>
          </a>
          @endif
          @endforeach
        </div>
      </div>
      @endif
      @endif
    </div>
  </div>
</section>
@endif

{{-- Summit Appearances --}}
@if($speaker->events->isNotEmpty())
<section class="max-w-6xl mx-auto px-margin-mobile pb-stack-lg reveal">
  <h2 class="font-headline-lg text-headline-lg text-white mb-8 text-center">Summit Appearances</h2>
  <div class="grid md:grid-cols-2 gap-5">
    @foreach($speaker->events as $ev)
    <a href="{{ $ev->detailUrl }}" class="group flex gap-5 p-5 rounded-2xl bg-surface-elevation-1 border border-border-subtle hover:border-primary/40 transition-all">
      @if($ev->card_image)
      <img src="{{ asset('storage/'.$ev->card_image) }}" alt="{{ $ev->title }}" class="w-24 h-24 rounded-xl object-cover flex-shrink-0"/>
      @endif
      <div class="min-w-0 flex-1">
        @if($ev->edition_label)<span class="text-xs text-primary font-label-caps tracking-widest uppercase">{{ $ev->edition_label }}</span>@endif
        <h3 class="font-bold text-white group-hover:text-primary transition-colors mt-1">{{ $ev->title }}</h3>
        @if($ev->starts_at)
        <p class="text-on-surface-variant text-sm mt-2 flex items-center gap-1.5">
          <span class="material-symbols-outlined text-xs">calendar_today</span> {{ $ev->starts_at->format('d M Y') }}{{ $ev->city ? ' · '.$ev->city : '' }}
        </p>
        @endif
      </div>
      <span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary group-hover:translate-x-1 transition-all self-center">arrow_forward</span>
    </a>
    @endforeach
  </div>
</section>
@endif

{{-- Related / Other Speakers --}}
@php
$related = collect();
if ($speaker->events->isNotEmpty()) {
    $eventIds = $speaker->events->pluck('id');
    $related = \App\Models\Speaker::where('speakers.id', '!=', $speaker->id)
        ->whereHas('events', fn($q) => $q->whereIn('events.id', $eventIds))
        ->orderByDesc('is_featured')->orderBy('sort_order')->take(4)->get();
}
if ($related->isEmpty()) {
    $related = \App\Models\Speaker::where('speakers.id', '!=', $speaker->id)
        ->orderByDesc('is_featured')->orderBy('sort_order')->take(4)->get();
}
@endphp
@if($related->isNotEmpty())
<section class="max-w-7xl mx-auto px-margin-mobile pb-stack-xl reveal">
  <h2 class="font-headline-lg text-headline-lg text-white mb-8">Related / Other Speakers</h2>
  <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
    @foreach($related as $sp)
    <div class="rounded-2xl border border-border-subtle bg-surface-elevation-1 overflow-hidden group hover:border-primary/40 transition-all">
      <a href="{{ route('speakers.show', $sp) }}" class="block">
        @if($sp->photo)
        <img src="{{ asset('storage/'.$sp->photo) }}" alt="{{ $sp->name }}" class="aspect-square w-full object-cover transition duration-300 group-hover:scale-105"/>
        @else
        <div class="aspect-square w-full bg-surface-container grid place-items-center">
          <span class="material-symbols-outlined text-5xl text-muted/40">person</span>
        </div>
        @endif
      </a>
      <div class="p-5">
        <a href="{{ route('speakers.show', $sp) }}">
          <h3 class="font-bold text-white group-hover:text-primary transition-colors">{{ $sp->name }}</h3>
        </a>
        <p class="mt-1 text-sm text-on-surface-variant">
          {{ collect([$sp->country, $sp->role, $sp->edition_attended])->filter()->join(' · ') }}
        </p>
        <a href="{{ route('speakers.show', $sp) }}" class="mt-3 inline-block text-xs font-semibold text-primary group-hover:translate-x-1 transition-transform">View Profile →</a>
      </div>
    </div>
    @endforeach
  </div>
</section>
@endif

@endsection