@extends('frontend.main_master')

{{-- SEO Meta Tags --}}
@section('title', 'The 12 Zodiac Signs & Astrological Meanings | ' . t('site-title', 'Astro Wise'))
@section('meta_description', 'Complete guide to the 12 zodiac signs: Aries, Taurus, Gemini, Cancer, Leo, Virgo, Libra, Scorpio, Sagittarius, Capricorn, Aquarius, and Pisces. Discover dates, traits, and elements.')
@section('meta_keywords', 'zodiac signs, astrology signs, 12 zodiac signs, aries, taurus, gemini, cancer, leo, virgo, libra, scorpio, sagittarius, capricorn, aquarius, pisces, horoscope dates')
@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

@push('schema')
<x-seo.schema-article 
    headline="The 12 Zodiac Signs & Astrological Meanings" 
    description="Comprehensive astrological guide to the 12 zodiac signs, their ruling planets, elements, and psychological archetypes."
    image="{{ asset('assets/hero_yellow.webp') }}" />
<x-seo.schema-breadcrumb :items="[['name' => 'Home', 'url' => route('home')], ['name' => 'Zodiac Signs', 'url' => route('zodiac.index')]]" />
@endpush

@section('content')
<div class="zodiacs-page">
    {{-- Breadcrumb Component --}}
    <x-breadcrumb 
        :items="[['name' => 'Home', 'url' => route('home')], ['name' => 'Zodiac Signs', '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">The 12 Zodiac Signs & Traits</h1>
                    <p class="text-muted mb-0">
                        Unlock your cosmic potential: Explore the 12 zodiac signs in your <a href="{{ auth()->check() ? route('panel') : route('login') }}" class="text-primary text-decoration-underline"><strong>natal chart</strong></a> and discover their influence on your life.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5">
        <div class="container">
            <div class="row g-4 justify-content-center">
                @php
                    $zodiacs = [
                        ['name' => 'Aries', 'img' => 'Koç.png', 'route' => 'zodiac.koc', 'date' => 'Mar 21 - Apr 19'],
                        ['name' => 'Taurus', 'img' => 'boğa.png', 'route' => 'zodiac.boga', 'date' => 'Apr 20 - May 20'],
                        ['name' => 'Gemini', 'img' => 'İkizler.png', 'route' => 'zodiac.ikizler', 'date' => 'May 21 - Jun 20'],
                        ['name' => 'Cancer', 'img' => 'Yengeç.png', 'route' => 'zodiac.yengec', 'date' => 'Jun 21 - Jul 22'],
                        ['name' => 'Leo', 'img' => 'aslan.png', 'route' => 'zodiac.aslan', 'date' => 'Jul 23 - Aug 22'],
                        ['name' => 'Virgo', 'img' => 'başak.png', 'route' => 'zodiac.basak', 'date' => 'Aug 23 - Sep 22'],
                        ['name' => 'Libra', 'img' => 'terazi.png', 'route' => 'zodiac.terazi', 'date' => 'Sep 23 - Oct 22'],
                        ['name' => 'Scorpio', 'img' => 'akrep.png', 'route' => 'zodiac.akrep', 'date' => 'Oct 23 - Nov 21'],
                        ['name' => 'Sagittarius', 'img' => 'yay.png', 'route' => 'zodiac.yay', 'date' => 'Nov 22 - Dec 21'],
                        ['name' => 'Capricorn', 'img' => 'oğlak.png', 'route' => 'zodiac.oglak', 'date' => 'Dec 22 - Jan 19'],
                        ['name' => 'Aquarius', 'img' => 'kova.png', 'route' => 'zodiac.kova', 'date' => 'Jan 20 - Feb 18'],
                        ['name' => 'Pisces', 'img' => 'balık.png', 'route' => 'zodiac.balik', 'date' => 'Feb 19 - Mar 20'],
                    ];
                @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