@extends('website.layouts.main')

@section('meta_title', 'Contact KiyoHRMS')
@section('meta_description', 'Contact KiyoHRMS sales and support team for product demos, onboarding help, and business queries.')

@section('content')
<section class="section-space brand-gradient pb-4 pb-lg-5">
    <div class="container">
        <div class="row g-4 align-items-center">
            <div class="col-lg-7 text-center text-lg-start">
                <h1 class="display-6 fw-bold mb-3"><span class="text-kiyo">Talk to our HRMS</span> specialists</h1>
                <p class="lead text-muted mb-0">Need help choosing a plan or want a personalized walkthrough? Book a demo or send us a message — we typically respond within one business day.</p>
            </div>
            <div class="col-lg-5">
                <div class="row g-3">
                    {{-- <div class="col-sm-4 col-lg-12 col-xl-4">
                        <a href="mailto:info@kiyocrm.com" class="contact-quick-card d-flex align-items-center gap-3 text-decoration-none text-reset h-100">
                            <span class="contact-quick-icon"><i class="bi bi-envelope"></i></span>
                            <div class="min-w-0">
                                <div class="small text-muted">Email</div>
                                <div class="fw-semibold small text-truncate">info@kiyocrm.com</div>
                            </div>
                        </a>
                    </div> --}}
                    <div class="col-sm-4 col-lg-12 col-xl-6">
                        <a href="tel:+919440903071" class="contact-quick-card d-flex align-items-center gap-3 text-decoration-none text-reset h-100">
                            <span class="contact-quick-icon"><i class="bi bi-telephone"></i></span>
                            <div>
                                <div class="small text-muted">Phone</div>
                                <div class="fw-semibold small">+91 94409 03071</div>
                            </div>
                        </a>
                    </div>
                    <div class="col-sm-4 col-lg-12 col-xl-6 ">
                        <a href="https://maps.google.com/?q=Kiyo+Solutions+Prasanthi+Hills+Nizampet+Hyderabad" target="_blank" rel="noopener" class="contact-quick-card d-flex align-items-center gap-3 text-decoration-none text-reset h-100">
                            <span class="contact-quick-icon"><i class="bi bi-geo-alt"></i></span>
                            <div>
                                <div class="small text-muted">Office</div>
                                <div class="fw-semibold small">Hyderabad</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-space pt-0">
    <div class="container">
        <div class="row g-4">
            <div class="col-lg-7 order-lg-2">
                <div class="card-soft p-4 p-lg-5 h-100">
                    <h2 class="h4 fw-bold mb-2">Send us a message</h2>
                    <p class="text-muted small mb-4">Share your requirements and our team will reach out with the next steps.</p>

                    @if(session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif
                    @if(session('error'))
                        <div class="alert alert-danger">{{ session('error') }}</div>
                    @endif

                    <form action="{{ route('website.contact.submit') }}" method="post" class="contact-form">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold small" for="name">Name <span class="text-danger">*</span></label>
                                <input id="name" name="name" type="text" required class="form-control @error('name') is-invalid @enderror" placeholder="Your name" value="{{ old('name') }}">
                                @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold small" for="email">Email <span class="text-danger">*</span></label>
                                <input id="email" name="email" type="email" required autocomplete="email" class="form-control @error('email') is-invalid @enderror" placeholder="you@company.com" value="{{ old('email') }}">
                                @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold small" for="phone">Phone <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">+91</span>
                                    <input id="phone" name="phone" type="tel" inputmode="numeric" maxlength="10" required class="form-control @error('phone') is-invalid @enderror" placeholder="10-digit mobile number" value="{{ old('phone') }}">
                                </div>
                                @error('phone')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold small " for="subject">Subject <span class="text-danger">*</span></label>
                                <select id="subject" name="subject" required class="form-select js-select2 subject-select @error('subject') is-invalid @enderror">
                                    <option value="" disabled {{ old('subject') ? '' : 'selected' }}>Select a topic</option>
                                    @foreach(['Book a demo', 'Pricing enquiry', 'Product support', 'Partnership', 'Other'] as $option)
                                        <option value="{{ $option }}" {{ old('subject') === $option ? 'selected' : '' }}>{{ $option }}</option>
                                    @endforeach
                                </select>
                                @error('subject')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold small" for="message">Message <span class="text-danger">*</span></label>
                                <textarea id="message" name="message" rows="5" required class="form-control @error('message') is-invalid @enderror" placeholder="Tell us about your team size, modules you need, or any questions">{{ old('message') }}</textarea>
                                @error('message')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                        </div>
                        <div class="d-grid d-sm-flex gap-2 mt-4">
                            <button type="submit" class="btn btn-kiyo px-4 login-submit-btn">Send message <i class="bi bi-send"></i></button>
                            <a href="{{ route('register') }}" class="btn demo-btn px-4 login-submit-btn">Start free trial <i class="bi bi-arrow-right-short"></i></a>
                        </div>
                    </form>
                </div>
            </div>

            <div class="col-lg-5 order-lg-1 contact-sidebar">
                <div class="card-soft p-4 mb-4">
                    <h2 class="h5 fw-bold mb-3">Support details</h2>
                    <ul class="list-unstyled mb-0 d-grid gap-3">
                        <li class="d-flex gap-3">
                            <span class="contact-quick-icon"><i class="bi bi-envelope"></i></span>
                            <div>
                                <div class="fw-semibold small">Email</div>
                                <a href="mailto:info@kiyocrm.com" class="text-muted small text-decoration-none">info@kiyocrm.com</a>
                            </div>
                        </li>
                        <li class="d-flex gap-3">
                            <span class="contact-quick-icon"><i class="bi bi-telephone"></i></span>
                            <div>
                                <div class="fw-semibold small">Phone</div>
                                <a href="tel:+919440903071" class="text-muted small text-decoration-none">(+91) 94409 03071</a>
                            </div>
                        </li>
                        <li class="d-flex gap-3">
                            <span class="contact-quick-icon"><i class="bi bi-clock"></i></span>
                            <div>
                                <div class="fw-semibold small">Business hours</div>
                                <p class="text-muted small mb-0">Mon – Sat, 9:30 AM – 6:30 PM IST</p>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="card-soft p-4 mb-4">
                    <h2 class="h5 fw-bold mb-2">Office location</h2>
                    <p class="text-muted small mb-3">
                        <strong>Kiyo Solutions Pvt Ltd</strong><br>
                        1st floor, 16/A, Prasanthi Hills,<br>
                        Nizampet, Hyderabad, Telangana 500090
                    </p>
                    <iframe
                        class="contact-map-frame"
                        title="Kiyo Solutions office map"
                        loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"
                        src="https://maps.google.com/maps?q=Kiyo+Solutions+Prasanthi+Hills+Nizampet+Hyderabad&t=&z=15&ie=UTF8&iwloc=&output=embed"
                    ></iframe>
                    <a href="https://maps.google.com/?q=Kiyo+Solutions+Prasanthi+Hills+Nizampet+Hyderabad" target="_blank" rel="noopener" class="btn btn-sm demo-btn mt-3 w-100">
                        Open in Google Maps
                    </a>
                </div>

                <div class="card-soft p-4">
                    <h2 class="h5 fw-bold mb-3">Follow us</h2>
                    <div class="d-flex gap-2">
                        <a href="https://www.facebook.com/kiyosolutionspvtltd" target="_blank" rel="noopener" class="btn demo-btn btn-sm p-3"><i class="fab fa-facebook-f"></i></a>
                        <a href="https://www.linkedin.com/company/kiyosolutions/" target="_blank" rel="noopener" class="btn demo-btn btn-sm p-3"><i class="fab fa-linkedin-in"></i></a>
                        <a href="https://www.instagram.com/kiyo.solutions/" target="_blank" rel="noopener" class="btn demo-btn btn-sm p-3"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@include('website.partials.cta-banner', [
    'title' => 'Prefer to explore on your own?',
    'subtitle' => 'Start a free trial and see how KiyoHRMS fits your HR and payroll workflow.',
])
@endsection

@push('scripts')
    <script>
        const phoneInput = document.getElementById('phone');
        if (phoneInput) {
            phoneInput.addEventListener('input', () => {
                phoneInput.value = phoneInput.value.replace(/\D/g, '').slice(0, 10);
            });
        }
    </script>
@endpush