{{--
    Inner page hero — dark emerald with label, title, subtitle, CTAs
    Props:
      $label    - small label text above H1
      $title    - H1 text
      $subtitle - paragraph below H1
      $cta1     - primary button label
      $cta1url  - primary button url
      $cta2     - secondary button label (optional)
      $cta2url  - secondary button url
      $badge    - badge text (optional, e.g. "Multi-outlet")
--}}
@props([
    'label'   => '',
    'title'   => '',
    'subtitle'=> '',
    'cta1'    => 'Book a Demo',
    'cta1url' => null,
    'cta2'    => 'Explore Features',
    'cta2url' => null,
    'badge'   => null,
])

<section class="page-hero">
    <div class="container-site">
        <div class="max-w-4xl">
            @if($badge)
            <div class="mb-4">
                <span class="badge-teal bg-teal-900/60 text-teal-200 border border-teal-700">
                    {{ $badge }}
                </span>
            </div>
            @endif

            @if($label)
            <p class="page-hero-label">{{ $label }}</p>
            @endif

            <h1 class="page-hero-title text-balance">
                {!! $title !!}
            </h1>

            @if($subtitle)
            <p class="page-hero-subtitle text-pretty">
                {{ $subtitle }}
            </p>
            @endif

            <div class="mt-8 flex flex-col sm:flex-row gap-4">
                <a href="{{ $cta1url ?? route('book-demo') }}" class="btn-primary-lg">
                    {{ $cta1 }}
                    <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd"/>
                    </svg>
                </a>
                @if($cta2)
                <a href="{{ $cta2url ?? route('features.index') }}" class="btn-outline-white">
                    {{ $cta2 }}
                </a>
                @endif
            </div>
        </div>
    </div>
</section>