[horario].astro

---
import northernStation from '@data/northern-station.json'
import southernStation from '@data/southern-station.json'

import { Schema } from 'astro-seo-schema'

import Layout from '@layouts/Layout.astro'

import Player from '@components/Player.astro'

import '@styles/wave.css'

import SocialMedia from '@components/SocialMedia.astro'
import Navbar from '@components/Navbar.astro'
import Greetings from '@components/Greetings.astro'
import FilterTransport from '@components/FilterTransport.astro'
import CardTimetables from '@components/CardTimetables.astro'
import CardCity from '@components/CardCity.astro'
import ModalTakePic from '@components/ModalTakePic.astro'

export async function getStaticPaths() {
  const mergeDataStations = [northernStation, southernStation]

  return mergeDataStations.flatMap((info) =>
    info.cities.map((city) => ({
      params: { horarios: info.slug, horario: city.slug },
      props: {
        cityName: city.name,
        socialMediaImage: city.social_media_image,
        title: city.title,
        description: city.description,
        schemaFAQs: city.schema_FAQs,
        destination: city.destination,
        tripDistance: city.trip_distance,
        map: city.map,
        filter: city.filter,
        timetables: city.timetables,
        station: info.station,
        themeColor: info.theme_color,
        headerColor: info.header_color,
        titleColor: info.title_color,
        textColor: info.text_color,
        linkColor: info.link_color,
        breadcrumbActive: info.breadcrumb_active
      }
    }))
  )
}

const { horarios, horario } = Astro.params
const {
  cityName,
  socialMediaImage,
  title,
  description,
  schemaFAQs,
  destination,
  tripDistance,
  map,
  filter,
  timetables,
  station,
  themeColor,
  headerColor,
  titleColor,
  textColor,
  linkColor,
  breadcrumbActive
} = Astro.props

const options = {
  title,
  description,
  theme_color: themeColor
}

const getSchemaFAQs = schemaFAQs.map((faq) => ({
  '@type': 'Question',
  inLanguage: 'es',
  name: faq.name,
  acceptedAnswer: { '@type': 'Answer', text: faq.text }
}))

const shareText =
  `%C2%A1Conoce todos los horarios de los buses de Estel%C3%AD hacia ${cityName}!%0a`.replace(
    /\s/g,
    '%20'
  )

const currentURL = `${Astro.site}${horarios}/${horario}`

// Hide the CardCity if the current page it's equal
function citiesFilter(city, station) {
  if (station.slug === horarios) {
    return city.slug !== horario
  }

  return city
}

const northernStationFilter = northernStation.cities.filter((city) =>
  citiesFilter(city, northernStation)
)
const southernStationFilter = southernStation.cities.filter((city) =>
  citiesFilter(city, southernStation)
)
---

<Layout {options}>
  <link
    crossorigin
    href="//www.google.com/"
    rel="preconnect"
    slot="preconnect"
  />
  <link
    crossorigin
    href="//maps.googleapis.com/"
    rel="preconnect"
    slot="preconnect"
  />
  <link
    crossorigin
    href="//maps.gstatic.com/"
    rel="preconnect"
    slot="preconnect"
  />

  {
    getSchemaFAQs.length !== 0 && (
      <Schema
        item={{
          '@context': 'https://schema.org',
          '@type': 'FAQPage',
          mainEntity: getSchemaFAQs
        }}
        slot="schema"
      />
    )
  }

  <SocialMedia
    {title}
    {description}
    image={socialMediaImage}
    slot="social-media"
  />

  <header class={`relative ${headerColor} safe-top`}>
    <div class="container mx-auto px-4">
      <Navbar />
      <section class="mt-6">
        <nav class={`py-2 whitespace-nowrap breadcrumb ${textColor}`}>
          <ul class="flex items-center gap-x-2">
            <li style="width: 24px; height: 24px">
              <a class={linkColor} href="/" aria-label="Inicio" title="Inicio">
                <svg
                  fill="currentColor"
                  viewBox="0 0 24 24"
                  width="24"
                  height="24"
                >
                  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5Z"></path>
                </svg>
              </a>
            </li>
            <li>
              <svg
                fill="currentColor"
                viewBox="0 0 24 24"
                width="24"
                height="24"
              >
                <path d="m8.6 16.6 4.6-4.6-4.6-4.6L10 6l6 6-6 6-1.4-1.4Z"
                ></path>
              </svg>
            </li>
            <li>
              <a class={`font-medium ${linkColor}`} href={`/${horarios}`}
                >{station}
              </a>
            </li>
            <li>
              <svg
                fill="currentColor"
                viewBox="0 0 24 24"
                width="24"
                height="24"
              >
                <path d="m8.6 16.6 4.6-4.6-4.6-4.6L10 6l6 6-6 6-1.4-1.4Z"
                ></path>
              </svg>
            </li>
            <li>
              <p class={breadcrumbActive}>{cityName}</p>
            </li>
          </ul>
        </nav>
      </section>
      <section
        class="flex flex-col items-center justify-center pb-[4.5rem] pt-[4.5rem] text-center md:pb-[6.5rem] lg:pb-[8.5rem] lg:pt-28 xl:pb-56"
      >
        <Greetings />
        <h1 class={`my-4 max-w-screen-md ${titleColor}`}>
          Horarios de los Buses de Estelí hacia {cityName}
        </h1>
        <section class={`space-y-2 ${textColor}`}>
          <p class="font-semibold">
            ¡Comparte este horario en tus redes sociales!
          </p>
          <section class="flex flex-wrap items-center justify-center gap-x-8">
            <a
              class={linkColor}
              href={`https://api.whatsapp.com/send?text=${shareText}${currentURL}?utm_source=whatsapp&utm_medium=webapp&utm_campaign=social_share_city&utm_content=header`}
              target="_blank"
              aria-label={`¡Comparte los horarios de los Buses de Estelí hacia ${cityName} a tus contactos en WhatsApp!`}
              title={`¡Comparte los horarios de los Buses de Estelí hacia ${cityName} a tus contactos en WhatsApp!`}
            >
              <svg
                class="fill-current"
                viewBox="0 0 24 24"
                width="33"
                height="33"
              >
                <path
                  d="M12 2a10 10 0 0 0-8.6 14.9L2 22l5.3-1.4A10 10 0 1 0 12 2m0 1.7A8.2 8.2 0 1 1 7.9 19l-.2-.2-3.2.8.9-3-.2-.3a8.3 8.3 0 0 1 7-12.6M8.5 7.3a1 1 0 0 0-.6.3c-.3.3-.9.9-.9 2.1 0 1.2.9 2.4 1 2.6.1.1 1.8 2.6 4.3 3.7.5.3 1 .4 1.4.5.6.2 1 .2 1.5.1.5 0 1.5-.6 1.7-1.2.2-.5.2-1 .1-1.1l-.4-.3-1.7-.8c-.3-.1-.4-.1-.6.1l-.8 1c-.1.1-.3.2-.5 0-.3 0-1-.4-2-1.2a7.6 7.6 0 0 1-1.4-1.7c-.1-.3 0-.4.1-.5l.4-.5.3-.4v-.4l-.8-1.8c-.2-.5-.4-.5-.6-.5h-.5Z"
                ></path>
              </svg>
            </a>
            <a
              class={linkColor}
              href={`https://www.facebook.com/sharer/sharer.php?u=${currentURL}?utm_source=facebook&utm_medium=webapp&utm_campaign=social_share_city&utm_content=header`}
              target="_blank"
              aria-label={`¡Comparte los horarios de los Buses de Estelí hacia ${cityName} a tus amigos en Facebook!`}
              title={`¡Comparte los horarios de los Buses de Estelí hacia ${cityName} a tus amigos en Facebook!`}
            >
              <svg
                class="fill-current"
                viewBox="0 0 24 24"
                width="36"
                height="36"
              >
                <path
                  d="M12 2.04a10.03 10.03 0 0 0-1.56 19.92v-7H7.9v-2.9h2.54V9.85c0-2.51 1.49-3.89 3.78-3.89 1.09 0 2.23.19 2.23.19v2.47h-1.26c-1.24 0-1.63.77-1.63 1.56v1.88h2.78l-.45 2.9h-2.33v7a10 10 0 0 0 8.44-9.9c0-5.53-4.5-10.02-10-10.02Z"
                ></path>
              </svg>
            </a>
            <a
              class={linkColor}
              href={`https://twitter.com/intent/tweet?url=${currentURL}?utm_source=twitter&utm_medium=webapp&utm_campaign=social_share_city&utm_content=header&text=${shareText}`}
              target="_blank"
              aria-label={`¡Comparte los horarios de los Buses de Estelí hacia ${cityName} a tus contactos en Twitter!`}
              title={`¡Comparte los horarios de los Buses de Estelí hacia ${cityName} a tus contactos en Twitter!`}
            >
              <svg
                class="fill-current"
                viewBox="0 0 24 24"
                width="33"
                height="33"
              >
                <path
                  d="M22.5 6c-.8.3-1.6.6-2.5.7.9-.5 1.6-1.4 1.9-2.4-.8.5-1.8.9-2.7 1a4.3 4.3 0 0 0-7.3 4C8.2 9 5 7.3 3 4.8a4.2 4.2 0 0 0 1.3 5.7c-.7 0-1.3-.2-2-.5 0 2.1 1.6 3.8 3.5 4.2a4.2 4.2 0 0 1-2 .1c.6 1.7 2.2 3 4 3A8.5 8.5 0 0 1 1.6 19c2 1.2 4.2 1.9 6.6 1.9 7.9 0 12.2-6.5 12.2-12.2v-.6C21.2 7.6 22 7 22.5 6Z"
                ></path>
              </svg>
            </a>
            <a
              class={linkColor}
              href={`https://telegram.me/share/url?url=${shareText}${currentURL}?utm_source=telegram&utm_medium=webapp&utm_campaign=social_share_city&utm_content=header`}
              target="_blank"
              aria-label={`¡Comparte los horarios de los Buses de Estelí hacia ${cityName} a tus contactos en Telegram!`}
              title={`¡Comparte los horarios de los Buses de Estelí hacia ${cityName} a tus contactos en Telegram!`}
            >
              <svg
                class="fill-current"
                viewBox="0 0 24 24"
                width="30"
                height="30"
              >
                <path
                  clip-rule="evenodd"
                  d="M24 12a12 12 0 1 1-24 0 12 12 0 0 1 24 0ZM12.4 8.9a572 572 0 0 0-7.9 3.6c0 .4.5.5 1 .7l.3.1c.6.2 1.5.5 1.9.5.4 0 .8-.2 1.3-.5a124 124 0 0 1 5.3-3.3v.2c0 .2-1.8 1.8-2.7 2.7l-.5.5-.3.3c-.6.5-1 1 0 1.6a94.2 94.2 0 0 1 2.7 1.8l.4.3c.5.4 1 .7 1.5.6.3 0 .6-.3.8-1.2a142.2 142.2 0 0 0 1.3-9.1l-.1-.3a.8.8 0 0 0-.5-.2c-.4 0-1.1.3-4.5 1.7Z"
                  fill-rule="evenodd"></path>
              </svg>
            </a>
            <button
              class={`${linkColor} hidden`}
              id="share-city"
              type="button"
              aria-label={`¡Comparte los horarios de los Buses de Estelí hacia ${cityName} a tus amigos!`}
              title={`¡Comparte los horarios de los Buses de Estelí hacia ${cityName} a tus amigos!`}
            >
              <svg
                class="fill-current"
                viewBox="0 0 24 24"
                width="33"
                height="33"
              >
                <path
                  d="M18 16a3 3 0 0 0-2 .9l-7-4.2v-1.4l7-4.1a3 3 0 0 0 2 .8 3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3v.7L8 9.8A3 3 0 0 0 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 2-.8l7.2 4.1-.1.7a3 3 0 0 0 5.8 0 3 3 0 0 0-2.9-3Z"
                ></path>
              </svg>
            </button>
          </section>
        </section>
      </section>
    </div>
    <div class="wave"></div>
  </header>

  <main class="py-12 sm:py-16 md:py-20 xl:py-28">
    <div
      class="container mx-auto flex flex-col gap-y-20 px-4 lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-16 lg:gap-y-0"
    >
      <article class="flex flex-col gap-y-8 md:gap-x-8 lg:hidden">
        <section class="space-y-2">
          <Player />
        </section>
        <section class="space-y-2">
          <p class="font-bold">Lugar de destino:</p>
          <section class="flex items-center gap-x-2">
            <div>
              <svg
                class="fill-current"
                viewBox="0 0 24 24"
                width="24"
                height="24"
              >
                <path
                  d="M12 11.5A2.5 2.5 0 0 1 9.5 9 2.5 2.5 0 0 1 12 6.5 2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Z"
                ></path>
              </svg>
            </div>
            <p>{destination}</p>
          </section>
        </section>
        <section class="space-y-2">
          <p class="font-bold">Distancia de viaje:</p>
          <section class="flex items-center gap-x-2">
            <div>
              <svg
                class="fill-current"
                viewBox="0 0 24 24"
                width="24"
                height="24"
              >
                <path
                  d="M6.5 8.1c-.9 0-1.6-.7-1.6-1.6a1.6 1.6 0 0 1 1.6-1.6c.9 0 1.6.7 1.6 1.6a1.6 1.6 0 0 1-1.6 1.6m0-6.1C4 2 2 4 2 6.5c0 3.4 4.5 8.4 4.5 8.4s4.5-5 4.5-8.4C11 4 9 2 6.5 2m11 6.1a1.6 1.6 0 0 1-1.6-1.6 1.6 1.6 0 1 1 3.2 0 1.6 1.6 0 0 1-1.6 1.6m0-6.1C15 2 13 4 13 6.5c0 3.4 4.5 8.4 4.5 8.4s4.5-5 4.5-8.4C22 4 20 2 17.5 2m0 14a3 3 0 0 0-2.8 2H9.3a3 3 0 1 0 0 2h5.4a3 3 0 1 0 2.8-4m0 4.5A1.5 1.5 0 0 1 16 19a1.5 1.5 0 0 1 1.5-1.5A1.5 1.5 0 0 1 19 19a1.5 1.5 0 0 1-1.5 1.5Z"
                ></path>
              </svg>
            </div>
            <p>
              {
                tripDistance !== ''
                  ? `${tripDistance} (aproximadamente)`
                  : 'Información no disponible'
              }
            </p>
          </section>
        </section>
      </article>
      <article class="flex flex-col gap-y-20 lg:sticky lg:top-8">
        {filter && <FilterTransport />}
        {
          timetables.map((timetable, index) => (
            <CardTimetables
              {index}
              note={timetable.note}
              transportPic={timetable.transport_pic}
              transportPicLqip={timetable.transport_pic_lqip}
              departureTime={timetable.departure_time}
              waitingAreaDeparture={timetable.waiting_area_departure}
              {cityName}
              returnTime={timetable.return_time}
              waitingAreaReturn={timetable.waiting_area_return}
              transportType={timetable.transport_type}
              transportName={timetable.transport_name}
              licensePlate={timetable.license_plate}
              transportPrice={timetable.transport_price}
              tripDuration={timetable.trip_duration}
              stops={timetable.stops}
            />
          ))
        }
      </article>
      <section class="space-y-5 lg:sticky lg:top-8">
        <div>
          {
            map !== '' ? (
              <>
                <iframe
                  class="w-full rounded border-0 bg-[#eee] dark:bg-[#362d25]"
                  src={map}
                  loading="lazy"
                  allowfullscreen="allowfullscreen"
                  fetchpriority="low"
                  loading="lazy"
                  height="450"
                  title={`Distancia de viaje de Estelí hacia ${cityName}`}
                />
                <p class="mt-3 text-xs">
                  Previsualización de mapa proporcionada por Google Maps.
                </p>
              </>
            ) : (
              <div
                class="flex w-full items-center justify-center rounded bg-[#eee] dark:bg-[#362d25]"
                style="height: 450px"
              >
                <p class="text-lg">Vista previa del mapa no disponible</p>
              </div>
            )
          }
        </div>
        <article class="hidden lg:flex lg:gap-8">
          <section class="space-y-2">
            <p class="font-bold">Lugar de destino:</p>
            <section class="flex items-center gap-2">
              <div>
                <svg
                  class="fill-current"
                  viewBox="0 0 24 24"
                  width="24"
                  height="24"
                >
                  <path
                    d="M12 11.5A2.5 2.5 0 0 1 9.5 9 2.5 2.5 0 0 1 12 6.5 2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Z"
                  ></path>
                </svg>
              </div>
              <p class="font-bold">{destination}</p>
            </section>
          </section>
          <section class="space-y-2">
            <p class="font-bold">Distancia de viaje:</p>
            <section class="flex items-center gap-2">
              <div>
                <svg
                  class="fill-current"
                  viewBox="0 0 24 24"
                  width="24"
                  height="24"
                >
                  <path
                    d="M6.5 8.1c-.9 0-1.6-.7-1.6-1.6a1.6 1.6 0 0 1 1.6-1.6c.9 0 1.6.7 1.6 1.6a1.6 1.6 0 0 1-1.6 1.6m0-6.1C4 2 2 4 2 6.5c0 3.4 4.5 8.4 4.5 8.4s4.5-5 4.5-8.4C11 4 9 2 6.5 2m11 6.1a1.6 1.6 0 0 1-1.6-1.6 1.6 1.6 0 1 1 3.2 0 1.6 1.6 0 0 1-1.6 1.6m0-6.1C15 2 13 4 13 6.5c0 3.4 4.5 8.4 4.5 8.4s4.5-5 4.5-8.4C22 4 20 2 17.5 2m0 14a3 3 0 0 0-2.8 2H9.3a3 3 0 1 0 0 2h5.4a3 3 0 1 0 2.8-4m0 4.5A1.5 1.5 0 0 1 16 19a1.5 1.5 0 0 1 1.5-1.5A1.5 1.5 0 0 1 19 19a1.5 1.5 0 0 1-1.5 1.5Z"
                  ></path>
                </svg>
              </div>
              <p class="font-bold">
                {
                  tripDistance !== ''
                    ? `${tripDistance} (aproximadamente)`
                    : 'Información no disponible'
                }
              </p>
            </section>
          </section>
        </article>
      </section>
    </div>
  </main>

  <article
    class="bg-[#FFFDF9] py-12 dark:bg-[#2D231B] sm:py-16 md:py-20 xl:py-28"
  >
    <div class="container mx-auto space-y-12 px-4 lg:space-y-16">
      <h2 class="text-center">¿Buscas conocer otros horarios?</h2>
      <section class="!mt-24">
        <h3 class="mb-10 text-center lg:mb-16">
          Horarios más populares de la Terminal Norte
        </h3>
        <article
          class="flex flex-col items-center gap-y-20 lg:grid lg:grid-cols-2 lg:gap-16 xl:grid-cols-3"
        >
          {
            northernStationFilter.map(
              (city, index) =>
                index < 6 && (
                  <CardCity
                    cityName={city.name}
                    slug={`/${northernStation.slug}/${city.slug}`}
                    image={city.image}
                  />
                )
            )
          }
        </article>
        <section class="mt-20 text-center">
          <a
            class="inline-flex items-center space-x-2.5 rounded bg-orange-400 px-5 py-2.5 font-semibold text-white shadow-lg shadow-orange-500/30 transition-colors active:shadow-orange-600/30 active:outline-none active:ring-4 active:ring-orange-400 active:ring-opacity-75 any-hover:bg-orange-500 any-hover:shadow-orange-600/30"
            href={`/${northernStation.slug}`}
          >
            <span>Mira todos los destinos</span>
            <span>
              <svg class="fill-current" width="26" height="26">
                <path d="M16 11H4v2h12v3l4-4-4-4z"></path>
              </svg>
            </span>
          </a>
        </section>
      </section>
      <section>
        <h3 class="mb-10 text-center lg:mb-16">
          Horarios más populares de la Terminal Sur
        </h3>
        <article
          class="flex flex-col items-center gap-y-20 lg:grid lg:grid-cols-2 lg:gap-16 xl:grid-cols-3"
        >
          {
            southernStationFilter.map(
              (city, index) =>
                index < 6 && (
                  <CardCity
                    cityName={city.name}
                    slug={`/${southernStation.slug}/${city.slug}`}
                    image={city.image}
                  />
                )
            )
          }
        </article>
        <section class="mt-20 text-center">
          <a
            class="inline-flex items-center space-x-2.5 rounded bg-orange-400 px-5 py-2.5 font-semibold text-white shadow-lg shadow-orange-500/30 transition-colors active:shadow-orange-600/30 active:outline-none active:ring-4 active:ring-orange-400 active:ring-opacity-75 any-hover:bg-orange-500 any-hover:shadow-orange-600/30"
            href={`/${southernStation.slug}`}
          >
            <span>Mira todos los destinos</span>
            <span>
              <svg class="fill-current" width="26" height="26">
                <path d="M16 11H4v2h12v3l4-4-4-4z"></path>
              </svg>
            </span>
          </a>
        </section>
      </section>
    </div>
  </article>

  <ModalTakePic slot="dynamic-components" />
</Layout>

<style>
  @media screen and (max-width: 767.98px) {
    .breadcrumb {
      overflow-x: scroll;
    }
  }

  @media (any-pointer: coarse) {
    .breadcrumb {
      scrollbar-width: none;
    }

    .breadcrumb::-webkit-scrollbar {
      display: none;
    }
  }
</style>

<script define:vars={{ title, currentURL }}>
/**
 * Sound page on click
 */

const soundPage = new Audio('/sounds/switch-tap.mp3')

/**
 * Share button
 */

const shareBtn = document.getElementById('share-city')

const shareData = {
  title: 'Estelí Buses',
  text: `¡Conoce todos los ${title}!`,
  url: `${currentURL}?utm_source=sharebtncity&utm_medium=webapp&utm_campaign=social_share_city&utm_content=header`
}

if (navigator.share) {
  shareBtn.classList.remove('hidden')

  shareBtn.addEventListener('click', () => {
    if (localStorage.getItem('sounds_enabled') === 'true') {
      soundPage.play()
    }

    if (
      'vibrate' in navigator &&
      localStorage.getItem('sounds_enabled') === 'false'
    ) {
      navigator.vibrate(80)
    }

    navigator.share(shareData)
  })
}
</script>