{% extends "base.html" %}
{% block title %}Contact Us | Digital Bookstore{% endblock %}

{% block content %}
<header class="bg-white border-bottom py-5 mb-5">
    <div class="container py-4">
        <h1 class="fw-800 display-5 mb-0 text-center">Get in <span class="text-primary-gradient">Touch</span></h1>
        <p class="text-muted fs-5 mt-2 text-center">We're here to help you with your digital book experience.</p>
    </div>
</header>

<div class="container mb-5 pb-5">
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <div class="card border-0 shadow-soft rounded-4 p-5 bg-white text-center">
                <div class="icon-box mb-4 mx-auto bg-primary-light text-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                    <i class="fas fa-headset fa-2x"></i>
                </div>
                <h3 class="fw-bold mb-4">Support & Inquiries</h3>
                <p class="text-muted mb-5">Have questions about a book or your order? Reach out to our team through any of the channels below.</p>
                
                <div class="contact-methods text-start">
                    <div class="d-flex align-items-center mb-4 p-3 bg-light rounded-4">
                        <div class="flex-shrink-0 bg-white shadow-sm rounded-circle p-3 me-4 text-success">
                            <i class="fab fa-whatsapp fa-xl"></i>
                        </div>
                        <div>
                            <span class="d-block text-muted small fw-bold text-uppercase">WhatsApp Support</span>
                            <a href="https://wa.me/252634844506" class="text-dark fw-bold text-decoration-none fs-5">+252 63 4844506</a>
                        </div>
                    </div>

                    <div class="d-flex align-items-center mb-4 p-3 bg-light rounded-4">
                        <div class="flex-shrink-0 bg-white shadow-sm rounded-circle p-3 me-4 text-primary">
                            <i class="far fa-envelope fa-xl"></i>
                        </div>
                        <div>
                            <span class="d-block text-muted small fw-bold text-uppercase">Email Address</span>
                            <a href="mailto:support@bookstore.com" class="text-dark fw-bold text-decoration-none fs-5">support@bookstore.com</a>
                        </div>
                    </div>

                    <div class="d-flex align-items-center p-3 bg-light rounded-4">
                        <div class="flex-shrink-0 bg-white shadow-sm rounded-circle p-3 me-4 text-danger">
                            <i class="fas fa-location-dot fa-xl"></i>
                        </div>
                        <div>
                            <span class="d-block text-muted small fw-bold text-uppercase">Headquarters</span>
                            <span class="text-dark fw-bold fs-5">Hargeisa, Somalia</span>
                        </div>
                    </div>
                </div>

                <div class="mt-5 pt-4 border-top">
                    <a href="https://wa.me/252634844506" class="btn btn-primary btn-lg w-100 py-3 rounded-pill shadow-lg fw-bold">
                        <i class="fab fa-whatsapp me-2"></i> Chat with us Now
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}