@php
    $paragraphs = explode("\n", $about->history_description);
    $firstParagraph = $paragraphs[0] ?? '';
    $remainingParagraphs = array_slice($paragraphs, 1);
@endphp
    <div class="history-section">
        <div class="history-box">
            <div class="history-title-row">
                <div class="history-title-dot"></div>
                <div class="history-title">{{ $about->history_title ?? 'History' }}</div>
            </div>
            <div class="history-content-row">
                <div class="history-slider-col">
                    <div class="history-slider-line"></div>
                    <div class="swiper history-slider">
                        <div class="swiper-wrapper">
                            @foreach($about->history_photos as $photo)
                                <div class="swiper-slide"><img class="history-img" src="{{ asset('storage/'.$photo) }}" alt="History {{$loop->iteration}}"></div>
                            @endforeach
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <div class="history-text-col">
                    <div class="history-text-block">
                        {{ $firstParagraph ?? 'History' }}
                    </div>
                </div>
            </div>
            <div class="history-content-row" style="margin-top:32px;">
                <div class="history-text-block" style="width:100%;">
                    @foreach($remainingParagraphs as $paragraph)
                        <p>{{ $paragraph ?? 'History' }}</p>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    <div class="angled-divider"></div>


<script>
    // Top slider
    var swiper1 = new Swiper('.top-slider .swiper', {
        loop: true,
        pagination: {
            el: '.top-slider .swiper-pagination',
            clickable: true,
        },
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        },
    });
    // History slider
    var swiper2 = new Swiper('.history-slider', {
        loop: true,
        speed: 3000,
        pagination: {
            el: '.history-slider .swiper-pagination',
            clickable: true,
        },
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        },
    });
</script>


<style>
    /* Responsive styles for history section */
    @media (max-width: 1200px) {
        .history-box {
            padding: 40px 30px;
        }
        .history-content-row {
            gap: 30px;
        }
        .history-slider-col {
            flex: 0 0 45%;
        }
        .history-text-col {
            flex: 0 0 55%;
        }
    }

    @media (max-width: 900px) {
        .history-box {
            padding: 30px 24px;
        }
        .history-title {
            font-size: 1.8rem;
        }
        .history-content-row {
            flex-direction: column;
            gap: 24px;
        }
        .history-slider-col {
            flex: 0 0 100%;
            order: 1;
        }
        .history-text-col {
            flex: 0 0 100%;
            order: 2;
        }
        .history-slider-line {
            height: 200px;
        }
        .history-img {
            height: 200px;
        }
    }

    @media (max-width: 700px) {
        /* .swiper-slide{
            width: auto !important;
        } */
        .history-box {
            padding: 24px 20px;
        }
        .history-title {
            font-size: 1.6rem;
        }
        .history-title-row {
            margin-bottom: 20px;
        }
        .history-slider-line {
            height: 180px;
        }
        .history-img {
            height: 180px;
        }
        .history-text-block {
            font-size: 0.95rem;
            line-height: 1.6;
        }
    }

    @media (max-width: 480px) {
        .history-box {
            padding: 20px 16px;
        }
        .history-title {
            font-size: 1.4rem;
        }
        .history-title-row {
            margin-bottom: 16px;
        }
        .history-content-row {
            gap: 20px;
        }
        .history-slider-line {
            height: 160px;
        }
        .history-img {
            height: 160px;
        }
        .history-text-block {
            font-size: 0.9rem;
            line-height: 1.5;
        }
        .history-text-block p {
            margin-bottom: 12px;
        }
    }

    @media (max-width: 360px) {
        .history-box {
            padding: 16px 12px;
        }
        .history-title {
            font-size: 1.2rem;
        }
        .history-title-row {
            margin-bottom: 14px;
        }
        .history-content-row {
            gap: 16px;
        }
        .history-slider-line {
            height: 140px;
        }
        .history-img {
            height: 140px;
        }
        .history-text-block {
            font-size: 0.85rem;
            line-height: 1.4;
        }
        .history-text-block p {
            margin-bottom: 10px;
        }
    }

    /* Ensure swiper pagination is responsive */
    @media (max-width: 480px) {
        .swiper-pagination {
            bottom: 8px;
        }
        .swiper-pagination-bullet {
            width: 8px;
            height: 8px;
            margin: 0 4px;
        }
    }
    </style>