@extends('emails.layout')

@php
  $guest   = $reservation->guest;
  $link    = url('/review/' . $review->token);
  $hotel   = $hotel;
  $nights  = $reservation->nights;
  $room    = $reservation->room?->name ?? 'Acomodação';
  $checkIn = $reservation->check_in_realized ?? $reservation->check_in_expected;
  $checkOut = $reservation->check_out_realized ?? $reservation->check_out_expected;
@endphp

@section('content')

{{-- Saudação --}}
<p class="greeting">
  Olá, {{ $guest?->first_name ?? 'Hóspede' }}! 😊
</p>
<p class="text">
  Muito obrigado por se hospedar conosco em <strong>{{ $hotel->name }}</strong>.<br>
  Esperamos que tenha tido uma experiência incrível!
</p>

{{-- Card da estadia --}}
<div class="card" style="background:#f8fafc;">
  <div class="card-title">📋 Resumo da sua estadia</div>
  <div class="info-row">
    <span class="info-label">Acomodação</span>
    <span class="info-value">{{ $room }}</span>
  </div>
  <div class="info-row">
    <span class="info-label">Check-in</span>
    <span class="info-value">{{ $checkIn?->format('d/m/Y') ?? '—' }}</span>
  </div>
  <div class="info-row">
    <span class="info-label">Check-out</span>
    <span class="info-value">{{ $checkOut?->format('d/m/Y') ?? '—' }}</span>
  </div>
  <div class="info-row" style="border-bottom:none;">
    <span class="info-label">Noites</span>
    <span class="info-value">{{ $nights }}</span>
  </div>
</div>

{{-- Pergunta NPS --}}
<div style="
  margin: 24px 0 8px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  color: #fff;
">
  <div style="font-size: 32px; margin-bottom: 10px;">⭐</div>
  <div style="font-size: 18px; font-weight: 800; margin-bottom: 6px;">
    O quanto você nos recomendaria?
  </div>
  <div style="font-size: 13px; opacity: .85; margin-bottom: 22px;">
    Numa escala de 0 a 10, onde 10 é "com certeza recomendaria"
  </div>

  {{-- Botões NPS --}}
  <div style="display:flex; gap: 6px; justify-content: center; flex-wrap: wrap;">
    @for($i = 0; $i <= 10; $i++)
      @php
        $bg = match(true) {
          $i >= 9 => '#22c55e',
          $i >= 7 => '#f59e0b',
          default => '#ef4444',
        };
      @endphp
      <a
        href="{{ $link }}?nps={{ $i }}"
        style="
          display: inline-block;
          width: 38px; height: 38px;
          background: {{ $bg }};
          border-radius: 8px;
          line-height: 38px;
          text-align: center;
          color: #fff;
          font-weight: 800;
          font-size: 14px;
          text-decoration: none;
        "
      >{{ $i }}</a>
    @endfor
  </div>

  <div style="margin-top: 12px; font-size: 11px; opacity: .7; display: flex; justify-content: space-between; padding: 0 4px;">
    <span>😞 Nunca</span>
    <span>😊 Com certeza!</span>
  </div>
</div>

{{-- CTA principal --}}
<div style="text-align: center; margin: 20px 0;">
  <a href="{{ $link }}" style="
    display: inline-block;
    background: #6366f1;
    color: #fff;
    padding: 14px 32px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(99,102,241,.3);
  ">
    ✍️ Avaliar minha experiência completa
  </a>
</div>

<p class="text" style="text-align:center; font-size:12px; color:#9ca3af;">
  Este link é único e expira em 30 dias.<br>
  Sua opinião ajuda-nos a melhorar constantemente.
</p>

<div class="divider"></div>

<p class="text" style="text-align:center;">
  Com carinho,<br>
  <strong>Equipe {{ $hotel->name }}</strong>
  @if($hotel->phone)
    <br><span style="color:#9ca3af;">{{ $hotel->phone }}</span>
  @endif
</p>

@endsection