<?php
/**
 * Template Name: Destinou Home
 * Description: Página inicial do Destinou com busca e comparação de viagens
 */

get_header(); ?>

<style>
/* Hero Section */
.destinou-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1b7c4d 0%, #0066cc 100%);
  overflow: hidden;
}

.destinou-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,144C960,149,1056,139,1152,128C1248,117,1344,107,1392,101.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
  background-size: cover;
  opacity: 0.1;
}

.destinou-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
  text-align: center;
  color: white;
}

.destinou-hero h1 {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.destinou-hero p {
  font-size: 1.25rem;
  margin-bottom: 40px;
  opacity: 0.95;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Search Box */
.destinou-search-box {
  background: white;
  border-radius: 1rem;
  padding: 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.search-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  border-bottom: 2px solid #e0e0e0;
}

.search-tab {
  padding: 15px 25px;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  color: #666;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
}

.search-tab.active {
  color: #1b7c4d;
  border-bottom-color: #1b7c4d;
}

.search-tab:hover {
  color: #1b7c4d;
}

.search-form {
  display: none;
}

.search-form.active {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #666;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-group input,
.form-group select {
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #1b7c4d;
  box-shadow: 0 0 0 3px rgba(27, 124, 77, 0.1);
}

.search-button {
  grid-column: 1 / -1;
  padding: 15px 30px;
  background: #1b7c4d;
  color: white;
  border: none;
  border-radius: 0.75rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.search-button:hover {
  background: #0f5a37;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(27, 124, 77, 0.3);
}

/* Destinations Section */
.destinou-destinations {
  padding: 80px 20px;
  background: white;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header h2 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  color: #1a1a1a;
}

.section-header p {
  font-size: 1.1rem;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

.destinations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.destination-card {
  background: white;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.destination-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.destination-image {
  width: 100%;
  height: 200px;
  background: #f0f0f0;
  overflow: hidden;
  position: relative;
}

.destination-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.destination-card:hover .destination-image img {
  transform: scale(1.1);
}

.destination-price {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #ff6b35;
  color: white;
  padding: 10px 15px;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 0.9rem;
}

.destination-content {
  padding: 20px;
}

.destination-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: #1a1a1a;
}

.destination-country {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 15px;
}

.destination-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.destination-rating .stars {
  color: #ff6b35;
}

.destination-description {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 15px;
}

.destination-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.destination-tag {
  background: #f0f0f0;
  color: #666;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* CTA Section */
.destinou-cta {
  background: linear-gradient(135deg, #1b7c4d 0%, #0066cc 100%);
  color: white;
  padding: 80px 20px;
  text-align: center;
}

.destinou-cta h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: white;
}

.destinou-cta p {
  font-size: 1.1rem;
  margin-bottom: 30px;
  opacity: 0.95;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-button {
  padding: 15px 40px;
  border: none;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cta-button-primary {
  background: #ff6b35;
  color: white;
}

.cta-button-primary:hover {
  background: #e55a24;
  transform: translateY(-2px);
}

.cta-button-secondary {
  background: white;
  color: #1b7c4d;
}

.cta-button-secondary:hover {
  background: #f0f0f0;
}

/* Responsive */
@media (max-width: 768px) {
  .destinou-hero h1 {
    font-size: 2rem;
  }
  
  .destinou-hero p {
    font-size: 1rem;
  }
  
  .destinou-search-box {
    padding: 20px;
  }
  
  .search-form.active {
    grid-template-columns: 1fr;
  }
  
  .section-header h2 {
    font-size: 1.75rem;
  }
  
  .destinations-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
  }
  
  .destinou-cta h2 {
    font-size: 1.75rem;
  }
  
  .cta-buttons {
    flex-direction: column;
  }
  
  .cta-button {
    width: 100%;
  }
}
</style>

<div class="destinou-hero">
  <div class="destinou-hero-content">
    <h1>Encontre seu próximo destino pelo melhor preço</h1>
    <p>Compare passagens aéreas, hotéis e pacotes de viagem entre 120+ parceiros em tempo real</p>
    
    <div class="destinou-search-box">
      <div class="search-tabs">
        <button class="search-tab active" onclick="switchTab('flights')">✈️ Voos</button>
        <button class="search-tab" onclick="switchTab('hotels')">🏨 Hotéis</button>
        <button class="search-tab" onclick="switchTab('packages')">📦 Pacotes</button>
      </div>
      
      <!-- Flights Form -->
      <form class="search-form active" id="flights-form">
        <div class="form-group">
          <label>Origem</label>
          <input type="text" placeholder="De onde você sai?" value="São Paulo (GRU)">
        </div>
        <div class="form-group">
          <label>Destino</label>
          <input type="text" placeholder="Para onde você vai?">
        </div>
        <div class="form-group">
          <label>Ida</label>
          <input type="date">
        </div>
        <div class="form-group">
          <label>Volta</label>
          <input type="date">
        </div>
        <div class="form-group">
          <label>Passageiros</label>
          <input type="text" placeholder="1 adulto" value="1 adulto, Econômica">
        </div>
        <button type="submit" class="search-button">🔍 Buscar e comparar voos</button>
      </form>
      
      <!-- Hotels Form -->
      <form class="search-form" id="hotels-form">
        <div class="form-group" style="grid-column: 1 / -1;">
          <label>Destino</label>
          <input type="text" placeholder="Para onde?">
        </div>
        <div class="form-group">
          <label>Check-in</label>
          <input type="date">
        </div>
        <div class="form-group">
          <label>Check-out</label>
          <input type="date">
        </div>
        <div class="form-group">
          <label>Hóspedes</label>
          <input type="text" placeholder="2 hóspedes" value="2 hóspedes, 1 quarto">
        </div>
        <button type="submit" class="search-button">🔍 Buscar e comparar hotéis</button>
      </form>
      
      <!-- Packages Form -->
      <form class="search-form" id="packages-form">
        <div class="form-group">
          <label>Origem</label>
          <input type="text" placeholder="De onde?" value="São Paulo">
        </div>
        <div class="form-group">
          <label>Destino</label>
          <input type="text" placeholder="Para onde?">
        </div>
        <div class="form-group">
          <label>Data da viagem</label>
          <input type="date">
        </div>
        <div class="form-group">
          <label>Duração</label>
          <input type="text" placeholder="7 dias" value="7 dias / 6 noites">
        </div>
        <div class="form-group">
          <label>Viajantes</label>
          <input type="text" placeholder="2 viajantes" value="2 viajantes">
        </div>
        <button type="submit" class="search-button">🔍 Buscar e comparar pacotes</button>
      </form>
    </div>
  </div>
</div>

<!-- Destinations Section -->
<section class="destinou-destinations">
  <div class="container">
    <div class="section-header">
      <h2>Destinos em Destaque</h2>
      <p>Explore os destinos mais buscados com preços comparados em tempo real</p>
    </div>
    
    <div class="destinations-grid">
      <?php
      $destinations = get_posts( array(
        'post_type' => 'destino',
        'posts_per_page' => 8,
      ) );
      
      foreach ( $destinations as $destination ) {
        $price = get_post_meta( $destination->ID, '_price_from', true );
        $currency = get_post_meta( $destination->ID, '_currency', true ) ?: 'R$';
        $country = get_post_meta( $destination->ID, '_country', true );
        $rating = get_post_meta( $destination->ID, '_rating', true );
        $reviews = get_post_meta( $destination->ID, '_reviews', true );
        $image = get_the_post_thumbnail_url( $destination->ID, 'destino-card' );
        ?>
        <div class="destination-card">
          <div class="destination-image">
            <?php if ( $image ) : ?>
              <img src="<?php echo esc_url( $image ); ?>" alt="<?php echo esc_attr( $destination->post_title ); ?>">
            <?php else : ?>
              <div style="width: 100%; height: 100%; background: linear-gradient(135deg, #1b7c4d, #0066cc);"></div>
            <?php endif; ?>
            <?php if ( $price ) : ?>
              <div class="destination-price">A partir de<br><?php echo esc_html( $currency . ' ' . number_format( $price, 0, ',', '.' ) ); ?></div>
            <?php endif; ?>
          </div>
          <div class="destination-content">
            <h3 class="destination-title"><?php echo esc_html( $destination->post_title ); ?></h3>
            <?php if ( $country ) : ?>
              <p class="destination-country"><?php echo esc_html( $country ); ?></p>
            <?php endif; ?>
            <?php if ( $rating ) : ?>
              <div class="destination-rating">
                <span class="stars">★★★★★</span>
                <span><?php echo esc_html( $rating ); ?> (<?php echo esc_html( number_format( $reviews, 0, ',', '.' ) ); ?>)</span>
              </div>
            <?php endif; ?>
            <p class="destination-description"><?php echo wp_trim_words( $destination->post_excerpt, 15 ); ?></p>
            <div class="destination-tags">
              <span class="destination-tag">Praia</span>
              <span class="destination-tag">Cultura</span>
            </div>
          </div>
        </div>
        <?php
      }
      ?>
    </div>
  </div>
</section>

<!-- CTA Section -->
<section class="destinou-cta">
  <div class="container">
    <h2>Pronto para sua próxima viagem?</h2>
    <p>Comece agora a comparar preços e economize nas melhores ofertas. É grátis, rápido e sem compromisso.</p>
    <div class="cta-buttons">
      <button class="cta-button cta-button-primary">Comparar agora</button>
      <button class="cta-button cta-button-secondary">Saber mais</button>
    </div>
  </div>
</section>

<script>
function switchTab(tab) {
  // Hide all forms
  document.getElementById('flights-form').classList.remove('active');
  document.getElementById('hotels-form').classList.remove('active');
  document.getElementById('packages-form').classList.remove('active');
  
  // Remove active class from all tabs
  document.querySelectorAll('.search-tab').forEach(t => t.classList.remove('active'));
  
  // Show selected form
  if (tab === 'flights') {
    document.getElementById('flights-form').classList.add('active');
    document.querySelectorAll('.search-tab')[0].classList.add('active');
  } else if (tab === 'hotels') {
    document.getElementById('hotels-form').classList.add('active');
    document.querySelectorAll('.search-tab')[1].classList.add('active');
  } else if (tab === 'packages') {
    document.getElementById('packages-form').classList.add('active');
    document.querySelectorAll('.search-tab')[2].classList.add('active');
  }
}
</script>

<?php get_footer(); ?>
