@extends('frontend.main_master')

@section('title', 'Los Cuatro Elementos en Astrología: Fuego, Tierra, Aire y Agua | ' . t('site-title'))
@section('meta_description', 'Los cuatro elementos en astrología: Fuego, Tierra, Aire y Agua. Guía completa sobre su influencia en los signos zodiacales, el temperamento y la carta natal.')
@section('meta_keywords', 'elementos astrologia, elemento fuego, elemento tierra, elemento aire, elemento agua, signos zodiacales elementos, temperamento astrologico')
@push('schema')
<x-seo.schema-article 
    headline="Los Cuatro Elementos en Astrología: Fuego, Tierra, Aire y Agua" 
    description="Los cuatro elementos en astrología: Fuego, Tierra, Aire y Agua. Guía completa sobre su influencia en los signos zodiacales y el temperamento."
    image="{{ asset('frontend/images/og-image.jpg') }}" />
<x-seo.schema-breadcrumb :items="[['name' => 'Inicio', 'url' => route('index')], ['name' => 'Elementos', 'url' => url()->current()]]" />
@endpush

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

@section('content')
<div class="natal-harita-page">
    {{-- Breadcrumb Component --}}
    <x-breadcrumb 
        :items="App\Helpers\BreadcrumbHelper::forElement()"
        class="elements-breadcrumb"
        container-class="container"
    />

    <!-- Hero Section -->
    <section class="hero py-5">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-12 col-lg-8 mx-auto">
                    <div class="hero-content-wrapper">
                        <h1 class="text-balance display-4 display-md-3 display-lg-2 mb-4">Los Elementos en la Astrología</h1>
                        <p class="lead text-pretty fs-5 fs-md-4 mb-4">
                            Los cuatro elementos primordiales —Fuego, Tierra, Aire y Agua— constituyen los cimientos de la astrología clásica y humanista. Definen las cualidades energéticas de los signos, el temperamento de la persona y su modo particular de interactuar con el mundo.
                        </p>
                        <div class="hero-buttons d-flex flex-column flex-md-row gap-3">
                            <a href="{{ auth()->check() ? route('panel') : route('login') }}" class="hero-btn-primary text-center">Calcular Mi Carta</a>
                            <a href="#elementler" class="hero-btn-secondary text-center">Explorar los Elementos</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
        
    <!-- Los Elementos en Astrología -->
    <section id="nedir" class="bg-white-section py-5">
        <div class="container">
            <h2 class="section-title mb-4">La Doctrina de los Elementos en Astrología</h2>
            <div class="row align-items-center">
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <img src="{{ asset('assets/Elementler/elementler.webp') }}" alt="Elementos en Astrología" class="img-fluid rounded">
                </div>
                <div class="col-lg-6">
                    <div class="content-text">
                        <p>
                            Los elementos constituyen la base de la alquimia, la medicina tradicional y la astrología. A lo largo de la historia, civilizaciones orientales y occidentales han estudiado cómo las fuerzas de la naturaleza se manifiestan en la constitución del ser humano.
                        </p>
                        <p>
                            Desde los tratados védicos y el concepto del Yin y el Yang en el pensamiento oriental, hasta la doctrina de los cuatro humores de Hipócrates y las cuatro funciones psicológicas de Carl Gustav Jung (intuición, sensación, pensamiento y sentimiento), los elementos nos ofrecen un marco universal para comprender la psique humana.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Doctrinas Históricas -->
    <section id="elementler-doktrini" class="bg-white-section py-5">
        <div class="container">
            <h2 class="section-title mb-2">Orígenes Filosóficos y Tradicionales</h2>
            <p class="section-subtitle mb-4">Fuego, Tierra, Aire y Agua</p>
            <div class="row">
                <div class="col-12 col-lg-10 mx-auto">
                    <div class="content-text">
                        <p class="mb-4">
                            En las tradiciones filosóficas de la antigüedad, el cosmos entero se concebía como una danza armónica entre cuatro principios elementales. En la filosofía presocrática griega, pensadores como Empédocles postularon que todas las sustancias del universo resultan de la combinación de las cuatro raíces elementales.
                        </p>
                        <p class="mb-4">
                            En el pensamiento taoísta encontramos las polaridades <strong>Yang</strong> (activa, emisora, luminosa, asociada al Fuego y al Aire) y <strong>Yin</strong> (receptiva, introspectiva, contenedora, asociada a la Tierra y al Agua).
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- La Medicina Clásica y los Humores -->
    <section id="yorumlama" class="py-5">
        <div class="container">
            <h2 class="section-title mb-2 text-center">Los Cuatro Temperamentos en la Historia</h2>
            <p class="section-subtitle mb-4 text-center">
                En la medicina grecorromana e hipocrática, los cuatro elementos se correspondían directamente con los cuatro humores y temperamentos:
            </p>
            <div class="row g-4">
                <div class="col-md-6 col-lg-3">
                    <div class="astro-card text-center">
                        <h4 class="card-title">Sanguíneo</h4>
                        <p class="mb-0">Elemento Aire • Cálido y Húmedo</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="astro-card text-center">
                        <h4 class="card-title">Colérico</h4>
                        <p class="mb-0">Elemento Fuego • Cálido y Seco</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="astro-card text-center">
                        <h4 class="card-title">Melancólico</h4>
                        <p class="mb-0">Elemento Tierra • Frío y Seco</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="astro-card text-center">
                        <h4 class="card-title">Flemático</h4>
                        <p class="mb-0">Elemento Agua • Frío y Húmedo</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Psicología y Elementos -->
    <section id="psikoloji" class="py-5">
        <div class="container">
            <h2 class="section-title mb-4">Los Elementos en la Psicología Moderna</h2>
            <div class="row">
                <div class="col-12 col-lg-10 mx-auto">
                    <div class="content-text">
                        <p class="mb-4">
                            El célebre psiquiatra suizo Carl Gustav Jung formuló en su psicología analítica cuatro funciones arquetípicas que guardan una perfecta correspondencia con los cuatro elementos astrológicos:
                        </p>

                        <ul class="mb-4">
                            <li><strong>Fuego (Intuición):</strong> Percepción del potencial futuro, visión inspirada y voluntad de autoexpresión activa.</li>
                            <li><strong>Tierra (Sensación):</strong> Percepción de la realidad concreta, sentido práctico y contacto con el plano físico.</li>
                            <li><strong>Aire (Pensamiento):</strong> Análisis lógico, conceptualización racional y comunicación objetiva.</li>
                            <li><strong>Agua (Sentimiento):</strong> Evaluación afectiva, empatía, resonancia emocional y profundidad íntima.</li>
                        </ul>

                        <p class="mb-4">
                            El balance elemental de una carta natal nos permite comprender de forma inmediata cómo procesa la realidad el individuo, qué fortalezas psicológicas predominan y qué aspectos requieren mayor integración consciente.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
 
    <!-- Ciclo de los Elementos -->
    <section id="zodyak-dongu" class="bg-white-section py-5">
        <div class="container">
            <h2 class="section-title mb-4">La Rueda Zodiacal y el Ciclo Elemental</h2>
            <div class="row">
                <div class="col-12 col-lg-10 mx-auto">
                    <div class="content-text">
                        <p class="mb-0">
                            La rueda del zodiaco recorre una secuencia continua de los cuatro elementos: comienza con el Fuego pionero de Aries, prosigue con la Tierra nutricia de Tauro, se expande en el Aire sociable de Géminis y se interioriza en el Agua sensible de Cáncer. Esta secuencia cuádruple se repite en tres octavas evolutivas (Aries a Cáncer, Leo a Escorpio, y Sagitario a Piscis), completando el desarrollo integral de la consciencia.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Tarjetas de Elementos -->
    <section id="elementler" class="py-5">
        <div class="container">
            <h2 class="section-title mb-2 text-center">Los 4 Elementos y sus Signos</h2>
            <p class="section-subtitle mb-4 text-center">Cada elemento aporta una cualidad única a la experiencia vital</p>
            <div class="row g-3 g-md-4">
                {{-- Elemento Fuego --}}
                <div class="col-12 col-sm-6 col-md-6 col-lg-3">
                    <a href="{{ route('zodiac.koc') }}" class="text-decoration-none">
                        <div class="element-card fire">
                            <div class="element-card-content">
                                <h3 class="card-title">Fuego</h3>
                                <p class="card-meta">Aries • Leo • Sagitario</p>
                                <p class="element-card-text">
                                    Energía, entusiasmo, valentía y liderazgo. Los signos de fuego son apasionados, creativos y dinámicos.
                                </p>
                            </div>
                        </div>
                    </a>
                </div>

                {{-- Elemento Tierra --}}
                <div class="col-12 col-sm-6 col-md-6 col-lg-3">
                    <a href="{{ route('zodiac.boga') }}" class="text-decoration-none">
                        <div class="element-card earth">
                            <div class="element-card-content">
                                <h3 class="card-title">Tierra</h3>
                                <p class="card-meta">Tauro • Virgo • Capricornio</p>
                                <p class="element-card-text">
                                    Estabilidad, practicidad, sentido común y constancia. Los signos de tierra son confiables, minuciosos y realistas.
                                </p>
                            </div>
                        </div>
                    </a>
                </div>

                {{-- Elemento Aire --}}
                <div class="col-12 col-sm-6 col-md-6 col-lg-3">
                    <a href="{{ route('zodiac.ikizler') }}" class="text-decoration-none">
                        <div class="element-card air">
                            <div class="element-card-content">
                                <h3 class="card-title">Aire</h3>
                                <p class="card-meta">Géminis • Libra • Acuario</p>
                                <p class="element-card-text">
                                    Intelecto, comunicación, intercambio social y visión conceptual. Los signos de aire son curiosos, diplomáticos y objetivos.
                                </p>
                            </div>
                        </div>
                    </a>
                </div>

                {{-- Elemento Agua --}}
                <div class="col-12 col-sm-6 col-md-6 col-lg-3">
                    <a href="{{ route('zodiac.yengec') }}" class="text-decoration-none">
                        <div class="element-card water">
                            <div class="element-card-content">
                                <h3 class="card-title">Agua</h3>
                                <p class="card-meta">Cáncer • Escorpio • Piscis</p>
                                <p class="element-card-text">
                                    Emoción, intuición, empatía y sensibilidad poética. Los signos de agua son afectuosos, profundos y compasivos.
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Signos de Fuego -->
    <section id="ates" class="bg-white-section py-5">
        <div class="container">
            <h2 class="section-title mb-4">Signos de Fuego: Aries, Leo y Sagitario</h2>
            <div class="row align-items-center">
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <img src="{{ asset('assets/Elementler/ateş.webp') }}" alt="Signos de Fuego" class="img-fluid rounded">
                </div>
                <div class="col-lg-6">
                    <div class="content-text">
                        <p>
                            Los signos de Fuego poseen una energía radiante, entusiasta y motivadora. Son personas pioneras que confían en su intuición para abrir caminos. Aries aporta la chispa inicial y la valentía del guerrero; Leo consolida la autoexpresión generosa y el liderazgo noble; Sagitario expande la visión hacia nuevos horizontes filosóficos y trascendentes.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Signos de Tierra -->
    <section id="toprak" class="py-5">
        <div class="container">
            <h2 class="section-title mb-4">Signos de Tierra: Tauro, Virgo y Capricornio</h2>
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="content-text">
                        <p>
                            Los signos de Tierra proporcionan solidez, realismo y maestría práctica. Buscan edificar sobre cimientos firmes y duraderos. Tauro aprecia la belleza sensorial y la estabilidad material; Virgo perfecciona los métodos a través del análisis y el servicio diligente; Capricornio escala con disciplina y sentido del deber hacia la cúspide de sus metas profesionales.
                        </p>
                    </div>
                </div>
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <img src="{{ asset('assets/Elementler/toprak.webp') }}" alt="Signos de Tierra" class="img-fluid rounded">
                </div>
            </div>
        </div>
    </section>

    <!-- Signos de Aire -->
    <section id="hava" class="bg-white-section py-5">
        <div class="container">
            <h2 class="section-title mb-4">Signos de Aire: Géminis, Libra y Acuario</h2>
            <div class="row align-items-center">
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <img src="{{ asset('assets/Elementler/hava.webp') }}" alt="Signos de Aire" class="img-fluid rounded">
                </div>
                <div class="col-lg-6">
                    <div class="content-text">
                        <p>
                            Los signos de Aire operan en el plano de las ideas, el lenguaje y las conexiones humanas. Géminis estimula la curiosidad polifacética y la agilidad comunicativa; Libra busca el equilibrio, la justicia y la armonía relacional; Acuario proyecta ideales innovadores y humanitarios hacia el futuro de la sociedad.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Signos de Agua -->
    <section id="su" class="py-5">
        <div class="container">
            <h2 class="section-title mb-4">Signos de Agua: Cáncer, Escorpio y Piscis</h2>
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="content-text">
                        <p>
                            Los signos de Agua navegan las corrientes del corazón, la memoria y el alma. Cáncer nutre y preserva los lazos afectivos fundamentales; Escorpio bucea en las profundidades de la psique para propiciar la sanación y la regeneración; Piscis se funde en la compasión universal y la inspiración mística.
                        </p>
                    </div>
                </div>
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <img src="{{ asset('assets/Elementler/su.webp') }}" alt="Signos de Agua" class="img-fluid rounded">
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section id="harita-olustur" class="bg-white-section py-5">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <img src="{{ asset('assets/Elementler/elementler.webp') }}" alt="Equilibrio Elemental" class="img-fluid rounded">
                </div>
                <div class="col-12 col-lg-6">
                    <h2 class="section-title text-center text-lg-start mb-4">El Balance Elemental en tu Carta Natal</h2>
                    <p class="lead mb-0 text-center text-lg-start">
                        Conocer tu distribución elemental es el primer paso para armonizar tu vida. En una sinastría o carta de pareja, la compatibilidad de elementos revela si existe entendimiento fluido, complementariedad estimulante o desafíos de temperamento a resolver.
                    </p>
                </div>
            </div>
        </div>
    </section>

</div>
@endsection