@extends('frontend.main_master')

@section('title', 'The Four Elements in Astrology: Fire, Earth, Air & Water | ' . t('site-title', 'Astro Wise'))
@section('meta_description', 'The four primordial elements in astrology: Fire, Earth, Air, and Water. Comprehensive guide to elemental balance, temperament, and natal chart analysis.')
@section('meta_keywords', 'elements in astrology, fire element, earth element, air element, water element, astrology elements, zodiac elements, elemental balance natal chart')
@push('schema')
<x-seo.schema-article 
    headline="The Four Elements in Astrology: Fire, Earth, Air & Water" 
    description="The four primordial elements in astrology: Fire, Earth, Air, and Water. Comprehensive guide to elemental balance, temperament, and natal chart analysis."
    image="{{ asset('frontend/images/og-image.jpg') }}" />
<x-seo.schema-breadcrumb :items="[['name' => 'Home', 'url' => route('home')], ['name' => 'Elements', '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" aria-labelledby="elements-hero-title">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-12 col-lg-8 mx-auto">
                    <div class="hero-content-wrapper text-center">
                        <h1 id="elements-hero-title" class="text-balance display-4 display-md-3 display-lg-2 mb-4 fw-bold">The Elements in Astrology</h1>
                        <p class="lead text-pretty fs-5 fs-md-4 mb-4">
                            The four primordial elements — Fire, Earth, Air, and Water — form the energetic foundation of classical and modern astrology. They define the intrinsic qualities of each zodiac sign, your psychological temperament, and your primary orientation to reality.
                        </p>
                        <div class="hero-buttons d-flex flex-column flex-md-row gap-3 justify-content-center">
                            <a href="{{ auth()->check() ? route('panel') : route('login') }}" class="hero-btn-primary text-center px-4 py-3 rounded-pill">Calculate My Elemental Balance</a>
                            <a href="#elementler" class="hero-btn-secondary text-center px-4 py-3 rounded-pill">Explore the 4 Elements</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
        
    <!-- The 4 Elements Breakdown -->
    <section id="elementler" class="bg-white-section py-5" aria-label="The Four Elements Details">
        <div class="container">
            <div class="row g-4">
                <!-- Fire -->
                <div class="col-md-6 col-lg-3">
                    <div class="card h-100 border-0 shadow-sm p-4 rounded-4 text-center border-top border-danger border-4">
                        <div class="icon-circle mb-3 mx-auto bg-danger text-white d-flex align-items-center justify-content-center" style="width: 60px; height: 60px; border-radius: 50%; font-size: 1.5rem;">
                            <i class="fas fa-fire"></i>
                        </div>
                        <h3 class="h4 fw-bold mb-2">Fire</h3>
                        <p class="text-muted small mb-3"><strong>Aries &bull; Leo &bull; Sagittarius</strong></p>
                        <p class="text-muted">Dynamic, passionate, inspirational, spontaneous, and courageous. Represents spirit, vitality, and creative drive.</p>
                    </div>
                </div>
                <!-- Earth -->
                <div class="col-md-6 col-lg-3">
                    <div class="card h-100 border-0 shadow-sm p-4 rounded-4 text-center border-top border-success border-4">
                        <div class="icon-circle mb-3 mx-auto bg-success text-white d-flex align-items-center justify-content-center" style="width: 60px; height: 60px; border-radius: 50%; font-size: 1.5rem;">
                            <i class="fas fa-mountain"></i>
                        </div>
                        <h3 class="h4 fw-bold mb-2">Earth</h3>
                        <p class="text-muted small mb-3"><strong>Taurus &bull; Virgo &bull; Capricorn</strong></p>
                        <p class="text-muted">Pragmatic, grounded, structured, reliable, and sensory. Represents material reality, stability, and tangible achievement.</p>
                    </div>
                </div>
                <!-- Air -->
                <div class="col-md-6 col-lg-3">
                    <div class="card h-100 border-0 shadow-sm p-4 rounded-4 text-center border-top border-warning border-4">
                        <div class="icon-circle mb-3 mx-auto bg-warning text-dark d-flex align-items-center justify-content-center" style="width: 60px; height: 60px; border-radius: 50%; font-size: 1.5rem;">
                            <i class="fas fa-wind"></i>
                        </div>
                        <h3 class="h4 fw-bold mb-2">Air</h3>
                        <p class="text-muted small mb-3"><strong>Gemini &bull; Libra &bull; Aquarius</strong></p>
                        <p class="text-muted">Intellectual, communicative, objective, social, and conceptual. Represents ideas, exchange, and social connectivity.</p>
                    </div>
                </div>
                <!-- Water -->
                <div class="col-md-6 col-lg-3">
                    <div class="card h-100 border-0 shadow-sm p-4 rounded-4 text-center border-top border-primary border-4">
                        <div class="icon-circle mb-3 mx-auto bg-primary text-white d-flex align-items-center justify-content-center" style="width: 60px; height: 60px; border-radius: 50%; font-size: 1.5rem;">
                            <i class="fas fa-water"></i>
                        </div>
                        <h3 class="h4 fw-bold mb-2">Water</h3>
                        <p class="text-muted small mb-3"><strong>Cancer &bull; Scorpio &bull; Pisces</strong></p>
                        <p class="text-muted">Intuitive, empathetic, deep, emotional, and psychic. Represents the subconscious, sensitivity, and healing.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection