<?php

$pageTitle = 'हमारे बारे में';
include 'includes/header.php';

$aboutUs = [];

$result = mysqli_query(
    $conn,
    "SELECT * FROM about_us"
);

while ($row = mysqli_fetch_assoc($result)) {

    $aboutUs[$row['id']] = $row;
}

?>

<!-- =========================================
     ABOUT HERO SECTION
========================================= -->

<section class="about-hero-section">

    <div class="container">

        <!-- BREADCRUMB -->
        <div class="about-breadcrumb">

            <a href="index.php">होम</a>

            <span>/</span>

            <span>हमारे बारे में</span>

        </div>

        <!-- HERO CONTENT -->
        <div class="about-hero-content">

            <div class="about-hero-icon">

                <i class="bi bi-newspaper"></i>

            </div>

            <h1>
                हमारे बारे में
            </h1>

            <p>
                DNN की विश्वसनीय, निष्पक्ष और तत्काल समाचार सेवा।
            </p>

        </div>

    </div>

</section>

<style>
    /* =========================================
       ABOUT HERO
    ========================================= */

    .about-hero-section {
        padding: 90px 0;
        background: linear-gradient(90deg, #09162f, #172554);
        text-align: center;
    }

    .about-breadcrumb {
        margin-bottom: 28px;
        color: #cbd5e1;
        font-size: 14px;
    }

    .about-breadcrumb a {
        color: #fff;
        text-decoration: none;
    }

    .about-breadcrumb span {
        margin: 0 6px;
    }

    .about-hero-icon {
        width: 82px;
        height: 82px;
        border-radius: 22px;
        background: linear-gradient(135deg, #e11d48, #ff3d71);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 24px;
        color: #fff;
        font-size: 34px;
        box-shadow: 0 12px 25px rgba(233, 30, 99, 0.3);
    }

    .about-hero-content h1 {
        font-size: 62px;
        font-weight: 800;
        color: #fff;
        margin-bottom: 18px;
    }

    .about-hero-content p {
        max-width: 850px;
        margin: auto;
        color: #cbd5e1;
        font-size: 18px;
        line-height: 1.9;
    }

    /* RESPONSIVE */

    @media(max-width:768px) {

        .about-hero-section {
            padding: 70px 0;
        }

        .about-hero-content h1 {
            font-size: 40px;
        }

        .about-hero-content p {
            font-size: 16px;
        }

        .about-hero-icon {
            width: 70px;
            height: 70px;
            font-size: 28px;
            border-radius: 18px;
        }
    }
</style>



<!-- =========================================
     ABOUT STATS SECTION
========================================= -->

<section class="about-stats-section">

    <div class="container px-0">

        <div class="about-stats-wrapper">

            <div class="about-stat-item">
                <h2>
                    <?php echo $aboutUs[1]['description'] ?? ''; ?>
                </h2>
                <p>
                    <?php echo $aboutUs[1]['title'] ?? ''; ?>
                </p>
            </div>
            <div class="about-stat-item">
                <h2>
                    <?php echo $aboutUs[2]['description'] ?? ''; ?>
                </h2>
                <p>
                    <?php echo $aboutUs[2]['title'] ?? ''; ?>
                </p>
            </div>
            <div class="about-stat-item">
                <h2>
                    <?php echo $aboutUs[3]['description'] ?? ''; ?>
                </h2>
                <p>
                    <?php echo $aboutUs[3]['title'] ?? ''; ?>
                </p>
            </div>
            <div class="about-stat-item">
                <h2>
                    <?php echo $aboutUs[4]['description'] ?? ''; ?>
                </h2>
                <p>
                    <?php echo $aboutUs[4]['title'] ?? ''; ?>
                </p>
            </div>
            <div class="about-stat-item">
                <h2>
                    <?php echo $aboutUs[5]['description'] ?? ''; ?>
                </h2>
                <p>
                    <?php echo $aboutUs[5]['title'] ?? ''; ?>
                </p>
            </div>
            <div class="about-stat-item">
                <h2>
                    <?php echo $aboutUs[6]['description'] ?? ''; ?>
                </h2>
                <p>
                    <?php echo $aboutUs[6]['title'] ?? ''; ?>
                </p>
            </div>


        </div>

    </div>

</section>

<style>
    /* =========================================
       ABOUT STATS
    ========================================= */

    .about-stats-section {
        background: #e11d48;
    }

    .about-stats-wrapper {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
    }

    .about-stat-item {
        padding: 26px 18px;
        text-align: center;
        color: #fff;
        border-right: 1px solid rgba(255, 255, 255, 0.12);
    }

    .about-stat-item:last-child {
        border-right: none;
    }

    .about-stat-item h2 {
        font-size: 54px;
        font-weight: 800;
        margin-bottom: 10px;
    }

    .about-stat-item p {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        opacity: 0.95;
    }

    /* RESPONSIVE */

    @media(max-width:991px) {

        .about-stats-wrapper {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media(max-width:576px) {

        .about-stats-wrapper {
            grid-template-columns: repeat(2, 1fr);
        }

        .about-stat-item {
            padding: 22px 12px;
        }

        .about-stat-item h2 {
            font-size: 36px;
        }

        .about-stat-item p {
            font-size: 13px;
        }
    }
</style>



<!-- =========================================
     WHY SPECIAL SECTION
========================================= -->

<section class="why-special-section">

    <div class="container">

        <!-- TITLE -->
        <div class="why-special-heading">

            <span>
                हमारा उद्देश्य
            </span>

            <h2>
                हम क्यों हैं खास?
            </h2>

            <p>
                तेज, सटीक और निष्पक्ष — यही हमारी पहचान है।
            </p>

        </div>

        <!-- GRID -->
        <div class="row g-4">

            <div class="col-lg-4 col-md-6">
                <div class="special-card">
                    <div class="special-card-icon">
                        <i class="bi bi-lightning-charge-fill"></i>
                    </div>
                    <h3>तेज खबरें</h3>
                    <p>
                        किसी भी घटना की खबर हम सबसे पहले देने की कोशिश करते हैं। हमारे संवाददाताओं का जाल पूरे अजमेर और राजस्थान में फैला है।
                    </p>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="special-card">
                    <div class="special-card-icon">
                        <i class="bi bi-shield-check"></i>
                    </div>
                    <h3>विश्वसनीयता</h3>
                    <p>
                        हम केवल सत्यापित और प्रमाणिक खबरें प्रकाशित करते हैं। हर खबर दो स्रोतों से जांची जाती है।
                    </p>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="special-card">
                    <div class="special-card-icon">
                        <i class="bi bi-people"></i>
                    </div>
                    <h3>स्थानीय आवाज़</h3>
                    <p>
                        अजमेर के आम नागरिकों की समस्याओं और उपलब्धियों को हम सबसे पहले प्रकाशित करते हैं।
                    </p>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="special-card">
                    <div class="special-card-icon">
                        <i class="bi bi-phone"></i>
                    </div>
                    <h3>डिजिटल पहुँच</h3>
                    <p>
                        वेबसाइट, YouTube, WhatsApp और सोशल मीडिया पर हमारी 24/7 उपस्थिति।
                    </p>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="special-card">
                    <div class="special-card-icon">
                        <i class="bi bi-translate"></i>
                    </div>
                    <h3>हिंदी में खबरें</h3>
                    <p>
                        सरल, साफ और प्रभावशाली हिंदी में हर खबर — ताकि हर पाठक आसानी से समझे।
                    </p>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="special-card">
                    <div class="special-card-icon">
                        <i class="bi bi-graph-up-arrow"></i>
                    </div>
                    <h3>निष्पक्षता</h3>
                    <p>
                        किसी भी राजनीतिक दल या विचारधारा से बिना प्रभावित हुए, हम हर खबर निष्पक्ष रूप से देते हैं।
                    </p>
                </div>
            </div>



        </div>

    </div>

</section>

<style>
    /* =========================================
       WHY SPECIAL
    ========================================= */

    .why-special-section {
        padding: 90px 0;
        background: #f3f4f6;
    }

    /* TITLE */

    .why-special-heading {
        text-align: center;
        margin-bottom: 60px;
    }

    .why-special-heading span {
        display: inline-block;
        background: #fff1f5;
        color: #e11d48;
        padding: 8px 18px;
        border-radius: 30px;
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .why-special-heading h2 {
        font-size: 58px;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 16px;
    }

    .why-special-heading p {
        color: #64748b;
        font-size: 18px;
    }

    /* CARD */

    .special-card {
        background: #fff;
        border-radius: 28px;
        padding: 42px 36px;
        height: 100%;
        transition: 0.35s;
        border: 1px solid transparent;
    }

    .special-card:hover {
        transform: translateY(-6px);
        border-color: #e11d48;
    }

    .active-special-card {
        border-color: #e11d48;
    }

    /* ICON */

    .special-card-icon {
        width: 62px;
        height: 62px;
        border-radius: 18px;
        background: linear-gradient(135deg, #e11d48, #ff3d71);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 26px;
        margin-bottom: 24px;
    }

    .special-card h3 {
        font-size: 34px;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 18px;
    }

    .special-card p {
        color: #64748b;
        font-size: 16px;
        line-height: 2;
        margin: 0;
    }

    /* RESPONSIVE */

    @media(max-width:991px) {

        .why-special-heading h2 {
            font-size: 42px;
        }

        .special-card h3 {
            font-size: 28px;
        }
    }

    @media(max-width:768px) {

        .why-special-section {
            padding: 65px 0;
        }

        .why-special-heading {
            margin-bottom: 40px;
        }

        .why-special-heading h2 {
            font-size: 34px;
        }

        .why-special-heading p {
            font-size: 15px;
        }

        .special-card {
            padding: 30px 24px;
            border-radius: 22px;
        }

        .special-card h3 {
            font-size: 24px;
        }

        .special-card p {
            font-size: 15px;
            line-height: 1.9;
        }

        .special-card-icon {
            width: 54px;
            height: 54px;
            border-radius: 16px;
            font-size: 22px;
        }
    }
</style>


<!-- =========================================
     OUR JOURNEY SECTION
========================================= -->

<section class="our-journey-section">

    <div class="container">

        <div class="row align-items-start g-5">

            <!-- LEFT CONTENT -->
            <div class="col-lg-12">

                <div class="journey-content">

                    <span class="section-badge">
                        हमारी कहानी
                    </span>

                    <h2>
                        <?php echo $aboutUs[7]['title'] ?? ''; ?>
                    </h2>

                    <p>
                        <?php echo $aboutUs[7]['description'] ?? ''; ?>
                    </p>

                </div>

            </div>

        </div>

    </div>

</section>

<style>
    /* =========================================
       OUR JOURNEY
    ========================================= */

    .our-journey-section {
        padding: 100px 0;
        background: #f8fafc;
    }

    /* LEFT */

    .section-badge {
        display: inline-block;
        background: #fff1f5;
        color: #e11d48;
        padding: 8px 18px;
        border-radius: 40px;
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .journey-content h2 {
        font-size: 48px;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.3;
        margin-bottom: 30px;
    }

    .journey-content p {
        font-size: 17px;
        line-height: 2;
        color: #475569;
        margin-bottom: 28px;
        text-align: justify;
    }

    /* RESPONSIVE */

    @media(max-width:768px) {

        .our-journey-section {
            padding: 70px 0;
        }

        .journey-content h2 {
            font-size: 38px;
        }

        .journey-content p {
            font-size: 15px;
        }
    }
</style>



<!-- =========================================
     TEAM SECTION
========================================= -->

<section class="team-section">

    <div class="container">

        <!-- TITLE -->
        <div class="team-heading">

            <span>
                हमारी टीम
            </span>

            <h2>
                अनुभवी पत्रकारों की टीम
            </h2>

            <p>
                जो दिन-रात आपके लिए काम करते हैं
            </p>

        </div>

        <!-- TEAM GRID -->
        <div class="row g-4">

            <!-- MEMBER -->
            <?php foreach ($teamMembers as $member): ?>

                <div class="col-lg-4 col-md-6">

                    <div class="team-card">

                        <img src="admin/uploads/team_members/<?php echo $member['image']; ?>"
                            alt="<?php echo $member['name']; ?>">

                        <h3>
                            <?php echo $member['name']; ?>
                        </h3>

                        <span>
                            <?php echo $member['designation']; ?>
                        </span>

                        <p>

                            <i class="bi bi-award"></i>

                            <?php echo $member['experience']; ?>

                        </p>

                    </div>

                </div>

            <?php endforeach; ?>

        </div>

    </div>

</section>

<style>
    /* =========================================
       TEAM SECTION
    ========================================= */

    .team-section {
        padding: 100px 0;
        background: #fff;
    }

    .team-heading {
        text-align: center;
        margin-bottom: 60px;
    }

    .team-heading span {
        display: inline-block;
        background: #fff1f5;
        color: #e11d48;
        padding: 8px 18px;
        border-radius: 40px;
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .team-heading h2 {
        font-size: 58px;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 15px;
    }

    .team-heading p {
        color: #64748b;
        font-size: 17px;
    }

    /* CARD */

    .team-card {
        background: #f8fafc;
        border-radius: 28px;
        padding: 40px 25px;
        text-align: center;
        transition: 0.35s;
        height: 100%;
    }

    .team-card:hover {
        transform: translateY(-6px);
    }

    .team-card img {
        width: 90px;
        height: 90px;
        object-fit: cover;
        border-radius: 50%;
        border: 4px solid #e11d48;
        margin-bottom: 20px;
    }

    .team-card h3 {
        font-size: 28px;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 10px;
    }

    .team-card span {
        color: #e11d48;
        font-size: 15px;
        font-weight: 700;
        display: block;
        margin-bottom: 12px;
    }

    .team-card p {
        color: #64748b;
        font-size: 14px;
        margin-bottom: 20px;
    }

    .team-social {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
    }

    .team-social a {
        color: #0f172a;
        font-size: 18px;
        transition: 0.3s;
    }

    .team-social a:hover {
        color: #e11d48;
    }

    /* RESPONSIVE */

    @media(max-width:768px) {

        .team-section {
            padding: 70px 0;
        }

        .team-heading h2 {
            font-size: 38px;
        }

        .team-card {
            border-radius: 22px;
        }

        .team-card h3 {
            font-size: 24px;
        }
    }
</style>



<!-- =========================================
     VALUES + CTA SECTION
========================================= -->

<section class="about-values-section my-5">

    <!-- VALUES -->
    <div class="values-wrapper">

        <div class="container">

            <div class="values-heading">

                <h2>
                    हमारे मूल्य
                </h2>

                <p>
                    जो सिद्धांत हमारी पत्रकारिता का आधार हैं
                </p>

            </div>

            <div class="row g-5">


                <div class="col-lg-3 col-md-6">
                    <div class="value-card">
                        <i class="bi bi-lightning-charge"></i>
                        <h3>तेजी</h3>
                        <p>घटना घटते ही खबर — हम किसी से पीछे नहीं</p>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6">
                    <div class="value-card">
                        <i class="bi bi-check-square"></i>
                        <h3>सच्चाई</h3>
                        <p>झूठी खबर नहीं, केवल सत्यापित समाचार</p>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6">
                    <div class="value-card">
                        <i class="bi bi-shield-check"></i>
                        <h3>निष्पक्षता</h3>
                        <p>कोई पक्ष नहीं, केवल सत्य का साथ</p>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6">
                    <div class="value-card">
                        <i class="bi bi-people"></i>
                        <h3>जनसेवा</h3>
                        <p>आम नागरिक की आवाज़ बनना हमारा धर्म</p>
                    </div>
                </div>

            </div>

        </div>


</section>

<!-- CTA -->
<section class="about-cta-wrapper my-5">

    <div class="container">

        <h2>
            जुड़ें हमारे साथ
        </h2>

        <p>
            सभी प्लेटफॉर्म्स पर Ajmer News से जुड़ें और हर खबर सबसे पहले पाएं।
        </p>

        <div class="about-cta-buttons">

            <a href="<?php echo $contactDetails[6]['subtitle'] ?? ''; ?>"
                class="youtube-btn" target="_blank">

                <i class="bi bi-youtube"></i>

                YouTube Subscribe करें

            </a>

            <a href="contact.php"
                class="contact-btn">

                <i class="bi bi-envelope"></i>

                संपर्क करें

            </a>

        </div>

    </div>

</section>

<style>
    /* =========================================
       VALUES SECTION
    ========================================= */

    .values-wrapper {
        padding: 90px 0;
        background: #081326;
        color: #fff;
    }

    .values-heading {
        text-align: center;
        margin-bottom: 60px;
    }

    .values-heading h2 {
        font-size: 56px;
        font-weight: 800;
        margin-bottom: 16px;
    }

    .values-heading p {
        color: #cbd5e1;
        font-size: 17px;
    }

    .value-card {
        text-align: center;
    }

    .value-card i {
        font-size: 42px;
        margin-bottom: 24px;
        display: block;
    }

    .value-card h3 {
        font-size: 30px;
        font-weight: 800;
        margin-bottom: 14px;
    }

    .value-card p {
        color: #cbd5e1;
        line-height: 1.9;
        font-size: 15px;
    }

    /* CTA */

    .about-cta-wrapper {
        padding: 90px 0;
        background: #e11d48;
        text-align: center;
        color: #fff;
    }

    .about-cta-wrapper h2 {
        font-size: 58px;
        font-weight: 800;
        margin-bottom: 18px;
    }

    .about-cta-wrapper p {
        font-size: 18px;
        margin-bottom: 35px;
    }

    .about-cta-buttons {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }

    .about-cta-buttons a {
        padding: 16px 28px;
        border-radius: 40px;
        text-decoration: none;
        font-weight: 700;
        transition: 0.3s;
    }

    .youtube-btn {
        background: #fff;
        color: #e11d48;
    }

    .contact-btn {
        border: 1px solid rgba(255, 255, 255, 0.5);
        color: #fff;
    }

    .about-cta-buttons a:hover {
        transform: translateY(-4px);
    }

    /* RESPONSIVE */

    @media(max-width:768px) {

        .values-wrapper {
            padding: 70px 0;
        }

        .about-cta-wrapper {
            padding: 70px 0;
        }

        .values-heading h2,
        .about-cta-wrapper h2 {
            font-size: 38px;
        }

        .value-card h3 {
            font-size: 24px;
        }

        .about-cta-wrapper p {
            font-size: 15px;
        }
    }
</style>



<?php include 'includes/footer.php'; ?>