@php
    $heroMain = filled(data_get($content, 'main_image_url')) ? data_get($content, 'main_image_url') : $mainImage;
    $heroSide1 = filled(data_get($content, 'side_image_1_url')) ? data_get($content, 'side_image_1_url') : $image2;
    $heroSide2 = filled(data_get($content, 'side_image_2_url')) ? data_get($content, 'side_image_2_url') : $image3;
@endphp
<section class="lp-hero" id="home">
    <div class="lp-container lp-hero-grid">
        <div class="lp-hero-copy">
            <div class="lp-brand-mark">{{ data_get($content, 'brand_name', 'NEBULOID') }}</div>
            <h1>
                <span>{{ data_get($content, 'title_1') }}</span>
                <strong>{{ data_get($content, 'title_2') }}</strong>
                <em>{{ data_get($content, 'title_3', $product->name) }}</em>
            </h1>
            <div class="lp-rating"><span>★★★★★</span><b>{{ data_get($content, 'rating', 4.8) }}</b></div>
            <div class="lp-promise">
                <strong>{{ data_get($content, 'promise_title') }}</strong>
                <p>{{ data_get($content, 'promise_text') }}</p>
                <span class="lp-refund">{{ data_get($content, 'refund_text') }}</span>
            </div>
            <div class="lp-social-proof"><div class="lp-avatar-stack"><i></i><i></i><i></i><i></i></div><div><small>{{ data_get($content, 'customer_heading') }}</small><strong>{{ data_get($content, 'customer_count') }}</strong></div></div>
            <a class="lp-btn lp-btn-accent lp-scroll-order" href="#order">এখনই অর্ডার করুন <i class="fa-solid fa-arrow-down"></i></a>
        </div>
        <div class="lp-hero-product">
            <div class="lp-product-glow"></div>
            @if($heroSide1)<img class="lp-hero-side side-one" src="{{ $heroSide1 }}" alt="" loading="lazy">@endif
            @if($heroMain)<img class="lp-hero-main" src="{{ $heroMain }}" alt="{{ $product->name }}" fetchpriority="high">@endif
            @if($heroSide2)<img class="lp-hero-side side-two" src="{{ $heroSide2 }}" alt="" loading="lazy">@endif
        </div>
    </div>
</section>