@extends('frontend.main_master')

@section('title', "Fire Element in Astrology: Traits & Signs (Aries, Leo, Sagittarius) - " . t('site-title'))
@section('meta_description', "Explore the Fire Element in astrology: personality traits, symbolism, balance, and characteristics of Aries, Leo, Sagittarius with Astro Wise.")
@section('meta_keywords', "Fire Element astrology, fire element, Aries, Leo, Sagittarius, astrology elements USA, astro wise")

@push('schema')
<x-seo.schema-article
    title="Fire Element in Astrology: Complete Guide"
    description="The Fire element embodies dynamic enthusiasm, spontaneous courage, creative inspiration, and passionate vitality."
    image="{{ asset('frontend/images/elements/' . 'fire' . '.webp') }}"
/>
<x-seo.schema-breadcrumb :items="[['name' => 'Home', 'url' => route('index')], ['name' => 'Astrological Elements', 'url' => route('elements.index')], ['name' => 'Fire Element', 'url' => url()->current()]]" />
@endpush

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="text-center mb-5">
                <span class="badge bg-primary px-3 py-2 fs-6 rounded-pill mb-3">Aries, Leo, Sagittarius</span>
                <h1 class="display-4 fw-bold mb-3">Fire Element</h1>
                <p class="lead text-muted max-w-700 mx-auto">The Fire element embodies dynamic enthusiasm, spontaneous courage, creative inspiration, and passionate vitality.</p>
            </div>

            <div class="card border-0 shadow-sm p-4 p-md-5 rounded-4 mb-5">
                <h2 class="fw-bold mb-3">Elemental Nature & Influence</h2>
                <p class="text-secondary lh-lg mb-4">Fire signs are energetic pioneers who ignite action and inspire leadership. They follow intuitive sparks with unshakeable confidence and illuminate their path with bold creativity and warm generosity.</p>
                <div class="d-flex flex-wrap gap-3">
                    <a href="{{ route('birth-chart.index') }}" class="btn btn-astro-primary px-4 py-2">
                        <i class="bi bi-compass me-2"></i>Calculate Your Elemental Balance
                    </a>
                    <a href="{{ route('elements.index') }}" class="btn btn-outline-secondary px-4 py-2">
                        Explore All 4 Elements
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection