@section('title', app()->getLocale() == 'en' ? 'Contact | EMPHAIR' : 'İletişim | EMPHAIR')
@section('description', app()->getLocale() == 'en' ? 'Hair Transplantation Centre in Istanbul Turkey. Contact us. |
EMPHAIR' : 'Türkiye İstanbul\'da Saç Ekim Merkezi. Bize Ulaşın. | EMPHAIR')


<section class="contact-area primary-bg" style="background-color: #DDF0FA;">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-md-10 col-lg-7">
        <!-- Intro -->
        <div class="intro text-center">
          <h2 class="title mt-0">{{ __('messages.contact.title') }}</h2>
          <p>{{ __('messages.contact.description') }}</p>
        </div>
      </div>
    </div>
    <div id="contact" class="row justify-content-between align-items-center">
      <div class="col-12 col-md-5">
        <div class="contact-info">
          <h3 class="mt-0 contact-info-title">{{ __('messages.contact.form_title') }}</h3>
          <p class="contact-info-description">{{ __('messages.contact.form_description') }}</p>
          <ul class="list-group list-group-flush">
            <li class="list-group-item d-flex align-items-center">
              <!-- Icon Box -->
              <div class="icon-box me-3">
                <div class="icon">
                  <i class="bi bi-envelope-check"></i>
                </div>
              </div>
              <span>
                <a href="mailto:info@empclinics.com">info@empclinics.com</a>
              </span>
            </li>

            <li class="list-group-item d-flex align-items-center">
              <!-- Icon Box -->
              <div class="icon-box me-3">
                <div class="icon">
                  <i class="bi bi-geo-alt"></i>
                </div>
              </div>
              <span>{{ __('messages.footer.address') }}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-12 col-md-6 mt-4 mt-md-0">
        <form class="contact-form outlined lp-form" method="POST"
          data-google-recaptcha-public-key="6Lc7ZlsqAAAAAAhjgO92Roe5_5jgtP_tZyvL-ubp" data-is-live="true"
          data-scroll-target="contact" id="lpForm2">
          <div class="form-group mb-3">
            <label for="name">{{ __('messages.contact.form.name') }} <span class="text-danger">*</span></label>
            <input type="text" class="form-control" name="name" id="name" placeholder="" required>
          </div>
          <div class="form-group mb-3">
            <label for="email">{{ __('messages.contact.form.email') }} <small style="font-size: 13px;"><i>({{
                  __('messages.contact.form.optional') }})</i></small></label>
            <input type="email" class="form-control" name="email" id="email" placeholder="">
          </div>
          <div class="form-group mb-4">
            <label for="phone2">{{ __('messages.contact.form.phone') }} <span class="text-danger">*</span></label>
            <input class="form-control phone-input" id="phone2" data-hidden-phone-name-id="phone2_full" required />
            <input type="hidden" name="phone" id="phone2_full"> <!-- Gizli input -->
          </div>

          <button type="submit" class="btn swap-icon" data-loading-text="{{ __('messages.contact.form.sending') }}"
            id="lpForm2SubmitButton">
            {{ __('messages.contact.form.submit') }}
            <i class="icon bi bi-arrow-right-short"></i>
          </button>
          <span class="form-text d-block mt-3 " style="color: rgba(10, 64, 10, 0.75);">
            <i class="bi bi-check-circle-fill me-2"></i>
            {{ __('messages.form_section.privacy') }}
          </span>
          <input type="hidden" name="country_code"
            value="{{ request()->country_code ?? request()->countrycode ?? '' }}">
          <input type="hidden" name="language_code"
            value="{{ request()->language_code ?? request()->languagecode ?? '' }}">
          <input type="hidden" name="url_source"
            value="{{ request()->url_source ?? request()->urlsource ?? 'Google' }}">
          <input type="hidden" name="url_campaign"
            value="{{ request()->url_campaign ?? request()->urlcampaign ?? '' }}">
          <input type="hidden" name="url_branch" value="{{ request()->url_branch ?? request()->urlbranch ?? 'Saç' }}">
          <input type="hidden" name="advert_name"
            value="{{ request()->advert_name ?? request()->advertname ?? request()->ad_name ?? request()->adsname ?? '' }}">
          <input type="hidden" name="ad_set_name"
            value="{{ request()->ad_set_name ?? request()->adsetname ?? request()->ad_setname ?? request()->adset_name ?? '' }}">
          <input type="hidden" name="note" value="{{ request()->note ?? '' }}">
          <input type="hidden" name="url_source_2"
            value="{{ request()->url_source_2 ?? request()->url_source2 ?? request()->urlsource2 ?? request()->urlsource_2 ?? 'Form' }}">
          <input type="hidden" name="age_range" value="{{ request()->age_range ?? request()->agerange ?? '' }}">
          <input type="hidden" name="g-recaptcha-response" value="">
        </form>
      </div>
    </div>
  </div>
</section>

@push('styles')
<style>
  .contact-form {
    border-radius: 20px;
    border: 2px solid #FFF;
    background: radial-gradient(171.1% 151.13% at 11.52% 6.96%, rgba(90, 163, 226, 0.37) 0%, rgba(255, 255, 255, 0.18) 73%);
    box-shadow: 0px 4px 30.4px 0px rgba(0, 0, 0, 0.25), -5px -5px 250px 0px rgba(255, 255, 255, 0.02) inset;
    backdrop-filter: blur(21px);
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
  }

  .contact-form .form-control {
    border: 1px solid #ddd;
    padding: 1rem;
  }

  .contact-form .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
  }

  .contact-info .icon-box {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .contact-info .icon {
    font-size: 1.2rem;
    color: #007bff;
  }

  .contact-info a {
    color: inherit;
    text-decoration: none;
  }

  .contact-info a:hover {
    color: #007bff;
  }
</style>
@endpush