@extends('front.layouts.layout')
@section('content')

    <!-- Page Header Start -->
    <div class="container-fluid page-header py-6 my-6 mt-0 wow fadeIn" data-wow-delay="0.1s">
        <div class="container text-center">
            <h1 class="display-4 text-white animated slideInDown mb-4">Contact Us</h1>
            <nav aria-label="breadcrumb animated slideInDown">
                <!-- <ol class="breadcrumb justify-content-center mb-0">
                    <li class="breadcrumb-item"><a class="text-white" href="#">Home</a></li>
                    <li class="breadcrumb-item"><a class="text-white" href="#">Pages</a></li>
                    <li class="breadcrumb-item text-primary active" aria-current="page">About</li>
                </ol> -->
            </nav>
        </div>
    </div>
    <!-- Page Header End -->


  <!-- Contact Section -->
  <section class="container py-5">
    <div class="row g-4">
      
      <!-- Contact Form -->
      <div class="col-lg-6">
        <div class="card shadow border-0 h-100">
          <div class="card-body p-4">
            <h3 class="card-title mb-4">Get in Touch</h3>
            <form>
              <div class="mb-3">
                <label for="name" class="form-label">Name</label>
                <input type="text" class="form-control" id="name" placeholder="Your Name" required>
              </div>
              <div class="mb-3">
                <label for="email" class="form-label">Email</label>
                <input type="email" class="form-control" id="email" placeholder="Your Email" required>
              </div>
                <div class="mb-3">
                <label for="phone" class="form-label">Phone</label>
                <input type="text" class="form-control" id="phone" placeholder="Your Phone Number" required>
              </div>
                <div class="mb-3">
                <label for="subject" class="form-label">Subject</label>
                <input type="text" class="form-control" id="subject" placeholder="Your Subject" required>
              </div>
              <div class="mb-3">
                <label for="message" class="form-label">Message</label>
                <textarea class="form-control" id="message" rows="5" placeholder="Your Message" required></textarea>
              </div>
              <button type="submit" class="btn btn-primary w-100">Send Message</button>
            </form>
          </div>
        </div>
      </div>

      <!-- Contact Info -->
      <div class="col-lg-6">
        <div class="card shadow border-0 h-100">
          <div class="card-body p-4">
            <h3 class="card-title mb-4">Contact Information</h3>
            <ul class="list-unstyled mb-4">
                     <div class="d-flex gap-4 mb-3">
        <a class="text-primary fs-2" href="#"><i class="fab fa-facebook-f"></i></a>
        <a class="text-primary fs-2" href="#"><i class="fab fa-twitter"></i></a>
        <a class="text-primary fs-2" href="#"><i class="fab fa-linkedin-in"></i></a>
        <a class="text-primary fs-2" href="#"><i class="fab fa-instagram"></i></a>
      </div>
              <li class="mb-3"><i class="fas fa-phone me-2 text-dark"></i> 01009922651</li>
              <li class="mb-3"><i class="fas fa-phone me-2 text-dark"></i> 01023864968</li>
              <li class="mb-3"><i class="fas fa-phone me-2 text-dark"></i> 01023864765</li>
              <li class="mb-3"><i class="fas fa-phone me-2 text-dark"></i> 01023863459</li>
              <li class="mb-3"><i class="fas fa-envelope me-2 text-dark"></i> virginia@example.com</li>
              <li class="mb-3"><i class="fas fa-map-marker-alt me-2 text-dark"></i> 1234 Example Street, City, Country</li>
            </ul>
            <div class="ratio ratio-16x9">
              <!-- Embed Google Map -->
              <iframe 
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.833364814375!2d144.95592321590487!3d-37.81720974201608!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d43f2a95c7d%3A0x2b0bb2aa5c07b6f7!2sVictoria!5e0!3m2!1sen!2sau!4v1611813134751!5m2!1sen!2sau" 
                width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy">
              </iframe>
            </div>
          </div>
        </div>
      </div>

    </div>
  </section>
@endsection