{{-- Profile header: avatar + seal, name, headline, bio, meta, socials, CTAs. --}}
<header class="pf-header" data-header-cta>
  <span class="iq-avatar-wrap" style="align-self:flex-start">
    <x-iq.avatar :name="$h['name']" :src="$h['avatar_url']" :tint="$h['tint']" size="pf-avatar" ring />
  </span>
  <div>
    <div class="iq-row" style="gap:8px;flex-wrap:nowrap">
      <h1 class="pf-name pf-h">{{ $h['name'] }}</h1>
      @if ($h['identity_verified'])
        <span class="iq-tip-wrap" tabindex="0">{!! \App\Support\Icons::seal($h['identity_label'] ?? 'Identity verified') !!}<span class="iq-tip">{{ $h['identity_label'] }}</span></span>
      @endif
    </div>
    @if ($h['headline'])<div style="font-size:16px;font-weight:500;margin-top:4px">{{ $h['headline'] }}</div>@endif
    @if ($h['bio'])<p class="iq-sub pf-bio">{{ $h['bio'] }}</p>@endif
    @if ($h['location'] || $h['years_building'] || $h['website'])
    <div class="iq-meta" style="margin-top:12px">
      @if ($h['location'])<span class="iq-row" style="gap:4px"><x-iq.icon name="pin" size="sm" /> {{ $h['location'] }}</span>@endif
      @if ($h['location'] && $h['years_building'])<span class="sep"></span>@endif
      @if ($h['years_building'])<span>{{ $h['years_building'] }}</span>@endif
      @if ($h['website'])@if($h['location'] || $h['years_building'])<span class="sep"></span>@endif<a href="{{ $h['website'] }}" {!! $target !!} class="iq-num" style="font-size:12px">{{ $h['website_display'] }}</a>@endif
    </div>
    @endif
  </div>

  @if ($p['socials'])
  <div class="iq-row" style="gap:8px">
    @foreach ($p['socials'] as $social)
      <a class="iq-social" href="{{ $social['href'] }}" {!! $target !!}>{{ $social['label'] }} <x-iq.icon name="arrowUpRight" size="sm" /></a>
    @endforeach
  </div>
  @endif

  @if ($p['contact']['email_href'] || $p['contact']['booking_href'])
  <div class="iq-row pf-ctas" style="gap:8px;margin-top:4px">
    @if ($p['contact']['email_href'])
      <a class="iq-btn {{ $ctaClass }} pf-cta pf-cta-main" href="{{ $p['contact']['email_href'] }}" {!! $target !!}><x-iq.icon name="mail" /> Contact me</a>
    @endif
    @if ($p['contact']['booking_href'])
      <a class="iq-btn iq-btn-secondary pf-cta" href="{{ $p['contact']['booking_href'] }}" {!! $target !!}><x-iq.icon name="calendar" /> Book a call</a>
    @endif
  </div>
  @endif
</header>