@extends('frontend.main_master')

{{-- SEO Meta Tags --}}
@section('title', 'Astrolojide Burçlar - 12 Burç ve Özellikleri | Astro Bilge')
@section('meta_description', 'Astrolojide 12 burç hakkında detaylı bilgiler. Koç, Boğa, İkizler, Yengeç, Aslan, Başak, Terazi, Akrep, Yay, Oğlak, Kova, Balık burçlarının özellikleri ve anlamları.')
@section('meta_keywords', 'astrolojide burçlar, burçlar, koç, boğa, ikizler, yengeç, aslan, başak, terazi, akrep, yay, oğlak, kova, balık, astroloji')
@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="App\Helpers\BreadcrumbHelper::forCategory('Burçlar', url('/astrolojide-burclar'))"
        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">Astrolojide Burçlar ve Özellikleri</h1>
                    <p class="text-muted mb-0">
    Kozmik potansiyelinizi keşfedin: 12 burcun <a href="{{ auth()->check() ? route('panel') : route('login') }}" class="text-primary text-decoration-underline"><strong>doğum haritanızdaki</strong></a> yerini ve hayatınıza etkilerini hemen analiz edin.
</p>
                </div>
            </div>
        </div>
    </section>

    
    <section class="py-5">
        <div class="container">
            <div class="row g-4 justify-content-center">
                @php
                    $zodiacs = [
                        ['name' => 'Koç Burcu', 'img' => 'Koç.png', 'route' => 'zodiac.koc', 'date' => '21 Mart - 19 Nisan'],
                        ['name' => 'Boğa Burcu', 'img' => 'boğa.png', 'route' => 'zodiac.boga', 'date' => '20 Nisan - 20 Mayıs'],
                        ['name' => 'İkizler Burcu', 'img' => 'İkizler.png', 'route' => 'zodiac.ikizler', 'date' => '21 Mayıs - 20 Haziran'],
                        ['name' => 'Yengeç Burcu', 'img' => 'Yengeç.png', 'route' => 'zodiac.yengec', 'date' => '21 Haziran - 22 Temmuz'],
                        ['name' => 'Aslan Burcu', 'img' => 'aslan.png', 'route' => 'zodiac.aslan', 'date' => '23 Temmuz - 22 Ağustos'],
                        ['name' => 'Başak Burcu', 'img' => 'başak.png', 'route' => 'zodiac.basak', 'date' => '23 Ağustos - 22 Eylül'],
                        ['name' => 'Terazi Burcu', 'img' => 'terazi.png', 'route' => 'zodiac.terazi', 'date' => '23 Eylül - 22 Ekim'],
                        ['name' => 'Akrep Burcu', 'img' => 'akrep.png', 'route' => 'zodiac.akrep', 'date' => '23 Ekim - 21 Kasım'],
                        ['name' => 'Yay Burcu', 'img' => 'yay.png', 'route' => 'zodiac.yay', 'date' => '22 Kasım - 21 Aralık'],
                        ['name' => 'Oğlak Burcu', 'img' => 'oğlak.png', 'route' => 'zodiac.oglak', 'date' => '22 Aralık - 19 Ocak'],
                        ['name' => 'Kova Burcu', 'img' => 'kova.png', 'route' => 'zodiac.kova', 'date' => '20 Ocak - 18 Şubat'],
                        ['name' => 'Balık Burcu', 'img' => 'balık.png', 'route' => 'zodiac.balik', 'date' => '19 Şubat - 20 Mart'],
                    ];
                @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