@extends('frontend.layout.app')

@section('title', 'Maharashtra News | महाराष्ट्र की ताज़ा खबरें | UCN News')

@section('content')
    <div class="row g-3">
        <div class="col-lg-8">
            <div class="d-flex align-items-center mb-4 bg-dark text-white p-2">
                <h4 class="fw-bold mb-0 ps-2 border-start border-danger border-4">महाराष्ट्र न्यूज़</h4>
            </div>

            <div class="card border-0 mb-4 shadow-sm overflow-hidden rounded-0">
                <img src="https://images.unsplash.com/photo-1566908829550-e6551b0bd275?q=80&w=1200" class="img-fluid"
                    style="height: 400px; object-fit: cover;">
                <div class="card-body p-3 border-start border-end">
                    <h2 class="fw-bold"><a href="{{ route('news.details') }}"
                            class="text-dark text-decoration-none hover-red">समृद्धि महामार्ग का अगला चरण तैयार:
                            मुंबई-नागपुर की दूरी अब और होगी कम</a></h2>
                    <p class="text-muted mt-2">महाराष्ट्र सरकार ने बुनियादी ढांचे को मजबूत करने के लिए 5000 करोड़ रुपये के
                        नए प्रोजेक्ट्स को हरी झंडी दी है...</p>
                </div>
            </div>

            <div class="row g-3">
                @for ($m = 1; $m <= 6; $m++)
                    <div class="col-md-6 mb-3">
                        <div class="card h-100 border-0 shadow-sm rounded-0 border-bottom border-danger border-3">
                            <img src="https://via.placeholder.com/400x250/333/eee?text=Regional+News" class="card-img-top">
                            <div class="card-body p-2">
                                <small class="text-danger fw-bold text-uppercase">Mumbai / Pune</small>
                                <h6 class="fw-bold mt-1">मंत्रालय में हुई अहम बैठक, किसानों के लिए बड़े पैकेज का एलान संभव...
                                </h6>
                            </div>
                        </div>
                    </div>
                @endfor
            </div>
        </div>

        <div class="col-lg-4">
            <div class="sticky-top" style="top: 100px; z-index: 1;">
                <div class="text-center p-2 bg-light border mb-4">
                    <small class="text-muted d-block mb-1" style="font-size: 9px;">ADVERTISEMENT</small>
                    <img src="https://placehold.jp/22/000/fff/300x250.png?text=State+Bank+Ad" class="img-fluid">
                </div>

                <div class="bg-white border p-3">
                    <h5 class="fw-bold border-bottom pb-2 text-danger"><i class="bi bi-geo-alt-fill"></i> जिलों से खबरें
                    </h5>
                    <ul class="list-group list-group-flush small fw-bold">
                        <li class="list-group-item px-0 border-bottom"><a href="#"
                                class="text-dark text-decoration-none hover-red">अमरावती: संतरा उत्पादकों की बढ़ी
                                चिंता...</a></li>
                        <li class="list-group-item px-0 border-bottom"><a href="#"
                                class="text-dark text-decoration-none hover-red">नासिक: प्याज की कीमतों में उछाल...</a></li>
                        <li class="list-group-item px-0 border-bottom"><a href="#"
                                class="text-dark text-decoration-none hover-red">छत्रपति संभाजीनगर: पर्यटन को बढ़ावा...</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endsection