{{--
    DiscoverLayout — compact header + mode pills.
    Used by /discover/* pages.

    Expected variables:
      $page_title, $description, $icon, $section
      Content via @yield('discover-content')
--}}
@extends('layouts.nova')

@push('head')
    @isset($page_canonical)
        <link rel="canonical" href="{{ $page_canonical }}" />
    @endisset
    <meta name="robots" content="{{ $page_robots ?? 'index,follow' }}">
    <meta property="og:type"        content="website" />
    <meta property="og:url"         content="{{ $page_canonical ?? url()->current() }}" />
    <meta property="og:title"       content="{{ $page_title ?? 'Discover — Skinbase' }}" />
    <meta property="og:description" content="{{ $description ?? '' }}" />
    <meta property="og:site_name"   content="Skinbase" />
@endpush

@section('content')

{{-- Compact header --}}
<div class="px-6 pt-10 pb-6 md:px-10">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Discover</p>
            <h1 class="text-3xl font-bold text-white leading-tight flex items-center gap-3">
                <i class="fa-solid {{ $icon ?? 'fa-compass' }} text-sky-400 text-2xl"></i>
                {{ $page_title ?? 'Discover' }}
            </h1>
            @isset($description)
            <p class="mt-1 text-sm text-white/50">{{ $description }}</p>
            @endisset
        </div>

        {{-- Mode pills --}}
        @include('web.discover._nav', ['section' => $section ?? ''])
    </div>
</div>

{{-- Page body --}}
@yield('discover-content')

@endsection