@php
    use Illuminate\Support\Str;
    $academic = App\Models\Academic::first();
    $programs = App\Models\Program::take($home->program_count)->get();
    $mappedPrograms = $programs->map(function($p) {
        return [
            'id' => $p->id,
            'name' => $p->main_title,
            'main_code' => $p->main_code,
            'description' => Str::words($p->description, 30),
            'image' => $p->background_image ? asset('storage/' . $p->background_image) : null,
            'link' => route('program', $p->id),
        ];
    });
@endphp
<div class="academics-section">
    <div class="academic-title">
        <h2>{{ $academic->title ?? 'ACADEMICS' }}</h2>
    </div>
    <div class="academic-content-wrapper">
        <div class="academic-programs">
            <div class="program-list">
                @foreach($programs as $i => $program)
                    <button class="program-btn @if($i === 0) active @endif" data-index="{{ $i }}">{{ $program->main_code }}</button>
                @endforeach
            </div>
            <div class="program-scroll-line">
                @for($i = 0; $i < count($programs); $i++)
                    @if($i === 0)
                        <div class="scroll-segment"></div>
                    @endif
                    <div class="scroll-dot"></div>
                    <div class="scroll-segment"></div>
                @endfor
            </div>
        </div>
        @if(count($programs) > 0)
        @php $first = $programs[0]; @endphp
        <div class="academic-details-card" id="academic-details-card">
            <div class="academic-image">
                <img id="program-image" src="{{ $first->background_image ? asset('storage/' . $first->background_image) : 'https://images.unsplash.com/photo-1503676382389-4809596d5290?auto=format&fit=crop&w=600&q=80' }}" alt="{{ $first->name }}" />
            </div>
            <div class="academic-info">
                <div class="card-bar"></div>
                <div class="card-content">
                    <h3 id="program-name">{{ $first->main_code }}</h3>
                    <p id="program-description">{{ Str::words($first->description, 30) }}</p>
                    <a id="program-link" href="{{route('program', $first->id)}}" class="read-more">READ MORE <i class="fa-solid fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
        @endif
    </div>
    <div class="triangle-shape"></div>
</div>

<script>
    // Prepare all program data for JS
    const programs = @json($mappedPrograms);

    document.addEventListener('DOMContentLoaded', function() {
        const buttons = document.querySelectorAll('.program-btn');
        const nameEl = document.getElementById('program-name');
        const descEl = document.getElementById('program-description');
        const imgEl = document.getElementById('program-image');
        const linkEl = document.getElementById('program-link');

        buttons.forEach(btn => {
            btn.addEventListener('click', function() {
                // Remove active from all
                buttons.forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                const idx = parseInt(this.getAttribute('data-index'));
                const prog = programs[idx];
                nameEl.textContent = prog.name;
                descEl.textContent = prog.description;
                imgEl.src = prog.image;
                imgEl.alt = prog.name;
                linkEl.href = prog.link;
            });
        });
    });
</script>

<style>
.academics-section {
    margin-top: 8%;
    position: relative;
    background: #fff;
    padding-bottom: 80px;
    overflow: hidden;
}
.academic-title {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}
.academic-title h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #F3881B;
    display: inline-block;
    position: relative;
    letter-spacing: 2px;
}
.academic-title h2::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 28px;
    background: #0A4C76;
    border-radius: 50%;
    position: absolute;
    left: -45px;
    top: 50%;
    transform: translateY(-50%);
}

.academic-content-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.academic-programs {
    position: relative;
    min-width: 180px;
    margin-right: 30px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding-top: 30px;
}
.program-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    max-height: 180px;
    overflow-y: auto;
    scrollbar-width: none;
}
.program-list::-webkit-scrollbar {
    width: 6px;
    background: #f6f8fa;
}
.program-list::-webkit-scrollbar-thumb {
    background: #e0e0e0;
    border-radius: 4px;
}
.program-btn {
    background: #fff;
    border: none;
    border-bottom: 2px solid #0A4C76;
    color: #0A4C76;
    font-size: 1.1rem;
    padding: 12px 32px;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    outline: none;
    font-weight: 500;
}
.program-btn.active {
    background: #F6F8FA;
    color: #0A4C76;
    font-weight: bold;
}

.program-scroll-line {
    position: relative;
    width: 24px;
    min-width: 24px;
    height: 180px; /* match .program-list max-height */
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.scroll-segment {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 2px;
    height: 28px; /* adjust for desired gap */
    background: #F3881B;
}

.scroll-dot {
    width: 8px;
    height: 8px;
    background: #F3881B;
    border-radius: 50%;
    margin: 0 0 0 0;
}

.academic-details-card {
    display: flex;
    width: 100%;
    height: 220px; /* or whatever matches your design */
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
}

.academic-image {
    flex: 1 1 45%;
    height: 100%;
    min-width: 220px;
    max-width: 320px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.academic-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.academic-info {
    flex: 2 1 55%;
    background: #F6F8FA;
    height: 100%;
   padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.card-bar {
    height: 7px;
    width: 120px;
    background: #F3881B;
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    border-radius: 0 0 8px 0;
}
.card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    height: 100%;
}
.card-content h3,
.card-content p {
    align-self: flex-start;
}
.card-content h3 {
    color: #0A4C76;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 12px;
    letter-spacing: 1px;
}
.card-content p {
    color: #444;
    font-size: 1rem;
    margin-bottom: 18px;
    line-height: 1.6;
}
.read-more {
    margin-top: 10px;
    color: #0A4C76;
    text-decoration: none;
    font-size: 0.98rem;
    letter-spacing: 0.5px;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.read-more:hover {
    color: #F3881B;
}
.triangle-shape {
    position: absolute;
    margin-top: -8%;
    width: 100%;         /* or 100% if you want it relative to parent */
    height: 200px;        /* adjust to match your image's height */
    background: #F19E4A66;  /* use the orange color from your image */
    clip-path: polygon(0 60%, 70% 0, 100% 70%, 100% 100%, 0% 100%);
    z-index: 1;
}

/* Enhanced responsive styles */
@media (max-width: 1200px) {
    .academics-section {
        margin-top: 7%;
        padding-bottom: 70px;
    }
    .academic-title h2 {
        font-size: 2.2rem;
    }
    .academic-title h2::before {
        width: 24px;
        height: 24px;
        left: -40px;
    }
    .academic-content-wrapper {
        max-width: 1000px;
    }
    .program-btn {
        font-size: 1rem;
        padding: 10px 28px;
    }
    .academic-details-card {
        height: 200px;
    }
    .academic-image {
        min-width: 200px;
        max-width: 280px;
    }
    .academic-info {
        padding: 18px;
    }
    .card-content h3 {
        font-size: 1.1rem;
    }
    .card-content p {
        font-size: 0.95rem;
    }
}

@media (max-width: 992px) {
    .academics-section {
        margin-top: 6%;
        padding-bottom: 60px;
    }
    .academic-title h2 {
        font-size: 2rem;
    }
    .academic-title h2::before {
        width: 22px;
        height: 22px;
        left: -35px;
    }
    .academic-content-wrapper {
        flex-direction: column;
        align-items: center;
        max-width: 900px;
    }
    .academic-programs {
        flex-direction: row;
        justify-content: center;
        margin-bottom: 20px;
        margin-right: 0;
        padding-top: 0;
        min-width: auto;
    }
    .program-list {
        max-height: 160px;
        gap: 15px;
    }
    .program-btn {
        font-size: 0.95rem;
        padding: 8px 24px;
    }
    .academic-details-card {
        min-width: 0;
        max-width: 100%;
        height: 180px;
    }
    .academic-image {
        min-width: 180px;
        max-width: 250px;
    }
    .academic-info {
        padding: 16px;
    }
    .card-content h3 {
        font-size: 1rem;
        margin-bottom: 10px;
    }
    .card-content p {
        font-size: 0.9rem;
        margin-bottom: 15px;
    }
    .read-more {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .academics-section {
        margin-top: 5%;
        padding-bottom: 50px;
    }
    .academic-title h2 {
        font-size: 1.8rem;
        letter-spacing: 1px;
    }
    .academic-title h2::before {
        width: 20px;
        height: 20px;
        left: -30px;
    }
    .academic-programs {
        margin-bottom: 15px;
    }
    .program-list {
        max-height: 140px;
        gap: 12px;
    }
    .program-btn {
        font-size: 0.9rem;
        padding: 7px 20px;
    }
    .program-scroll-line {
        width: 20px;
        min-width: 20px;
        height: 140px;
        margin-left: 6px;
    }
    .scroll-segment {
        height: 24px;
    }
    .scroll-dot {
        width: 6px;
        height: 6px;
    }
    .academic-details-card {
        height: 160px;
    }
    .academic-image {
        min-width: 160px;
        max-width: 220px;
    }
    .academic-info {
        padding: 14px;
    }
    .card-bar {
        height: 6px;
        width: 100px;
    }
    .card-content h3 {
        font-size: 0.95rem;
        margin-bottom: 8px;
    }
    .card-content p {
        font-size: 0.85rem;
        margin-bottom: 12px;
        line-height: 1.5;
    }
    .read-more {
        font-size: 0.85rem;
        gap: 4px;
    }
    .triangle-shape {
        height: 150px;
    }
}

@media (max-width: 600px) {
    .academics-section {
        margin-top: 4%;
        padding-bottom: 40px;
    }
    .academic-title h2 {
        font-size: 1.6rem;
    }
    .academic-title h2::before {
        width: 18px;
        height: 18px;
        left: -25px;
    }
    .academic-programs {
        margin-bottom: 12px;
    }
    .program-list {
        max-height: 120px;
        gap: 10px;
    }
    .program-btn {
        font-size: 0.85rem;
        padding: 6px 16px;
    }
    .program-scroll-line {
        width: 18px;
        min-width: 18px;
        height: 120px;
        margin-left: 5px;
    }
    .scroll-segment {
        height: 20px;
    }
    .scroll-dot {
        width: 5px;
        height: 5px;
    }
    .academic-details-card {
        height: 140px;
    }
    .academic-image {
        min-width: 140px;
        max-width: 200px;
    }
    .academic-info {
        padding: 12px;
    }
    .card-bar {
        height: 5px;
        width: 80px;
    }
    .card-content h3 {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }
    .card-content p {
        font-size: 0.8rem;
        margin-bottom: 10px;
        line-height: 1.4;
    }
    .read-more {
        font-size: 0.8rem;
        gap: 3px;
    }
    .triangle-shape {
        height: 120px;
    }
}

@media (max-width: 480px) {
    .academics-section {
        margin-top: 3%;
        padding-bottom: 30px;
    }
    .academic-title h2 {
        font-size: 1.4rem;
    }
    .academic-title h2::before {
        width: 16px;
        height: 16px;
        left: -20px;
    }
    .academic-programs {
        margin-bottom: 10px;
    }
    .program-list {
        max-height: 100px;
        gap: 8px;
    }
    .program-btn {
        font-size: 0.8rem;
        padding: 5px 14px;
    }
    .program-scroll-line {
        width: 16px;
        min-width: 16px;
        height: 100px;
        margin-left: 4px;
    }
    .scroll-segment {
        height: 18px;
    }
    .scroll-dot {
        width: 4px;
        height: 4px;
    }
    .academic-details-card {
        height: 120px;
    }
    .academic-image {
        min-width: 120px;
        max-width: 180px;
    }
    .academic-info {
        padding: 10px;
    }
    .card-bar {
        height: 4px;
        width: 70px;
    }
    .card-content h3 {
        font-size: 0.85rem;
        margin-bottom: 5px;
    }
    .card-content p {
        font-size: 0.75rem;
        margin-bottom: 8px;
        line-height: 1.3;
    }
    .read-more {
        font-size: 0.75rem;
        gap: 2px;
    }
    .triangle-shape {
        height: 100px;
    }
}

@media (max-width: 360px) {
    .academics-section {
        margin-top: 2%;
        padding-bottom: 25px;
    }
    .academic-title h2 {
        font-size: 1.2rem;
    }
    .academic-title h2::before {
        width: 14px;
        height: 14px;
        left: -18px;
    }
    .academic-programs {
        margin-bottom: 8px;
    }
    .program-list {
        max-height: 80px;
        gap: 6px;
    }
    .program-btn {
        font-size: 0.75rem;
        padding: 4px 12px;
    }
    .program-scroll-line {
        width: 14px;
        min-width: 14px;
        height: 80px;
        margin-left: 3px;
    }
    .scroll-segment {
        height: 16px;
    }
    .scroll-dot {
        width: 3px;
        height: 3px;
    }
    .academic-details-card {
        height: 100px;
    }
    .academic-image {
        min-width: 100px;
        max-width: 160px;
    }
    .academic-info {
        padding: 8px;
    }
    .card-bar {
        height: 3px;
        width: 60px;
    }
    .card-content h3 {
        font-size: 0.8rem;
        margin-bottom: 4px;
    }
    .card-content p {
        font-size: 0.7rem;
        margin-bottom: 6px;
        line-height: 1.2;
    }
    .read-more {
        font-size: 0.7rem;
        gap: 2px;
    }
    .triangle-shape {
        height: 80px;
    }
}

@media (max-width: 900px) {
    .academic-content-wrapper {
        flex-direction: column;
        align-items: center;
    }
    .academic-details-card {
        min-width: 0;
        max-width: 100%;
    }
    .academic-programs {
        flex-direction: row;
        justify-content: center;
        margin-bottom: 20px;
        margin-right: 0;
        padding-top: 0;
    }
}
</style>