<?php

/** @var yii\web\View $this */
/** @var string $selectedPlan */

use yii\bootstrap5\Html;
use yii\helpers\Url;

$this->title = 'Book a Free Consultation';
?>

<!-- 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">Free Consultation</div>
        <h1 class="section-title mb-3">Let's Start Your Journey</h1>
        <div class="sj-divider mx-auto mb-4"></div>
        <p style="color:var(--sj-muted);max-width:500px;margin:0 auto;line-height:1.8">
            Fill in your details and we'll get back to you within a few hours to schedule your free 30-minute consultation.
        </p>
    </div>
</section>

<!-- Main Content -->
<section style="padding:5rem 0 6rem;background:#fff">
    <div class="container">
        <div class="row g-5">

            <!-- Form Card -->
            <div class="col-lg-7">
                <div style="background:#fff;border-radius:28px;padding:2.8rem 3rem;box-shadow:0 8px 50px rgba(45,106,79,.1);border:1px solid var(--sj-border)">
                    <h3 style="font-family:var(--font-display);color:var(--sj-dark);margin-bottom:.4rem">Book Your Consultation</h3>
                    <p style="color:var(--sj-muted);font-size:.9rem;margin-bottom:2rem">No fees. No obligation. Just honest, expert advice.</p>

                    <form method="POST" action="<?= Url::to(['/site/lead']) ?>">
                        <?= Html::hiddenInput(Yii::$app->request->csrfParam, Yii::$app->request->csrfToken) ?>

                        <div class="row g-3">
                            <!-- Full Name -->
                            <div class="col-12">
                                <label style="font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sj-green);display:block;margin-bottom:.5rem">
                                    Full Name <span style="color:#e55">*</span>
                                </label>
                                <input type="text" name="name" placeholder="e.g. Priya Sharma" required
                                       style="width:100%;border:1.5px solid #e2e8f0;border-radius:12px;padding:.9rem 1.1rem;font-size:.95rem;color:var(--sj-text);background:#fafafa;transition:border-color .2s,box-shadow .2s,background .2s;outline:none"
                                       onfocus="this.style.borderColor='var(--sj-green)';this.style.boxShadow='0 0 0 4px rgba(45,106,79,.1)';this.style.background='#fff'"
                                       onblur="this.style.borderColor='#e2e8f0';this.style.boxShadow='none';this.style.background='#fafafa'">
                            </div>

                            <!-- Phone + Email -->
                            <div class="col-md-6">
                                <label style="font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sj-green);display:block;margin-bottom:.5rem">
                                    Phone Number <span style="color:#e55">*</span>
                                </label>
                                <input type="tel" name="phone" placeholder="+91 84209 60825" required
                                       style="width:100%;border:1.5px solid #e2e8f0;border-radius:12px;padding:.9rem 1.1rem;font-size:.95rem;color:var(--sj-text);background:#fafafa;transition:border-color .2s,box-shadow .2s,background .2s;outline:none"
                                       onfocus="this.style.borderColor='var(--sj-green)';this.style.boxShadow='0 0 0 4px rgba(45,106,79,.1)';this.style.background='#fff'"
                                       onblur="this.style.borderColor='#e2e8f0';this.style.boxShadow='none';this.style.background='#fafafa'">
                            </div>
                            <div class="col-md-6">
                                <label style="font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sj-muted);display:block;margin-bottom:.5rem">
                                    Email Address
                                </label>
                                <input type="email" name="email" placeholder="you@example.com"
                                       style="width:100%;border:1.5px solid #e2e8f0;border-radius:12px;padding:.9rem 1.1rem;font-size:.95rem;color:var(--sj-text);background:#fafafa;transition:border-color .2s,box-shadow .2s,background .2s;outline:none"
                                       onfocus="this.style.borderColor='var(--sj-green)';this.style.boxShadow='0 0 0 4px rgba(45,106,79,.1)';this.style.background='#fff'"
                                       onblur="this.style.borderColor='#e2e8f0';this.style.boxShadow='none';this.style.background='#fafafa'">
                            </div>

                            <!-- Health Goal -->
                            <div class="col-12">
                                <label style="font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sj-green);display:block;margin-bottom:.5rem">
                                    Primary Health Goal
                                </label>
                                <select name="goal"
                                        style="width:100%;border:1.5px solid #e2e8f0;border-radius:12px;padding:.9rem 1.1rem;font-size:.95rem;color:var(--sj-text);background:#fafafa;transition:border-color .2s,box-shadow .2s;outline:none;appearance:auto"
                                        onfocus="this.style.borderColor='var(--sj-green)';this.style.boxShadow='0 0 0 4px rgba(45,106,79,.1)'"
                                        onblur="this.style.borderColor='#e2e8f0';this.style.boxShadow='none'">
                                    <option value="">— Select your primary goal —</option>
                                    <option>Weight Loss</option>
                                    <option>Weight Gain / Muscle Building</option>
                                    <option>Medical Nutrition (Diabetes / PCOS / Thyroid)</option>
                                    <option>Sports &amp; Athletic Performance</option>
                                    <option>General Wellness &amp; Healthy Eating</option>
                                    <option>Pregnancy / Post-natal Nutrition</option>
                                    <option>Other</option>
                                </select>
                            </div>

                            <!-- Plan Interest -->
                            <div class="col-12">
                                <label style="font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sj-muted);display:block;margin-bottom:.5rem">
                                    Interested In (Optional)
                                </label>
                                <select name="plan_interest"
                                        style="width:100%;border:1.5px solid #e2e8f0;border-radius:12px;padding:.9rem 1.1rem;font-size:.95rem;color:var(--sj-text);background:#fafafa;transition:border-color .2s,box-shadow .2s;outline:none;appearance:auto"
                                        onfocus="this.style.borderColor='var(--sj-green)';this.style.boxShadow='0 0 0 4px rgba(45,106,79,.1)'"
                                        onblur="this.style.borderColor='#e2e8f0';this.style.boxShadow='none'">
                                    <option value="" <?= empty($selectedPlan) ? 'selected' : '' ?>>— Choose a plan (optional) —</option>
                                    <option <?= $selectedPlan === 'Weight Loss Plan'       ? 'selected' : '' ?>>Weight Loss Plan</option>
                                    <option <?= $selectedPlan === 'Sports Nutrition Plan'  ? 'selected' : '' ?>>Sports Nutrition Plan</option>
                                    <option <?= $selectedPlan === 'Medical Nutrition Plan' ? 'selected' : '' ?>>Medical Nutrition Plan</option>
                                    <option>Not sure — need guidance</option>
                                </select>
                            </div>

                            <!-- Notes -->
                            <div class="col-12">
                                <label style="font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sj-muted);display:block;margin-bottom:.5rem">
                                    Tell Us More (Optional)
                                </label>
                                <textarea name="notes" rows="4"
                                          placeholder="Any health conditions, current medications, or specific concerns you'd like us to know about…"
                                          style="width:100%;border:1.5px solid #e2e8f0;border-radius:12px;padding:.9rem 1.1rem;font-size:.95rem;color:var(--sj-text);background:#fafafa;transition:border-color .2s,box-shadow .2s,background .2s;outline:none;resize:vertical;min-height:100px;font-family:'Inter',sans-serif"
                                          onfocus="this.style.borderColor='var(--sj-green)';this.style.boxShadow='0 0 0 4px rgba(45,106,79,.1)';this.style.background='#fff'"
                                          onblur="this.style.borderColor='#e2e8f0';this.style.boxShadow='none';this.style.background='#fafafa'"></textarea>
                            </div>

                            <!-- Submit -->
                            <div class="col-12 mt-1">
                                <button type="submit" class="btn btn-sj w-100" style="padding:1rem;font-size:1rem;border-radius:14px;letter-spacing:.03em">
                                    <i class="bi bi-calendar-check me-2"></i>Book My Free Consultation
                                </button>
                                <p style="color:var(--sj-muted);text-align:center;margin-top:.9rem;font-size:.8rem">
                                    <i class="bi bi-shield-check me-1" style="color:var(--sj-green)"></i>
                                    Your information is 100% private and will never be shared.
                                </p>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-5 d-flex flex-column gap-4">

                <!-- What Happens Next -->
                <div>
                    <h4 style="font-family:var(--font-display);color:var(--sj-dark);margin-bottom:1.8rem">What Happens Next?</h4>

                    <?php foreach ([
                        ['1', 'We Review Your Form',         'Within a few hours of submission we read your details carefully.'],
                        ['2', 'We Call / WhatsApp You',      'To schedule your free 30-minute discovery consultation.'],
                        ['3', 'Consultation &amp; Assessment', 'We understand your goals, history, and lifestyle in detail.'],
                        ['4', 'Your Plan is Ready',          'Personalised nutrition plan delivered within 48 hours.'],
                    ] as $i => $step): ?>
                    <div style="display:flex;gap:1rem;margin-bottom:<?= $i < 3 ? '1.4rem' : '1rem' ?>;position:relative">
                        <?php if ($i < 3): ?>
                        <div style="position:absolute;left:19px;top:42px;bottom:-1.4rem;width:2px;background:linear-gradient(to bottom,var(--sj-green-light),transparent);z-index:0"></div>
                        <?php endif; ?>
                        <div style="width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--sj-green),var(--sj-green-mid));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.9rem;flex-shrink:0;z-index:1;position:relative">
                            <?= $i + 1 ?>
                        </div>
                        <div style="padding-top:.1rem">
                            <div style="font-weight:600;font-size:.9rem;color:var(--sj-dark);margin-bottom:.2rem"><?= $step[1] ?></div>
                            <div style="color:var(--sj-muted);font-size:.82rem;line-height:1.55"><?= $step[2] ?></div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>

                <!-- WhatsApp CTA Card -->
                <div style="background:var(--sj-green-pale);border-radius:20px;padding:1.8rem;border:1px solid rgba(45,106,79,.12)">
                    <div style="display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem">
                        <i class="bi bi-whatsapp" style="color:#25D366;font-size:1.4rem"></i>
                        <div style="font-weight:700;color:var(--sj-dark);font-size:.95rem">Prefer WhatsApp?</div>
                    </div>
                    <p style="color:var(--sj-muted);font-size:.85rem;line-height:1.6;margin-bottom:1.1rem">Message us directly and we'll set up your consultation right away — no waiting.</p>
                    <a href="https://wa.me/918420960825?text=Hi%20Susan%2C%20I%27d%20like%20to%20book%20a%20free%20consultation." target="_blank" class="btn btn-sj" style="font-size:.88rem">
                        <i class="bi bi-whatsapp me-1"></i>Chat on WhatsApp
                    </a>
                </div>

                <!-- Trust badges -->
                <div style="background:var(--sj-stone);border-radius:20px;padding:1.5rem 1.8rem">
                    <div style="font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sj-muted);margin-bottom:1rem">Why Clients Trust Susan</div>
                    <?php foreach ([
                        ['bi-award',           'Certified Nutritionist & Sports Nutritionist'],
                        ['bi-graph-up-arrow',  'Trusted by 200+ athletes across 8+ sports'],
                        ['bi-heart-pulse',     'Specialised in medical & holistic nutrition'],
                        ['bi-clock-history',   '10+ years of clinical experience'],
                    ] as $trust): ?>
                    <div style="display:flex;align-items:center;gap:.7rem;margin-bottom:.75rem">
                        <i class="bi <?= $trust[0] ?>" style="color:var(--sj-green);flex-shrink:0;width:16px"></i>
                        <span style="font-size:.83rem;color:var(--sj-text)"><?= $trust[1] ?></span>
                    </div>
                    <?php endforeach; ?>
                </div>

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