@props([
    'eyebrow' => 'LAB ACCESS',
    'title',
    'description',
    'highlights' => [],
])

<section class="py-12 bg-background flex-1 relative overflow-hidden">
    <div class="absolute inset-0 tech-grid pointer-events-none opacity-30"></div>
    <div class="absolute -top-40 -left-40 w-[500px] h-[500px] bg-primary/5 rounded-full blur-[120px] pointer-events-none"></div>
    <div class="absolute bottom-0 right-0 w-[500px] h-[500px] bg-blue-600/5 rounded-full blur-[120px] pointer-events-none"></div>

    <div class="max-w-container-max w-full mx-auto px-margin-desktop relative z-10">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-stretch">
            <div class="hidden lg:flex lg:col-span-5 flex-col justify-between bg-slate-950 text-white rounded-3xl p-8 border border-white/10 shadow-2xl relative overflow-hidden">
                <div class="absolute inset-0 tech-grid pointer-events-none opacity-10"></div>
                <div class="space-y-4 relative z-20">
                    <div class="flex items-center justify-between border-b border-white/10 pb-4">
                        <span class="text-xs font-mono font-bold tracking-widest text-primary flex items-center gap-1.5">
                            <span class="w-2 h-2 rounded-full bg-primary animate-ping"></span>
                            LAB SECURE NODE
                        </span>
                        <span class="text-[10px] font-mono text-slate-500">SYS_VER: 2.8.4</span>
                    </div>
                    <h2 class="font-display-lg text-2xl font-bold tracking-tight text-white mt-4">
                        Clusterfix laboratory terminal
                    </h2>
                    <p class="text-slate-400 text-xs leading-relaxed">
                        Authorized personnel and trade clients can track real-time electronic rebuilds, view diagnostic notes, and access billing files.
                    </p>
                </div>

                <div class="my-6 bg-slate-900/60 border border-white/5 rounded-2xl p-4 font-mono text-[10px] text-slate-300 space-y-2.5 relative shadow-inner">
                    <span class="text-[9px] font-bold text-slate-500 uppercase tracking-wider block">Live lab status logs</span>
                    <div class="space-y-1.5 leading-normal">
                        <div class="flex justify-between text-slate-400"><span>[OK] CAN-bus simulator init</span><span class="text-emerald-500">100%</span></div>
                        <div class="flex justify-between text-slate-400"><span>[OK] Micro-soldering bench #3 online</span><span class="text-emerald-500">Active</span></div>
                        <div class="flex justify-between text-slate-400"><span>[LOAD] Diagnostics queue load</span><span class="text-amber-500">Moderate</span></div>
                        <div class="flex justify-between text-slate-400"><span>[SEC] Cryptographic session handshake</span><span class="text-emerald-500">AES256</span></div>
                    </div>
                </div>

                <div class="space-y-4 relative z-20 border-t border-white/10 pt-6">
                    @foreach ($highlights as $highlight)
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center text-primary">
                                <span class="material-symbols-outlined text-lg">{{ $highlight['icon'] }}</span>
                            </div>
                            <div>
                                <span class="text-xs font-bold block text-slate-200">{{ $highlight['title'] }}</span>
                                <span class="text-[10px] text-slate-400">{{ $highlight['text'] }}</span>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="lg:col-span-7">
                <div class="bg-surface rounded-3xl border border-outline-variant shadow-xl p-6 md:p-10">
                    <div class="space-y-2 mb-8">
                        <span class="text-[10px] font-bold text-primary bg-primary/10 border border-primary/20 px-2.5 py-1 rounded-full uppercase tracking-wider">{{ $eyebrow }}</span>
                        <h1 class="font-display-lg text-2xl font-bold text-gradient mt-2">{{ $title }}</h1>
                        <p class="text-xs text-on-surface-variant">{{ $description }}</p>
                    </div>

                    {{ $slot }}
                </div>
            </div>
        </div>
    </div>
</section>