@section('title', __('stn.title') . ' - ' . config('app.name'))
@section('description', __('stn.description'))
@section('tags', __('stn.tags'))
@section('image', asset('/img/logo.png'))

@extends('layouts.app')

@section('head')

@endsection

@section('content')
<section id="header" class="py-5">
    <p class="text-white text-center" style="letter-spacing: 3px;">{{ __('stn.suptitle') }}</p>
    <h1 class="text-white text-center">{{ __('stn.title') }}</h1>
    <p class="text-white text-center">{{ __('stn.subtitle') }}</p>
 </section>
<div class="container my-5">
    <div class="row">
        <div class="col-md-6 my-auto">
            <h1 class="text-black ft-2-4">{{ __('stn.intro_title') }}</h1>
            <p class="mt-3">
                {!! __('stn.intro_paragraph') !!}
            </p>
        </div>
        <div class="col-md-6 my-auto">
            <div id="stnCarousel" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    @for ($i = 1; $i <= 13; $i++)
                        <div class="carousel-item {{ $i == 1 ? 'active' : '' }}">
                            <img src="{{ asset('/img/stn/' . $i . '.jpg') }}" class="d-block w-100" alt="STN Image {{ $i }}">
                        </div>
                    @endfor
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#stnCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#stnCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
    </div>
</div>
@endsection