@extends('layouts.nova')

@php($useUnifiedSeo = true)

@push('head')
    {{-- 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')
    @include('web.home.hero', ['artwork' => $props['hero'] ?? null])

    {{-- 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-[40vh]">
        {{-- Loading skeleton (replaced by React on hydration) --}}
        <div class="space-y-10 px-4 pt-10 sm:px-6 lg:px-8">
            <div class="h-14 rounded-2xl bg-nova-800/70"></div>
            <div class="grid gap-4 lg:grid-cols-4">
                <div class="aspect-video rounded-2xl bg-nova-800/70"></div>
                <div class="aspect-video rounded-2xl bg-nova-800/70"></div>
                <div class="aspect-video rounded-2xl bg-nova-800/70"></div>
                <div class="aspect-video rounded-2xl bg-nova-800/70"></div>
            </div>
        </div>
    </div>

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