<?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">About Us</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Body Content -->
    <div class="body-content outer-top-xs">
        <div class="container">
            <!-- About Us Header -->
            <div class="about-card mb-4">
                <div class="about-card-header">
                    <h4 class="mb-0"><i class="fa fa-info-circle me-2"></i> About Awesome Mall</h4>
                </div>
                <div class="about-card-body">
                    <div class="row mb-4">
                        <div class="col-md-12">
                            <h2 class="mb-3 text-center">Welcome to Awesome Mall</h2>
                            <p class="lead text-center">
                                Awesome Mall brings a world of choice to Ghana. Shop our wide range of home appliances,
                                furniture, electronics, fashion, accessories and more.
                            </p>
                        </div>
                    </div>

                    <!-- Feature Cards -->
                    <div class="row mb-4">
                        <div class="col-md-4 mb-4">
                            <div class="feature-card">
                                <div class="feature-icon">
                                    <i class="fa fa-shopping-bag"></i>
                                </div>
                                <h5 class="feature-title">Wide Selection</h5>
                                <p class="feature-text">Browse through our extensive collection of quality products
                                    across multiple categories.</p>
                            </div>
                        </div>
                        <div class="col-md-4 mb-4">
                            <div class="feature-card">
                                <div class="feature-icon">
                                    <i class="fa fa-truck"></i>
                                </div>
                                <h5 class="feature-title">Fast Delivery</h5>
                                <p class="feature-text">Reliable delivery service across Ghana, Eastern Region, and
                                    beyond.</p>
                            </div>
                        </div>
                        <div class="col-md-4 mb-4">
                            <div class="feature-card">
                                <div class="feature-icon">
                                    <i class="fa fa-shield"></i>
                                </div>
                                <h5 class="feature-title">Quality Assurance</h5>
                                <p class="feature-text">All products are carefully selected to ensure the best quality
                                    for our customers.</p>
                            </div>
                        </div>
                    </div>

                    <!-- Our Story -->
                    <div class="row mb-4">
                        <div class="col-md-12">
                            <div class="content-section">
                                <h3 class="section-title"><i class="fa fa-book me-2"></i> Our Story</h3>
                                <p>
                                    Awesome Mall is your trusted online shopping destination in Ghana, committed to
                                    providing customers
                                    with access to a world-class selection of products. From the latest electronics and
                                    home appliances
                                    to fashionable clothing and accessories, we bring quality and convenience to your
                                    doorstep.
                                </p>
                                <p>
                                    Based in Nsawam, Eastern Region, Ghana, we serve customers nationwide with
                                    dedication and excellence.
                                    Our mission is to make shopping easy, affordable, and enjoyable for everyone.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Why Choose Us -->
                    <div class="row mb-4">
                        <div class="col-md-12">
                            <div class="content-section">
                                <h3 class="section-title"><i class="fa fa-star me-2"></i> Why Choose Us?</h3>
                                <ul class="feature-list">
                                    <li><i class="fa fa-check-circle"></i> <strong>Home Appliances:</strong> Latest
                                        brands and models</li>
                                    <li><i class="fa fa-check-circle"></i> <strong>Furniture:</strong> Stylish and
                                        durable pieces</li>
                                    <li><i class="fa fa-check-circle"></i> <strong>Electronics:</strong> Cutting-edge
                                        technology</li>
                                    <li><i class="fa fa-check-circle"></i> <strong>Fashion:</strong> Trendy clothing and
                                        accessories</li>
                                    <li><i class="fa fa-check-circle"></i> <strong>Customer Support:</strong> Dedicated
                                        team ready to help</li>
                                    <li><i class="fa fa-check-circle"></i> <strong>Secure Shopping:</strong> Safe and
                                        trusted payment methods</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- Contact CTA -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="contact-cta">
                                <div class="contact-cta-icon">
                                    <i class="fa fa-phone"></i>
                                </div>
                                <div class="contact-cta-content">
                                    <h5>Need Help?</h5>
                                    <p class="mb-0">
                                        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>
                                        for assistance with placing orders or finding products.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

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

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

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

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

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

        /* Feature Cards */
        .feature-card {
            background: #fff;
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 30px 20px;
            text-align: center;
            transition: all 0.3s;
            height: 100%;
        }

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

        .feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--am-primary), var(--am-primary-hover));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .feature-icon i {
            font-size: 36px;
            color: #fff;
        }

        .feature-title {
            font-size: 18px;
            font-weight: 700;
            color: #282828;
            margin-bottom: 12px;
        }

        .feature-text {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 0;
        }

        /* Content Sections */
        .content-section {
            padding: 25px;
            background: #fafafa;
            border-radius: 8px;
            border: 1px solid #f0f0f0;
        }

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

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

        .content-section p:last-child {
            margin-bottom: 0;
        }

        /* Feature List */
        .feature-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .feature-list li {
            padding: 12px 0;
            font-size: 15px;
            color: #555;
            border-bottom: 1px solid #eee;
        }

        .feature-list li:last-child {
            border-bottom: none;
        }

        .feature-list i {
            color: var(--am-primary);
            margin-right: 12px;
            font-size: 18px;
        }

        /* Contact CTA */
        .contact-cta {
            background: linear-gradient(135deg, var(--am-primary), var(--am-primary-hover));
            border-radius: 8px;
            padding: 30px;
            display: flex;
            align-items: center;
            gap: 25px;
            color: #fff;
        }

        .contact-cta-icon {
            width: 70px;
            height: 70px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

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

        .contact-cta-content h5 {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .contact-cta-content p {
            font-size: 15px;
            margin-bottom: 0;
        }

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

            .feature-card {
                padding: 25px 15px;
            }

            .feature-icon {
                width: 60px;
                height: 60px;
            }

            .feature-icon i {
                font-size: 28px;
            }

            .content-section {
                padding: 20px;
            }

            .section-title {
                font-size: 18px;
            }

            .contact-cta {
                flex-direction: column;
                text-align: center;
                padding: 25px 20px;
            }
        }
    </style>
</body>

</html>
