<?php session_start();
include_once('includes/config.php');
include_once('includes/settings.php');
error_reporting(0);
?>
<!DOCTYPE html>
<html lang="en">
<?php include('includes/head.php'); ?>

<body class="cnt-home">

    <!-- Header -->
    <header class="header-style-1">
        <?php include('includes/top-header.php'); ?>
        <?php include('includes/main-header.php'); ?>
        <?php include('includes/menu-bar.php'); ?>
    </header>

    <!-- Breadcrumb -->
    <div class="breadcrumb mt-2">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.php">Home</a></li>
                    <li class="breadcrumb-item active">Contact Us</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Body Content -->
    <div class="body-content outer-top-xs">
        <div class="container">
            <!-- Contact Header -->
            <div class="contact-card mb-4">
                <div class="contact-card-header">
                    <h4 class="mb-0"><i class="fa fa-phone me-2"></i> Contact Us</h4>
                </div>
                <div class="contact-card-body">
                    <div class="row mb-4">
                        <div class="col-md-12">
                            <h2 class="mb-3 text-center">Get In Touch</h2>
                            <p class="lead text-center">Contact us about anything related to our company or services.
                                We'll do our best to get back to you as soon as possible.</p>
                        </div>
                    </div>

                    <div class="row">
                        <!-- Contact Information -->
                        <div class="col-md-8 mb-4">
                            <div class="info-card">
                                <h5 class="info-card-title"><i class="fa fa-info-circle me-2"></i> Contact Information
                                </h5>

                                <div class="info-item">
                                    <div class="info-icon">
                                        <i class="fa fa-map-marker"></i>
                                    </div>
                                    <div class="info-content">
                                        <h6>Our Location</h6>
                                        <p>Ghana, Eastern Region, Nsawam</p>
                                    </div>
                                </div>

                                <div class="info-item">
                                    <div class="info-icon">
                                        <i class="fa fa-phone"></i>
                                    </div>
                                    <div class="info-content">
                                        <h6>Phone Numbers</h6>
                                        <p>
                                            <?php
                                            $phone1 = get_setting('support_phone', '+233 206 994 679');
                                            $phone2 = get_setting('support_phone_2', '');
                                            if ($phone2) {
                                                echo '<strong>Primary:</strong> <a href="tel:' . filter_var($phone1, FILTER_SANITIZE_NUMBER_INT) . '">' . htmlentities($phone1) . '</a><br>';
                                                echo '<strong>Secondary:</strong> <a href="tel:' . filter_var($phone2, FILTER_SANITIZE_NUMBER_INT) . '">' . htmlentities($phone2) . '</a>';
                                            } else {
                                                echo '<a href="tel:' . filter_var($phone1, FILTER_SANITIZE_NUMBER_INT) . '">' . htmlentities($phone1) . '</a>';
                                            }
                                            ?>
                                        </p>
                                    </div>
                                </div>

                                <div class="info-item">
                                    <div class="info-icon whatsapp">
                                        <i class="fa fa-whatsapp"></i>
                                    </div>
                                    <div class="info-content">
                                        <h6>WhatsApp</h6>
                                        <p>
                                            <?php
                                            $phone1 = get_setting('support_phone', '+233 548 100 237');
                                            $phone2 = get_setting('support_phone_2', '');
                                            $wa1 = filter_var($phone1, FILTER_SANITIZE_NUMBER_INT);
                                            echo '<a href="https://wa.me/' . $wa1 . '" target="_blank">' . htmlentities($phone1) . '</a>';
                                            if ($phone2) {
                                                $wa2 = filter_var($phone2, FILTER_SANITIZE_NUMBER_INT);
                                                echo ' or <a href="https://wa.me/' . $wa2 . '" target="_blank">' . htmlentities($phone2) . '</a>';
                                            }
                                            ?>
                                        </p>
                                    </div>
                                </div>

                                <div class="info-item">
                                    <div class="info-icon">
                                        <i class="fa fa-envelope"></i>
                                    </div>
                                    <div class="info-content">
                                        <h6>Email Address</h6>
                                        <p><a href="mailto:awesome.entx@gmail.com">awesome.entx@gmail.com</a></p>
                                    </div>
                                </div>

                                <div class="info-item">
                                    <div class="info-icon">
                                        <i class="fa fa-clock-o"></i>
                                    </div>
                                    <div class="info-content">
                                        <h6>Business Hours</h6>
                                        <p>
                                            Monday - Saturday: 8:00 AM - 6:00 PM<br>
                                            Sunday: Closed
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <!-- Help CTA -->
                            <div class="help-cta mt-4">
                                <div class="help-cta-icon">
                                    <i class="fa fa-headphones"></i>
                                </div>
                                <div class="help-cta-content">
                                    <h6>Need Help Placing an Order?</h6>
                                    <p class="mb-0">
                                        If you can't find what you need or need assistance placing an order,
                                        call or WhatsApp us on <strong>
                                            <?php
                                            $phone1 = get_setting('support_phone', '0548100237');
                                            $phone2 = get_setting('support_phone_2', '');
                                            echo htmlentities($phone1 . ($phone2 ? ' or ' . $phone2 : ''));
                                            ?>
                                        </strong>.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- Quick Contact Cards -->
                        <div class="col-md-4">
                            <div class="quick-contact-card mb-3">
                                <div class="quick-contact-icon">
                                    <i class="fa fa-map-marker"></i>
                                </div>
                                <h5 class="quick-contact-title">Visit Us</h5>
                                <p class="quick-contact-text">Ghana, Eastern Region<br>Nsawam</p>
                            </div>

                            <div class="quick-contact-card mb-3">
                                <div class="quick-contact-icon success">
                                    <i class="fa fa-phone"></i>
                                </div>
                                <h5 class="quick-contact-title">Call Us</h5>
                                <p class="quick-contact-text">
                                    <?php
                                    $phone1 = get_setting('support_phone', '+233 206 994 679');
                                    $phone2 = get_setting('support_phone_2', '');
                                    echo '<a href="tel:' . filter_var($phone1, FILTER_SANITIZE_NUMBER_INT) . '">' . htmlentities($phone1) . '</a>';
                                    if ($phone2) {
                                        echo '<br><a href="tel:' . filter_var($phone2, FILTER_SANITIZE_NUMBER_INT) . '">' . htmlentities($phone2) . '</a>';
                                    }
                                    ?>
                                </p>
                            </div>

                            <div class="quick-contact-card">
                                <div class="quick-contact-icon">
                                    <i class="fa fa-envelope"></i>
                                </div>
                                <h5 class="quick-contact-title">Email Us</h5>
                                <p class="quick-contact-text mb-0">
                                    <a href="mailto:awesome.entx@gmail.com">awesome.entx@gmail.com</a>
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- About Section -->
                    <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="about-section">
                                <h5><i class="fa fa-building me-2"></i> About Awesome Mall</h5>
                                <p>
                                    Awesome Mall brings a world of choice to Ghana. Shop our wide range of home
                                    appliances,
                                    furniture, electronics, fashion, accessories and more. We are committed to providing
                                    quality products and excellent customer service.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <?php include_once('includes/footer.php'); ?>
    <?php include_once('includes/foot.php'); ?>

    <style>
        /* Contact Page Styling */
        .contact-card {
            background: #fff;
            border: 1px solid #eee;
            border-radius: 8px;
            overflow: hidden;
        }

        .contact-card-header {
            background: #fafafa;
            border-bottom: 1px solid #eee;
            padding: 20px;
        }

        .contact-card-header h4 {
            font-size: 20px;
            font-weight: 700;
            color: #282828;
        }

        .contact-card-body {
            padding: 40px 30px;
        }

        /* Info Card */
        .info-card {
            background: #fafafa;
            border: 1px solid #f0f0f0;
            border-radius: 8px;
            padding: 25px;
        }

        .info-card-title {
            font-size: 18px;
            font-weight: 700;
            color: #282828;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--am-primary);
        }

        /* Info Items */
        .info-item {
            display: flex;
            gap: 20px;
            padding: 20px 0;
            border-bottom: 1px solid #eee;
        }

        .info-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .info-icon {
            width: 50px;
            height: 50px;
            background: var(--am-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .info-icon.whatsapp {
            background: #25D366;
        }

        .info-icon i {
            font-size: 22px;
            color: #fff;
        }

        .info-content {
            flex: 1;
        }

        .info-content h6 {
            font-size: 16px;
            font-weight: 700;
            color: #282828;
            margin-bottom: 8px;
        }

        .info-content p {
            font-size: 14px;
            color: #666;
            margin-bottom: 0;
            line-height: 1.6;
        }

        .info-content a {
            color: var(--am-primary);
            text-decoration: none;
        }

        .info-content a:hover {
            text-decoration: underline;
        }

        /* Help CTA */
        .help-cta {
            background: #fff;
            border: 2px solid var(--am-primary);
            border-radius: 8px;
            padding: 20px;
            display: flex;
            gap: 20px;
            align-items: center;
        }

        .help-cta-icon {
            width: 60px;
            height: 60px;
            background: var(--am-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .help-cta-icon i {
            font-size: 28px;
            color: #fff;
        }

        .help-cta-content h6 {
            font-size: 16px;
            font-weight: 700;
            color: #282828;
            margin-bottom: 6px;
        }

        .help-cta-content p {
            font-size: 14px;
            color: #555;
            line-height: 1.6;
        }

        /* Quick Contact Cards */
        .quick-contact-card {
            background: #fff;
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 30px 20px;
            text-align: center;
            transition: all 0.3s;
        }

        .quick-contact-card:hover {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
            transform: translateY(-4px);
            border-color: var(--am-primary);
        }

        .quick-contact-icon {
            width: 70px;
            height: 70px;
            margin: 0 auto 15px;
            background: var(--am-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .quick-contact-icon.success {
            background: #10b981;
        }

        .quick-contact-icon i {
            font-size: 32px;
            color: #fff;
        }

        .quick-contact-title {
            font-size: 18px;
            font-weight: 700;
            color: #282828;
            margin-bottom: 10px;
        }

        .quick-contact-text {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
        }

        .quick-contact-text a {
            color: var(--am-primary);
            text-decoration: none;
        }

        .quick-contact-text a:hover {
            text-decoration: underline;
        }

        /* About Section */
        .about-section {
            background: #fafafa;
            border: 1px solid #f0f0f0;
            border-radius: 8px;
            padding: 25px;
        }

        .about-section h5 {
            font-size: 18px;
            font-weight: 700;
            color: #282828;
            margin-bottom: 15px;
        }

        .about-section p {
            font-size: 15px;
            color: #555;
            line-height: 1.8;
            margin-bottom: 0;
        }

        /* Responsive */
        @media (max-width: 767px) {
            .contact-card-body {
                padding: 25px 15px;
            }

            .info-card {
                padding: 20px;
            }

            .info-item {
                gap: 15px;
                padding: 15px 0;
            }

            .info-icon {
                width: 45px;
                height: 45px;
            }

            .info-icon i {
                font-size: 20px;
            }

            .help-cta {
                flex-direction: column;
                text-align: center;
            }

            .quick-contact-card {
                padding: 25px 15px;
            }

            .quick-contact-icon {
                width: 60px;
                height: 60px;
            }

            .quick-contact-icon i {
                font-size: 28px;
            }
        }
    </style>
</body>

</html>
