{{-- Hero Block --}}
@props(['block'])

@php
    $settings = $block->settings ?? [];
    $title = $settings['title'] ?? '';
    $subtitle = $settings['subtitle'] ?? '';
    $buttonText = $settings['button_text'] ?? '';
    $buttonUrl = $settings['button_url'] ?? '#';
    $backgroundImage = $settings['background_image'] ?? '';
    $height = $settings['height'] ?? 'h-96';
@endphp

<div class="relative {{ $height }} bg-gradient-to-r from-coffee-600 to-coffee-700 flex items-center justify-center text-white"
     style="background-image: url('{{ $backgroundImage }}'); background-size: cover; background-position: center;"
     data-block-id="{{ $block->id }}"
     data-block-type="hero">
    
    <div class="absolute inset-0 bg-black bg-opacity-40"></div>
    
    <div class="relative z-10 text-center max-w-4xl mx-auto px-4">
        @if($title)
            <h1 class="text-4xl md:text-6xl font-bold mb-4" contenteditable="false">{{ $title }}</h1>
        @endif
        
        @if($subtitle)
            <p class="text-xl md:text-2xl mb-8" contenteditable="false">{{ $subtitle }}</p>
        @endif
        
        @if($buttonText)
            <a href="{{ $buttonUrl }}" class="inline-block bg-white text-coffee-600 px-8 py-3 rounded-lg font-semibold hover:bg-coffee-50 transition">
                {{ $buttonText }}
            </a>
        @endif
    </div>
</div>