@extends('layouts.app')
@section('title', __('nav.contact') . ' — Mon Cheri Beach By Enki')

@section('content')

{{-- ═══════════════════════════════════════════════
     HERO
     ═══════════════════════════════════════════════ --}}
<section class="hero_in contacts">
    <div class="wrapper">
        <div class="container">
            <h1 class="fadeInUp">
                <span></span>
                {{ __('contact.page_title') ?? 'İletişim' }}
            </h1>
        </div>
    </div>
</section>


{{-- ═══════════════════════════════════════════════
     INFO BAR
     ═══════════════════════════════════════════════ --}}
<div class="contact-info-bar">
    <div class="container">
        <ul>
            <li>
                <i class="pe-7s-map-marker"></i>
                <div class="li-text">
                    <h4>{{ __('contact.address') }}</h4>
                    <span>{{ __('contact.address_value') }}</span>
                </div>
            </li>
            <li>
                <i class="pe-7s-mail-open-file"></i>
                <div class="li-text">
                    <h4>{{ __('contact.email') }}</h4>
                    <a href="mailto:info@moncheribeach.com">info@moncheribeach.com</a>
                    <small>{{ __('contact.hours_value') }}</small>
                </div>
            </li>
            <li>
                <i class="pe-7s-phone"></i>
                <div class="li-text">
                    <h4>{{ __('contact.phone') ?? 'Telefon' }}</h4>
                    <a href="tel:+905551234567">+90 555 123 45 67</a>
                    <small>{{ __('contact.hours_value') }}</small>
                </div>
            </li>
        </ul>
    </div>
</div>


{{-- ═══════════════════════════════════════════════
     MAP  +  FORM
     ═══════════════════════════════════════════════ --}}
<div class="bg_color_1">
    <div class="container margin_80_55">
        <div class="row justify-content-between align-items-start g-4 g-lg-6">

            {{-- ── Map column ── --}}
            <div class="col-12 col-lg-5 contact-map-col reveal">

                <span class="c-eyebrow">{{ __('contact.location_label') }}</span>
                <h2 class="c-title">{{ __('contact.map_title') }}</h2>
                <p class="c-sub" style="margin-bottom:24px;">
                    {{ __('contact.map_sub') }}
                </p>

                <div class="map-wrapper">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1079.4328644076306!2d26.366837128113907!3d38.2325948382595!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14bb7984cb03cf73%3A0x17bdc7ea10a69eea!2sMon%20Cheri%20By%20Enki%20Beach%20%26%20Pool%20Ala%C3%A7at%C4%B1!5e1!3m2!1str!2str!4v1778677494851!5m2!1str!2str"
                        title="Mon Cheri Beach By Enki Konum"
                        loading="lazy"
                        allowfullscreen>
                    </iframe>
                </div>

                <div class="info-cards">
                    <div class="info-card">
                        <i class="pe-7s-car"></i>
                        <span class="info-card-label">{{ __('contact.parking') }}</span>
                        <p>{{ __('contact.parking_desc') }}</p>
                    </div>
                    <div class="info-card">
                        <i class="pe-7s-clock"></i>
                        <span class="info-card-label">{{ __('contact.opening') }}</span>
                        <p>{{ __('contact.opening_desc') }}</p>
                    </div>
                </div>

            </div>

            {{-- ── Form column ── --}}
            <div class="col-12 col-lg-7 reveal reveal-delay-2">

                <span class="c-eyebrow">{{ __('contact.form_label_top') }}</span>
                <h2 class="c-title">{{ __('contact.form_title') }}</h2>
                <p class="c-sub" style="margin-bottom:36px;">
                    {{ __('contact.form_label') }}
                </p>

                @if(session('success'))
                <div class="alert-success">
                    <i class="pe-7s-check"></i>
                    <span>{{ session('success') }}</span>
                </div>
                @endif

                @if($errors->any())
                <div class="alert-error">
                    <ul style="margin:0;padding:0;">
                        @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif

                <form method="POST" action="{{ route('contact.send') }}" id="contactform" autocomplete="off" novalidate>
                    @csrf

                    {{-- Name + Email --}}
                    <div class="row g-3">
                        <div class="col-12 col-sm-6">
                            <label class="field-label">{{ __('contact.name') }}</label>
                            <input class="contact-input"
                                   type="text" name="name"
                                   value="{{ old('name') }}"
                                   placeholder="{{ __('contact.name_placeholder') }}">
                        </div>
                        <div class="col-12 col-sm-6">
                            <label class="field-label">{{ __('contact.email_field') }}</label>
                            <input class="contact-input"
                                   type="email" name="email"
                                   value="{{ old('email') }}"
                                   placeholder="{{ __('contact.email_placeholder') }}">
                        </div>
                    </div>

                    {{-- Phone --}}
                    <div style="margin-top:20px;">
                        <label class="field-label">
                            {{ __('contact.phone_field') ?? 'Telefon' }}
                            <span style="color:rgba(26,18,8,0.22);font-size:0.58rem;letter-spacing:1px;margin-left:6px;font-weight:300;">
                                {{ __('contact.optional') }}
                            </span>
                        </label>
                        <input class="contact-input"
                               type="tel" name="phone"
                               value="{{ old('phone') }}"
                               placeholder="{{ __('contact.phone_placeholder') }}">
                    </div>

                    {{-- Subject --}}
                    <div style="margin-top:20px;">
                        <label class="field-label">{{ __('contact.subject') }}</label>
                        <select class="contact-input" name="subject">
                            <option value="reservation" {{ old('subject') === 'reservation' ? 'selected' : '' }}>
                                {{ __('contact.subject_reservation') ?? 'Rezervasyon' }}
                            </option>
                            <option value="event" {{ old('subject') === 'event' ? 'selected' : '' }}>
                                {{ __('contact.subject_event') ?? 'Özel Etkinlik' }}
                            </option>
                            <option value="info" {{ old('subject') === 'info' ? 'selected' : '' }}>
                                {{ __('contact.subject_info') ?? 'Bilgi Talebi' }}
                            </option>
                            <option value="other" {{ old('subject') === 'other' ? 'selected' : '' }}>
                                {{ __('contact.subject_other') ?? 'Diğer' }}
                            </option>
                        </select>
                    </div>

                    {{-- Message --}}
                    <div style="margin-top:20px;">
                        <label class="field-label">{{ __('contact.message') }}</label>
                        <textarea class="contact-input"
                                  name="message"
                                  placeholder="{{ __('contact.message_placeholder') }}">{{ old('message') }}</textarea>
                    </div>

                    {{-- Submit --}}
                    <div class="submit-row">
                        <button type="submit" class="btn_1" style="padding:14px 44px;">
                            {{ __('contact.send') }}
                        </button>
                    </div>

                </form>

            </div>

        </div>
    </div>
</div>


@push('scripts')
<script>
(function () {
    'use strict';

    /* Reveal */
    var obs = new IntersectionObserver(function (entries) {
        entries.forEach(function (e) {
            if (e.isIntersecting) {
                e.target.classList.add('visible');
                obs.unobserve(e.target);
            }
        });
    }, { threshold: 0.1 });
    document.querySelectorAll('.reveal, .reveal-fade').forEach(function (el) { obs.observe(el); });

    /* Scroll progress */
    window.addEventListener('scroll', function () {
        var h   = document.documentElement;
        var pct = (h.scrollTop || document.body.scrollTop) / (h.scrollHeight - h.clientHeight) * 100;
        var hdr = document.querySelector('header');
        if (hdr) hdr.style.setProperty('--scroll-progress', pct + '%');
    }, { passive: true });

    /* Input focus — override Bootstrap glow */
    document.querySelectorAll('.contact-input').forEach(function (el) {
        el.addEventListener('focus', function () {
            this.style.borderColor  = 'rgba(27,107,122,0.5)';
            this.style.boxShadow    = '0 0 0 3px rgba(27,107,122,0.05)';
        });
        el.addEventListener('blur', function () {
            this.style.borderColor  = 'rgba(200,169,110,0.22)';
            this.style.boxShadow    = 'none';
        });
    });
}());
</script>
@endpush

@endsection