@extends('layouts.main')

@section('content')
<!-- News Start -->
<div class="container-xxl py-6">
    <div class="container">
        <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
            <h1 class="display-6 mb-4">Latest News</h1>
        </div>
        <div class="row g-5 p-4 pt-0">
            <div class="wow fadeInUp" data-wow-delay="0.5s">
                <div class="h-100">
                <p>Stay updated with our latest news and updates. We bring you all the essential information and stories related to driving, ensuring you stay informed and engaged.</p>
                </div>
            </div>
        </div>
        <div class="row g-4 justify-content-center">
            @foreach ($newsItems as $news)
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="news-item d-flex flex-column bg-light overflow-hidden h-100">
                        @if($news->image)
                            <img src="{{ asset('storage/' . $news->image) }}" class="img-fluid" alt="{{ $news->title }}">
                        @endif
                        <div class="p-4">
                            <h6 class="text-muted mb-2">
                                {{ $news->publish_date ? $news->publish_date->format('d M Y') : '' }}
                            </h6>
                            <h5 class="mb-3">{{ $news->title }}</h5>
                            <p>{!! Str::limit($news->excerpt, 100) !!}</p>
                            <a href="{{ route('news.show', $news->slug) }}" class="btn btn-primary">Read More</a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="d-flex justify-content-center mt-4">
            {{ $newsItems->links() }}
        </div>
        <!-- Interested Start-->
        <div class="container-xxl py-6">
            <div class="container">
                <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
                    <h2 class="display-6 mb-4">Interested?</h2>
                    <h6 class="text-primary text-uppercase mb-2">Want To Start You Driving Journey With MyWheels</h6>
                </div>
                <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s">
                <p class="mb-4">If you are interested in booking or need more information, call, WhatsApp or text Jane. We will answer any queries you have, and get you in the driving seat!</p>
                    <div class="row justify-content-center align-items-center">
                        <div class="col-sm-6">
                            <div class="row g-4 align-items-center">
                                <div class="col-sm-4 d-flex align-items-center justify-content-center">
                                    <a class="btn btn-primary py-3 px-5" href="about">Read More</a>
                                </div>
                                <div class="col-sm-4 d-flex align-items-center justify-content-center">
                                    <a href="tel:07526357958" class="text-dark text-decoration-none">
                                        <div class="position-relative text-center">
                                            <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center mb-4 mx-auto" style="width: 100px; height: 100px;">
                                                <i class="bi bi-phone fa-2x text-white"></i>
                                            </div>
                                            <h5 class="mb-0">Phone</h5>
                                            <p class="mb-0">07526 357958</p>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-sm-4 d-flex align-items-center justify-content-center">
                                    <a href="https://wa.me/447526357958" target="_blank" class="text-dark text-decoration-none">
                                        <div class="position-relative text-center">
                                            <div class="bg-success rounded-circle d-flex align-items-center justify-content-center mb-4 mx-auto" style="width: 100px; height: 100px;">
                                                <i class="bi bi-whatsapp fa-2x text-white"></i>
                                            </div>
                                            <h5 class="mb-0">WhatsApp</h5>
                                            <p class="mb-0">07526 357958</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Interested End -->
    </div>
</div>
<!-- News End -->
@endsection