<?php

/** @var yii\web\View $this */
/** @var common\models\Testimonial[] $testimonials */

use common\models\SiteContent;
use yii\helpers\Html;
use yii\helpers\Url;

$this->title = 'About Susan Jacob';
?>

<!-- Page Hero -->
<section class="page-hero">
    <div class="container text-center" style="position:relative;z-index:1">
        <div class="section-label mb-3 justify-content-center">Meet Your Nutritionist</div>
        <h1 class="section-title mb-3">Susan Jacob</h1>
        <div class="sj-divider mx-auto mb-4"></div>
        <p style="color:var(--sj-muted);max-width:520px;margin:0 auto;line-height:1.8">
            Certified Nutritionist &nbsp;&middot;&nbsp; Sports Nutritionist &nbsp;&middot;&nbsp; Nutrigenomics Expert
        </p>
    </div>
</section>

<!-- Bio Section -->
<section style="padding:6rem 0;background:#fff">
    <div class="container">
        <div class="row align-items-start g-5">

            <!-- Photo -->
            <div class="col-lg-4">
                <div style="position:sticky;top:100px">
                    <div style="position:relative">
                        <div style="border-radius:28px;overflow:hidden;box-shadow:var(--sj-shadow-lg)">
                            <img src="<?= Url::base(true) ?>/img/nutritionist.png"
                                 alt="Susan Jacob — SJ Nutrizione"
                                 style="width:100%;display:block;object-fit:cover;object-position:center top">
                        </div>
                        <!-- Floating badge -->
                        <div style="position:absolute;bottom:-18px;right:-12px;background:#fff;border-radius:16px;padding:.9rem 1.3rem;box-shadow:0 8px 30px rgba(0,0,0,.12);border:1px solid var(--sj-border)">
                            <div style="font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--sj-green);line-height:1">10+</div>
                            <div style="font-size:.68rem;color:var(--sj-muted);letter-spacing:.08em;text-transform:uppercase">Years Exp.</div>
                        </div>
                    </div>

                    <!-- Contact Strip -->
                    <div style="margin-top:2.5rem;background:var(--sj-stone);border-radius:20px;padding:1.5rem">
                        <div style="font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sj-muted);margin-bottom:1rem">Reach Susan</div>
                        <div class="d-flex flex-column gap-2">
                            <a href="tel:+918420960825" style="display:flex;align-items:center;gap:.7rem;color:var(--sj-text);text-decoration:none;font-size:.88rem;transition:color .2s" onmouseover="this.style.color='var(--sj-green)'" onmouseout="this.style.color='var(--sj-text)'">
                                <i class="bi bi-telephone-fill" style="color:var(--sj-green);width:16px"></i>+91 84209 60825
                            </a>
                            <a href="mailto:sj.nutrizione@gmail.com" style="display:flex;align-items:center;gap:.7rem;color:var(--sj-text);text-decoration:none;font-size:.88rem;transition:color .2s" onmouseover="this.style.color='var(--sj-green)'" onmouseout="this.style.color='var(--sj-text)'">
                                <i class="bi bi-envelope-fill" style="color:var(--sj-green);width:16px"></i>sj.nutrizione@gmail.com
                            </a>
                            <a href="https://wa.me/918420960825" target="_blank" style="display:flex;align-items:center;gap:.7rem;color:var(--sj-text);text-decoration:none;font-size:.88rem;transition:color .2s" onmouseover="this.style.color='var(--sj-green)'" onmouseout="this.style.color='var(--sj-text)'">
                                <i class="bi bi-whatsapp" style="color:#25D366;width:16px"></i>WhatsApp
                            </a>
                            <a href="https://instagram.com/sj_nutrizione" target="_blank" style="display:flex;align-items:center;gap:.7rem;color:var(--sj-text);text-decoration:none;font-size:.88rem;transition:color .2s" onmouseover="this.style.color='var(--sj-green)'" onmouseout="this.style.color='var(--sj-text)'">
                                <i class="bi bi-instagram" style="color:var(--sj-green);width:16px"></i>@sj_nutrizione
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Content -->
            <div class="col-lg-8">

                <!-- Credential pills -->
                <div class="d-flex flex-wrap gap-2 mb-4">
                    <?php foreach ([
                        'Certified Nutritionist',
                        'Sports Nutritionist',
                        'Nutrigenomics Expert',
                        '200+ Athletes Coached',
                        '3 National Teams',
                    ] as $badge): ?>
                    <span style="background:var(--sj-green-light);color:var(--sj-green);border-radius:50px;padding:.3rem .9rem;font-size:.76rem;font-weight:600">
                        <?= Html::encode($badge) ?>
                    </span>
                    <?php endforeach; ?>
                </div>

                <!-- Bio with left rule -->
                <div style="border-left:3px solid var(--sj-green);padding-left:1.6rem;margin-bottom:2.5rem">
                    <p style="font-size:1.05rem;line-height:1.9;color:#444;margin-bottom:1rem">
                        <?= Html::encode(SiteContent::getValue('about_bio_1', 'I\'m Susan Jacob, a Certified Nutritionist, Sports Nutritionist, and Nutrigenomics Expert with over 10 years of experience. I lead SJ Nutrizione, helping individuals and athletes achieve sustainable health and peak performance through personalised, science-based nutrition.')) ?>
                    </p>
                    <p style="font-size:1rem;line-height:1.9;color:#555;margin:0">
                        <?= Html::encode(SiteContent::getValue('about_bio_2', 'My approach is rooted in evidence-based practice — I don\'t believe in quick fixes or one-size-fits-all plans. Every client receives a deeply personalised strategy that considers their body, lifestyle, goals, and cultural background.')) ?>
                    </p>
                </div>

                <!-- Areas of Expertise -->
                <div class="mb-5">
                    <div class="section-label mb-4">Areas of Expertise</div>
                    <div class="row g-3">
                        <?php foreach ([
                            ['🥗', 'Lifestyle Nutrition',  'Sustainable, everyday nutrition tailored to your lifestyle and long-term wellness goals.'],
                            ['💪', 'Sports Nutrition',     'Performance nutrition for elite and amateur athletes — training, recovery, and competition.'],
                            ['🌸', 'Holistic Nutrition',   'Whole-body approach connecting food, gut health, sleep, and mental well-being.'],
                            ['⚕️', 'Medical Nutrition',    'Clinical plans for diabetes, PCOS, thyroid, and other conditions — evidence-based care.'],
                            ['🧬', 'Nutrigenomics',        'Personalised nutrition using genetic and metabolic data — the science of eating right for YOUR DNA.'],
                            ['🏆', 'Team & Corporate',     'Nutrition programs for sports teams, gyms, and corporate wellness — group coaching and workshops.'],
                        ] as $exp): ?>
                        <div class="col-sm-6">
                            <div style="border:1px solid rgba(45,106,79,.12);border-radius:14px;padding:1.1rem 1.2rem;height:100%;background:#fafaf9;transition:var(--transition)"
                                 onmouseover="this.style.background='var(--sj-green-pale)';this.style.borderColor='rgba(45,106,79,.25)';this.style.transform='translateY(-2px)'"
                                 onmouseout="this.style.background='#fafaf9';this.style.borderColor='rgba(45,106,79,.12)';this.style.transform='translateY(0)'">
                                <div style="font-weight:600;font-size:.9rem;margin-bottom:.35rem;color:var(--sj-dark)"><?= $exp[0] ?> <?= Html::encode($exp[1]) ?></div>
                                <div style="color:var(--sj-muted);font-size:.8rem;line-height:1.6"><?= Html::encode($exp[2]) ?></div>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>

                <!-- Experience Highlights -->
                <div class="mb-5">
                    <div class="section-label mb-4">Experience Highlights</div>
                    <div style="display:flex;flex-direction:column;gap:.75rem">
                        <?php foreach ([
                            ['bi-trophy-fill',        'India Women\'s Cricket Team — Official Nutritionist'],
                            ['bi-award-fill',         'National-level athletes across Shooting, Squash, Rowing, Swimming, Golf'],
                            ['bi-people-fill',        '200+ elite athletes coached across 8+ sports disciplines'],
                            ['bi-graph-up-arrow',     '10+ years of clinical & sports nutrition practice'],
                            ['bi-building',           'Corporate nutrition workshops for leading organisations'],
                            ['bi-camera-video-fill',  'Online consultations serving clients across India and internationally'],
                        ] as $exp): ?>
                        <div style="display:flex;align-items:center;gap:.85rem;padding:.85rem 1.1rem;background:var(--sj-stone);border-radius:12px;border:1px solid rgba(45,106,79,.07)">
                            <i class="bi <?= $exp[0] ?>" style="color:var(--sj-green);flex-shrink:0;font-size:1rem;width:18px"></i>
                            <span style="font-size:.9rem;color:var(--sj-text);font-weight:500"><?= Html::encode($exp[1]) ?></span>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>

                <!-- Philosophy -->
                <div style="background:var(--sj-green-pale);border-radius:24px;padding:2.5rem;border:1px solid rgba(45,106,79,.12);position:relative;overflow:hidden;margin-bottom:2.5rem">
                    <div style="position:absolute;top:-10px;right:20px;font-family:var(--font-display);font-size:8rem;color:rgba(45,106,79,.08);line-height:1;pointer-events:none">&ldquo;</div>
                    <div class="section-label mb-3">My Philosophy</div>
                    <blockquote style="font-family:var(--font-display);font-size:1.35rem;font-style:italic;color:var(--sj-dark);line-height:1.55;margin-bottom:1rem;position:relative;z-index:1">
                        &ldquo;<?= Html::encode(SiteContent::getValue('about_philosophy', 'Nutrition is not about restriction — it\'s about nourishment. The right food, at the right time, for the right body, transforms not just your health but your entire life.')) ?>&rdquo;
                    </blockquote>
                    <p style="font-size:.88rem;color:var(--sj-muted);margin:0;font-weight:600">— Susan Jacob, SJ Nutrizione</p>
                </div>

                <!-- CTA -->
                <div class="d-flex flex-wrap gap-3">
                    <a href="<?= Url::to(['/site/lead']) ?>" class="btn btn-sj btn-lg">
                        Book a Consultation <i class="bi bi-arrow-right ms-1"></i>
                    </a>
                    <a href="https://wa.me/918420960825" target="_blank" class="btn btn-sj-outline btn-lg">
                        <i class="bi bi-whatsapp me-1"></i>WhatsApp Susan
                    </a>
                </div>

            </div>
        </div>
    </div>
</section>

<!-- Stats Row -->
<section style="background:var(--sj-stone);border-top:1px solid var(--sj-border);border-bottom:1px solid var(--sj-border);padding:0">
    <div class="container">
        <div class="row g-0 text-center">
            <?php foreach ([
                ['200+', 'Elite Athletes Coached'],
                ['10+',  'Years of Experience'],
                ['3',    'National Teams'],
                ['8+',   'Sports Disciplines'],
            ] as $s): ?>
            <div class="col-6 col-md-3 stat-item">
                <div class="stat-number"><?= $s[0] ?></div>
                <div class="stat-label"><?= $s[1] ?></div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- Testimonials -->
<section style="background:var(--sj-cream);padding:6rem 0">
    <div class="container">
        <div class="text-center mb-5">
            <div class="section-label mb-3 justify-content-center">Client Stories</div>
            <h2 class="section-title mb-3">What Clients Say About Susan</h2>
            <div class="sj-divider mx-auto"></div>
        </div>
        <?php if (!empty($testimonials)): ?>
        <div class="row g-4">
            <?php foreach ($testimonials as $t): ?>
            <div class="col-md-4">
                <div class="testimonial-card h-100">
                    <div class="d-flex mb-3" style="color:#f59e0b;gap:.2rem">
                        <?php for($s=0;$s<5;$s++): ?><i class="bi bi-star-fill" style="font-size:.85rem"></i><?php endfor; ?>
                    </div>
                    <p style="font-size:.95rem;line-height:1.8;color:var(--sj-text);margin-bottom:1.5rem;font-style:italic">
                        &ldquo;<?= Html::encode($t->quote) ?>&rdquo;
                    </p>
                    <div class="d-flex align-items-center gap-3">
                        <div class="testimonial-avatar"><?= Html::encode($t->avatar_letter) ?></div>
                        <div>
                            <div style="font-weight:600;font-size:.88rem;color:var(--sj-dark)"><?= Html::encode($t->name) ?></div>
                            <div style="font-size:.76rem;color:var(--sj-muted)"><?= Html::encode($t->role) ?></div>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <?php else: ?>
        <div class="text-center py-4" style="color:var(--sj-muted);font-style:italic">Client stories coming soon.</div>
        <?php endif; ?>
    </div>
</section>
