@php
    $uniqueId = 'scta-' . uniqid();
    $bgImage = $shortcode->background_image ? RvMedia::getImageUrl($shortcode->background_image) : '';
    $leftImage = $shortcode->left_image ? RvMedia::getImageUrl($shortcode->left_image) : '';
    $rightImage = $shortcode->right_image ? RvMedia::getImageUrl($shortcode->right_image) : '';
@endphp

<style>
    .{{ $uniqueId }}-section {
        position: relative;
        padding: 80px 0;
        background-color: #f5f5f5;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        overflow: hidden;
        text-align: center;
    }

    /* Left decorative image */
    .{{ $uniqueId }}-left-img {
        position: absolute;
        left: -30px;
        top: 50%;
        transform: translateY(-50%);
        max-width: 220px;
        max-height: 80%;
        object-fit: contain;
        pointer-events: none;
        z-index: 1;
    }

    /* Right decorative image */
    .{{ $uniqueId }}-right-img {
        position: absolute;
        right: -30px;
        top: 50%;
        transform: translateY(-50%);
        max-width: 220px;
        max-height: 80%;
        object-fit: contain;
        pointer-events: none;
        z-index: 1;
    }

    /* Center content wrapper */
    .{{ $uniqueId }}-content {
        position: relative;
        z-index: 2;
        max-width: 700px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* Subtitle */
    .{{ $uniqueId }}-subtitle {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #7a6a4f;
        margin: 0 0 30px;
        line-height: 1.6;
    }

    /* Main heading */
    .{{ $uniqueId }}-title {
        font-size: 42px;
        font-weight: 700;
        color: #222;
        margin: 0 0 16px;
        line-height: 1.2;
    }

    /* Divider dash */
    .{{ $uniqueId }}-divider {
        width: 40px;
        height: 3px;
        background: #444;
        margin: 0 auto 30px;
        border: none;
    }

    /* Highlight text */
    .{{ $uniqueId }}-highlight {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #333;
        margin: 0 0 20px;
    }

    /* Description */
    .{{ $uniqueId }}-desc {
        font-size: 17px;
        color: #555;
        line-height: 1.7;
        margin: 0 0 36px;
    }

    /* CTA Button */
    .{{ $uniqueId }}-btn {
        display: inline-block;
        padding: 14px 40px;
        background: #3a3a3a;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        transition: background 0.3s ease, transform 0.2s ease;
    }

    .{{ $uniqueId }}-btn:hover {
        background: #555;
        color: #fff;
        transform: translateY(-1px);
        text-decoration: none;
    }

    /* === RESPONSIVE === */
    @media (max-width: 991px) {
        .{{ $uniqueId }}-section { padding: 60px 0; }
        .{{ $uniqueId }}-title { font-size: 34px; }
        .{{ $uniqueId }}-left-img,
        .{{ $uniqueId }}-right-img { max-width: 150px; }
    }

    @media (max-width: 768px) {
        .{{ $uniqueId }}-section { padding: 50px 0; }
        .{{ $uniqueId }}-title { font-size: 28px; }
        .{{ $uniqueId }}-subtitle { font-size: 12px; letter-spacing: 1.5px; }
        .{{ $uniqueId }}-highlight { font-size: 14px; letter-spacing: 1.5px; }
        .{{ $uniqueId }}-desc { font-size: 15px; }
        .{{ $uniqueId }}-left-img,
        .{{ $uniqueId }}-right-img { max-width: 100px; opacity: 0.4; }
    }

    @media (max-width: 480px) {
        .{{ $uniqueId }}-section { padding: 40px 0; }
        .{{ $uniqueId }}-title { font-size: 24px; }
        .{{ $uniqueId }}-desc { font-size: 14px; margin-bottom: 28px; }
        .{{ $uniqueId }}-btn { padding: 12px 30px; font-size: 13px; }
        .{{ $uniqueId }}-left-img,
        .{{ $uniqueId }}-right-img { display: none; }
    }
</style>

<section class="{{ $uniqueId }}-section" @if($bgImage) style="background-image: url('{{ $bgImage }}')" @endif>

    @if($leftImage)
        <img src="{{ $leftImage }}" alt="" class="{{ $uniqueId }}-left-img" loading="lazy">
    @endif

    @if($rightImage)
        <img src="{{ $rightImage }}" alt="" class="{{ $uniqueId }}-right-img" loading="lazy">
    @endif

    <div class="{{ $uniqueId }}-content">
        @if($shortcode->subtitle)
            <p class="{{ $uniqueId }}-subtitle">{!! nl2br(e($shortcode->subtitle)) !!}</p>
        @endif

        @if($shortcode->title)
            <h2 class="{{ $uniqueId }}-title">{{ $shortcode->title }}</h2>
        @endif

        <hr class="{{ $uniqueId }}-divider">

        @if($shortcode->highlight)
            <p class="{{ $uniqueId }}-highlight">{{ $shortcode->highlight }}</p>
        @endif

        @if($shortcode->description)
            <p class="{{ $uniqueId }}-desc">{{ $shortcode->description }}</p>
        @endif

        @if($shortcode->button_text && $shortcode->button_url)
            <a href="{{ $shortcode->button_url }}" class="{{ $uniqueId }}-btn">{{ $shortcode->button_text }}</a>
        @endif
    </div>
</section>