@extends("front.instarefi-layout")
@section("content")
  
  <!-- Hero Section -->
  <section class="hero py-5">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-md-6 fade-section">
          <h1 class="display-5">Never Miss A  Refinance <br> <span class="highlight">Opportunity</span></h1>
          <p class="lead">Always on mortgage monitoring without hurting your credit.</br>Instant email and text alerts.</p>
        
          @php($signupUrl = route('register', ['id' => session('url_key')]))
          <a href="{{ $signupUrl }}" onclick="gtag_report_conversion('{{ $signupUrl }}'); return false;" class="btn btn-primary">Get Free Refinance Alerts Now</a>
        </div>
        <div class="col-md-6 fade-section">
          <div class="hero-image mt-4 mt-md-0">
            <video class="video" poster="{{url('assets/images/instarefi/video_poster1.png')}}" width="100%" height="100%" controls="" autoplay="" loop="" muted="">
                <source src="{{url('assets/images/instarefi/instarefi_video.mp4')}}" type="video/mp4">
                <source src="{{url('assets/images/instarefi/instarefi_video.mp4')}}" type="video/ogg">
                Your browser does not support the video tag.
            </video>
          </div>
        </div>
      </div>
    </div>
  </section>

      <!-- Media logos and rating section -->
    <section class="container text-center mt-5">
        <div class="media-logos mb-3">
            <img class="fade-section" src="{{url('assets/img/instarefi/icon/entrepreneur-logo.png')}}" alt="Entrepreneur">
            <img class="fade-section" src="{{url('assets/img/instarefi/icon/washingtonpost-logo.png')}}" alt="The Washington Post">
            <img class="fade-section" src="{{url('assets/img/instarefi/icon/time-logo.png')}}" alt="TIME">
            <div class="rating-badge fade-section ms-4">
                <a href="https://www.google.com/maps/place/InstaMortgage+Inc./@37.3154732,-121.976774,17z/data=!3m1!5s0x808fca95b8d6efd5:0x1eb1ad4172bbaaae!4m18!1m9!3m8!1s0x808fca8e2e636a4d:0x555d74fb8007aa68!2sInstaMortgage+Inc.!8m2!3d37.315469!4d-121.9741937!9m1!1b1!16s%2Fg%2F1tf365rz!3m7!1s0x808fca8e2e636a4d:0x555d74fb8007aa68!8m2!3d37.315469!4d-121.9741937!9m1!1b1!16s%2Fg%2F1tf365rz?entry=ttu&g_ep=EgoyMDI0MDkxOC4xIKXMDSoASAFQAw%3D%3D" target="_blank">
                    <img src="{{url('assets/img/instarefi/google-logo.png')}}" alt="Rating Logo" class="ms-2">
                </a>
            </div>
            <img class="fade-section" src="{{url('assets/img/instarefi/icon/housingwire-logo.png')}}" alt="HousingWire" class="ms-4">
            <img class="fade-section" src="{{url('assets/img/instarefi/icon/inc-logo.png')}}" alt="Inc" class="ms-2">
            <img class="fade-section" src="{{url('assets/img/instarefi/icon/forbes-logo.png')}}" alt="Forbes" class="ms-2">
        </div>
    </section>
    

    <!-- Heading section -->
    <section id="header" class="container text-center fade-section">
        <h2>A Better Mortgage In <span class="text-primary">3 Easy Steps</span></h2>
    </section>

    <!-- Steps section -->
    <section id="steps-section" class="container mt-5">
        <div class="d-flex flex-column flex-md-row justify-content-center align-items-center text-center">
            <!-- Step 1 -->
            <div class="col-md-4 d-flex flex-column justify-content-center align-items-center step">
                <div class="step-icon d-flex justify-content-center align-items-center">
                    <!-- Icon can be added here -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 97 97" fill="none">
                            <circle cx="48.5" cy="48.0938" r="48" fill="#00A2E9"></circle>
                            <path d="M57.6849 49.2027C56.0767 47.3017 54.0396 45.9815 51.788 45.2951C54.0396 44.1334 55.5406 41.8099 55.5406 39.1169C55.5406 35.2621 52.3777 32.0938 48.4107 32.0938C44.4437 32.0938 41.3344 35.3149 41.3344 39.1697C41.3344 41.8099 42.8354 44.1334 45.087 45.3479C42.8354 46.0343 40.8519 47.3545 39.1901 49.2555C36.8313 52.0013 35.4911 55.8033 35.4375 59.9749C35.4375 60.4502 35.7055 60.8726 36.0808 61.031C37.5282 61.7703 42.7818 64.0938 48.4107 64.0938C54.522 64.0938 59.4004 61.7175 60.7942 60.9782C61.1695 60.767 61.4375 60.3446 61.4375 59.9221C61.3839 55.8033 60.0437 52.0013 57.6849 49.2027ZM48.4643 34.5756C51.0375 34.5756 53.1818 36.635 53.1818 39.2225C53.1818 41.8099 51.0911 43.8693 48.4643 43.8693C45.8375 43.8693 43.7468 41.8099 43.7468 39.2225C43.7468 36.635 45.8911 34.5756 48.4643 34.5756ZM48.4643 61.7703C44.0148 61.7703 39.6726 60.0805 37.9035 59.2357C38.1179 55.9089 39.1901 52.9518 41.0664 50.734C42.9963 48.4634 45.6231 47.1961 48.4643 47.1961C51.3055 47.1961 53.9323 48.4634 55.8622 50.734C57.7385 52.899 58.8643 55.9089 59.0251 59.2357C57.3633 60.0805 53.289 61.7703 48.4643 61.7703Z" fill="white"></path>
                    </svg>
                </div>
                <h4 class="sub-heading">Sign up</h4>
                <p>Provide some basic <br> info, no SSN required</p>
            </div>

            <!-- Arrow between Step 1 and Step 2 -->
            <div id="arrow" class="mx-2 step">
                <i class="fa fa-arrow-right d-none d-md-inline"></i> <!-- Horizontal arrow for large screens -->
                <i class="fa fa-arrow-down d-inline d-md-none"></i>  <!-- Vertical arrow for small screens -->
            </div>

            <!-- Step 2 -->
            <div class="col-md-4 d-flex flex-column justify-content-center align-items-center mt-lg-0 step">
                <div class="step-icon d-flex justify-content-center align-items-center">
                    <!-- Icon can be added here -->
                    <svg width="100%" height="100%" viewBox="0 0 97 97" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="48.5" cy="48.0938" r="48" fill="#00A2E9"></circle>
                        <path d="M48.4766 33.2656C39.5469 33.2656 32.2344 40.5781 32.2344 49.5078C32.2344 53.6562 33.7813 57.4531 36.3828 60.3359L33.1484 65.1875C32.6563 65.8906 32.8672 66.875 33.5703 67.3672C33.8516 67.5781 34.1328 67.6484 34.4141 67.6484C34.9063 67.6484 35.3984 67.3672 35.75 66.9453L38.7031 62.4453C41.4453 64.4844 44.75 65.6797 48.4062 65.6797C52.0625 65.6797 55.4375 64.4844 58.1094 62.4453L61.0625 66.9453C61.3438 67.3672 61.8359 67.6484 62.3984 67.6484C62.6797 67.6484 63.0312 67.5781 63.2422 67.3672C63.9453 66.875 64.1562 65.8906 63.6641 65.1875L60.4297 60.3359C63.0312 57.4531 64.5781 53.6562 64.5781 49.5078C64.7188 40.5781 57.4766 33.2656 48.4766 33.2656ZM35.3984 49.5078C35.3984 42.2656 41.2344 36.4297 48.4766 36.4297C55.7188 36.4297 61.5547 42.2656 61.5547 49.5078C61.5547 56.75 55.7188 62.5859 48.4766 62.5859C41.2344 62.5859 35.3984 56.75 35.3984 49.5078Z" fill="white"></path>
                        <path d="M69.8521 38.398L62.5396 30.0308C61.9771 29.398 60.9927 29.3277 60.2896 29.8902C59.6568 30.4527 59.5865 31.4371 60.149 32.1402L67.4615 40.5074C67.7427 40.859 68.2349 41.0699 68.6568 41.0699C69.0084 41.0699 69.4302 40.9293 69.7115 40.648C70.3443 40.0855 70.4146 39.0308 69.8521 38.398Z" fill="white"></path>
                        <path d="M37.649 29.8902C37.0162 29.3277 35.9615 29.398 35.399 30.0308L28.0865 38.398C27.524 39.0308 27.5943 40.0855 28.2271 40.648C28.5084 40.9293 28.9302 41.0699 29.2818 41.0699C29.7037 41.0699 30.1256 40.859 30.4771 40.5074L37.7896 32.1402C38.3521 31.4371 38.2818 30.4527 37.649 29.8902Z" fill="white"></path>
                        <path d="M54.6641 50.1406H50.0937V44.6562C50.0937 43.8125 49.3906 43.1094 48.4766 43.1094C47.5625 43.1094 46.9297 43.8125 46.9297 44.6562V51.7578C46.9297 52.6016 47.6328 53.3047 48.4766 53.3047H54.6641C55.5078 53.3047 56.2109 52.6016 56.2109 51.7578C56.2109 50.9141 55.5781 50.1406 54.6641 50.1406Z" fill="white"></path>
                    </svg>
                </div>
                <h4 class="sub-heading">Start getting alerts</h4>
                <p>For refinance via <br> email and texts</p>
            </div>

            <!-- Arrow between Step 2 and Step 3 -->
            <div id="arrow" class="mx-2 step">
                <i class="fa fa-arrow-right d-none d-md-inline"></i> <!-- Horizontal arrow for large screens -->
                <i class="fa fa-arrow-down d-inline d-md-none"></i>  <!-- Vertical arrow for small screens -->
            </div>

            <!-- Step 3 -->
            <div class="col-md-4 d-flex flex-column justify-content-center align-items-center  mt-lg-0 step">
                <div class="step-icon d-flex justify-content-center align-items-center">
                    <!-- Icon can be added here -->
                    <svg width="100%" height="100%" viewBox="0 0 96 97" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="48" cy="48.0938" r="48" fill="#00A2E9"></circle>
                        <path d="M65.6429 46.7366C61.3251 46.7317 57.1856 45.0143 54.1326 41.9612C51.0795 38.9081 49.3621 34.7686 49.3571 30.4509C49.3571 30.091 49.2142 29.7458 48.9596 29.4912C48.7051 29.2367 48.3599 29.0938 48 29.0938C47.6401 29.0938 47.2949 29.2367 47.0404 29.4912C46.7858 29.7458 46.6429 30.091 46.6429 30.4509C46.6379 34.7686 44.9205 38.9081 41.8674 41.9612C38.8143 45.0143 34.6749 46.7317 30.3571 46.7366C29.9972 46.7366 29.652 46.8796 29.3975 47.1341C29.143 47.3886 29 47.7338 29 48.0938C29 48.4537 29.143 48.7989 29.3975 49.0534C29.652 49.3079 29.9972 49.4509 30.3571 49.4509C34.6749 49.4558 38.8143 51.1732 41.8674 54.2263C44.9205 57.2794 46.6379 61.4189 46.6429 65.7366C46.6429 66.0965 46.7858 66.4417 47.0404 66.6963C47.2949 66.9508 47.6401 67.0938 48 67.0938C48.3599 67.0938 48.7051 66.9508 48.9596 66.6963C49.2142 66.4417 49.3571 66.0965 49.3571 65.7366C49.3621 61.4189 51.0795 57.2794 54.1326 54.2263C57.1856 51.1732 61.3251 49.4558 65.6429 49.4509C66.0028 49.4509 66.348 49.3079 66.6025 49.0534C66.857 48.7989 67 48.4537 67 48.0938C67 47.7338 66.857 47.3886 66.6025 47.1341C66.348 46.8796 66.0028 46.7366 65.6429 46.7366ZM48 58.7252C47.0403 56.3255 45.6031 54.1457 43.7755 52.3182C41.948 50.4907 39.7683 49.0535 37.3685 48.0938C39.7683 47.134 41.948 45.6968 43.7755 43.8693C45.6031 42.0418 47.0403 39.862 48 37.4623C48.9597 39.862 50.3969 42.0418 52.2245 43.8693C54.052 45.6968 56.2317 47.134 58.6314 48.0938C56.2317 49.0535 54.052 50.4907 52.2245 52.3182C50.3969 54.1457 48.9597 56.3255 48 58.7252Z" fill="white"></path>
                    </svg>
                </div>
                <h4 class="sub-heading">Apply and close</h4>
                <p>The new loan and <br> start saving money</p>
            </div>
        </div>
    </section>
 
    <!-- Heading Section -->
    <section id="header" class="container text-center fade-section">
        <h2>1 Platform, <span class="text-primary">6 Refinance Alerts</span></h2>
    </section>

    <!-- Alerts Grid Section -->
    <section id="alert-sec" class="container section">
        <div class="row d-flex justify-content-center align-items-center">
            <!-- Left Column (Alerts) -->
            <div class="col-12 col-md-6 mb-4 mb-lg-0">
                <div class="row">
                    <!-- Alert 1 -->
                    <div class="col-6 col-md-4">
                        <div class="alert-box step">
                            <h4>01</h4>
                            <p>Alert for <br> Lower Rates</p>
                        </div>
                    </div>
                    <!-- Alert 2 -->
                    <div class="col-6 col-md-4">
                        <div class="alert-box step">
                            <h4>02</h4>
                            <p>Alert for <br>  Cash Out</p>
                        </div>
                    </div>
                    <!-- Alert 3 -->
                    <div class="col-6 col-md-4">
                        <div class="alert-box step">
                            <h4>03</h4>
                            <p>Alert for <br>  Shorter Term</p>
                        </div>
                    </div>
                    <!-- Alert 4 -->
                    <div class="col-6 col-md-4">
                        <div class="alert-box step">
                            <h4>04</h4>
                            <p>Alert for <br>  Eliminating <br>  PMI</p>
                        </div>
                    </div>
                    <!-- Alert 5 -->
                    <div class="col-6 col-md-4">
                        <div class="alert-box step">
                            <h4>05</h4>
                            <p>Alert for <br>  Product <br>  Changes</p>
                        </div>
                    </div>
                    <!-- Alert 6 -->
                    <div class="col-6 col-md-4">
                        <div class="alert-box step">
                            <h4>06</h4>
                            <p>Alert for <br>  Changes in <br>  Home Value</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column (Image) -->
            <div class="col-12 col-md-4 text-center">
                <img src="{{url('assets/img/instarefi/woman-checking-phone.png')}}" alt="Woman Checking Phone" class="img-fluid img-rounded grow-on-scroll">
            </div>
        </div>
    </section>
    

    <!-- Heading -->
    <section id="header" class="container text-center fade-section">
        <h2> We Treat Your Data As If It Were <span class="highlight">Our Own</span></h2>
    </section>

    <section class="container section">
    <!-- Content Section -->
    <div class="row d-flex justify-content-center">
      <!-- Left column: Security & Privacy details -->
      <div class="col-md-6 mb-4 order-2 order-md-1">
        <!-- Security section -->
        <div class="mb-5 fade-section">
          <div class="security-item mb-2">
                <svg width="24" height="30" viewBox="0 0 24 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 29.0935C11.725 29.0935 11.469 29.0749 11.232 29.0376C10.994 29.0013 10.775 28.9463 10.575 28.8727C7.475 27.7441 4.9375 25.7323 2.9625 22.8372C0.9875 19.9421 0 16.7526 0 13.2686V6.31305C0 5.69968 0.1815 5.14765 0.5445 4.65696C0.9065 4.16626 1.375 3.81051 1.95 3.5897L10.95 0.277516C11.3 0.154843 11.65 0.0935059 12 0.0935059C12.35 0.0935059 12.7 0.154843 13.05 0.277516L22.05 3.5897C22.625 3.81051 23.094 4.16626 23.457 4.65696C23.819 5.14765 24 5.69968 24 6.31305V13.2686C24 16.7526 23.0125 19.9421 21.0375 22.8372C19.0625 25.7323 16.525 27.7441 13.425 28.8727C13.225 28.9463 13.006 29.0013 12.768 29.0376C12.531 29.0749 12.275 29.0935 12 29.0935ZM12 26.2229C14.425 25.4869 16.45 24.0335 18.075 21.8626C19.7 19.6908 20.65 17.2678 20.925 14.5935H12V3.00087L3 6.31305V13.9311C3 14.1028 3.025 14.3236 3.075 14.5935H12V26.2229Z" fill="#203F52"/>
                </svg>
            <h4 class="sub-heading my-3">Security</h4>
          </div>
          <div class="data-line mb-3"></div>
          <p class="ms-4">We use 128-bit encryption to protect the <br> transmission of your data to our site.</p>
        </div>
        <!-- Privacy section -->
        <div class="mb-5 fade-section">
          <div class="security-item mb-2">
                <svg width="23" height="30" viewBox="0 0 23 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.3198 0.0935059C6.8541 0.0935059 3.23423 3.7565 3.23423 8.27518V13.3009H2.77219C1.24071 13.3009 0 14.5564 0 16.1057V26.8587C0 28.4075 1.24071 29.6636 2.77219 29.6636H19.4054C20.9362 29.6636 22.1776 28.4075 22.1776 26.8587V16.1057C22.1776 14.5564 20.9362 13.3009 19.4054 13.3009V13.2978H15.7091V13.3009H6.93049V8.27518C6.93049 5.82209 8.89505 3.8335 11.3198 3.8335C13.7439 3.8335 15.7091 5.82209 15.7091 8.27518V9.26454C15.7091 9.94465 16.2605 10.4966 16.9412 10.4966H18.1733C18.8534 10.4966 19.4054 9.94465 19.4054 9.26454V8.27518C19.4054 3.7565 15.7849 0.0935059 11.3198 0.0935059Z" fill="#203F52"/>
                </svg>
            <h4 class="sub-heading my-3">Privacy</h4>
          </div>
          <div class="data-line mb-3"></div>
          <p class="ms-4">We do not share your personal information with <br> unaffiliated  third parties for their own marketing  <br> purposes.</p>
        </div>
        <img src="{{url('assets/img/instarefi/Privacy.png')}}" alt="Privacy Image" class="privacy-img fade-section">
        
      </div>

      <!-- Right column: Images -->
      <div class="col-md-4 d-flex justify-content-center order-1 order-md-2">
        <img src="{{url('assets/img/instarefi/Security.png')}}" alt="Security Image" class="security-img fade-section">
      </div>
    </div>
  </section>
  

  <!-- CTA Section -->
  @include('front.instarefi-cta')

  <!-- Officer Footer -->
  @if(!empty($loanOfficer->team_name))
  <footer class="container fade-section">
    <div class="footer-section row">
      <div class="col-12 text-center">
        <p class="mb-3">
          <a href="{{ $loanOfficer->team_website ?? route('officer-landing', ['slug' => session('url_key')]) }}" target="_blank" class="text-primary">
            <span class="team-work-bold-italic">
                Work with {{ $loanOfficer->team_name }}
            </span>
          </a>
        </p>
      </div>
    </div>
  </footer>
  @endif
@endsection