@inject('SectionService', 'App\Services\SectionService')
@php
$param = 'hero';
$heroContent = $SectionService->get($param);
@endphp

<section class="container" id="hero">

        <div class="row">
            <!-- First Column -->
<div class="col-12 col-md-7 mb-4"> <!-- Stack on small screens -->
                <!-- Announcement with Button -->
                <p class="lead">
                    {{ $heroContent['firstColumn']['announcementText'] ?? 'Default Heading' }}
                    <a href="{{ $heroContent['firstColumn']['announcementLink'] ?? 'Default Heading' }}" class="badge text-bg-secondary">Explore Now</a>
                </p>
                <!-- Hero Texts -->
                <h1 class="rainbow-text">{{ $heroContent['firstColumn']['mainHeader'] ?? 'Default Heading' }}</h1>
                <h3>{{ $heroContent['firstColumn']['subHeader'] ?? 'Default Heading' }}</h3>
                <!-- Buttons -->
                <p class="lead">
                    {{ $heroContent['firstColumn']['calltoactionText'] ?? '' }}
                </p>
                @foreach ($heroContent['firstColumn']['buttons'] ?? [] as $button)
                    <a class="btn btn-{{ $button['type'] }}" href="{{ $button['link'] }}" role="button" id="animateButton">{{ $button['text'] }}</a>
                @endforeach

            </div>

<!-- Second Column -->
@php
$hero_ = $heroContent['secondColumn']['videoUrl'] ?? 'Default Heading'
@endphp
<div class="col-12 col-md-5 mb-4">

      <!--Responsive Video Embed -->

<img src="{{ asset($hero_) }}" class="rotate" alt="Descriptive Alt Text" style="max-width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto;">

</div>
    <!--<img src="{{ asset($hero_) }}" class="img-fluid" alt="Descriptive Alt Text">-->
        </div>
</section>