@php
    // Usage: @include('partials.page-hero', ['eyebrow' => 'Company', 'title' => 'About Yatra Card', 'subtitle' => '...'])
    $crumbTitle = $title ?? 'Yatra Card';
@endphp

<section class="relative overflow-hidden bg-gradient-to-b from-blue-50 via-white to-white pt-32 pb-16 dark:from-ink dark:via-ink dark:to-ink lg:pt-40 lg:pb-20">
    <div class="pointer-events-none absolute -top-24 -right-24 h-80 w-80 rounded-full bg-primary/10 blur-3xl dark:bg-primary/20"></div>
    <div class="pointer-events-none absolute -bottom-24 -left-24 h-72 w-72 rounded-full bg-secondary/10 blur-3xl dark:bg-secondary/15"></div>

    <div class="relative mx-auto max-w-4xl px-6 text-center">
        <nav class="reveal mb-5 flex items-center justify-center gap-2 text-xs font-medium text-slate-400 dark:text-slate-500">
            <a href="/" class="transition hover:text-primary dark:hover:text-secondary">Home</a>
            <i class="fa-solid fa-chevron-right text-[8px]"></i>
            <span class="text-slate-600 dark:text-slate-300">{{ $crumbTitle }}</span>
        </nav>

        @isset($eyebrow)
            <p class="reveal mb-3 text-xs font-bold uppercase tracking-[0.25em] text-secondary">{{ $eyebrow }}</p>
        @endisset

        <h1 class="reveal font-heading text-4xl font-extrabold leading-tight tracking-tight text-slate-900 dark:text-white sm:text-5xl">
            {{ $title }}
        </h1>

        @isset($subtitle)
            <p class="reveal mx-auto mt-5 max-w-2xl text-base leading-relaxed text-slate-600 dark:text-slate-400 sm:text-lg">
                {{ $subtitle }}
            </p>
        @endisset
    </div>
</section>