<?php
/**
 * Template Name: About Page
 *
 * @package Acharya_Rajnikant
 */

get_header();
?>

<style>
    .about-hero {
        background: #fdfbf7;
        padding: 100px 0;
        border-bottom: 1px solid #eee;
    }

    .about-image-wrapper {
        position: relative;
        padding: 20px;
    }

    .about-image-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 2px solid var(--accent-color);
        border-radius: 30px;
        z-index: 0;
        transform: translate(15px, 15px);
        opacity: 0.3;
    }

    .about-image-wrapper img {
        position: relative;
        z-index: 1;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    .section-title {
        color: var(--primary-color);
        margin-bottom: 1.5rem;
    }

    .badge-spiritual {
        background: rgba(var(--accent-rgb), 0.1);
        color: var(--accent-color);
        padding: 8px 20px;
        border-radius: 50px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 0.85rem;
        display: inline-block;
        margin-bottom: 1.5rem;
    }

    .lead-text {
        font-size: 1.25rem;
        line-height: 1.8;
        color: #555;
    }

    .content-text {
        line-height: 1.8;
        color: #666;
    }
</style>

<!-- About Hero -->
<section class="page-hero py-5 mb-5"
    style="background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); min-height: 40vh; display: flex; align-items: center;">
    <div class="container text-center text-white position-relative" style="z-index: 2;">
        <h1 class="display-3 fw-bold mb-3 animate-fade-in-up text-white"><?php the_title(); ?></h1>
        <?php acharyarajnikant_breadcrumb('text-white'); ?>
    </div>
    <!-- <div class="hero-overlay"
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('<?php echo get_template_directory_uri(); ?>/assets/images/pattern.png'); opacity: 0.1;">
    </div> -->
</section>

<!-- Introduction Section -->
<?php
$intro_image = get_field('intro_image');
$intro_badge = get_field('intro_badge');
$intro_title = get_field('intro_title');
$intro_lead = get_field('intro_lead');
$intro_content = get_field('intro_content');
?>
<section class="py-5 my-5">
    <div class="container py-5">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-5 mb-lg-0">
                <div class="about-image-wrapper">
                    <img src="<?php echo esc_url($intro_image ?: 'https://images.unsplash.com/photo-1590050752117-238cb0fb12b1?q=80&w=800'); ?>"
                        alt="<?php echo esc_attr($intro_title ?: 'Acharya Rajnikant'); ?>" class="img-fluid rounded-5">
                </div>
            </div>
            <div class="col-lg-6 ps-lg-5">
                <div class="badge-spiritual"><?php echo esc_html($intro_badge ?: 'The Journey'); ?></div>
                <h2 class="display-5 fw-bold mb-4">
                    <?php echo esc_html($intro_title ?: 'A Path of Devotion & Wisdom'); ?>
                </h2>
                <?php if ($intro_lead): ?>
                    <p class="lead-text mb-4"><?php echo esc_html($intro_lead); ?></p>
                <?php endif; ?>
                <div class="content-text">
                    <?php
                    if ($intro_content) {
                        echo $intro_content;
                    } else {
                        ?>
                        <p>Acharya Rajnikant Ji is a distinguished spiritual guide and Vedic expert dedicated to helping
                            souls find their true purpose and harmony in a complex world.</p>
                        <p>With over 15 years of deep study and practice in Vedic Astrology, Vastu Shastra, and spiritual
                            healing, Acharya Ji has touched thousands of lives across the globe.</p>
                        <?php
                    }
                    ?>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Mission Section -->
<?php
$mission_badge = get_field('mission_badge');
$mission_title = get_field('mission_title');
$mission_lead = get_field('mission_lead');
$mission_image = get_field('mission_image');
?>
<section class="py-5 mb-5 bg-light">
    <div class="container py-5">
        <div class="row align-items-center flex-column-reverse flex-lg-row">
            <div class="col-lg-6 pe-lg-5">
                <div class="badge-spiritual"><?php echo esc_html($mission_badge ?: 'Our Mission'); ?></div>
                <h2 class="display-5 fw-bold mb-4">
                    <?php echo esc_html($mission_title ?: 'Empowering Lives Through Vedic Science'); ?>
                </h2>
                <p class="lead-text mb-4">
                    <?php echo esc_html($mission_lead ?: 'We aim to preserve and share the eternal truths of the Vedas in a way that is accessible, practical, and life-changing for the modern seeker.'); ?>
                </p>

                <?php if (have_rows('mission_features')): ?>
                    <ul class="list-unstyled">
                        <?php while (have_rows('mission_features')):
                            the_row(); ?>
                            <li class="mb-3 d-flex align-items-start">
                                <i class="bi bi-check-circle-fill text-theme-accent me-3 h4"></i>
                                <span class="content-text"><?php the_sub_field('feature_text'); ?></span>
                            </li>
                        <?php endwhile; ?>
                    </ul>
                <?php else: ?>
                    <!-- Fallback -->
                    <ul class="list-unstyled">
                        <li class="mb-3 d-flex align-items-start">
                            <i class="bi bi-check-circle-fill text-theme-accent me-3 h4"></i>
                            <span class="content-text">Providing accurate astrological insights for personal and
                                professional growth.</span>
                        </li>
                    </ul>
                <?php endif; ?>
            </div>
            <div class="col-lg-6 mb-5 mb-lg-0">
                <div class="about-image-wrapper">
                    <img src="<?php echo esc_url($mission_image ?: 'https://images.unsplash.com/photo-1545205597-3d9d02c29597?q=80&w=800'); ?>"
                        alt="<?php echo esc_attr($mission_title ?: 'Our Mission'); ?>" class="img-fluid rounded-5">
                </div>
            </div>
        </div>
    </div>
</section>

<?php get_template_part('template-parts/content', 'quote'); ?>

<?php get_template_part('template-parts/content', 'cta'); ?>

<?php
get_footer();