@extends('layouts.web')

    @section('content')

    <section class="hero-section">

        <div class="hero-overlay"></div>

        <div class="container">
        <div class="hero-content">

            <h1>Contact Us</h1>

            <p>
                We'd love to hear from you. Reach out for concerns, inquiries, and assistance.
            </p>

        </div>
        </div>

    </section>

    <!-- CONTACT SECTION -->
    <section class="py-5">
        <div class="container">

        <div class="text-center">
            <h2 class="section-title">Get In Touch</h2>
        </div>

        <div class="row g-4">

            <!-- CONTACT DETAILS -->
            <div class="col-lg-4">

            <div class="contact-card mb-4">

                <div class="mb-3">
                <i class="bi bi-geo-alt-fill contact-icon"></i>
                </div>

                <h4>Office Address</h4>

                <p class="text-muted mb-0">
                Camella Alta Silang Homeowners Association Office<br>
                Silang, Cavite, Philippines
                </p>

            </div>

            <div class="contact-card mb-4">

                <div class="mb-3">
                <i class="bi bi-telephone-fill contact-icon"></i>
                </div>

                <h4>Phone Number</h4>

                <p class="text-muted mb-0">
                +63 9xxxxxxxxx
                </p>

            </div>

            <div class="contact-card">

                <div class="mb-3">
                <i class="bi bi-envelope-fill contact-icon"></i>
                </div>

                <h4>Email Address</h4>

                <p class="text-muted mb-0">
                admin@gmail.com
                </p>

            </div>

            </div>

            <!-- CONTACT FORM -->
            <div class="col-lg-4">

            <div class="contact-card">

                <h4 class="mb-4">Send a Message</h4>

                <form>

                <div class="mb-3">
                    <input
                    type="text"
                    class="form-control"
                    placeholder="Full Name"
                    required
                    >
                </div>

                <div class="mb-3">
                    <input
                    type="email"
                    class="form-control"
                    placeholder="Email Address"
                    required
                    >
                </div>

                <div class="mb-3">
                    <input
                    type="text"
                    class="form-control"
                    placeholder="Subject"
                    required
                    >
                </div>

                <div class="mb-3">
                    <textarea
                    class="form-control"
                    rows="5"
                    placeholder="Your Message"
                    required
                    ></textarea>
                </div>

                <button type="submit" class="btn btn-submit">
                    <i class="bi bi-send-fill"></i>
                    Send Message
                </button>

                </form>

            </div>

            </div>

            <!-- GOOGLE MAP -->
            <div class="col-lg-4">

            <div class="map-container h-100">

                <iframe
                src="https://maps.google.com/maps?q=Silang%20Cavite&t=&z=13&ie=UTF8&iwloc=&output=embed"
                allowfullscreen=""
                loading="lazy">
                </iframe>

            </div>

            </div>

        </div>

        </div>
    </section>
    @endsection