@extends('admin.layout')
@section('title', 'Hero Section')
@section('page-title', 'Hero Section')

@section('content')
<div class="max-w-5xl mx-auto">
    @if($hero)
        <div class="bg-gray-900 border border-gray-800 rounded-2xl p-4 sm:p-6">
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6">
                <h3 class="text-lg font-bold text-white flex items-center gap-2">
                    <i class="fas fa-home text-indigo-400 text-sm"></i>
                    Current Hero Content
                </h3>
                <a href="{{ route('admin.hero.edit', $hero) }}"
                   class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold rounded-xl transition-all flex items-center gap-2 self-start sm:self-auto">
                    <i class="fas fa-edit text-xs"></i> Edit
                </a>
            </div>

            <!-- Preview -->
            <div class="rounded-xl bg-gradient-to-br from-gray-950 to-indigo-950/30 p-6 sm:p-8 mb-6 border border-gray-800">
                <div class="inline-flex items-center gap-2 bg-indigo-500/10 text-indigo-400 text-xs px-3 py-1.5 rounded-full mb-4">
                    <span class="w-1.5 h-1.5 bg-indigo-400 rounded-full"></span>
                    Live Preview
                </div>
                <h1 class="text-xl sm:text-2xl font-black text-white mb-2">{{ $hero->company_name }}</h1>
                <h2 class="text-lg sm:text-xl font-bold text-indigo-400 mb-3">{{ $hero->tagline }}</h2>
                <p class="text-gray-400 text-sm mb-4 max-w-lg">{{ $hero->description }}</p>
                <div class="flex flex-wrap gap-3">
                    <span class="px-4 py-2 bg-indigo-600 text-white text-xs font-semibold rounded-lg">{{ $hero->primary_btn_text }}</span>
                    <span class="px-4 py-2 border border-white/20 text-white text-xs font-semibold rounded-lg">{{ $hero->secondary_btn_text }}</span>
                </div>
            </div>

            <!-- Details Grid -->
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div class="bg-gray-800/50 rounded-xl p-4">
                    <p class="text-xs text-gray-500 mb-1">Primary Button</p>
                    <p class="text-sm text-white font-medium truncate">{{ $hero->primary_btn_text }}</p>
                    <p class="text-xs text-indigo-400 truncate">{{ $hero->primary_btn_link }}</p>
                </div>
                <div class="bg-gray-800/50 rounded-xl p-4">
                    <p class="text-xs text-gray-500 mb-1">Secondary Button</p>
                    <p class="text-sm text-white font-medium truncate">{{ $hero->secondary_btn_text }}</p>
                    <p class="text-xs text-indigo-400 truncate">{{ $hero->secondary_btn_link }}</p>
                </div>
                <div class="bg-gray-800/50 rounded-xl p-4">
                    <p class="text-xs text-gray-500 mb-1">Video URL</p>
                    <p class="text-sm text-white truncate">{{ $hero->video_url ?: 'Not set' }}</p>
                </div>
                <div class="bg-gray-800/50 rounded-xl p-4">
                    <p class="text-xs text-gray-500 mb-1">Background</p>
                    <p class="text-sm text-white">{{ $hero->background_image ? 'Custom Image' : 'Gradient' }}</p>
                </div>
            </div>
        </div>
    @else
        @include('admin.partials.empty-state', ['icon' => 'fas fa-home', 'title' => 'No Hero Content', 'description' => 'Set up your hero section.', 'actionRoute' => route('admin.hero.create'), 'actionText' => 'Create Hero Section'])
    @endif
</div>
@endsection