<?php

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

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

$this->title = 'SJ Nutrizione';
?>

<!-- ══════════════════════════════════════
     HERO
══════════════════════════════════════ -->
<section class="hero-section">
    <div class="container" style="position:relative;z-index:1">
        <div class="row align-items-center g-5">
            <div class="col-lg-6">
                <div class="hero-badge">
                    <i class="bi bi-trophy-fill"></i>
                    <?= Html::encode(SiteContent::getValue('hero_badge', 'Certified Nutritionist · 10+ Years Experience')) ?>
                </div>
                <h1 class="hero-title mb-4">
                    <?= Html::encode(SiteContent::getValue('hero_heading', 'Fuel Your Body.')) ?><br>
                    <span class="hero-highlight"><?= nl2br(Html::encode(SiteContent::getValue('hero_highlight', "Elevate Your\nPerformance."))) ?></span>
                </h1>
                <p style="font-size:1.1rem;line-height:1.85;color:var(--sj-muted);margin-bottom:2.2rem;max-width:500px">
                    <?= Html::encode(SiteContent::getValue('hero_subtext', 'Science-backed, personalised nutrition for elite athletes and everyday wellness seekers. Trusted by India Women\'s Cricket, National champions, and 200+ athletes across 8+ sports.')) ?>
                </p>

                <div class="d-flex flex-wrap gap-3 mb-4">
                    <a href="<?= Url::to(['/site/lead']) ?>" class="btn btn-sj btn-lg">
                        Book Free Consultation &nbsp;<i class="bi bi-arrow-right"></i>
                    </a>
                    <a href="<?= Url::to(['/site/plans']) ?>" class="btn btn-sj-outline btn-lg">View Programs</a>
                </div>

                <!-- Mini stat pills -->
                <div class="d-flex flex-wrap gap-3 mt-2">
                    <?php foreach ([
                        ['200+', 'Elite Athletes'],
                        ['10+ Yrs', 'Experience'],
                        ['3', 'National Teams'],
                    ] as $stat): ?>
                    <div style="display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.7);border:1px solid var(--sj-border);border-radius:50px;padding:.35rem .9rem">
                        <span style="width:7px;height:7px;border-radius:50%;background:var(--sj-green);flex-shrink:0;display:inline-block"></span>
                        <span style="font-size:.82rem;font-weight:700;color:var(--sj-dark)"><?= $stat[0] ?></span>
                        <span style="font-size:.78rem;color:var(--sj-muted)"><?= $stat[1] ?></span>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>

            <div class="col-lg-6 d-none d-lg-block">
                <div style="position:relative">
                    <!-- Decorative glow ring -->
                    <div style="position:absolute;inset:-24px;border-radius:32px;background:radial-gradient(ellipse at 70% 30%, rgba(82,183,136,.18) 0%, transparent 65%);pointer-events:none"></div>
                    <div style="border-radius:28px;overflow:hidden;box-shadow:0 20px 70px rgba(45,106,79,.2)">
                        <img src="<?= Url::base() ?>/img/nutritionist.png"
                             alt="Susan Jacob — SJ Nutrizione"
                             style="width:100%;height:500px;object-fit:cover;object-position:center top;display:block">
                    </div>
                    <!-- Floating credential chip -->
                    <div style="position:absolute;bottom:28px;left:-20px;background:#fff;border-radius:16px;padding:.75rem 1.1rem;box-shadow:0 8px 30px rgba(0,0,0,.12);display:flex;align-items:center;gap:.6rem">
                        <div style="width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--sj-green),var(--sj-green-mid));display:flex;align-items:center;justify-content:center;flex-shrink:0">
                            <i class="bi bi-patch-check-fill" style="color:#fff;font-size:.95rem"></i>
                        </div>
                        <div>
                            <div style="font-weight:700;font-size:.8rem;color:var(--sj-dark);line-height:1.2">Certified Nutritionist</div>
                            <div style="font-size:.7rem;color:var(--sj-muted)">Nutrigenomics Expert</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ══════════════════════════════════════
     STATS BAR
══════════════════════════════════════ -->
<div class="stats-bar">
    <div class="container">
        <div class="row g-0">
            <?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>
</div>

<!-- ══════════════════════════════════════
     SERVICES
══════════════════════════════════════ -->
<section id="services" style="background:var(--sj-stone);padding:6rem 0">
    <div class="container">
        <div class="text-center mb-5">
            <div class="section-label mb-3 justify-content-center">Areas of Expertise</div>
            <h2 class="section-title mb-3">Comprehensive Nutrition Services</h2>
            <div class="sj-divider mx-auto mb-4"></div>
            <p style="color:var(--sj-muted);max-width:560px;margin:0 auto;line-height:1.8">
                From elite athlete performance to holistic everyday wellness — science-backed strategies tailored to your unique goals.
            </p>
        </div>

        <div class="row g-4">
            <?php foreach ([
                ['bi-trophy-fill',    'Sports Nutrition',          'Performance-focused nutrition for elite and amateur athletes. Trusted by India Women\'s Cricket, Shooting, Squash, Rowing, Swimming, Golf, and more.'],
                ['bi-activity',       'Medical Nutrition',          'Clinical-grade plans for diabetes, PCOS, thyroid disorders, gut health, and other medical conditions — in coordination with your physician.'],
                ['bi-flower1',        'Holistic Nutrition',         'Whole-body approach to food — balancing mental health, gut wellness, sleep, and lifestyle for sustainable, long-term vitality.'],
                ['bi-person-heart',   'Lifestyle Nutrition',        'Personalised plans for weight management, healthy eating, body composition, and everyday energy — built around your life.'],
                ['bi-capsule',        'Supplementation Guidance',   'Evidence-based supplementation protocols tailored to your training load, deficiencies, and health goals — no guesswork.'],
                ['bi-camera-video',   'Online Consultations',       'Video and WhatsApp consultations available 11 AM – 6 PM. Expert guidance from anywhere in India or abroad.'],
                ['bi-building',       'Corporate & Team Nutrition', 'Nutrition programs for gyms, sports academies, and corporate wellness — group plans, workshops, and team coaching.'],
            ] as $i => $svc): ?>
            <div class="col-md-6 <?= $i < 4 ? 'col-lg-3' : 'col-lg-4' ?>">
                <div class="service-card h-100">
                    <div class="service-icon"><i class="bi <?= $svc[0] ?>"></i></div>
                    <h5 style="font-family:'Inter',sans-serif;font-weight:600;font-size:1rem;margin-bottom:.6rem;color:var(--sj-dark)"><?= $svc[1] ?></h5>
                    <p style="color:var(--sj-muted);font-size:.875rem;line-height:1.7;margin:0"><?= $svc[2] ?></p>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- ══════════════════════════════════════
     PLANS PREVIEW
══════════════════════════════════════ -->
<?php if (!empty($plans)): ?>
<section style="background:#f8fdf9;padding:6rem 0" id="plans-preview">
    <div class="container">
        <div class="text-center mb-5">
            <div class="section-label mb-3 justify-content-center">What I Offer</div>
            <h2 class="section-title mb-3">Programs & Services</h2>
            <div class="sj-divider mx-auto mb-4"></div>
            <p style="color:var(--sj-muted);max-width:500px;margin:0 auto">
                Every program is tailored to your goals. Book a free consultation and we'll find the right fit.
            </p>
        </div>

        <div class="row g-4 justify-content-center">
            <?php foreach (array_slice($plans, 0, 3) 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>
                    <h4 class="program-card-title"><?= Html::encode($plan->name) ?></h4>
                    <?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 (array_slice($features, 0, 4) 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" style="width:100%;justify-content:center">
                            Book Free Consultation <i class="bi bi-arrow-right ms-1"></i>
                        </a>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>

        <div class="text-center mt-5">
            <a href="<?= Url::to(['/site/plans']) ?>" class="btn btn-sj-outline btn-lg">View All Programs</a>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- ══════════════════════════════════════
     ABOUT SUSAN
══════════════════════════════════════ -->
<section style="padding:6rem 0;background:#fff" id="about">
    <div class="container">
        <div class="row align-items-start g-5">

            <div class="col-lg-4">
                <div style="position:relative">
                    <div style="border-radius:24px;overflow:hidden;box-shadow:var(--sj-shadow-lg)">
                        <img src="<?= Url::base() ?>/img/nutritionist.png"
                             alt="Susan Jacob — SJ Nutrizione"
                             style="width:100%;display:block;object-fit:cover;object-position:center top">
                    </div>
                    <!-- Credential badge overlay -->
                    <div style="position:absolute;bottom:-18px;right:-10px;background:#fff;border-radius:16px;padding:.8rem 1.2rem;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:1.6rem;font-weight:700;color:var(--sj-green);line-height:1">10+</div>
                        <div style="font-size:.7rem;color:var(--sj-muted);letter-spacing:.06em;text-transform:uppercase">Years Exp.</div>
                    </div>
                </div>
            </div>

            <div class="col-lg-8 ps-lg-5">
                <div class="section-label mb-3">About Me</div>
                <h2 class="section-title mb-1">Susan Jacob</h2>
                <p style="color:var(--sj-green);font-weight:600;font-size:.95rem;margin-bottom:1.2rem;letter-spacing:.02em">
                    Certified Nutritionist &nbsp;·&nbsp; Sports Nutritionist &nbsp;·&nbsp; Nutrigenomics Expert
                </p>

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

                <!-- Green left-rule bio -->
                <div style="border-left:3px solid var(--sj-green);padding-left:1.4rem;margin-bottom:2rem">
                    <p style="font-size:1rem;line-height:1.9;color:#444;margin:0">
                        <?= 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>
                </div>

                <div class="mb-4">
                    <div class="section-label mb-3">My Expertise</div>
                    <div class="row g-2">
                        <?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.'],
                        ] as $exp): ?>
                        <div class="col-sm-6">
                            <div style="border:1px solid rgba(45,106,79,.12);border-radius:14px;padding:1rem 1.1rem;height:100%;transition:var(--transition);background:#fafaf9"
                                 onmouseover="this.style.background='var(--sj-green-pale)';this.style.borderColor='rgba(45,106,79,.25)'"
                                 onmouseout="this.style.background='#fafaf9';this.style.borderColor='rgba(45,106,79,.12)'">
                                <div style="font-weight:600;font-size:.88rem;margin-bottom:.3rem;color:var(--sj-dark)"><?= $exp[0] ?> <?= $exp[1] ?></div>
                                <div style="color:var(--sj-muted);font-size:.8rem;line-height:1.55"><?= $exp[2] ?></div>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    </div>
                </div>

                <div style="border-top:1px solid rgba(45,106,79,.1);padding-top:1.4rem" class="d-flex flex-wrap gap-4 mb-4" style="font-size:.88rem;color:#555">
                    <span><i class="bi bi-envelope me-1" style="color:var(--sj-green)"></i>sj.nutrizione@gmail.com</span>
                    <span><i class="bi bi-telephone me-1" style="color:var(--sj-green)"></i>+91 84209 60825</span>
                    <span><i class="bi bi-clock me-1" style="color:var(--sj-green)"></i>Consultation: 11 AM – 6 PM</span>
                </div>

                <div class="d-flex gap-3">
                    <a href="<?= Url::to(['/site/lead']) ?>" class="btn btn-sj">
                        Book a Consultation <i class="bi bi-arrow-right ms-1"></i>
                    </a>
                    <a href="<?= Url::to(['/site/about']) ?>" class="btn btn-sj-outline">
                        Read More
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ══════════════════════════════════════
     HOW IT WORKS
══════════════════════════════════════ -->
<section style="background:var(--sj-stone);padding:6rem 0">
    <div class="container">
        <div class="text-center mb-5">
            <div class="section-label mb-3 justify-content-center">Simple Process</div>
            <h2 class="section-title mb-3">How It Works</h2>
            <div class="sj-divider mx-auto"></div>
        </div>

        <div class="row g-4 justify-content-center" style="position:relative">
            <?php foreach ([
                ['1', 'Free Consultation',   'Share your health goals, medical history, and food preferences in a quick discovery call.',              'bi-calendar-check'],
                ['2', 'Personalised Plan',   'Receive a detailed, customised nutrition plan crafted for your body and goals within 48 hours.',         'bi-clipboard2-check'],
                ['3', 'Ongoing Support',     'Regular WhatsApp check-ins, plan revisions, and progress tracking to keep you on track.',                'bi-chat-heart'],
            ] as $i => $step): ?>
            <div class="col-md-4" style="position:relative">
                <?php if ($i < 2): ?>
                <div class="d-none d-md-block" style="position:absolute;top:36px;left:calc(50% + 36px);right:calc(-50% + 36px);height:2px;background:linear-gradient(90deg,var(--sj-green-light),rgba(82,183,136,.2));z-index:0;border-radius:2px;
                background-image: repeating-linear-gradient(90deg, var(--sj-green-light) 0px, var(--sj-green-light) 6px, transparent 6px, transparent 12px)"></div>
                <?php endif; ?>
                <div class="text-center p-4" style="position:relative;z-index:1">
                    <div class="step-circle">
                        <i class="bi <?= $step[3] ?>"></i>
                    </div>
                    <div style="font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sj-green);margin-bottom:.5rem">STEP <?= $step[0] ?></div>
                    <h5 style="font-family:var(--font-display);font-weight:600;margin-bottom:.6rem;color:var(--sj-dark)"><?= $step[1] ?></h5>
                    <p style="color:var(--sj-muted);font-size:.875rem;line-height:1.7;max-width:260px;margin:0 auto"><?= $step[2] ?></p>
                </div>
            </div>
            <?php endforeach; ?>
        </div>

        <div class="text-center mt-5">
            <a href="<?= Url::to(['/site/lead']) ?>" class="btn btn-sj btn-lg">
                Start Today &nbsp;<i class="bi bi-arrow-right"></i>
            </a>
        </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">Success Stories</div>
            <h2 class="section-title mb-3">What Our Clients Say</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>

<!-- ══════════════════════════════════════
     LEAD / CTA SECTION
══════════════════════════════════════ -->
<section class="lead-section" style="padding:6rem 0">
    <div class="container" style="position:relative;z-index:1">
        <div class="row align-items-center g-5">

            <div class="col-lg-5 text-white">
                <div style="font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.8rem">Free Consultation</div>
                <h2 style="font-family:var(--font-display);font-size:clamp(2rem,3vw,3rem);color:#fff;line-height:1.2;margin-bottom:1.2rem">
                    Ready to Start Your<br><em>Transformation?</em>
                </h2>
                <p style="color:rgba(255,255,255,.75);line-height:1.8;margin-bottom:2rem">
                    Book a free 30-minute consultation and get a personalised assessment. No obligation — just honest, science-backed advice.
                </p>
                <ul class="list-unstyled">
                    <?php foreach ([
                        'Free initial consultation',
                        'Personalised plan within 48 hours',
                        'Ongoing WhatsApp support',
                    ] as $point): ?>
                    <li class="mb-3 d-flex align-items-center gap-2" style="color:rgba(255,255,255,.85)">
                        <i class="bi bi-check-circle-fill" style="color:var(--sj-green-mid);font-size:1rem;flex-shrink:0"></i>
                        <?= $point ?>
                    </li>
                    <?php endforeach; ?>
                </ul>
                <a href="https://wa.me/918420960825" target="_blank" style="display:inline-flex;align-items:center;gap:.6rem;color:rgba(255,255,255,.65);font-size:.88rem;text-decoration:none;margin-top:.5rem;transition:color .2s"
                   onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,.65)'">
                    <i class="bi bi-whatsapp" style="color:#25D366;font-size:1.1rem"></i>
                    Or WhatsApp us directly
                </a>
            </div>

            <div class="col-lg-6 offset-lg-1">
                <div class="lead-form-card">
                    <h5 style="font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--sj-dark);margin-bottom:1.8rem">Book Free Consultation</h5>
                    <form method="POST" action="<?= Url::to(['/site/lead']) ?>">
                        <?= \yii\bootstrap5\Html::hiddenInput(Yii::$app->request->csrfParam, Yii::$app->request->csrfToken) ?>
                        <div class="row g-3">
                            <div class="col-12">
                                <input type="text" name="name" class="form-control form-control-sj" placeholder="Your Full Name" required
                                       style="border:1.5px solid #e2e8f0;border-radius:10px;padding:.8rem 1rem;font-size:.95rem;background:#fafafa;transition:border-color .2s,box-shadow .2s,background .2s;width:100%"
                                       onfocus="this.style.borderColor='var(--sj-green)';this.style.boxShadow='0 0 0 3px 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">
                                <input type="tel" name="phone" class="form-control" placeholder="Phone Number" required
                                       style="border:1.5px solid #e2e8f0;border-radius:10px;padding:.8rem 1rem;font-size:.95rem;background:#fafafa;transition:border-color .2s,box-shadow .2s;width:100%"
                                       onfocus="this.style.borderColor='var(--sj-green)';this.style.boxShadow='0 0 0 3px 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">
                                <input type="email" name="email" placeholder="Email (optional)"
                                       style="border:1.5px solid #e2e8f0;border-radius:10px;padding:.8rem 1rem;font-size:.95rem;background:#fafafa;transition:border-color .2s,box-shadow .2s;width:100%"
                                       onfocus="this.style.borderColor='var(--sj-green)';this.style.boxShadow='0 0 0 3px 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-12">
                                <select name="goal" style="border:1.5px solid #e2e8f0;border-radius:10px;padding:.8rem 1rem;font-size:.95rem;background:#fafafa;width:100%;appearance:auto;color:var(--sj-text)"
                                        onfocus="this.style.borderColor='var(--sj-green)';this.style.boxShadow='0 0 0 3px rgba(45,106,79,.1)'"
                                        onblur="this.style.borderColor='#e2e8f0';this.style.boxShadow='none'">
                                    <option value="">— Health Goal —</option>
                                    <option>Weight Loss</option>
                                    <option>Weight Gain</option>
                                    <option>Medical Nutrition (Diabetes/PCOS/etc)</option>
                                    <option>Sports Performance</option>
                                    <option>General Wellness</option>
                                    <option>Other</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-sj w-100 py-3" style="font-size:1rem;border-radius:12px">
                                    <i class="bi bi-calendar-check me-2"></i>Book My Free Consultation
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

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