@php
    $budgets = $phaseDetail['budgets'];
@endphp

<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-5">
    @foreach ($budgets['kpis'] as $kpi)
        <div class="{{ $kpi['class'] }} p-5 rounded-full ghost-border flex flex-col justify-between h-32">
            <span class="text-[10px] uppercase font-bold tracking-widest text-on-primary-container">{{ $kpi['label'] }}</span>
            <span class="text-2xl font-bold font-headline text-primary">{{ $kpi['value'] }}</span>
        </div>
    @endforeach
</div>

<div
    class="bg-primary-container rounded-full p-8 text-on-primary grid md:grid-cols-2 gap-12 items-center overflow-hidden relative shadow-2xl mb-5">
    <div
        class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-surface-container-highest via-transparent to-transparent">
    </div>
    <div class="relative z-10 space-y-6">
        <div>
            <h3 class="text-xl font-bold font-headline">{{ $budgets['hero']['title'] }}</h3>
            <p class="text-on-primary-container text-sm">{{ $budgets['hero']['subtitle'] }}</p>
        </div>
        <div class="space-y-2">
            <div class="flex justify-between text-xs font-semibold uppercase tracking-wider">
                <span>{{ $budgets['hero']['progress_label'] }}</span>
                <span>{{ $budgets['hero']['progress_value'] }}</span>
            </div>
            <div class="h-3 w-full bg-white/10 rounded-full overflow-hidden">
                <div class="h-full bg-secondary-container rounded-full" style="width: {{ $budgets['hero']['progress_width'] }}"></div>
            </div>
        </div>
        <div class="flex gap-8">
            <div>
                <span class="block text-[10px] text-on-primary-container uppercase font-bold">Variacion Actual</span>
                <span class="text-2xl font-bold text-success">
                    {{ $budgets['hero']['variation'] }}
                    <span class="text-xs font-normal text-on-primary-container ml-1">{{ $budgets['hero']['variation_note'] }}</span>
                </span>
            </div>
            <div class="w-[1px] bg-white/10"></div>
            <div>
                <span class="block text-[10px] text-on-primary-container uppercase font-bold">Estado General</span>
                <div class="flex items-center gap-2 mt-1">
                    <div class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></div>
                    <span class="text-sm font-bold">{{ $budgets['hero']['status'] }}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="relative z-10 flex justify-center">
        <div
            class="h-48 w-full bg-white/5 rounded-full border border-white/10 flex flex-col items-center justify-center backdrop-blur-sm">
            <p class="text-xs text-on-primary-container uppercase font-bold tracking-widest mb-1">{{ $budgets['hero']['saving_label'] }}</p>
            <span class="text-5xl font-extrabold font-headline">{{ $budgets['hero']['saving_value'] }}</span>
            <p class="text-xs text-emerald-400 font-semibold mt-2">{{ $budgets['hero']['saving_note'] }}</p>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-5">
    <div class="lg:col-span-2 bg-surface-container-lowest rounded-full ghost-border p-8 overflow-hidden">
        <div class="flex justify-between items-center mb-8">
            <h3 class="text-lg font-bold font-headline text-primary">Desglose por Procesos</h3>
            <button class="text-primary text-xs font-bold hover:underline">Ver todo el catalogo</button>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead class="text-[10px] uppercase font-bold text-on-primary-container border-b border-outline-variant/10">
                    <tr>
                        <th class="pb-4 pr-4">Concepto</th>
                        <th class="pb-4 px-4 text-right">Planeado</th>
                        <th class="pb-4 px-4 text-right">Ejecutado</th>
                        <th class="pb-4 px-4 text-center">Avance</th>
                        <th class="pb-4 pl-4 text-right">Estado</th>
                    </tr>
                </thead>
                <tbody class="text-sm">
                    @foreach ($budgets['rows'] as $row)
                        <tr class="hover:bg-surface-container-low/50 transition-colors">
                            <td class="py-5 pr-4 {{ $loop->first ? '' : 'border-t border-outline-variant/5' }}">
                                <div class="flex items-center gap-3">
                                    <div class="w-8 h-8 rounded-lg bg-surface-container flex items-center justify-center">
                                        <span class="material-symbols-outlined text-sm text-primary">{{ $row['icon'] }}</span>
                                    </div>
                                    <span class="font-semibold text-primary">{{ $row['concept'] }}</span>
                                </div>
                            </td>
                            <td class="py-5 px-4 text-right text-on-surface-variant {{ $loop->first ? '' : 'border-t border-outline-variant/5' }}">
                                {{ $row['planned'] }}
                            </td>
                            <td class="py-5 px-4 text-right font-medium {{ $loop->first ? '' : 'border-t border-outline-variant/5' }}">
                                {{ $row['executed'] }}
                            </td>
                            <td class="py-5 px-4 {{ $loop->first ? '' : 'border-t border-outline-variant/5' }}">
                                <div class="w-20 mx-auto h-1.5 bg-outline-variant/20 rounded-full overflow-hidden">
                                    <div class="h-full bg-primary" style="width: {{ $row['progress_width'] }}"></div>
                                </div>
                            </td>
                            <td class="py-5 pl-4 text-right {{ $loop->first ? '' : 'border-t border-outline-variant/5' }}">
                                <span class="px-2 py-1 rounded text-[10px] font-bold {{ $row['status_class'] }}">{{ $row['status'] }}</span>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <div class="space-y-8">
        <div class="bg-surface-container-lowest rounded-full ghost-border p-8">
            <div class="flex items-center gap-2 mb-6">
                <span class="material-symbols-outlined text-error" data-icon="warning">warning</span>
                <h3 class="text-lg font-bold font-headline text-primary">Alertas Financieras</h3>
            </div>
            <div class="space-y-4">
                @foreach ($budgets['alerts'] as $alert)
                    <div class="p-4 rounded-xl border-l-4 {{ $alert['card_class'] }}">
                        <p class="text-xs font-bold {{ $alert['label_class'] }} uppercase mb-1">{{ $alert['title'] }}</p>
                        <p class="text-sm font-semibold text-on-surface">{{ $alert['name'] }}</p>
                        <p class="text-xs text-on-surface-variant mt-1">{{ $alert['description'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="bg-white rounded-full p-8 ghost-border">
            <h3 class="text-sm font-bold uppercase tracking-widest text-on-primary-container mb-4">Otras Vistas de Obra</h3>
            <div class="grid grid-cols-2 gap-3">
                @foreach ($budgets['views'] as $view)
                    <a class="flex flex-col gap-2 p-4 rounded-xl bg-surface-container-low hover:bg-primary-fixed transition-colors group"
                        href="#">
                        <span class="material-symbols-outlined text-on-primary-container group-hover:text-primary">
                            {{ $view['icon'] }}
                        </span>
                        <span class="text-xs font-bold text-primary">{{ $view['label'] }}</span>
                    </a>
                @endforeach
            </div>
        </div>
    </div>
</div>

<div class="relative h-64 rounded-full overflow-hidden flex items-center px-12 group">
    <div class="absolute inset-0 bg-linear-65 from-primary via-primary/80 to-transparent"></div>
    <div class="relative z-10 max-w-lg">
        <h2 class="text-2xl font-bold text-white font-headline mb-2">{{ $budgets['footer']['title'] }}</h2>
        <p class="text-on-primary-container text-sm leading-relaxed">{{ $budgets['footer']['description'] }}</p>
        <div class="mt-6 flex gap-4">
            <button class="bg-white text-primary px-6 py-2 rounded-xl text-xs font-bold shadow-xl">
                {{ $budgets['footer']['primary_button'] }}
            </button>
            <button
                class="border border-white/30 text-white px-6 py-2 rounded-xl text-xs font-bold hover:bg-white/10 transition-colors">
                {{ $budgets['footer']['secondary_button'] }}
            </button>
        </div>
    </div>
</div>