@extends('web.layouts.web-master')

@php
    $brandConfig = config('domains.domains.'.config('app.theme').'.brand', []);
    $brandName = $brandConfig['name'] ?? 'businessportal';
    $brandAccent = $brandConfig['accent'] ?? '24';
@endphp

@section('title', __('web.search.meta_title', ['brand' => $brandName.$brandAccent]))
@section('meta_description', __('web.search.meta_description'))

@section('hreflang')
    <link rel="alternate" hreflang="de" href="{{ url('/de/suche') }}">
    <link rel="alternate" hreflang="en" href="{{ url('/en/suche') }}">
    <link rel="alternate" hreflang="x-default" href="{{ url('/de/suche') }}">
@endsection

@section('content')
    <x-web.site-header />

    <main class="bg-bg text-ink">
        {{-- Breadcrumb --}}
        <div class="border-b border-bg-rule">
            <div class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 py-2.5 flex items-center gap-2 text-[11.5px] text-ink-3">
                <a href="{{ route('web.home') }}" class="hover:text-ink transition-colors">{{ $brandName }}{{ $brandAccent }}</a>
                <span class="text-ink-4" aria-hidden="true">›</span>
                <span class="text-ink font-semibold">{{ __('web.header.search_eyebrow') }}</span>
            </div>
        </div>

        {{-- Masthead --}}
        <section class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 pt-8 lg:pt-10">
            <div class="max-w-[680px]">
                <div class="eyebrow mb-3">{{ __('web.search.eyebrow') }}</div>
                <h1 class="font-serif text-[36px] sm:text-[46px] lg:text-[50px] font-semibold m-0 mb-4 leading-[1.05] tracking-[-1px] text-ink text-balance">
                    {{ __('web.header.search_title') }}
                </h1>
                <p class="font-serif text-[16px] leading-[1.55] m-0 text-ink-2">
                    {{ __('web.search.intro') }}
                </p>
            </div>
            <hr class="rule-strong mt-8">
        </section>

        {{-- Suche + Sidebar --}}
        <section class="max-w-layout mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-16 grid gap-9 lg:grid-cols-[1.7fr_1fr]">
            <div>
                <livewire:web.search :portal="$portal" :language="$language" />
            </div>

            <aside class="flex flex-col gap-9">
                <x-web.most-read :releases="$mostReadReleases ?? []" />
                <x-web.publisher-cta />
            </aside>
        </section>
    </main>

    <x-web.site-footer />
@endsection