@extends('frontend.main_master')

@section('title', "Water Element in Astrology: Traits & Signs (Cancer, Scorpio, Pisces) - " . t('site-title'))
@section('meta_description', "Explore the Water Element in astrology: personality traits, symbolism, balance, and characteristics of Cancer, Scorpio, Pisces with Astro Wise.")
@section('meta_keywords', "Water Element astrology, water element, Cancer, Scorpio, Pisces, astrology elements USA, astro wise")

@push('schema')
<x-seo.schema-article
    title="Water Element in Astrology: Complete Guide"
    description="The Water element channels emotional depth, psychic intuition, empathetic healing, and spiritual mystery."
    image="{{ asset('frontend/images/elements/' . 'water' . '.webp') }}"
/>
<x-seo.schema-breadcrumb :items="[['name' => 'Home', 'url' => route('index')], ['name' => 'Astrological Elements', 'url' => route('elements.index')], ['name' => 'Water 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">Cancer, Scorpio, Pisces</span>
                <h1 class="display-4 fw-bold mb-3">Water Element</h1>
                <p class="lead text-muted max-w-700 mx-auto">The Water element channels emotional depth, psychic intuition, empathetic healing, and spiritual mystery.</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">Water signs perceive subtle emotional currents beneath the surface. They offer profound empathy, transformative psychological depth, and mystical connection that bridges heart and soul.</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