@extends('layouts.master')

@section('content')

<style>
    .material-symbols-outlined {
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    .neon-glow {
        box-shadow: 0 0 15px rgba(0, 255, 157, 0.3);
    }

    .neon-border {
        border: 1px solid rgba(0, 255, 157, 0.2);
    }

    .terminal-bg {
        background: linear-gradient(180deg, #10141a 0%, #0d1117 100%);
    }

    .bg-primary {
        background-color: #00ff9d;
    }

    .text-surface {
        color: #000;
    }
</style>

<main class="pt-8 p-12 min-h-screen terminal-bg">

    <!-- Header -->
    <div class="flex justify-between items-end mb-12">

        <div>
            <nav class="flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.2em] text-primary/60 mb-4">
                <span>SEARCH</span>
                <span class="material-symbols-outlined text-[10px]">chevron_right</span>
                <span class="text-primary underline decoration-primary/30 underline-offset-4">
                    RESULTS
                </span>
            </nav>

            <h2 class="text-5xl font-black font-headline text-on-surface tracking-tighter">
                "{{ $q }}"
            </h2>
        </div>

        <div class="text-xs text-primary/40 font-bold uppercase">
            {{ $results->flatten()->count() }} Results
        </div>

    </div>

    <!-- Results Loop -->
    @forelse($results as $type => $items)

    <!-- Section Header -->
    <div class="mb-4 mt-10 flex items-center gap-3">

        <span class="text-[10px] font-black uppercase tracking-[0.2em] text-primary">
            {{ $type }}
        </span>

        <div class="h-px flex-1 bg-primary/10"></div>

    </div>

    <!-- Cards -->
    <div class="space-y-4">

        @foreach($items as $item)

        <div class="grid grid-cols-12 items-center px-8 py-6 bg-surface-container hover:bg-[#1c222c] border border-outline-variant/10 rounded-xl transition-all duration-300 group hover:neon-border">

            <!-- Icon -->
            <div class="col-span-1">
                <div class="w-12 h-12 rounded bg-[#10141a] border border-outline-variant flex items-center justify-center text-primary group-hover:neon-glow">
                    <span class="material-symbols-outlined">
                        search
                    </span>
                </div>
            </div>

            <!-- Content -->
            <div class="col-span-8 ml-4">

                <a href="{{ $item->url }}"
                    class="text-lg font-black text-on-surface hover:text-primary transition">

                    {{ $item->label }}

                </a>

                <p class="text-[10px] text-primary/40 uppercase mt-1">
                    SCORE: {{ $item->score }}
                </p>

            </div>

            <!-- Type Badge -->
            <div class="col-span-3 flex justify-end">

                <span class="px-3 py-1 text-[10px] font-bold uppercase bg-primary/10 text-primary rounded border border-primary/20">
                    {{ $type }}
                </span>

            </div>

        </div>

        @endforeach

    </div>

    @empty

    <!-- Empty State -->
    <div class="text-center py-20 text-gray-400">
        No results found.
    </div>

    @endforelse

</main>

@endsection