@php
$locale = app()->getLocale();
@endphp

<section id="home" class="hero-section has-overlay layout-1 overlay-custom">
  <div class="container hero-container" style="padding-bottom: 50px;">
    <div class="row justify-content-start align-items-center py-5 hero-row">
      <div class="col-12 col-md-7 col-lg-6">
        <!-- Hero Content -->
        <div class="hero-content">
          <h1 class="text-white hero-title m-0"
            style=" font-size: 43px; max-width: 500px;">
            {{
            __('messages.hero_section.title') }}
          </h1>
          <p class="text-white fs-5 hero-description">{{ __('messages.hero_section.description') }}</p>
          <div class="d-flex gap-3">
            @include('components.button', [
            'url' => '#contact',
            'text' => __('messages.hero_section.button_text'),
            'isBordered' => false,
            'icon' => '<i class="icon bi bi-arrow-right-short"></i>'
            ])
            @include('components.button', [
            'url' => '#youtube-section',
            'text' => __('messages.hero_section.button_text2'),
            'isBordered' => true,
            'icon' => '<img src="'.env('APP_PREFIX_PATH').'assets/img/icons/fill-arrow.svg" alt="before after"
              style="width: 22px; height: 22px; margin-left: 10px;">'
            ])
          </div>
            <div class="row gap-3 justify-content-start review-images mt-5">
              <div class="bg-white rounded-4 px-3 py-2 col-3 d-flex justify-content-center align-items-center">
                <img src=" {{ env('APP_PREFIX_PATH') . 'assets/img/content/google-reviews-4.7.png' }}" alt="google reviews"
                  width="65px" />
              </div>
              <div class="bg-white rounded-4 px-1 py-2 col-3 d-flex justify-content-center align-items-center">
                <img src="{{ env('APP_PREFIX_PATH') . 'assets/img/content/trustpilot-4.7.png' }}" alt="trustpilot reviews"
                  width="90px" />
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Shape Bottom -->
  <div class="shape-bottom" style="bottom: -5px">
    <svg viewBox="0 0 1920 310" version="1.1" xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink" class="svg replaced-svg">
      <title>EMPHAIR</title>
      <desc>Created by empclinics.com</desc>
      <defs></defs>
      <g id="sApp-Landing-Page" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
        <g id="sApp-v1.0" transform="translate(0.000000, -554.000000)" fill="#FFFFFF">
          <path
            d="M-3,551 C186.257589,757.321118 319.044414,856.322454 395.360475,848.004007 C509.834566,835.526337 561.525143,796.329212 637.731734,765.961549 C713.938325,735.593886 816.980646,681.910577 1035.72208,733.065469 C1254.46351,784.220361 1511.54925,678.92359 1539.40808,662.398665 C1567.2669,645.87374 1660.9143,591.478574 1773.19378,597.641868 C1848.04677,601.75073 1901.75645,588.357675 1934.32284,557.462704 L1934.32284,863.183395 L-3,863.183395"
            id="sApp-v1.0"></path>
        </g>
      </g>
    </svg>
  </div>
</section>
@push('scripts')
<script>
  function scrollToContact() {
    document.getElementById('contact').scrollIntoView({ behavior: 'smooth' });
  }
  function scrollToYoutube() {
    document.getElementById('youtube-section').scrollIntoView({ behavior: 'smooth' });
  }
</script>
@endpush

<style>
  .review-images {
    margin-top: 10px;
  }

  @media (max-width: 768px) {
    .before-after-image {
      margin-top: 20px;
      padding-left: 15px;
      padding-right: 15px;
    }
    .hero-container{
      padding-top: 50px !important;
    }
  }
</style>