@extends('frontend.main_master')

@section('title', 'Los Planetas en la Astrología y sus Significados | ' . t('site-title'))
@section('meta_description', 'Guía completa de los planetas astrológicos: Sol, Luna, Mercurio, Venus, Marte, Júpiter, Saturno, Urano, Neptuno y Plutón. Descubra su influencia en su carta natal.')
@section('meta_keywords', 'planetas astrología, significado planetas, sol, luna, mercurio, venus, marte, jupiter, saturno, urano, neptuno, pluton')
@push('schema')
<x-seo.schema-article 
    headline="Los Planetas en la Astrología y sus Significados" 
    description="Guía completa de los planetas astrológicos: su influencia en los signos zodiacales y las casas astrológicas."
    image="{{ asset('assets/merkur-160x160.png') }}" />
<x-seo.schema-breadcrumb :items="[['name' => 'Inicio', 'url' => route('home')], ['name' => 'Planetas', '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' => 'Inicio', 'url' => route('home')], ['name' => 'Planetas', 'url' => route('planets.index')]]"
        class="planets-breadcrumb"
        container-class="container"
    />
    <section class="planets-hero">
        <div class="container">
            <h1>Los Planetas en la Astrología</h1>
            <p class="text-muted mb-0"><a href="{{ auth()->check() ? route('panel') : route('login') }}" class="text-muted text-decoration-underline">Descubra su propósito bajo la guía del cosmos</a></p>
        </div>
    </section>
    
    <section class="planets-section">
        <div class="planets-grid">
            @php
                $planets = [
                    ['name' => 'Sol', 'image' => 'gunes-160x160.webp', 'route' => 'planets.sun', 'snippet' => 'Centro de la identidad, vitalidad consciente y propósito de vida.'],
                    ['name' => 'Luna', 'image' => 'ay-160x160.webp', 'route' => 'planets.moon', 'snippet' => 'Necesidades emocionales, mundo subconsciente e intuición.'],
                    ['name' => 'Mercurio', 'image' => 'merkur-160x160.webp', 'route' => 'planets.mercury', 'snippet' => 'Estructura mental, estilo de comunicación y procesamiento intelectual.'],
                    ['name' => 'Venus', 'image' => 'venus-160x160.webp', 'route' => 'planets.venus', 'snippet' => 'Amor, escala de valores, estética y armonía relacional.'],
                    ['name' => 'Marte', 'image' => 'mars-160x160.webp', 'route' => 'planets.mars', 'snippet' => 'Impulso, iniciativa, coraje y energía de conquista.'],
                    ['name' => 'Júpiter', 'image' => 'jupiter-160x160.webp', 'route' => 'planets.jupiter', 'snippet' => 'Expansión, sabiduría, abundancia, optimismo y filosofía de vida.'],
                    ['name' => 'Saturno', 'image' => 'saturn-160x160.webp', 'route' => 'planets.saturn', 'snippet' => 'Estructura, disciplina, límites, madurez y lecciones maestras.'],
                    ['name' => 'Urano', 'image' => 'uranus-160x160.webp', 'route' => 'planets.uranus', 'snippet' => 'Innovación, libertad, genialidad y cambios trascendentales.'],
                    ['name' => 'Neptuno', 'image' => 'neptun-160x160.webp', 'route' => 'planets.neptune', 'snippet' => 'Espiritualidad, inspiración artística, sueños y percepción sutil.'],
                    ['name' => 'Plutón', 'image' => 'pluton-160x160.webp', 'route' => 'planets.pluto', 'snippet' => 'Transformación radical, poder interior, regeneración y renacimiento.'],
                ];
            @endphp
            @foreach($planets as $planet)
                <div class="planet-card">
                    <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'] }}" 
                             class="planet-image" loading="lazy">
                        <h3 class="planet-name">{{ $planet['name'] }}</h3>
                        <p class="planet-snippet">{{ $planet['snippet'] }}</p>
                    </a>
                </div>
            @endforeach
        </div>
    </section>
</div>
@endsection