@extends('layouts.public')
@section('content')
<x-page-hero kicker="Buy the work" title="Offers" lede="A scan, a 90-day installation, a year of governance, or one urgent domain." :crumbs="$crumbs" />
<section class="mx-auto max-w-6xl px-5 py-16 lg:py-20">
    <p class="kicker">Four ways in</p>
    <h2 class="section-title mt-3 max-w-2xl">Start with the scan, or buy the work you already know.</h2>
    <div class="mt-10 grid gap-4 lg:grid-cols-3">
        @foreach($offers as $offer)
            @if($loop->first)
                <a href="{{ route('offers.show', $offer) }}" data-track="offer_click" data-offer="{{ $offer->slug }}" class="offer-feature group lg:col-span-3 lg:grid lg:grid-cols-[auto_1fr_auto] lg:items-end lg:gap-10">
                    <span class="text-sm font-semibold tracking-[0.18em] text-[#c4a06a]">0{{ $loop->iteration }}</span>
                    <span>
                        <span class="block text-xs uppercase tracking-[0.16em] text-cream/50">{{ $offer->duration }} · start here</span>
                        <span class="mt-2 block text-3xl font-semibold tracking-tight sm:text-4xl">{{ $offer->title }}</span>
                        <span class="mt-3 block max-w-2xl text-sm leading-6 text-cream/70">{{ $offer->summary }}</span>
                        <span class="mt-4 block text-sm font-semibold text-[#c4a06a]">{{ ($showPrices && $offer->price_from) ? 'PKR '.number_format($offer->price_from).'–'.number_format($offer->price_to) : 'Range on request' }}</span>
                    </span>
                    <span class="mt-6 inline-flex items-center gap-2 text-sm font-semibold lg:mt-0">See the deliverables <i data-lucide="arrow-right" class="h-4 w-4 transition group-hover:translate-x-0.5"></i></span>
                </a>
            @else
                <a href="{{ route('offers.show', $offer) }}" data-track="offer_click" data-offer="{{ $offer->slug }}" class="offer-card group">
                    <span class="text-sm font-semibold text-brass">0{{ $loop->iteration }}</span>
                    <span class="mt-4 block text-[11px] uppercase tracking-[0.16em] text-muted">{{ $offer->duration }}</span>
                    <span class="mt-2 block text-2xl font-semibold tracking-tight">{{ $offer->title }}</span>
                    <span class="mt-3 block flex-1 text-sm leading-6 text-muted">{{ $offer->summary }}</span>
                    <span class="mt-4 block text-sm font-semibold">{{ ($showPrices && $offer->price_from) ? 'PKR '.number_format($offer->price_from).'–'.number_format($offer->price_to) : 'Range on request' }}</span>
                    <span class="mt-6 inline-flex items-center gap-1 text-sm font-semibold">Open <i data-lucide="arrow-right" class="h-4 w-4 transition group-hover:translate-x-0.5"></i></span>
                </a>
            @endif
        @endforeach
    </div>
</section>
<section class="bg-cream py-16 lg:py-20">
    <div class="mx-auto max-w-6xl px-5">
        <p class="kicker">If you are not sure</p>
        <h2 class="section-title mt-3 max-w-2xl">Three questions. A route you can ignore.</h2>
        <div class="mt-10">@include('components.owner-fit')</div>
    </div>
</section>
@endsection