@extends('layouts.app')
@section('title', __('nav.contact'))

@section('content')

<div style="height:280px;background:linear-gradient(135deg,var(--sand-dark),var(--ocean));display:flex;align-items:flex-end;padding-bottom:3rem;">
  <div class="container" style="text-align:center;width:100%;">
    <span class="section-label" style="color:var(--gold-light);">{{ __('contact.label') }}</span>
    <h1 style="font-size:clamp(2.5rem,6vw,4.5rem);color:var(--white);">{{ __('contact.page_title') }} <em style="color:var(--turquoise-light);">{{ __('contact.page_title_em') }}</em></h1>
  </div>
</div>

<section class="contact-section">
  <div class="container">
    <div class="contact-grid">

      <div class="contact-info reveal">
        <div class="contact-item">
          <div class="contact-item-icon">📍</div>
          <div>
            <h4>{{ __('contact.address') }}</h4>
            <p>{{ __('contact.address_value') }}</p>
          </div>
        </div>
        <div class="contact-item">
          <div class="contact-item-icon">📞</div>
          <div>
            <h4>{{ __('contact.phone') }}</h4>
            <a href="tel:+905551234567">+90 555 123 45 67</a>
          </div>
        </div>
        <div class="contact-item">
          <div class="contact-item-icon">✉️</div>
          <div>
            <h4>{{ __('contact.email') }}</h4>
            <a href="mailto:info@moncheribeach.com">info@moncheribeach.com</a>
          </div>
        </div>
        <div class="contact-item">
          <div class="contact-item-icon">🕐</div>
          <div>
            <h4>{{ __('contact.hours') }}</h4>
            <p>{{ __('contact.hours_value') }}</p>
          </div>
        </div>

        <!-- Social -->
        <div style="display:flex;gap:0.75rem;flex-wrap:wrap;">
          <a href="#" class="btn-primary" style="background:var(--ocean);">Instagram</a>
          <a href="#" class="btn-primary" style="background:var(--ocean-deep);">Facebook</a>
        </div>
      </div>

      <div class="contact-form reveal" style="transition-delay:0.15s;">
        <span class="section-label">{{ __('contact.form_label') }}</span>
        <h2 style="font-family:'Cormorant Garamond',serif;font-size:1.8rem;color:var(--ocean-deep);margin-bottom:1.5rem;">
          {{ __('contact.form_title') }}
        </h2>

        @if(session('success'))
          <div style="background:#E8F7EE;color:#1A6E3C;padding:1rem;border-radius:8px;margin-bottom:1rem;font-size:14px;">
            ✓ {{ session('success') }}
          </div>
        @endif

        <form action="{{ route('contact.send') }}" method="POST" id="contactForm">
          @csrf
          <div class="form-row">
            <div class="form-group">
              <label>{{ __('contact.name') }}</label>
              <input type="text" name="name" required value="{{ old('name') }}" placeholder="{{ __('contact.name_ph') }}">
            </div>
            <div class="form-group">
              <label>{{ __('contact.email_field') }}</label>
              <input type="email" name="email" required value="{{ old('email') }}" placeholder="you@email.com">
            </div>
          </div>
          <div class="form-group">
            <label>{{ __('contact.subject') }}</label>
            <select name="subject">
              <option value="reservation">{{ __('contact.subject_reservation') }}</option>
              <option value="event">{{ __('contact.subject_event') }}</option>
              <option value="info">{{ __('contact.subject_info') }}</option>
              <option value="other">{{ __('contact.subject_other') }}</option>
            </select>
          </div>
          <div class="form-group">
            <label>{{ __('contact.message') }}</label>
            <textarea name="message" required placeholder="{{ __('contact.message_ph') }}"></textarea>
          </div>
          <button type="submit" class="btn-primary" style="width:100%;justify-content:center;">
            {{ __('contact.send') }}
          </button>
        </form>
      </div>

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

@endsection