@extends('layouts.frontend')
@section('title', 'Contact Us - Yahya Playland')

@section('content')

  <!-- Hero -->
  <section id="home" class="hero" role="region" aria-label="Hero banner">
    <img src="{{ asset('images/hero-banner.jpg') }}" alt="banner">
  </section>

  <!-- Contact Section -->
  <section id="about" class="feature feature-contact" role="region" aria-labelledby="aboutTitle">
    <div class="container">
      <div class="about-heading text-center mb-5">
        <h2>contact with Yahya Playland</h2>
        <p class="lead">Please complete our short
          <a href="https://s.surveyplanet.com/dbh4bfze" target="_blank" rel="noopener noreferrer">Survey Here</a>
          to help us plan. You'll receive 25% off your first session.
        </p>

        <div class="contact-details d-flex flex-column flex-sm-row justify-content-center align-items-center mt-3 gap-4">
          <div class="d-flex align-items-start text-center text-sm-start contact-details-item">
            <i class="bi bi-envelope me-2 fs-5"></i>
            <div>
              <div><a href="mailto:contact@yahyaplayland.com.au" class="text-white">contact@yahyaplayland.com.au</a></div>
            </div>
          </div>
          <div class="d-flex align-items-start text-center text-sm-start contact-details-item">
            <i class="bi bi-telephone me-2 fs-5"></i>
            <div>
              <div><a href="tel:0477390650" class="text-white">0477 390 650</a></div>
            </div>
          </div>
        </div>

        @if(session('success'))
          <div class="alert alert-success mt-4" style="background:#d4edda;color:#155724;border:1px solid #c3e6cb;padding:14px 18px;border-radius:10px;font-size:14px;max-width:600px;margin:20px auto 0">
            ✅ {{ session('success') }}
          </div>
        @endif

        <!-- Contact form -->
        <div class="row justify-content-center">
          <div class="col-lg-9">
            <div class="form-outer-wrapper my-5">
              <div class="form-frame">
                <div class="contact-form-wrap">
                  <form id="contactForm" class="contact-form" method="POST" action="{{ route('contact.send') }}">
                    @csrf

                    <!-- NAME -->
                    <div class="mb-3">
                      <label class="col-form-label text-start d-flex align-items-center">
                        Name <span class="text-danger">*</span>
                      </label>
                      <div class="input-with-icon">
                        <span class="icon-inside"><i class="bi bi-person"></i></span>
                        <input type="text" name="name" class="form-control" placeholder="Enter your name"
                               required value="{{ old('name') }}">
                      </div>
                    </div>

                    <!-- EMAIL + PHONE -->
                    <div class="row g-3">
                      <div class="col-md-6">
                        <label class="col-form-label text-start d-flex align-items-center">
                          Email <span class="text-danger">*</span>
                        </label>
                        <div class="input-with-icon">
                          <span class="icon-inside"><i class="bi bi-envelope"></i></span>
                          <input type="email" name="email" class="form-control"
                                 placeholder="Enter your email" required value="{{ old('email') }}">
                        </div>
                      </div>
                      <div class="col-md-6">
                        <label class="col-form-label text-start d-flex align-items-center">Phone</label>
                        <div class="input-with-icon">
                          <span class="icon-inside"><i class="bi bi-telephone"></i></span>
                          <input type="tel" name="phone" class="form-control"
                                 placeholder="Enter your phone" value="{{ old('phone') }}">
                        </div>
                      </div>
                    </div>

                    <!-- MESSAGE (renamed from comment to message in controller) -->
                    <div class="mt-3 mb-3">
                      <label class="col-form-label text-start d-flex align-items-center">
                        Your Message <span class="text-danger">*</span>
                      </label>
                      <div class="input-with-icon">
                        <span class="icon-inside textarea-icon"><i class="bi bi-chat-dots"></i></span>
                        <textarea name="message" class="form-control" rows="6"
                                  placeholder="Enter your message" required>{{ old('message') }}</textarea>
                      </div>
                    </div>

                    <!-- BUTTON -->
                    <div class="d-flex justify-content-start">
                      <button type="submit" class="button-green mb-3">SEND</button>
                    </div>

                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>

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

@endsection