@layout('layouts/rkn-st')
@set('title', 'About us')

@section('body')

<style>
  .news-block {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    width: 100%;
    
  background: rgba(0,  0.5,  0.5, 0.5);
  }
  .news-card {
    background-color: #000;
    border-radius: 25px;
    overflow: hidden;
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 455px;
  }
  .news-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,  0.5,  0.5, 0.5);
    z-index: 1;
  }
  .news-thumb {
    width: 100%;
    height: 247px;
    object-fit: cover;
  }
  .news-content {
    padding: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .news-title {
    font-size: 1.2em;
    margin: 10px 0;
    flex: 1;
    text-align: center;
  }
  .news-date {
    display: inline-flex;
    align-items: center;
    font-size: 0.9em;
  }
  .news-date svg { margin-right: 5px; }
  
  .btn-saiba-mais {
    background-color: #1a1a1a;
    color: #fff;
    border: 1px solid #444;
    padding: 10px 50px;
    font-size: 1em;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s, border-color 0.3s;
    margin-top: 15px;
    text-align: center;
    display: inline-block;
  }
  .btn-saiba-mais:hover {
    background-color: rgba(137, 07, 40, 0.65);
    border-color: #185bf8;
  }
  .btn-saiba-mais::after {
    content: '➔';
    margin-left: 10px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .btn-saiba-mais:hover::after {
    opacity: 1;
  }
</style>

<div class="container" style="padding-top:300px">
  <div class="content">
    <div class="page-title">
      <h1>Todas Guias</h1>
    </div>

    <div class="block">
      <div class="block-title">
        <h2><span>Guias</span></h2>
      </div>

    <div class="block" >
      <div class="news-block">
        @each(guide  in data)
        <div class="news-card">
          <img 
          src="{{ guide.thumbnail.replace('http://', 'https://') }}" 
          alt="{{ guide.title }}" 
          class="news-thumb"
        /> 
            <div class="news-content">
              
 
              <div class="news-body">
                <h2>{{{ guide.title }}} </h2>
                </div>
              <div class="news-date">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-days"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path><path d="M8 14h.01"></path><path d="M12 14h.01"></path><path d="M16 14h.01"></path><path d="M8 18h.01"></path><path d="M12 18h.01"></path><path d="M16 18h.01"></path></svg>
                {{ guide.createdAt.toFormat('d \'de\' LLLL \'de\' yyyy') }}
              </div> 
              <a href="{{ route('article', { slug: guide.slug }) }}" class="btn-saiba-mais">
                Saiba Mais
              </a>
            </div>
          </div>
        @endeach
      </div>
    </div>
  </div>
</div>

@end