<%- include('partials/header_index') %>
<%- include('partials/main_nav') %>

<!--Main Contact Section-->
<section class="contact-section">
    <h2>Get in Touch</h2>
    <p>We're committed to providing the best customer service possible. Reach out to us anytime, and our dedicated team will assist you.</p>
    
    <div class="contact-methods">
        <div class="contact-method">
            <img src="./Assets/images/phone.png" alt="Phone Icon">
            <h3>Phone</h3>
            <a href="tel:+13233-333-333">+1 3233-333-333</a>
        </div>

        <div class="contact-method">
            <img src="./Assets/images/mail.png" alt="Mail Icon">
            <h3>Email</h3>
            <a href="mailto:service-help@FoodSpot.co">service-help@FoodSpot.co</a>
        </div>
    </div>
</section>

<!-- Map Section -->
<section class="map-section">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2880.4050182320843!2d-79.23035778470883!3d43.785208151902864!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89d4d0f21fd9078f%3A0x46e3fe92c0cd2b18!2sCentennial%20College%20(Progress%20Campus)!5e0!3m2!1sen!2sca!4v1671143923257!5m2!1sen!2sca" width="100%" height="300" style="border:0;" allowfullscreen=""></iframe>
</section>

<!-- Headquarters Information -->
<section class="headquarter-section">
    <h3>Our Headquarters</h3>
    <address>
        Centennial College<br>
        Scarborough<br>
        CANADA
    </address>
    <img src="./Assets/images/building.png" alt="Building Icon" class="hq-icon">
</section>

<%- include('partials/bottom_nav') %>
<%- include('partials/footer') %>

<!-- Custom Styles -->
<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f7f7f7;
        color: #333;
        margin: 0;
        padding: 0;
    }

    .contact-section, .map-section, .headquarter-section {
        padding: 40px;
        background-color: #fff;
        margin-bottom: 20px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    }

    .contact-section h2, .headquarter-section h3 {
        color: #444;
        margin-bottom: 20px;
    }

    .contact-methods {
        display: flex;
        justify-content: space-between;
    }

    .contact-method {
        width: 45%;
        border: 1px solid #ddd;
        padding: 20px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    }

    .contact-method img {
        width: 50px;
        height: 50px;
    }

    .contact-method h3 {
        margin-top: 15px;
        margin-bottom: 10px;
    }

    .contact-method a {
        color: #666;
        text-decoration: none;
    }

    .contact-method a:hover {
        color: #333;
        text-decoration: underline;
    }

    .headquarter-section address {
        font-style: normal;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .hq-icon {
        width: 100px;
        height: 100px;
        display: block;
        margin: 0 auto;
    }
</style>
