@extends('frontend.main_master')

@section('title', 'The Planets in Astrology: Meaning & Influence | ' . t('site-title', 'Astro Wise'))
@section('meta_description', 'Complete guide to the astrological planets: Sun, Moon, Mercury, Venus, Mars, Jupiter, Saturn, Uranus, Neptune, and Pluto. Discover their archetypal power in your natal chart.')
@section('meta_keywords', 'planets in astrology, astrology planets, sun sign, moon sign, mercury in astrology, venus, mars, jupiter, saturn, uranus, neptune, pluto, natal chart planets')
@push('schema')
<x-seo.schema-article 
    headline="The Planets in Astrology: Meaning & Influence" 
    description="Complete guide to the astrological planets: their archetypes, symbolism, and psychological impact across the astrological houses."
    image="{{ asset('assets/merkur-160x160.png') }}" />
<x-seo.schema-breadcrumb :items="[['name' => 'Home', 'url' => route('home')], ['name' => 'Planets', 'url' => url()->current()]]" />
@endpush

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

@section('content')
<div class="planets-page">
    {{-- Breadcrumb Component --}}
    <x-breadcrumb 
        :items="[['name' => 'Home', 'url' => route('home')], ['name' => 'Planets', 'url' => route('planets.index')]]"
        class="planets-breadcrumb"
        container-class="container"
    />
    <section class="planets-hero text-center py-5" aria-labelledby="planets-title">
        <div class="container">
            <h1 id="planets-title" class="display-4 fw-bold mb-3">The Planets in Astrology</h1>
            <p class="lead text-muted mb-0"><a href="{{ auth()->check() ? route('panel') : route('login') }}" class="text-muted text-decoration-underline">Discover your cosmic drives and planetary blueprint</a></p>
        </div>
    </section>
    
    <section class="planets-section py-5" aria-label="Planetary Archetypes Grid">
        <div class="container">
            <div class="planets-grid">
                @php
                    $planets = [
                        ['name' => 'Sun', 'image' => 'gunes-160x160.webp', 'route' => 'planets.sun', 'snippet' => 'Core identity, conscious vitality, and life purpose.'],
                        ['name' => 'Moon', 'image' => 'ay-160x160.webp', 'route' => 'planets.moon', 'snippet' => 'Emotional foundations, instinctual reactions, and inner safety.'],
                        ['name' => 'Mercury', 'image' => 'merkur-160x160.webp', 'route' => 'planets.mercury', 'snippet' => 'Mental processes, communication style, and intellectual analysis.'],
                        ['name' => 'Venus', 'image' => 'venus-160x160.webp', 'route' => 'planets.venus', 'snippet' => 'Love, relational harmony, core values, and aesthetic appreciation.'],
                        ['name' => 'Mars', 'image' => 'mars-160x160.webp', 'route' => 'planets.mars', 'snippet' => 'Drive, assertion, ambition, courage, and decisive action.'],
                        ['name' => 'Jupiter', 'image' => 'jupiter-160x160.webp', 'route' => 'planets.jupiter', 'snippet' => 'Expansion, higher wisdom, abundance, faith, and philosophy.'],
                        ['name' => 'Saturn', 'image' => 'saturn-160x160.webp', 'route' => 'planets.saturn', 'snippet' => 'Structure, discipline, boundaries, mastery, and endurance.'],
                        ['name' => 'Uranus', 'image' => 'uranus-160x160.webp', 'route' => 'planets.uranus', 'snippet' => 'Innovation, liberation, breakthrough insights, and sudden change.'],
                        ['name' => 'Neptune', 'image' => 'neptun-160x160.webp', 'route' => 'planets.neptune', 'snippet' => 'Spirituality, subtle perception, artistic imagination, and idealism.'],
                        ['name' => 'Pluto', 'image' => 'pluton-160x160.webp', 'route' => 'planets.pluto', 'snippet' => 'Radical transformation, inner power, regeneration, and rebirth.'],
                    ];
                @endphp
                @foreach($planets as $planet)
                    <div class="planet-card text-center p-4 border rounded-4 bg-white shadow-sm transition-all">
                        <a href="{{ route($planet['route']) }}" class="text-decoration-none d-flex flex-column align-items-center">
                            <img src="{{ asset('assets/' . $planet['image']) }}" 
                                 alt="{{ $planet['name'] }} Planet in Astrology" 
                                 class="planet-image mb-3" width="140" height="140" loading="lazy">
                            <h3 class="planet-name h5 fw-bold text-dark mb-2">{{ $planet['name'] }}</h3>
                            <p class="planet-snippet text-muted small mb-0">{{ $planet['snippet'] }}</p>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
</div>
@endsection