@php
    $id = 'marquee-' . uniqid();
    $bgColor = $content['bg_color'] ?? '#fcf9f4';
    $textColor = $content['text_color'] ?? '#795900';
    $fontSize = $content['font_size'] ?? '2.25rem';
    $fontFamily = $content['font_family'] ?? "'Playfair Display', serif";
    $duration = $content['duration'] ?? 15;
    if (!is_numeric($duration) || $duration <= 0) {
        $duration = 15;
    }
@endphp

<style>
    #{{ $id }} {
        background-color: {{ $bgColor }};
        color: {{ $textColor }};
        font-family: {{ $fontFamily }};
        font-size: {{ $fontSize }};
        overflow: hidden;
        width: 100%;
        padding: 1.5rem 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        border-top: 1px solid rgba(121, 89, 0, 0.1);
        border-bottom: 1px solid rgba(121, 89, 0, 0.1);
    }

    #{{ $id }} .marquee-track {
        display: flex;
        width: max-content;
        animation: {{ $id }}-scroll {{ $duration }}s linear infinite;
        will-change: transform;
    }

    #{{ $id }} .marquee-content {
        display: flex;
        align-items: center;
        white-space: nowrap;
        flex-shrink: 0;
        padding-right: 4rem; /* Gap between repetitions */
    }

    #{{ $id }} .marquee-content * {
        display: inline-flex !important;
        align-items: center;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
        color: inherit !important;
        font-family: inherit !important;
        font-size: inherit !important;
        list-style: none !important;
        text-decoration: none !important;
    }

    /* Support spaces/margins between elements inside rich text */
    #{{ $id }} .marquee-content p,
    #{{ $id }} .marquee-content li,
    #{{ $id }} .marquee-content span,
    #{{ $id }} .marquee-content a {
        margin-right: 3rem !important;
    }

    #{{ $id }} .marquee-content p:last-child,
    #{{ $id }} .marquee-content li:last-child,
    #{{ $id }} .marquee-content span:last-child {
        margin-right: 0 !important;
    }

    @keyframes {{ $id }}-scroll {
        0% {
            transform: translate3d(0, 0, 0);
        }
        100% {
            transform: translate3d(-50%, 0, 0);
        }
    }

    /* Pause animation on hover for interactive feel */
    #{{ $id }}:hover .marquee-track {
        animation-play-state: paused;
    }
</style>

<div id="{{ $id }}" class="{{ $content['custom_class'] ?? '' }}" style="{{ $content['custom_style'] ?? '' }}">
    <div class="marquee-track">
        <div class="marquee-content">
            {!! $content['text'] ?? '' !!}
        </div>
        <div class="marquee-content" aria-hidden="true">
            {!! $content['text'] ?? '' !!}
        </div>
    </div>
</div>