<?php

/** @var yii\web\View $this */
/** @var common\models\Plan[] $plans */

use common\models\Plan;
use yii\bootstrap5\Html;
use yii\helpers\Url;

$this->title = 'Programs';

$subscriptions = array_filter($plans, fn($p) => $p->plan_type === Plan::TYPE_SUBSCRIPTION);
$oneTime       = array_filter($plans, fn($p) => $p->plan_type === Plan::TYPE_ONE_TIME);
?>

<!-- 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">What I Offer</div>
        <h1 class="section-title mb-3">Programs & Services</h1>
        <div class="sj-divider mx-auto mb-4"></div>
        <p style="color:var(--sj-muted);max-width:540px;margin:0 auto;line-height:1.8">
            Every body is different. I'll discuss the right program and plan for your specific goals during your free consultation.
        </p>
    </div>
</section>

<!-- Pricing philosophy banner -->
<section style="background:var(--sj-green-pale);border-top:3px solid var(--sj-green-light);border-bottom:3px solid var(--sj-green-light);padding:1.5rem 0">
    <div class="container">
        <div style="display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap;text-align:center">
            <div style="display:flex;align-items:center;gap:.6rem;font-size:.9rem;color:var(--sj-dark);font-weight:500">
                <i class="bi bi-chat-dots" style="color:var(--sj-green);font-size:1.1rem"></i>
                Rates are personalised based on your goals
            </div>
            <div style="width:1px;height:20px;background:var(--sj-green-light)" class="d-none d-md-block"></div>
            <div style="display:flex;align-items:center;gap:.6rem;font-size:.9rem;color:var(--sj-dark);font-weight:500">
                <i class="bi bi-shield-check" style="color:var(--sj-green);font-size:1.1rem"></i>
                Free initial consultation — no commitment
            </div>
            <div style="width:1px;height:20px;background:var(--sj-green-light)" class="d-none d-md-block"></div>
            <div style="display:flex;align-items:center;gap:.6rem;font-size:.9rem;color:var(--sj-dark);font-weight:500">
                <i class="bi bi-whatsapp" style="color:var(--sj-green);font-size:1.1rem"></i>
                Quick response on WhatsApp
            </div>
        </div>
    </div>
</section>

<?php if (empty($plans)): ?>
<section style="padding:5rem 0;background:#fff">
    <div class="container text-center">
        <i class="bi bi-card-list" style="font-size:3rem;opacity:.2;display:block;margin-bottom:1rem"></i>
        <p style="color:var(--sj-muted)">Programs coming soon. <a href="<?= Url::to(['/site/contact']) ?>" style="color:var(--sj-green)">Contact us</a> for details.</p>
    </div>
</section>
<?php else: ?>

<?php if (!empty($subscriptions)): ?>
<!-- Subscription Programs -->
<section style="padding:5rem 0 2rem;background:#fff">
    <div class="container">
        <div style="text-align:center;margin-bottom:3rem">
            <div class="section-label justify-content-center mb-2">Ongoing Support</div>
            <h2 class="section-title" style="font-size:clamp(1.6rem,3vw,2.2rem)">Nutrition Programs</h2>
            <p style="color:var(--sj-muted);margin-top:.75rem;max-width:480px;margin-left:auto;margin-right:auto">
                Structured programs with continuous guidance, adjustments and accountability.
            </p>
        </div>

        <div class="row g-4 justify-content-center">
            <?php foreach ($subscriptions as $plan): ?>
            <div class="col-md-6 col-lg-4">
                <div class="program-card h-100">
                    <div class="program-card-icon">
                        <i class="bi <?= Html::encode($plan->icon ?: 'bi-leaf') ?>"></i>
                    </div>
                    <h3 class="program-card-title"><?= Html::encode($plan->name) ?></h3>
                    <?php if ($plan->who_it_for): ?>
                    <div class="program-card-who">
                        <i class="bi bi-person-check"></i> <?= Html::encode($plan->who_it_for) ?>
                    </div>
                    <?php endif; ?>
                    <?php if ($plan->description): ?>
                    <p class="program-card-desc"><?= Html::encode($plan->description) ?></p>
                    <?php endif; ?>
                    <?php $features = $plan->getFeatureList(); if (!empty($features)): ?>
                    <ul class="program-features">
                        <?php foreach ($features as $f): ?>
                        <li><?= Html::encode($f) ?></li>
                        <?php endforeach; ?>
                    </ul>
                    <?php endif; ?>
                    <?php if ($plan->duration_months): ?>
                    <div class="program-duration">
                        <i class="bi bi-calendar3"></i>
                        <?= $plan->duration_months ?> month<?= $plan->duration_months > 1 ? 's' : '' ?> program
                    </div>
                    <?php endif; ?>
                    <div class="program-card-cta">
                        <a href="<?= Url::to(['/site/lead']) ?>" class="btn-sj">
                            Book Free Consultation <i class="bi bi-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<?php if (!empty($oneTime)): ?>
<!-- One-Time Services -->
<section style="padding:3rem 0 5rem;background:var(--sj-stone)">
    <div class="container">
        <div style="text-align:center;margin-bottom:3rem">
            <div class="section-label justify-content-center mb-2">Single Sessions</div>
            <h2 class="section-title" style="font-size:clamp(1.6rem,3vw,2.2rem)">One-Time Services</h2>
            <p style="color:var(--sj-muted);margin-top:.75rem;max-width:480px;margin-left:auto;margin-right:auto">
                Perfect if you want a focused consultation or a specific nutrition assessment.
            </p>
        </div>

        <div class="row g-4 justify-content-center">
            <?php foreach ($oneTime as $plan): ?>
            <div class="col-md-6 col-lg-4">
                <div class="program-card h-100">
                    <div class="program-card-icon">
                        <i class="bi <?= Html::encode($plan->icon ?: 'bi-clipboard-pulse') ?>"></i>
                    </div>
                    <h3 class="program-card-title"><?= Html::encode($plan->name) ?></h3>
                    <?php if ($plan->who_it_for): ?>
                    <div class="program-card-who">
                        <i class="bi bi-person-check"></i> <?= Html::encode($plan->who_it_for) ?>
                    </div>
                    <?php endif; ?>
                    <?php if ($plan->description): ?>
                    <p class="program-card-desc"><?= Html::encode($plan->description) ?></p>
                    <?php endif; ?>
                    <?php $features = $plan->getFeatureList(); if (!empty($features)): ?>
                    <ul class="program-features">
                        <?php foreach ($features as $f): ?>
                        <li><?= Html::encode($f) ?></li>
                        <?php endforeach; ?>
                    </ul>
                    <?php endif; ?>
                    <div class="program-card-cta">
                        <a href="<?= Url::to(['/site/lead']) ?>" class="btn-sj">
                            Get in Touch <i class="bi bi-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<?php endif; ?>

<!-- Bottom CTA -->
<section style="padding:5rem 0;background:linear-gradient(135deg,var(--sj-dark) 0%,var(--sj-green) 100%);position:relative;overflow:hidden">
    <div style="position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(82,183,136,.18) 0%,transparent 65%)"></div>
    <div class="container text-center" style="position:relative;z-index:1">
        <h2 style="font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,2.8rem);color:#fff;margin-bottom:1rem;line-height:1.2">
            Not sure which program is right for you?
        </h2>
        <p style="color:rgba(255,255,255,.75);max-width:480px;margin:0 auto 2rem;line-height:1.8">
            Book a free 15-minute consultation. We'll discuss your goals and I'll recommend the best fit — no pressure, no commitment.
        </p>
        <div style="display:flex;gap:1rem;justify-content:center;flex-wrap:wrap">
            <a href="<?= Url::to(['/site/lead']) ?>" class="btn-sj" style="background:#fff;color:var(--sj-green)">
                Book Free Consultation <i class="bi bi-arrow-right ms-1"></i>
            </a>
            <a href="https://wa.me/919XXXXXXXXX" target="_blank"
               style="display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.6rem;border-radius:50px;border:2px solid rgba(255,255,255,.3);color:#fff;text-decoration:none;font-weight:600;font-size:.9rem;transition:border-color .2s">
                <i class="bi bi-whatsapp"></i> Chat on WhatsApp
            </a>
        </div>
    </div>
</section>

<!-- Program card styles -->
<style>
.program-card {
    background: #fff;
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid rgba(45,106,79,.08);
    box-shadow: 0 4px 24px rgba(45,106,79,.07);
    display: flex;
    flex-direction: column;
    transition: transform .25s, box-shadow .25s;
}
.program-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(45,106,79,.13);
}
.program-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sj-green-light), var(--sj-green-pale));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
}
.program-card-icon i {
    font-size: 1.5rem;
    color: var(--sj-green);
}
.program-card-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--sj-dark);
    margin-bottom: .5rem;
    line-height: 1.25;
}
.program-card-who {
    font-size: .82rem;
    color: var(--sj-green-mid);
    font-weight: 600;
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.program-card-desc {
    font-size: .88rem;
    color: var(--sj-text);
    line-height: 1.65;
    margin-bottom: 1rem;
}
.program-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    flex: 1;
}
.program-features li {
    font-size: .855rem;
    color: var(--sj-text);
    padding-left: 1.4rem;
    position: relative;
    line-height: 1.5;
}
.program-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .4em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sj-green-mid);
}
.program-duration {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: var(--sj-green);
    font-weight: 600;
    background: var(--sj-green-pale);
    padding: .3rem .75rem;
    border-radius: 50px;
    margin-bottom: 1.2rem;
}
.program-card-cta {
    margin-top: auto;
    padding-top: 1.2rem;
    border-top: 1px solid var(--sj-green-light);
}
.program-card-cta .btn-sj {
    width: 100%;
    justify-content: center;
}
</style>
