@extends('layouts.app')
@section('title', 'Contact Us')
@section('meta_description', 'Welcome to Innerharmony
Your Sanctuary for Personalized Holistic Consultancy, where Mind, Body, and Soul Flourish')

@push('styles')
<style>
.contact-info-card {
    background: var(--light-bg);
    border-radius: 14px;
    padding: 2rem;
    height: 100%;
    border-top: 4px solid var(--gold);
}
.contact-info-card .icon-circle {
    width: 52px; height: 52px;
    background: rgba(68,32,100,0.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
}
</style>
@endpush

@section('content')

<div class="page-hero">
    <div class="container">
        <h1>Contact Us</h1>
        <p class="lead mt-2">We'd love to hear from you</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">Contact</li>
        </ol></nav>
    </div>
</div>

<section class="py-5">
    <div class="container">
        <div class="row g-5">

            <!-- Contact Form -->
            <div class="col-lg-7">
                <h2 class="section-title mb-4">Send a Message</h2>

                @if(session('success'))
                <div class="alert alert-success mt-4">
                    <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                </div>
                @endif

                <form action="{{ route('contact.submit') }}" method="POST" class="mt-4">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Full Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                                   placeholder="Your full name" value="{{ old('name') }}" required>
                            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Phone Number <span class="text-danger">*</span></label>
                            <input type="tel" name="phone" class="form-control @error('phone') is-invalid @enderror"
                                   placeholder="+91 98765 43210" value="{{ old('phone') }}" required>
                            @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold">Email Address <span class="text-danger">*</span></label>
                            <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                                   placeholder="your@email.com" value="{{ old('email') }}" required>
                            @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold">Service You're Interested In</label>
                            <select name="service" class="form-select">
                                <option value="">Select a service (optional)</option>
                                @forelse($services as $s)
                                <option value="{{ $s->title }}" {{ old('service') == $s->title ? 'selected' : '' }}>{{ $s->title }}</option>
                                @empty
                                <option>Innerharmony Counselling Online</option>
                                <option>Chakra Healing Online</option>
                                <option>Heart Chakra Healing</option>
                                <option>Online Meditation Consultation</option>
                                <option>Emotional Wellbeing Online</option>
                                <option>Anger & Stress Management</option>
                                <option>Pre-Marital Counselling</option>
                                <option>Inner Child Healing</option>
                                <option>Reiki Healing</option>
                                <option>NLP Life Coaching</option>
                                <option>Clinical Hypnotherapy</option>
                                <option>Workshop Enquiry</option>
                                @endforelse
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold">Your Message</label>
                            <textarea name="message" class="form-control" rows="5"
                                      placeholder="Tell us what you're going through or what you'd like to explore...">{{ old('message') }}</textarea>
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-primary btn-lg px-5">
                                <i class="fas fa-paper-plane me-2"></i>Send Message
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Contact Info -->
            <div class="col-lg-5">
                <h2 class="section-title mb-4">Get in Touch</h2>

                <div class="row g-4 mt-3">
                    <div class="col-12">
                        <div class="contact-info-card">
                            <div class="icon-circle">
                                <i class="fas fa-map-marker-alt" style="color:var(--purple-dark)"></i>
                            </div>
                            <h6 class="fw-bold">Visit Us</h6>
                            <p class="text-muted mb-0">New Delhi, India <br>New Delhi – 110021</p>
                            <a href="" target="_blank"
                               class="btn btn-sm btn-outline-primary mt-3">
                                <i class="fas fa-directions me-1"></i>Get Directions
                            </a>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="contact-info-card">
                            <div class="icon-circle">
                                <i class="fab fa-whatsapp" style="color:var(--purple-dark)"></i>
                            </div>
                            <h6 class="fw-bold">WhatsApp</h6>
                            <a href="https://wa.me/919810897192" class="text-decoration-none" style="color:var(--purple-dark)">+91 9810897192</a>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="contact-info-card">
                            <div class="icon-circle">
                                <i class="far fa-envelope" style="color:var(--purple-dark)"></i>
                            </div>
                            <h6 class="fw-bold">Email</h6>
                            <a href="mailto:support@innerharmony.co.in" class="text-decoration-none small" style="color:var(--purple-dark);word-break:break-all">support@innerharmony.co.in</a>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="contact-info-card">
                            <div class="icon-circle">
                                <i class="fas fa-clock" style="color:var(--purple-dark)"></i>
                            </div>
                            <h6 class="fw-bold">Working Hours</h6>
                            <p class="text-muted small mb-1">Monday – Saturday: 9:00 AM – 7:00 PM</p>
                            <p class="text-muted small mb-0">Sunday: 10:00 AM – 2:00 PM (Online Only)</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Google Map -->
<!-- <section class="pb-5">
    <div class="container">
        <div class="rounded-3 overflow-hidden shadow-sm">
            <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3504.7!2d77.1756!3d28.5672!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390ce1e88c4d3a91%3A0x0!2sAnand+Niketan%2C+New+Delhi!5e0!3m2!1sen!2sin!4v1700000000000"
                width="100%" height="380" style="border:0" allowfullscreen="" loading="lazy">
            </iframe>
        </div>
    </div>
</section> -->
@endsection