@extends('layouts.app')

@section('content')

<!-- ━━━━━━━━ 1. BANNER ━━━━━━━━ -->
<section class="contact-banner" id="contact" aria-label="Contact us banner">
  <div class="contact-banner-dots" aria-hidden="true"></div>
  <div class="contact-banner-bg-text" aria-hidden="true">Let's Talk</div>

  <div class="container">
    <div class="contact-banner-inner">

      <div class="contact-banner-eyebrow" data-anim="fade-up">
        <div class="contact-banner-eyebrow-line"></div>
        Get in Touch
      </div>

      <h1 class="contact-banner-h1" data-anim="fade-up" data-delay="100">
        Let's Build Something<br>
        <span>Smart</span> Together
      </h1>

      <p class="contact-banner-sub" data-anim="fade-up" data-delay="200">
        Have a project in mind or exploring how AI can transform your business? We'd love to hear from you.
      </p>

      <p class="contact-banner-sub" data-anim="fade-up" data-delay="300" style="margin-top:-.8rem">
        Whether you're a startup, growing business, or established organisation, NexaTech is here to help you scale with AI-driven solutions, digital strategy, and modern technology.
      </p>

    </div>
  </div>

  <div class="contact-banner-divider" aria-hidden="true"></div>
</section>


<!-- ━━━━━━━━ 2. CONTACT + FORM ━━━━━━━━ -->
<section class="contact-main-sec" aria-label="Contact form and information">
  <div class="container">

    <div class="row gy-5 align-items-start">

      <!-- Left: Get in Touch + Topics + Contact Information -->
      <div class="col-lg-5" data-anim="fade-right">
        <h2 class="contact-topics-heading">Get in Touch</h2>
        <p class="contact-topics-sub">We're here to answer your questions, discuss your ideas, and explore how we can work together.</p>

        <p class="contact-topics-label" style="margin-top:1.5rem">Talk to us about:</p>
        <div class="contact-topics-grid" style="margin-bottom:2rem">
          <div class="contact-topic-chip"><i class="fas fa-brain"></i> AI &amp; Automation Solutions</div>
          <div class="contact-topic-chip"><i class="fas fa-search"></i> SEO &amp; AI Search Optimisation (GEO)</div>
          <div class="contact-topic-chip"><i class="fas fa-laptop-code"></i> Web &amp; Mobile App Development</div>
          <div class="contact-topic-chip"><i class="fas fa-chart-line"></i> Digital Marketing &amp; Growth Strategy</div>
          <div class="contact-topic-chip"><i class="fas fa-cogs"></i> Custom Software &amp; Integrations</div>
        </div>

        <div class="contact-main-divider" style="margin:0 0 1.5rem"></div>

        <div class="contact-details-stack" style="margin-top:0">
          <div class="contact-detail-row">
            <div class="contact-detail-icon"><i class="fas fa-envelope"></i></div>
            <div>
              <div class="contact-detail-label">Email</div>
              <a href="mailto:info@nexatech.co.nz" class="contact-detail-val">info@nexatech.co.nz</a>
            </div>
          </div>
          <div class="contact-detail-row">
            <div class="contact-detail-icon"><i class="fas fa-phone"></i></div>
            <div>
              <div class="contact-detail-label">Phone</div>
              <a href="tel:+64224610076" class="contact-detail-val">+64 22 461 0076</a>
            </div>
          </div>
          <div class="contact-detail-row">
            <div class="contact-detail-icon"><i class="fas fa-map-marker-alt"></i></div>
            <div>
              <div class="contact-detail-label">Location</div>
              <span class="contact-detail-val">New Zealand <span class="contact-detail-note">(Serving clients globally)</span></span>
            </div>
          </div>
          <div class="contact-detail-row">
            <div class="contact-detail-icon"><i class="fas fa-clock"></i></div>
            <div>
              <div class="contact-detail-label">Working Hours</div>
              <span class="contact-detail-val">Monday – Friday: 9:00 AM – 6:00 PM</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Divider -->


      <!-- Right: Form -->
      <div class="col-lg-7" data-anim="fade-left" data-delay="100">
        <div class="ps-lg-4">
        <h2 class="contact-form-heading" style="margin-bottom:.4rem">Send us a message</h2>
        <p class="contact-form-sub" style="margin-bottom:1.6rem">Please fill the form.</p>

        <form id="contactForm" novalidate aria-label="Contact form" action="{{ route('contact.submit') }}" method="POST">
          @csrf

          <div class="cf-row">
            <div class="cf-group" id="grp-first-name">
              <label class="cf-label" for="firstName">First Name <span aria-hidden="true">*</span></label>
              <input class="cf-input" type="text" id="firstName" name="firstName"
                autocomplete="given-name" required aria-required="true" maxlength="50">
              <span class="cf-error-msg" id="err-first-name" role="alert">Please enter a valid first name.</span>
            </div>
            <div class="cf-group" id="grp-last-name">
              <label class="cf-label" for="lastName">Last Name <span aria-hidden="true">*</span></label>
              <input class="cf-input" type="text" id="lastName" name="lastName"
                autocomplete="family-name" required aria-required="true" maxlength="50">
              <span class="cf-error-msg" id="err-last-name" role="alert">Please enter a valid last name.</span>
            </div>
          </div>

          <div class="cf-row">
            <div class="cf-group" id="grp-email">
              <label class="cf-label" for="email">Email <span aria-hidden="true">*</span></label>
              <input class="cf-input" type="email" id="email" name="email"
                autocomplete="email" required aria-required="true">
              <span class="cf-error-msg" id="err-email" role="alert">Please enter a valid email address.</span>
            </div>
            <div class="cf-group" id="grp-phone">
              <label class="cf-label" for="phone">Phone <span class="cf-optional">(Optional)</span></label>
              <input class="cf-input" type="tel" id="phone" name="phone"
                autocomplete="tel" maxlength="30">
            </div>
          </div>

          <!-- <div class="cf-row"> -->
            <div class="cf-group" id="grp-company">
              <label class="cf-label" for="company">Company <span class="cf-optional">(Optional)</span></label>
              <input class="cf-input" type="text" id="company" name="company"
                autocomplete="organization" maxlength="100">
              <span class="cf-error-msg" id="err-company" role="alert">Company name contains invalid characters.</span>
            </div>
            {{-- <div class="cf-group" id="grp-service">
              <label class="cf-label" for="service">Service</label>
              <select class="cf-input cf-select" id="service" name="service">
                <option value="" disabled selected>Select a service…</option>
                <option value="ai-automation">AI &amp; Automation Solutions</option>
                <option value="seo-geo">SEO &amp; AI Search Optimisation (GEO)</option>
                <option value="web-mobile">Web &amp; Mobile App Development</option>
                <option value="digital-marketing">Digital Marketing &amp; Growth Strategy</option>
                <option value="custom-software">Custom Software &amp; Integrations</option>
                <option value="other">Other / Not Sure</option>
              </select>
            </div> --}}
          <!-- </div> -->

          <div class="cf-group" id="grp-message">
            <label class="cf-label" for="message">Tell Us About Your Project</label>
            <textarea class="cf-textarea" id="message" name="message" rows="4" maxlength="2000"></textarea>
            <span class="cf-error-msg" id="err-message" role="alert">Project description contains invalid characters.</span>
          </div>

          <button type="submit" class="cf-submit ripple-host" id="cfSubmitBtn" aria-label="Send message">
            <i class="fas fa-paper-plane" style="font-size:.9rem"></i>
            Send Message
          </button>

          <p class="cf-consent">
            By submitting this form you agree to our
            <a href="{{ route('privacy-policy') }}">Privacy Policy</a>.
            We'll never share your details with third parties.
          </p>
        </form>

        <div class="cf-success" id="cfSuccess" aria-live="polite" aria-label="Form submitted successfully">
          <div class="cf-success-icon"><i class="fas fa-check"></i></div>
          <h3 class="cf-success-title">Message received.</h3>
          <p class="cf-success-body">Thanks for reaching out. A member of our team will be in touch within one business day.</p>
        </div>
        </div>
      </div>

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




<!-- ━━━━━━━━ 3. MAP / LOCATION ━━━━━━━━ -->
<section class="contact-map-sec d-none" id="location" aria-label="Office location map">

  <div class="contact-map-wrap">
    <!-- Grayscale embedded map — replace src with your actual Google Maps embed URL -->
    <iframe
      class="contact-map-iframe"
      title="Nexa Tech office location — Wainuiomata, Lower Hutt 5014"
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d47985.51721616592!2d174.90708737104072!3d-41.26327118782004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6d47561afb8f26e5%3A0xcf2186bd778fce26!2sWainuiomata%2C%20Lower%20Hutt%205014%2C%20New%20Zealand!5e0!3m2!1sen!2sin!4v1771567012823!5m2!1sen!2sin"
      loading="lazy"
      referrerpolicy="no-referrer-when-downgrade"
      aria-label="Map showing Nexa Tech office at 340 Pine Street, San Francisco"
    ></iframe>

    <!-- Address card overlay -->
    <div class="contact-map-card" aria-hidden="true">
      <span class="contact-map-card-label">Our Office</span>
      <div class="contact-map-card-name">Nexa Tech</div>
      <div class="contact-map-card-addr">
       33 Henrietta Maxwell Grove,<br>
       Wainuiomata,Lower Hutt 5014,<br>
       New Zealand
      </div>
      <div class="contact-map-card-divider"></div>
      <div class="contact-map-card-hours">
        <span><strong>Mon – Fri</strong> 9:00 am – 6:00 pm NZST</span>
        <span><strong>Sat – Sun</strong> Closed</span>
      </div>
    </div>
  </div>

</section>


@endsection

@push('scripts')
<script src="https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha.site_key') }}"></script>
<script>window.RECAPTCHA_SITE_KEY = "{{ config('services.recaptcha.site_key') }}";</script>
<script src="{{ asset('js/contact.js') }}"></script>
@endpush
