@extends('layouts.app')
@section('title', 'Our Services')
@section('meta_description', 'Innerharmony Counselling, Chakra Healing, Reiki, NLP, Hypnotherapy and more – offered online and in South Delhi by Auromon Chakrabarti.')

@section('content')

<div class="page-hero">
    <div class="container">
        <h1>Our Services</h1>
        <p class="lead mt-2">Personalised healing for mind, body & spirit</p>
        <nav aria-label="breadcrumb"><ol class="breadcrumb justify-content-center mb-0">
            <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-warning">Home</a></li>
            <li class="breadcrumb-item active text-white">Services</li>
        </ol></nav>
    </div>
</div>

<section class="py-5" style="background:var(--light-bg)">
    <div class="container">
        <div class="row g-4">
            @forelse($services as $service)
            <div class="col-md-6 col-lg-4">
                <div class="card service-card h-100">
                    @if($service->image)
                        <img src="{{ asset('storage/'.$service->image) }}" class="card-img-top" alt="{{ $service->title }}">
                    @else
                        <div class="d-flex align-items-center justify-content-center"
                             style="height:210px;background:linear-gradient(135deg,#f0e8f7,#e8d4f5)">
                            <i class="{{ $service->icon ?? 'fas fa-spa' }} fa-3x" style="color:var(--purple-dark);opacity:0.6"></i>
                        </div>
                    @endif
                    <div class="card-body text-center p-4">
                        <h5 class="card-title mb-2">{{ $service->title }}</h5>
                        <p class="card-text text-muted small">{{ $service->short_description }}</p>
                        <a href="{{ route('service.detail', $service->slug) }}" class="btn btn-outline-primary btn-sm mt-2">Learn More</a>
                    </div>
                </div>
            </div>
            @empty
            @php
            $defaultServices = [
                ['icon'=>'fas fa-heart','slug'=>'#','title'=>'Innerharmony Counselling Online',
                 'desc'=>'Comprehensive counselling sessions addressing emotional, mental & spiritual wellbeing from the comfort of your home.'],
                ['icon'=>'fas fa-dharmachakra','slug'=>'#','title'=>'Chakra Healing Online',
                 'desc'=>'Balance all 7 energy centres through guided online healing sessions tailored uniquely to your current energetic state.'],
                ['icon'=>'fas fa-heart-pulse','slug'=>'#','title'=>'Heart Chakra Healing',
                 'desc'=>'Open your Anahata chakra to unlock deeper love, self-compassion, forgiveness and emotional freedom.'],
                ['icon'=>'fas fa-om','slug'=>'#','title'=>'Online Meditation Consultation',
                 'desc'=>'Personalised meditation guidance to cultivate inner peace, sharpen focus, and build lasting daily mindfulness practice.'],
                ['icon'=>'fas fa-brain','slug'=>'#','title'=>'Emotional Wellbeing Online',
                 'desc'=>'Therapeutic support for anxiety, grief, trauma, and life transitions through an integrative Innerharmony approach.'],
                ['icon'=>'fas fa-wind','slug'=>'#','title'=>'Anger & Stress Management',
                 'desc'=>'Proven techniques to identify emotional triggers, regulate responses and channel energy positively and constructively.'],
                ['icon'=>'fas fa-rings-wedding','slug'=>'#','title'=>'Pre-Marital Counselling',
                 'desc'=>'Build a strong foundation before marriage — covering communication styles, expectations, values and conflict resolution.'],
                ['icon'=>'fas fa-child-reaching','slug'=>'#','title'=>'Inner Child Healing',
                 'desc'=>'Gently explore and heal early childhood wounds that continue to influence adult relationships and self-worth.'],
                ['icon'=>'fas fa-moon','slug'=>'#','title'=>'Past Life Regression',
                 'desc'=>'Journey beyond the present lifetime to uncover patterns, unresolved karma and soul-level insights for healing today.'],
                ['icon'=>'fas fa-hands-holding-heart','slug'=>'#','title'=>'Reiki Healing',
                 'desc'=>'Channel universal life-force energy to dissolve physical and emotional blockages and restore deep relaxation.'],
                ['icon'=>'fas fa-comments','slug'=>'#','title'=>'NLP Life Coaching',
                 'desc'=>'Neuro-Linguistic Programming techniques to rewire limiting beliefs and install powerful new mindset patterns rapidly.'],
                ['icon'=>'fas fa-couch','slug'=>'#','title'=>'Clinical Hypnotherapy',
                 'desc'=>'Work directly with the subconscious mind to release deep-seated fears, phobias, habits and emotional patterns.'],
            ];
            @endphp
            @foreach($defaultServices as $s)
            <div class="col-md-6 col-lg-4">
                <div class="card service-card h-100">
                    <div class="d-flex align-items-center justify-content-center"
                         style="height:210px;background:linear-gradient(135deg,#f0e8f7,#e8d4f5)">
                        <i class="{{ $s['icon'] }} fa-3x" style="color:var(--purple-dark);opacity:0.65"></i>
                    </div>
                    <div class="card-body text-center p-4">
                        <h5 class="card-title mb-2">{{ $s['title'] }}</h5>
                        <p class="card-text text-muted small">{{ $s['desc'] }}</p>
                        <a href="{{ route('contact') }}" class="btn btn-outline-primary btn-sm mt-2">Enquire Now</a>
                    </div>
                </div>
            </div>
            @endforeach
            @endforelse
        </div>
    </div>
</section>

<!-- Online Sessions Banner -->
<section class="py-5 text-white text-center" style="background:linear-gradient(135deg,var(--purple-dark),var(--purple-medium))">
    <div class="container col-lg-8">
        <i class="fas fa-laptop-medical fa-2x mb-3" style="color:var(--gold)"></i>
        <h2 class="mb-3">All Services Available Online</h2>
        <p class="lead mb-4" style="opacity:0.9">Connect with me from anywhere in India or abroad via Zoom or WhatsApp video. Same depth of healing, from your own safe space.</p>
        <a href="{{ route('contact') }}" class="btn btn-gold btn-lg px-5">Book Online Session</a>
    </div>
</section>
@endsection