{{--
  Public profile (design: Screens · Public profile, mobile + desktop).
  Renders a presented snapshot ($p). Used verbatim by the live page and the
  builder preview ($preview = true), so there is one implementation.
--}}
@extends('layouts.base')

@php
  $h = $p['header'];
  $t = $p['theme'];
  $seo = $p['seo'];
  $ctaClass = $t['button_style'] === 'brand' ? 'iq-btn-primary' : 'iq-btn-ink';
  $target = $preview ? 'target=_blank rel=noopener' : 'rel=noopener';
@endphp

@section('title', $seo['title'])
@section('description', $seo['description'])
@if ($t['mode'] !== 'auto') @section('theme', $t['mode']) @endif
@if ($preview) @section('noindex', true) @endif
@section('body_class', 'pf')

@push('head')
<style>{!! $p['theme_css'] !!}</style>
@if ($t['mode'] === 'auto')
<script nonce="{{ \Illuminate\Support\Facades\Vite::cspNonce() }}">if (matchMedia('(prefers-color-scheme: dark)').matches) document.documentElement.dataset.theme = 'dark';</script>
@endif
@unless ($preview)
<link rel="canonical" href="{{ $p['url'] }}">
<meta property="og:type" content="profile">
<meta property="og:title" content="{{ $seo['title'] }}">
<meta property="og:description" content="{{ $seo['description'] }}">
<meta property="og:url" content="{{ $p['url'] }}">
<meta property="og:site_name" content="InLynq">
@if ($seo['image'])<meta property="og:image" content="{{ $seo['image'] }}">@endif
<meta property="profile:username" content="{{ $p['username'] }}">
<meta name="twitter:card" content="{{ $seo['image'] ? 'summary_large_image' : 'summary' }}">
<meta name="twitter:title" content="{{ $seo['title'] }}">
<meta name="twitter:description" content="{{ $seo['description'] }}">
<script type="application/ld+json" nonce="{{ \Illuminate\Support\Facades\Vite::cspNonce() }}">{!! json_encode(array_filter([
  '@context' => 'https://schema.org',
  '@type' => 'ProfilePage',
  'url' => $p['url'],
  'mainEntity' => array_filter([
    '@type' => 'Person',
    'name' => $h['name'],
    'alternateName' => $p['username'],
    'description' => $h['bio'] ?: $h['headline'],
    'jobTitle' => $h['headline'],
    'image' => $seo['image'],
    'homeLocation' => $h['location'] ? ['@type' => 'Place', 'name' => $h['location']] : null,
    'sameAs' => $seo['same_as'] ?: null,
    'worksFor' => collect(collect($p['sections'])->firstWhere('type', 'companies')['data']['items'] ?? [])->map(fn ($c) => ['@type' => 'Organization', 'name' => $c['name']])->values()->all() ?: null,
  ]),
]), JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_AMP) !!}</script>
@endunless
@endpush

@section('body')
<div class="pf-page" data-font="{{ $t['font'] }}" data-cards="{{ $t['card_style'] }}" data-layout="{{ $t['layout'] }}" @if($preview) data-preview @endif>

  @if ($preview)
  <div class="pf-preview-bar"><x-iq.icon name="eye" size="sm" /> Preview · this is how your profile will look when published</div>
  @endif

  {{-- Top strip: compact sticky bar on mobile, URL strip on desktop --}}
  <div class="pf-top">
    <span class="iq-urlpill" style="background:transparent;border:0;padding:0">{!! \App\Support\Icons::mark(20) !!}<span class="pf-top-handle">{{ $p['username'] }}</span><span class="pf-top-url">{{ $p['url_display'] }}</span></span>
    <div class="iq-row" style="gap:4px">
      <button type="button" class="iq-btn iq-btn-quiet iq-btn-sm pf-top-copy" data-copy="{{ $p['url'] }}"><x-iq.icon name="copy" /> Copy link</button>
      <button type="button" class="iq-btn iq-btn-quiet iq-btn-icon iq-btn-sm pf-top-share" data-share="{{ $p['url'] }}" data-share-title="{{ $h['name'] }}" aria-label="Share"><x-iq.icon name="arrowUpRight" /></button>
      @if ($p['branding'])
      <a class="iq-btn iq-btn-secondary iq-btn-sm pf-top-growth" href="{{ route('register') }}">Create your own InLynq</a>
      @endif
    </div>
  </div>

  @if ($p['is_demo'])
  <div class="pf-demo"><span class="iq-badge iq-badge-warning"><span class="dot"></span>Demo profile</span> Sample data for development. Not a real person.</div>
  @endif

  <div class="pf-layout">
    <aside class="pf-aside">
      @include('profile.partials.header')

      @if ($p['verified'])
      <div class="iq-stack pf-desktop" style="gap:8px">
        <div class="iq-overline">Verified</div>
        @foreach ($p['verified'] as $label)
          <span class="iq-verify" style="align-self:flex-start">{!! \App\Support\Icons::seal() !!} {{ $label }}</span>
        @endforeach
      </div>
      @endif

      @if (count($p['sections']) > 1)
      <nav class="iq-stack pf-desktop pf-index" style="gap:2px;font-size:14px" aria-label="Sections">
        @foreach ($p['sections'] as $s)
          <a class="iq-row" href="#{{ $s['anchor'] }}" data-index-link="{{ $s['anchor'] }}" style="gap:12px;height:32px"><span class="iq-num" style="font-size:11px">{{ $s['index'] }}</span>{{ $s['title'] }}</a>
        @endforeach
      </nav>
      @endif
    </aside>

    <main class="pf-main">
      @forelse ($p['sections'] as $s)
        <section class="iq-sec" id="{{ $s['anchor'] }}" data-section="{{ $s['type'] }}">
          @include('profile.sections.'.$s['type'], ['s' => $s, 'd' => $s['data']])
        </section>
      @empty
        <p class="iq-muted">Nothing here yet.</p>
      @endforelse

      <footer class="iq-row pf-foot">
        <span class="iq-muted" style="font-size:13px">{{ $p['url_display'] }}</span>
        <span class="iq-row" style="gap:16px">
          @unless ($preview)
          <button type="button" class="iq-muted pf-linkbtn" data-dialog-open="report-dialog">Report</button>
          @endunless
          @if ($p['branding'])
          <a class="iq-row iq-muted" style="gap:6px;font-size:13px" href="{{ route('home') }}">{!! \App\Support\Icons::mark(16) !!}Made with InLynq</a>
          @endif
        </span>
      </footer>
    </main>
  </div>

  {{-- Sticky mobile CTA: appears once the header CTA scrolls off --}}
  @if ($p['contact']['email_href'] || $p['contact']['booking_href'])
  <div class="iq-bottombar pf-bottombar" data-sticky-cta hidden>
    @if ($p['contact']['email_href'])
      <a class="iq-btn {{ $ctaClass }} iq-btn-lg" style="flex:1" href="{{ $p['contact']['email_href'] }}" {!! $target !!}><x-iq.icon name="mail" /> Contact {{ $p['contact']['first_name'] }}</a>
    @endif
    @if ($p['contact']['booking_href'])
      <a class="iq-btn iq-btn-secondary iq-btn-lg {{ $p['contact']['email_href'] ? 'iq-btn-icon' : '' }}" style="{{ $p['contact']['email_href'] ? '' : 'flex:1' }}" href="{{ $p['contact']['booking_href'] }}" {!! $target !!} aria-label="Book a call"><x-iq.icon name="calendar" />@unless($p['contact']['email_href']) Book a call @endunless</a>
    @endif
  </div>
  @endif
</div>

@unless ($preview)
<x-iq.modal id="report-dialog" title="Report this profile?">
  <form class="iq-stack" data-report-form action="{{ route('reports.store') }}" style="gap:16px">
    <input type="hidden" name="username" value="{{ $p['username'] }}">
    <p style="margin:0">Tell us what's wrong. Reports are reviewed by the InLynq team and the owner isn't told who sent them.</p>
    <div class="iq-field"><label class="iq-label" for="report-reason">Reason</label>
      <select class="iq-select" id="report-reason" name="reason" required>
        @foreach (\App\Enums\ReportReason::options() as $value => $label)<option value="{{ $value }}">{{ $label }}</option>@endforeach
      </select></div>
    <div class="iq-field"><label class="iq-label" for="report-details">Details <span class="opt">Optional</span></label><textarea class="iq-textarea" id="report-details" name="details" maxlength="2000"></textarea></div>
    <div class="iq-field"><label class="iq-label" for="report-email">Your email <span class="opt">Optional</span></label><input class="iq-input" type="email" id="report-email" name="email" placeholder="So we can follow up"></div>
    <p class="iq-help" data-report-result hidden></p>
    <div class="iq-row" style="justify-content:flex-end"><button type="button" class="iq-btn iq-btn-quiet" data-dialog-close>Cancel</button><button class="iq-btn iq-btn-primary">Send report</button></div>
  </form>
</x-iq.modal>
@endunless
<div id="toasts" class="app-toasts" aria-live="polite"></div>
@endsection