{{template "head" .View}}
{{template "header" .View}}
<main id="main-content" class="flex-1">
  {{if .Notice.Show}}
  <div class="border-b {{if eq .Notice.Tone "warn"}}border-amber-200 bg-amber-50 text-amber-950 dark:border-amber-900/60 dark:bg-amber-950/40 dark:text-amber-50{{else}}border-brand-200 bg-brand-50 text-brand-950 dark:border-brand-900/50 dark:bg-brand-950/50 dark:text-brand-50{{end}}" role="status">
    <div class="page-container flex gap-3 py-3 text-sm sm:items-start">
      <svg class="mt-0.5 h-5 w-5 shrink-0 opacity-80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
      <div class="min-w-0">
        {{if .Notice.Title}}<p class="font-semibold">{{.Notice.Title}}</p>{{end}}
        {{if .Notice.Body}}<p class="{{if .Notice.Title}}mt-0.5{{end}} leading-relaxed opacity-90">{{.Notice.Body}}</p>{{end}}
      </div>
    </div>
  </div>
  {{end}}
  <section class="hero-cinematic">
    <div class="hero-cinematic__media-wrap">
      <img
        src="/static/images/hero/terminal-exterior.jpg"
        alt="Grantley Adams International Airport terminal exterior in Barbados"
        class="hero-cinematic__media hero-cinematic__media--animate"
        fetchpriority="high"
        decoding="async"
      />
    </div>
    <div class="hero-cinematic__overlay" aria-hidden="true"></div>
    <div class="hero-cinematic__orb hero-cinematic__orb--gold" aria-hidden="true"></div>
    <div class="hero-cinematic__orb hero-cinematic__orb--accent" aria-hidden="true"></div>
    <div class="hero-cinematic__grain" aria-hidden="true"></div>
    <div class="hero-cinematic__content page-container py-16 sm:py-20 lg:py-24">
      <div class="grid items-center gap-12 lg:grid-cols-12">
        <div class="lg:col-span-7">
          <h1 class="hero-enter font-display text-4xl font-bold leading-tight text-balance sm:text-5xl lg:text-6xl">
            {{t .View "home.welcomeTo"}} <span class="bg-gradient-to-r from-accent-light via-gold-light to-white bg-clip-text text-transparent">{{t .View "home.barbados"}}</span>
          </h1>
          <p class="hero-enter hero-enter-delay-2 mt-5 max-w-2xl text-lg leading-relaxed text-brand-100">{{t .View "home.heroDescription"}}</p>
          <div class="hero-enter hero-enter-delay-3 mt-8 flex flex-wrap gap-3">
            <a href="/flights" class="btn-primary bg-white text-brand-700 hover:bg-brand-50">{{t .View "home.checkFlights"}} →</a>
            <a href="/directory" class="btn-secondary border-white/20 bg-white/10 text-white hover:bg-white/20">{{t .View "home.exploreTerminal"}}</a>
          </div>
        </div>
        <div class="hero-enter hero-enter-delay-4 lg:col-span-5">
          <div class="hero-glass-card p-6 text-white shadow-2xl transition-all duration-500 hover:border-accent/40">
            <p class="section-kicker-light">BGI</p>
            <p class="mt-2 font-display text-3xl font-bold">Grantley Adams International Airport</p>
            <div id="hero-stats" class="mt-6 grid grid-cols-3 gap-3">
              <div class="hero-stat">
                <p class="hero-stat__value text-xl font-bold">
                  <span class="count-up" data-count-to="100" data-count-suffix="+">0+</span>
                </p>
                <p class="text-xs text-brand-100">{{t .View "home.stats.dailyFlights"}}</p>
              </div>
              <div class="hero-stat">
                <p class="hero-stat__value text-xl font-bold">
                  <span class="count-up" data-count-to="25" data-count-suffix="+">0+</span>
                </p>
                <p class="text-xs text-brand-100">{{t .View "home.stats.destinations"}}</p>
              </div>
              <div class="hero-stat">
                <p class="hero-stat__value text-xl font-bold">
                  <span class="count-up" data-count-to="2.3" data-count-suffix="M" data-count-decimals="1">0.0M</span>
                </p>
                <p class="text-xs text-brand-100">{{t .View "home.stats.passengers"}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="hero-enter hero-enter-delay-4 toolbar-panel mt-10 shadow-xl transition-all duration-500 hover:shadow-2xl dark:shadow-none">
        <form action="/search" method="get" class="flex flex-col gap-2 sm:flex-row">
          <input type="search" name="q" class="input-field border-0 bg-transparent focus:ring-0" placeholder="{{t .View "home.searchPlaceholder"}}" />
          <button type="submit" class="btn-primary shrink-0">{{t .View "home.search"}}</button>
        </form>
        <p class="flex flex-wrap items-center gap-2 px-1 text-sm text-slate-600 dark:text-slate-400">
          <span>{{t .View "home.searchPopular"}}</span>
          {{range searchHints .View}}<a href="/search?q={{.Query | urlquery}}" class="chip">{{.Label}}</a>{{end}}
        </p>
      </div>
    </div>
  </section>

  <div class="page-canvas relative">
  <section class="page-container py-8">
    <div class="reveal-stagger content-grid-3">
      {{template "quick_action" (quickAction .View "/flights" "brand" "home.quickActions.flights.title" "home.quickActions.flights.description")}}
      {{template "quick_action" (quickAction .View "/directory" "accent" "home.quickActions.directory.title" "home.quickActions.directory.description")}}
      {{template "quick_action" (quickAction .View "/services" "neutral" "home.quickActions.services.title" "home.quickActions.services.description")}}
    </div>
  </section>

  <section class="page-container pb-16">
    <div class="grid gap-8 lg:grid-cols-12">
      <div class="reveal lg:col-span-8">
        {{template "section_heading" (sectionHeadingLink .View "home.liveFlights" "home.flightStatusTitle" "home.flightStatusDescription" "/flights" "home.viewAllFlights")}}
        <div class="reveal-stagger content-grid-2">
          {{range $i, $f := .Preview}}{{template "flight_card" (flightCard $.View $f true)}}{{end}}
        </div>
      </div>
      <aside class="reveal space-y-4 lg:col-span-4">
        <button type="button" id="weather-card-open" class="info-card w-full" aria-haspopup="dialog" aria-controls="weather-modal">
          <div class="info-card__header">
            <div class="flex items-start justify-between gap-3">
              <div>
                <h3 class="font-display text-lg font-bold">{{t .View "home.weather.title"}}</h3>
                <p class="mt-1 text-xs text-brand-100">{{.Weather.Location}}</p>
              </div>
              <div class="flex items-center gap-2">
                <span class="weather-icon weather-icon--on-brand" aria-hidden="true">
                  {{template "weather_icon" .Weather.ConditionKey}}
                </span>
                {{if .Weather.Live}}
                <span class="rounded-full bg-white/20 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider">{{t .View "home.weather.liveBadge"}}</span>
                {{end}}
              </div>
            </div>
            <p class="mt-3 text-4xl font-bold">{{.Weather.Temp}}°C</p>
            <p class="mt-1 text-sm text-brand-50">{{.Weather.Condition}}</p>
          </div>
          <div class="info-card__body">
            <dl class="grid grid-cols-3 gap-3 text-center text-xs">
              <div>
                <dt class="text-slate-500 dark:text-slate-400">{{t .View "home.weather.feelsLike"}}</dt>
                <dd class="mt-1 font-semibold text-slate-900 dark:text-white">{{.Weather.FeelsLike}}°</dd>
              </div>
              <div>
                <dt class="text-slate-500 dark:text-slate-400">{{t .View "home.weather.humidity"}}</dt>
                <dd class="mt-1 font-semibold text-slate-900 dark:text-white">{{.Weather.Humidity}}%</dd>
              </div>
              <div>
                <dt class="text-slate-500 dark:text-slate-400">{{t .View "home.weather.wind"}}</dt>
                <dd class="mt-1 font-semibold text-slate-900 dark:text-white">{{.Weather.Wind}} {{t .View "home.weather.windUnit"}}</dd>
              </div>
            </dl>
            <p class="mt-4 flex items-center justify-between text-xs font-semibold text-brand-700 dark:text-brand-300">
              <span>{{t .View "home.weather.forecastHint"}}</span>
              <span aria-hidden="true">→</span>
            </p>
          </div>
        </button>
        <div class="info-card group">
          <div class="info-card__body">
            <p class="section-kicker">{{t .View "home.quickLinks"}}</p>
            <ul class="mt-4 space-y-2">
              {{range quickLinks .View}}<li><a href="{{.Href}}" class="info-card__link"><span>{{.Label}}</span><span class="transition-transform duration-300 group-hover:translate-x-1" aria-hidden="true">→</span></a></li>{{end}}
            </ul>
          </div>
        </div>
      </aside>
    </div>
    <div class="reveal mt-10">
      {{template "cta_band" (ctaBand .View "home.flightInfoBannerTitle" "home.flightInfoBannerDescription" "home.viewAllFlights" "/flights")}}
    </div>
  </section>
  </div>

  <div id="weather-modal" class="modal-backdrop fixed inset-0 z-50 hidden items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm" role="dialog" aria-modal="true" aria-labelledby="weather-modal-title" aria-hidden="true">
    <div class="modal-panel flex max-h-[90vh] w-full max-w-3xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl dark:bg-slate-900" role="document">
      <div class="relative border-b border-slate-200/80 bg-gradient-to-br from-brand-600 to-accent p-6 text-white dark:border-slate-800">
        <button type="button" id="weather-modal-close" class="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-lg text-white/80 transition-colors hover:bg-white/15 hover:text-white" aria-label="{{t .View "common.close"}}">
          <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
        </button>
        <div class="flex items-center gap-4 pr-10">
          <span class="weather-icon weather-icon--lg weather-icon--{{.Weather.IconTone}} weather-icon--on-brand" aria-hidden="true">
            {{template "weather_icon" .Weather.ConditionKey}}
          </span>
          <div>
            <p class="section-kicker-light">{{.Weather.Location}}</p>
            <h2 id="weather-modal-title" class="mt-1 font-display text-2xl font-bold">{{t .View "home.weather.forecastTitle"}}</h2>
            <p class="mt-2 text-sm text-brand-50">{{.Weather.Temp}}°C · {{.Weather.Condition}}</p>
          </div>
        </div>
      </div>
      <div class="overflow-y-auto p-4 sm:p-6">
        {{if .Weather.Days}}
        <div class="weather-forecast-grid">
          {{range .Weather.Days}}
          <article class="weather-day-card">
            <div class="flex items-start justify-between gap-2">
              <div>
                <p class="text-sm font-semibold text-slate-900 dark:text-white">{{.Weekday}}</p>
                <p class="text-xs text-slate-500 dark:text-slate-400">{{.DateLabel}}</p>
              </div>
              <span class="weather-icon weather-icon--{{.IconTone}}" aria-hidden="true">
                {{template "weather_icon" .ConditionKey}}
              </span>
            </div>
            <p class="mt-3 line-clamp-2 text-xs font-medium text-slate-600 dark:text-slate-300">{{.Condition}}</p>
            <div class="mt-4 flex items-end justify-between gap-2">
              <div>
                <p class="text-lg font-bold text-slate-900 dark:text-white">{{.High}}°</p>
                <p class="text-xs text-slate-500 dark:text-slate-400">{{.Low}}°</p>
              </div>
              <p class="inline-flex items-center gap-1 rounded-full bg-sky-50 px-2 py-1 text-[11px] font-semibold text-sky-700 dark:bg-sky-950/50 dark:text-sky-300">
                <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v13M8 20l4-4 4 4"/></svg>
                {{.PrecipChance}}%
              </p>
            </div>
          </article>
          {{end}}
        </div>
        {{else}}
        <p class="py-8 text-center text-sm text-slate-500">{{t .View "home.weather.forecastUnavailable"}}</p>
        {{end}}
        <p class="mt-5 text-xs text-slate-500 dark:text-slate-400">{{t .View "home.weather.disclaimer"}}</p>
      </div>
    </div>
  </div>
</main>
{{template "footer" .View}}
{{template "scripts" .View}}