@extends('layouts.nova')

@push('head')
    <title>{{ $meta['title'] }}</title>
    <meta name="description" content="{{ $meta['description'] }}">
    <meta name="keywords"    content="{{ $meta['keywords'] }}">
    <link rel="canonical"    href="{{ $meta['canonical'] }}">

    {{-- Open Graph --}}
    <meta property="og:type"        content="website">
    <meta property="og:site_name"   content="Skinbase">
    <meta property="og:title"       content="{{ $meta['title'] }}">
    <meta property="og:description" content="{{ $meta['description'] }}">
    <meta property="og:url"         content="{{ $meta['canonical'] }}">
    @if(!empty($meta['og_image']))
        <meta property="og:image" content="{{ $meta['og_image'] }}">
        <meta property="og:image:type" content="image/webp">
    @endif

    {{-- Twitter --}}
    <meta name="twitter:card"        content="summary_large_image">
    <meta name="twitter:title"       content="{{ $meta['title'] }}">
    <meta name="twitter:description" content="{{ $meta['description'] }}">
    @if(!empty($meta['og_image']))
        <meta name="twitter:image" content="{{ $meta['og_image'] }}">
    @endif

    {{-- JSON-LD WebSite schema --}}
    @php
        $websiteSchema = [
            '@context' => 'https://schema.org',
            '@type'    => 'WebSite',
            'name'     => 'Skinbase',
            'url'      => url('/'),
            'description' => $meta['description'],
            'potentialAction' => [
                '@type'       => 'SearchAction',
                'target'      => url('/search') . '?q={search_term_string}',
                'query-input' => 'required name=search_term_string',
            ],
        ];
    @endphp
    <script type="application/ld+json">{!! json_encode($websiteSchema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG) !!}</script>

    {{-- Preload hero image for faster LCP --}}
    @if(!empty($props['hero']['thumb_lg']))
        <link rel="preload" as="image" href="{{ $props['hero']['thumb_lg'] }}">
    @elseif(!empty($props['hero']['thumb']))
        <link rel="preload" as="image" href="{{ $props['hero']['thumb'] }}">
    @endif
@endpush

@section('main-class', '')

@section('content')
    {{-- Inline props for the React component (avoids data-attribute length limits) --}}
    <script id="homepage-props" type="application/json">
        {!! json_encode($props, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP) !!}
    </script>

    <div id="homepage-root" class="min-h-screen">
        {{-- Loading skeleton (replaced by React on hydration) --}}
        <div class="flex min-h-[60vh] items-center justify-center">
            <div class="h-8 w-8 animate-spin rounded-full border-4 border-nova-500 border-t-transparent"></div>
        </div>
    </div>

    @vite(['resources/js/Pages/Home/HomePage.jsx'])
@endsection

