@extends('app')

@section('title', 'Contact CCU')

@section('description', 'Contact Community Connecting Us (CCU) a 501(c)(3) nonprofit located in Port Deposit, MD
    today.')

@section('page_phrase', 'CCU Contact Info')

@section('content')

    <div id="contact_page" class="interior_page text-center no_carousel bg-light">

        <section class="section_row">
            <div id="contact-us" class="content_wrap">
                <div class="row featurette">
                    <div class="col-12 order-first mb-3">
                        <h1 class="featurette-heading bottom_border fs-1 fw_600 text-center mb-5">Contact Info</h1>
                    </div>
                    <div class="col-xl-7 ps-xl-4 column pe-lg-5">
                        <div class="contact_form_wrap mb-5 mb-xl-0 content_animate top_content slide_left">
                            <p class="fs-4 fw_600 text-uppercase">Send a Message</p>
                            <x-contact-form />
                        </div>
                    </div>
                    <div class="col-xl-5 d-flex column mb-3 pt-4 mb-xl-0 ps-lg-5">
                        <div class="text_wrap content_animate top_content slide_up ps-4 ps-lg-0">
                            <h2 class="featurette-heading bottom_border fs-4 fw_600 text-start text-uppercase pb-2 mb-2">
                                <b>Community <span class="d-inline-block">Connecting Us</span></b>
                            </h2>
                            <p class="fs-6 text-start mb-4"></p>
                            <p class="fw_500 mb-2"><i class="fas fa-map-marker-alt me-1"></i> Our Location:</p>
                            <p class="px-3 mb-4">
                                Nesbitt Hall, 99 North Main Street, <br>
                                Port Deposit, MD 21904
                            </p>
                            <p class="mb-5">
                                <a href="tel:1-{{ config('app.phone') }}"
                                    class="phone_link d-flex text-center text-lg-start align-items-center text-decoration-none">
                                    <span class="pe-2"><i class="fas fa-phone-alt fs_16 me-1"></i> Phone</span>
                                    <b class="flex-column">
                                        {{ config('app.phone') }}</b>
                                </a>
                            </p>
                            <div class="image_wrap mb-0">
                                <img class="content_image ms-0"
                                    src="/images/our-building-community-connect-us-port-deposit-md700x467.jpg"
                                    title="Community Connecting Us a Safe Place for Youth in Port Deposit, MD"
                                    alt="Community Connecting Us">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="section_row mt-2 px-0">
            <div class="map_wrap">
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d21907.481169013892!2d-76.12374407205817!3d39.60942119181562!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x78ff39ee4e62dbcf!2sCommunity%20connecting%20Us!5e0!3m2!1sen!2sus!4v1672765420947!5m2!1sen!2sus"
                    style="border:0;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>
    </div>
@endsection