{{-- Bloque: Hero Elegante (texto a la izquierda + imagen circular) --}}
@props(['heading' => 'Bienvenido', 'subheading' => '', 'cta_text' => 'Ver productos', 'cta_url' => '#', 'image' => ''])
<section class="bg-beige">
    <div class="max-w-7xl mx-auto px-4 py-16 md:py-24 grid md:grid-cols-2 gap-10 items-center">
        <div>
            <h1 class="font-display text-4xl md:text-5xl lg:text-6xl text-olive leading-tight">{{ $heading }}</h1>
            @if($subheading)
                <p class="mt-6 text-lg text-gray-600 max-w-md">{{ $subheading }}</p>
            @endif
            @if($cta_text)
                <a href="{{ $cta_url }}" class="inline-block mt-8 bg-olive text-beige px-8 py-3 rounded-full hover:bg-olive/90 transition">
                    {{ $cta_text }}
                </a>
            @endif
        </div>
        <div class="flex justify-center">
            <img src="{{ $image ?: 'https://placehold.co/500x500/4A5D4D/F7F3EE?text=Hero' }}"
                 alt="{{ $heading }}"
                 class="w-72 h-72 md:w-96 md:h-96 object-cover rounded-full shadow-xl ring-8 ring-white">
        </div>
    </div>
</section>
