@extends('layouts.nova')

@section('meta-description', $meta['description'])
@section('meta-keywords', $meta['keywords'])

@push('head')
    <title>{{ $meta['title'] }}</title>
    <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')
    @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