@extends('frontend.main_master')

{{-- SEO Meta Tags --}}
@section('title', 'Los 12 Signos del Zodiaco y sus Características | ' . t('site-title'))
@section('meta_description', 'Guía completa de los 12 signos zodiacales: Aries, Tauro, Géminis, Cáncer, Leo, Virgo, Libra, Escorpio, Sagitario, Capricornio, Acuario y Piscis. Descubre su significado astrológico.')
@section('meta_keywords', 'signos del zodiaco, signos zodiacales, aries, tauro, geminis, cancer, leo, virgo, libra, escorpio, sagitario, capricornio, acuario, piscis, astrologia')
@section('og_image', asset('assets/hero_yellow.webp'))

@push('styles')
<link rel="stylesheet" href="{{ asset('frontend/css/page-home.css') }}">
<link rel="stylesheet" href="{{ asset('frontend/css/content/zodiac.css') }}">
@endpush

@section('content')
<div class="zodiacs-page">
    {{-- Breadcrumb Component --}}
    <x-breadcrumb 
        :items="[['name' => 'Inicio', 'url' => route('home')], ['name' => 'Signos del Zodiaco', 'url' => route('zodiac.index')]]"
        class="zodiacs-breadcrumb"
        container-class="container"
    />

    <section class="zodiacs-hero d-flex align-items-center justify-content-center text-center">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <h1 class="mb-3">Los 12 Signos del Zodiaco y sus Características</h1>
                    <p class="text-muted mb-0">
                        Descubra su potencial cósmico: analice la posición de los 12 signos en su <a href="{{ auth()->check() ? route('panel') : route('login') }}" class="text-primary text-decoration-underline"><strong>carta natal</strong></a> y su influencia en su vida.
                    </p>
                </div>
            </div>
        </div>
    </section>

    
    <section class="py-5">
        <div class="container">
            <div class="row g-4 justify-content-center">
                @php
                    $zodiacs = [
                        ['name' => __('messages.zodiac_aries'), 'img' => 'Koç.png', 'route' => 'zodiac.koc', 'date' => __('messages.zodiac_aries_date')],
                        ['name' => __('messages.zodiac_taurus'), 'img' => 'boğa.png', 'route' => 'zodiac.boga', 'date' => __('messages.zodiac_taurus_date')],
                        ['name' => __('messages.zodiac_gemini'), 'img' => 'İkizler.png', 'route' => 'zodiac.ikizler', 'date' => __('messages.zodiac_gemini_date')],
                        ['name' => __('messages.zodiac_cancer'), 'img' => 'Yengeç.png', 'route' => 'zodiac.yengec', 'date' => __('messages.zodiac_cancer_date')],
                        ['name' => __('messages.zodiac_leo'), 'img' => 'aslan.png', 'route' => 'zodiac.aslan', 'date' => __('messages.zodiac_leo_date')],
                        ['name' => __('messages.zodiac_virgo'), 'img' => 'başak.png', 'route' => 'zodiac.basak', 'date' => __('messages.zodiac_virgo_date')],
                        ['name' => __('messages.zodiac_libra'), 'img' => 'terazi.png', 'route' => 'zodiac.terazi', 'date' => __('messages.zodiac_libra_date')],
                        ['name' => __('messages.zodiac_scorpio'), 'img' => 'akrep.png', 'route' => 'zodiac.akrep', 'date' => __('messages.zodiac_scorpio_date')],
                        ['name' => __('messages.zodiac_sagittarius'), 'img' => 'yay.png', 'route' => 'zodiac.yay', 'date' => __('messages.zodiac_sagittarius_date')],
                        ['name' => __('messages.zodiac_capricorn'), 'img' => 'oğlak.png', 'route' => 'zodiac.oglak', 'date' => __('messages.zodiac_capricorn_date')],
                        ['name' => __('messages.zodiac_aquarius'), 'img' => 'kova.png', 'route' => 'zodiac.kova', 'date' => __('messages.zodiac_aquarius_date')],
                        ['name' => __('messages.zodiac_pisces'), 'img' => 'balık.png', 'route' => 'zodiac.balik', 'date' => __('messages.zodiac_pisces_date')],
                    ];
                @endphp

                @foreach($zodiacs as $zodiac)
                    <div class="col-6 col-md-4 col-lg-2 d-flex justify-content-center">
                        <a href="{{ route($zodiac['route']) }}" class="zodiac-item text-center">
                            <img src="{{ asset('assets/Burclar sayfası burçlar/' . $zodiac['img']) }}" 
                                 alt="{{ $zodiac['name'] }}" 
                                 loading="lazy">
                            <h3 class="zodiac-name">{{ $zodiac['name'] }}</h3>
                            <p class="zodiac-date">{{ $zodiac['date'] }}</p>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
</div>
@endsection