{{--
    CTA Band
    Props:
      $title   - headline text
      $sub     - subheading (optional)
      $cta1    - primary CTA label (default: Book a Demo)
      $cta1url - primary CTA url
      $cta2    - secondary CTA label (optional)
      $cta2url - secondary CTA url
--}}
@props([
    'title'   => 'Ready to see PhyloPOS in action?',
    'sub'     => 'Tell us your business type and outlet count. We will show you exactly what PhyloPOS can do for your operation.',
    'cta1'    => 'Book a Demo',
    'cta1url' => null,
    'cta2'    => 'Talk to Sales',
    'cta2url' => null,
])

<section class="cta-band section">
    <div class="container-site text-center">
        <p class="section-label text-teal-300 justify-center mb-3">Get Started</p>
        <h2 class="heading-lg text-white max-w-3xl mx-auto text-balance">
            {{ $title }}
        </h2>
        @if($sub)
        <p class="mt-5 text-lg text-emerald-200 max-w-2xl mx-auto leading-relaxed">
            {{ $sub }}
        </p>
        @endif
        <div class="mt-10 flex flex-col sm:flex-row items-center justify-center 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('contact') }}" class="btn-outline-white">
                {{ $cta2 }}
            </a>
            @endif
        </div>
        <p class="mt-6 text-sm text-emerald-300">
            No credit card required &nbsp;·&nbsp; Response within one business day
        </p>
    </div>
</section>