@extends('frontend.layouts.app')
@section('content')

<section class="page-hero">
  <div class="container content">
    <nav aria-label="breadcrumb" class="mb-3">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
        <li class="breadcrumb-item active">Contact Us</li>
      </ol>
    </nav>
    <h1 class="reveal">Contact Us</h1>
    <p class="text-white-50 mt-2 reveal delay-1">Get in touch for a free, no-obligation quote — we'd love to help!</p>
  </div>
</section>

<section class="contact-section">
  <div class="container">
    <div class="row g-5">

      {{-- Contact Info --}}
      <div class="col-lg-4 reveal">
        <div class="contact-info-card">
          <h3 class="mb-4"><i class="fas fa-leaf me-2" style="color:#8bc34a"></i>Get in Touch</h3>

          <div class="contact-info-item">
            <div class="icon-box"><i class="fas fa-phone"></i></div>
            <div>
              <strong>Phone</strong>
              <span><a href="tel:{{ preg_replace('/\s+/', '', $settings['phone'] ?? '+61406473886') }}" style="color:rgba(255,255,255,.65)">{{ $settings['phone'] ?? '+61 406 473 886' }}</a></span>
            </div>
          </div>
          <div class="contact-info-item">
            <div class="icon-box"><i class="fas fa-envelope"></i></div>
            <div>
              <strong>Email</strong>
              <span><a href="mailto:{{ $settings['email'] ?? 'hello@vkhomemaintenance.com.au' }}" style="color:rgba(255,255,255,.65)">{{ $settings['email'] ?? 'hello@vkhomemaintenance.com.au' }}</a></span>
            </div>
          </div>
          <div class="contact-info-item">
            <div class="icon-box"><i class="fas fa-map-marker-alt"></i></div>
            <div>
              <strong>Service Area</strong>
              <span>{{ $settings['service_area'] ?? 'All States & Territories, Australia' }}</span>
            </div>
          </div>
          <div class="contact-info-item">
            <div class="icon-box"><i class="fas fa-clock"></i></div>
            <div>
              <strong>Business Hours</strong>
              <span>{{ $settings['business_hours'] ?? 'Mon – Sat: 7:00 AM – 6:00 PM' }}</span>
            </div>
          </div>

          <hr style="border-color:rgba(255,255,255,.15);margin:1.5rem 0">
          <strong style="color:#fff;display:block;margin-bottom:1rem;">Follow Us</strong>
          <div class="footer-social">
            @if(!empty($settings['facebook']))<a href="{{ $settings['facebook'] }}" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>@endif
            @if(!empty($settings['instagram']))<a href="{{ $settings['instagram'] }}" aria-label="Instagram"><i class="fab fa-instagram"></i></a>@endif
            <a href="#" aria-label="Google"><i class="fab fa-google"></i></a>
            @if(!empty($settings['linkedin']))<a href="{{ $settings['linkedin'] }}" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>@endif
          </div>

          <hr style="border-color:rgba(255,255,255,.15);margin:1.5rem 0">
          <div class="row g-3 text-center">
            <div class="col-4">
              <div style="font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:800;color:#8bc34a">500+</div>
              <div style="font-size:.72rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.05em">Projects</div>
            </div>
            <div class="col-4">
              <div style="font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:800;color:#8bc34a">12+</div>
              <div style="font-size:.72rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.05em">Years</div>
            </div>
            <div class="col-4">
              <div style="font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:800;color:#8bc34a">5★</div>
              <div style="font-size:.72rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.05em">Rating</div>
            </div>
          </div>
        </div>
      </div>

      {{-- Contact Form --}}
      <div class="col-lg-8 reveal delay-2">
        <div class="contact-form-card">
          <h3>Request a Free Quote</h3>
          <p class="text-muted mb-4">Fill in the form below and one of our friendly team members will get back to you within 24 hours.</p>

          @if(session('success'))
          <div class="alert alert-success alert-dismissible fade show">
            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
          </div>
          @endif

          <form action="{{ route('contact.submit') }}" method="POST" novalidate>
            @csrf
            <div class="row g-3">
              <div class="col-12">
                <label class="form-label">Full Name *</label>
                <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                  placeholder="John Smith" value="{{ old('name') }}" required>
                @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>
              <div class="col-md-6">
                <label class="form-label">Email Address *</label>
                <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                  placeholder="john@example.com.au" value="{{ old('email') }}" required>
                @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>
              <div class="col-md-6">
                <label class="form-label">Phone Number</label>
                <input type="tel" name="phone" class="form-control @error('phone') is-invalid @enderror"
                  placeholder="04XX XXX XXX" value="{{ old('phone') }}">
                @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>
              <div class="col-md-6">
                <label class="form-label">Suburb / State</label>
                <input type="text" name="suburb" class="form-control" placeholder="e.g. Bondi, NSW" value="{{ old('suburb') }}">
              </div>
              <div class="col-md-6">
                <label class="form-label">Service Required *</label>
                <select name="service" class="form-select @error('service') is-invalid @enderror">
                  <option value="" disabled {{ !old('service') ? 'selected' : '' }}>Select a service...</option>
                  <optgroup label="🌿 Garden Services">
                    <option {{ old('service') == 'Lawn Mowing' ? 'selected' : '' }}>Lawn Mowing</option>
                    <option {{ old('service') == 'Garden Maintenance' ? 'selected' : '' }}>Garden Maintenance</option>
                    <option {{ old('service') == 'Irrigation Systems' ? 'selected' : '' }}>Irrigation Systems</option>
                    <option {{ old('service') == 'Artificial Turf' ? 'selected' : '' }}>Artificial Turf</option>
                    <option {{ old('service') == 'Plants & Tree Installation' ? 'selected' : '' }}>Plants & Tree Installation</option>
                    <option {{ old('service') == 'Tree & Stump Removal' ? 'selected' : '' }}>Tree & Stump Removal</option>
                    <option {{ old('service') == 'Indoor Plant Care' ? 'selected' : '' }}>Indoor Plant Care</option>
                    <option {{ old('service') == 'Topiary & Tree Pruning' ? 'selected' : '' }}>Topiary & Tree Pruning</option>
                  </optgroup>
                  <optgroup label="🏡 Landscaping">
                    <option {{ old('service') == 'Landscape Design' ? 'selected' : '' }}>Landscape Design</option>
                    <option {{ old('service') == 'Landscape Installation' ? 'selected' : '' }}>Landscape Installation</option>
                    <option {{ old('service') == 'Retaining Walls' ? 'selected' : '' }}>Retaining Walls</option>
                    <option {{ old('service') == 'Paving & Pathways' ? 'selected' : '' }}>Paving & Pathways</option>
                    <option {{ old('service') == 'Pergolas & Decking' ? 'selected' : '' }}>Pergolas & Decking</option>
                    <option {{ old('service') == 'Water Features' ? 'selected' : '' }}>Water Features</option>
                    <option {{ old('service') == 'Drainage Solutions' ? 'selected' : '' }}>Drainage Solutions</option>
                    <option {{ old('service') == 'Outdoor Lighting' ? 'selected' : '' }}>Outdoor Lighting</option>
                  </optgroup>
                  <optgroup label="🔧 Other Services">
                    <option {{ old('service') == 'Handyman Services' ? 'selected' : '' }}>Handyman Services</option>
                    <option {{ old('service') == 'Gutter Cleaning' ? 'selected' : '' }}>Gutter Cleaning</option>
                    <option {{ old('service') == 'Gutter Guard' ? 'selected' : '' }}>Gutter Guard</option>
                    <option {{ old('service') == 'High Pressure Cleaning' ? 'selected' : '' }}>High Pressure Cleaning</option>
                    <option {{ old('service') == 'Home & Office Cleaning' ? 'selected' : '' }}>Home & Office Cleaning</option>
                    <option {{ old('service') == 'Solar Panel Cleaning' ? 'selected' : '' }}>Solar Panel Cleaning</option>
                    <option {{ old('service') == 'Interior Painting' ? 'selected' : '' }}>Interior Painting</option>
                    <option {{ old('service') == 'Fencing' ? 'selected' : '' }}>Fencing</option>
                    <option {{ old('service') == 'Rubbish Removal' ? 'selected' : '' }}>Rubbish Removal</option>
                  </optgroup>
                  <option {{ old('service') == 'Multiple Services' ? 'selected' : '' }}>Multiple Services</option>
                  <option {{ old('service') == 'Not Sure — Need Advice' ? 'selected' : '' }}>Not Sure — Need Advice</option>
                </select>
                @error('service')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>
              <div class="col-12">
                <label class="form-label">Tell Us About Your Project *</label>
                <textarea name="message" class="form-control @error('message') is-invalid @enderror" rows="5"
                  placeholder="Please describe your garden, property size, what you need done, and any other relevant details..." required>{{ old('message') }}</textarea>
                @error('message')<div class="invalid-feedback">{{ $message }}</div>@enderror
              </div>
              <div class="col-12 mt-2">
                <button type="submit" class="btn-primary-vk w-100 justify-content-center" style="padding:1rem">
                  <i class="fas fa-paper-plane me-2"></i>Send My Request
                </button>
                <p class="text-muted text-center mt-3" style="font-size:.8rem">
                  <i class="fas fa-lock me-1"></i>Your information is secure and will never be shared.
                </p>
              </div>
            </div>
          </form>
        </div>
      </div>

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

{{-- MAP / SERVICE AREA --}}
<section style="padding:0">
  <div style="background:linear-gradient(135deg,#1a4a20,#0e2b11);padding:3rem 0">
    <div class="container text-center">
      <h3 style="color:#fff;margin-bottom:.5rem"><i class="fas fa-map-marker-alt me-2" style="color:#8bc34a"></i>Proudly Serving All of Australia</h3>
      <p style="color:rgba(255,255,255,.65)">NSW · VIC · QLD · SA · WA · TAS · NT · ACT</p>
      <div class="row g-3 mt-3 justify-content-center">
        @foreach(['Sydney','Melbourne','Brisbane','Perth','Adelaide','Canberra','Darwin','Hobart'] as $city)
        <div class="col-auto"><span style="background:rgba(139,195,74,.15);border:1px solid rgba(139,195,74,.3);color:#8bc34a;padding:.4rem 1.2rem;border-radius:50px;font-size:.85rem;font-weight:700">{{ $city }}</span></div>
        @endforeach
      </div>
    </div>
  </div>
</section>

@endsection