<?= $this->extend('layouts/main') ?>

<?= $this->section('content') ?>

<!-- Impactful Page Header -->
<section style="background: var(--text-main); padding: 160px 0 100px; text-align: left; position: relative; overflow: hidden;">
    <div style="position: absolute; top: 0; right: 0; width: 50%; height: 100%; opacity: 0.1;">
        <img src="<?= $about_image ?>" style="width: 100%; height: 100%; object-fit: cover;">
    </div>
    <div class="container" style="position: relative; z-index: 2;">
        <span style="color: var(--primary); font-weight: 800; text-transform: uppercase; letter-spacing: 4px; display: block; margin-bottom: 20px;">The Saanvi Legacy</span>
        <h1 style="font-size: 5rem; color: #fff; line-height: 1; letter-spacing: -2px;"><?= $title ?></h1>
    </div>
</section>

<!-- Modern About Content -->
<section style="padding: 100px 0;">
    <div class="container">
        <div class="grid-2" style="align-items: flex-start;">
            <div class="animate-left">
                <div class="section-title" style="text-align: left; margin-bottom: 40px;">
                    <div class="underline" style="margin: 0 0 20px 0;"></div>
                    <h2 style="font-size: 4rem; line-height: 1.1;"><?= $about_title ?></h2>
                </div>
                <p style="font-size: 1.3rem; color: var(--primary); font-weight: 600; margin-bottom: 40px; line-height: 1.6;"><?= $about_description ?></p>
                <div style="color: var(--text-muted); line-height: 2; font-size: 1.1rem;">
                    <?= nl2br($about_content) ?>
                </div>
            </div>
            <div class="animate-right">
                <div style="position: relative;">
                    <div style="border-radius: 40px; overflow: hidden; box-shadow: var(--shadow-lg);">
                        <img src="<?= $about_image ?>" alt="About" style="width: 100%;">
                    </div>
                    <div style="position: absolute; bottom: -40px; right: 40px; background: var(--primary); padding: 50px; border-radius: 32px; color: #fff; box-shadow: 0 20px 40px rgba(229, 45, 39, 0.3);">
                        <div style="font-size: 4rem; font-weight: 900; line-height: 1;"><?= $years_experience ?></div>
                        <div style="font-weight: 700; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 2px;">Years Of Excellence</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Values & Philosophy -->
<section style="background: var(--bg-alt); padding: 100px 0;">
    <div class="container">
        <div class="grid-3">
            <div class="service-card" style="padding: 60px 40px;">
                <div style="width: 60px; height: 60px; background: var(--primary-soft); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; color: var(--primary); font-size: 2rem;">
                    <i class="bi bi-bullseye"></i>
                </div>
                <h3 style="font-size: 1.8rem; margin-bottom: 20px;">Our Mission</h3>
                <p style="color: var(--text-muted); font-size: 1.05rem; line-height: 1.8;"><?= $mission ?></p>
            </div>
            <div class="service-card" style="padding: 60px 40px; background: var(--primary); color: #fff;">
                <div style="width: 60px; height: 60px; background: rgba(255,255,255,0.2); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; color: #fff; font-size: 2rem;">
                    <i class="bi bi-eye"></i>
                </div>
                <h3 style="font-size: 1.8rem; margin-bottom: 20px; color: #fff;">Our Vision</h3>
                <p style="color: rgba(255,255,255,0.8); font-size: 1.05rem; line-height: 1.8;"><?= $vision ?></p>
            </div>
            <div class="service-card" style="padding: 60px 40px;">
                <div style="width: 60px; height: 60px; background: var(--primary-soft); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; color: var(--primary); font-size: 2rem;">
                    <i class="bi bi-gem"></i>
                </div>
                <h3 style="font-size: 1.8rem; margin-bottom: 20px;">Our Values</h3>
                <p style="color: var(--text-muted); font-size: 1.05rem; line-height: 1.8;"><?= $values ?></p>
            </div>
        </div>
    </div>
</section>

<?= $this->endSection() ?>

