@section('title', 'SDGs 2025 of GIU | Green International University')
@extends('front.new.layouts.app')
@section('content')

    @php
        $pillars = [
            [
                'title' => 'Pillar I',
                'subtitle' => 'Green Campus — Environment & Infrastructure',
                'route' => route('sdgs.2025.environment-and-infrastructure'),
                'color' => '#3f7e44',
                'image' => 'front/new/img/sdgs/icon_goal_13.png',
            ],
            [
                'title' => 'Pillar II',
                'subtitle' => 'Sustainable Development Goals — Research, Teaching & Outreach',
                'route' => route('sdgs.2025.sdg-research-teaching-and-outreach'),
                'color' => '#00689d',
                'image' => 'front/new/img/sdgs/icon_goal_17.png',
            ],
            [
                'title' => 'Pillar III',
                'subtitle' => 'Innovation, Entrepreneurship & Real-World Impact',
                'route' => route('sdgs-2025.innovation-entrepreneurship-and-real-World-impact'),
                'color' => '#a21942',
                'image' => 'front/new/img/sdgs/icon_goal_8.png',
            ],
            [
                'title' => 'Pillar IV',
                'subtitle' => 'Ethics, Governance & Institutional Integrity',
                'route' => route('sdgs-2025.ethics-governance-and-institutional-integrity'),
                'color' => '#0a97d9',
                'image' => 'front/new/img/sdgs/icon_goal_16.png',
            ],
            [
                'title' => 'Pillar V',
                'subtitle' => 'Resilience, Crisis Readiness & Institutional Sustainability',
                'route' => route('sdgs-2025.resilience-crisis-readiness-and-institutional'),
                'color' => '#fd6925',
                'image' => 'front/new/img/sdgs/icon_goal_11.png',
            ],
        ];

        $resources = [
            [
                'title' => 'SDG Report 2025',
                'subtitle' => 'View Full Report',
                'icon' => 'ri-file-pdf-line',
                'route' => asset('front/new/pdf/sdgs/GIU Sustainability Report 2025.pdf'),
                'target' => '_blank',
            ],
            [
                'title' => 'Policies',
                'subtitle' => 'Browse Policies',
                'icon' => 'ri-book-open-line',
                'route' => route('sdgs.2025.policies'),
            ],
        ];
    @endphp
   
    <div id="carouselExampleIndicators" class="carousel slide banner-margin-top" data-bs-ride="carousel"
        data-bs-interval="3000">
        <div class="carousel-inner">
            <div class="carousel-item active mt-lg-3 mt-md-3">
                <img src="{{ asset('front/new/img/sdgs/banners/sdgs-banner.png') }}" class=" w-100" alt="First slide">
            </div>
        </div>
    </div>
    <!-- SDGs Pillars -->
    <div class="sdg-container">
        @foreach ($pillars as $pillar)
            <a href="{{ $pillar['route'] }}" class="sdg-card" style="background: {{ $pillar['color'] }}">
                <div class="sdg-title">
                    <span class="h2">{{ $pillar['title'] }}</span>{{ $pillar['subtitle'] }}
                </div>
                <img src="{{ asset($pillar['image']) }}" alt="{{ $pillar['title'] }}">
            </a>
        @endforeach
    </div>
    <div class="container py-4">
        <h3 class="fw-bold mb-4">External Resources</h3>
        <div class="row g-3">
            @foreach($resources as $resource)
                <div class="col-lg-4">
                    <a href="{{ $resource['route'] }}" class="sdg-resource-card" @isset($resource['target'])
                    target="{{ $resource['target'] }}" rel="noopener noreferrer" @endisset>
                        <i class="{{ $resource['icon'] }} resource-icon"></i>
                        <div class="flex-grow-1">
                            <h6 class="mb-1 fw-semibold">{{ $resource['title'] }}</h6>
                            <small>{{ $resource['subtitle'] }}</small>
                        </div>
                        <i class="ri-arrow-right-line resource-arrow"></i>
                    </a>
                </div>
            @endforeach
        </div>
    </div>
@endsection