@props([
    'title' => 'Ready to build infrastructure that simply works?',
    'text'  => 'Tell us what you need. We handle specification, sourcing, logistics, installation, and integration — so the final system performs.',
    'image' => 'images/partnership.jpg',
])

<section class="section">
    <div class="shell">
        <div class="theme-dark relative overflow-hidden rounded-3xl bg-night px-8 py-14 sm:px-14 sm:py-20">
            <img src="{{ asset($image) }}" alt="" aria-hidden="true" class="absolute inset-0 w-full h-full object-cover opacity-20">
            <div class="absolute inset-0 bg-gradient-to-r from-navy-900 via-navy-900/90 to-navy-900/55"></div>
            <div class="absolute inset-0 grid-bg opacity-40"></div>
            <div class="glow w-96 h-96 -right-24 -top-24" style="background: radial-gradient(circle, rgba(217,118,63,.45), transparent 70%);"></div>

            <div class="relative max-w-3xl">
                <p class="kicker mb-5">Let's talk</p>
                <h2 class="text-3xl sm:text-4xl lg:text-5xl font-semibold tracking-tight text-white">{{ $title }}</h2>
                <p class="mt-5 text-slate-200 text-lg leading-relaxed">{{ $text }}</p>
                <div class="mt-8 flex flex-wrap gap-3">
                    <a href="{{ route('quote') }}" class="btn btn-primary">Request a Quote <x-icon name="arrow" class="w-4 h-4"/></a>
                    <a href="{{ route('contact') }}" class="btn btn-light">Contact our team</a>
                </div>
            </div>
        </div>
    </div>
</section>