<?php

/** @var yii\web\View $this */
/** @var yii\bootstrap5\ActiveForm $form */
/** @var \frontend\models\ContactForm $model */

use yii\bootstrap5\Html;
use yii\bootstrap5\ActiveForm;
use yii\captcha\Captcha;

$this->title = 'Contact';
?>

<!-- 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">Get in Touch</div>
        <h1 class="section-title mb-3">We'd Love to Hear From You</h1>
        <div class="sj-divider mx-auto mb-4"></div>
        <p style="color:var(--sj-muted);max-width:480px;margin:0 auto;line-height:1.8">
            Have a question about our services or want to book a consultation? Reach out and we'll respond promptly.
        </p>
    </div>
</section>

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

            <!-- Left: Contact Info -->
            <div class="col-lg-5">
                <h3 style="font-family:var(--font-display);color:var(--sj-dark);margin-bottom:.6rem">Contact Information</h3>
                <p style="color:var(--sj-muted);font-size:.92rem;line-height:1.75;margin-bottom:2.2rem">
                    We're available for consultations and enquiries Monday through Saturday, 11 AM to 6 PM.
                </p>

                <!-- Contact Info Cards -->
                <div class="d-flex flex-column gap-3 mb-4">
                    <?php foreach ([
                        ['bi-telephone-fill',  'Phone',       '+91 84209 60825',          'tel:+918420960825',                   false],
                        ['bi-envelope-fill',   'Email',       'sj.nutrizione@gmail.com',  'mailto:sj.nutrizione@gmail.com',      false],
                        ['bi-clock-fill',      'Hours',       'Mon – Sat, 11 AM – 6 PM',  null,                                  false],
                        ['bi-instagram',       'Instagram',   '@sj_nutrizione',            'https://instagram.com/sj_nutrizione', true],
                    ] as $info): ?>
                    <div style="display:flex;align-items:flex-start;gap:1rem;background:var(--sj-stone);border-radius:16px;padding:1.2rem 1.4rem;border:1px solid rgba(45,106,79,.07)">
                        <div style="width:44px;height:44px;border-radius:12px;background:var(--sj-green-light);display:flex;align-items:center;justify-content:center;flex-shrink:0">
                            <i class="bi <?= $info[0] ?>" style="color:var(--sj-green);font-size:1.1rem"></i>
                        </div>
                        <div>
                            <div style="font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sj-muted);margin-bottom:.15rem"><?= $info[1] ?></div>
                            <?php if ($info[3]): ?>
                            <a href="<?= $info[3] ?>" <?= $info[4] ? 'target="_blank"' : '' ?>
                               style="font-weight:600;font-size:.92rem;color:var(--sj-dark);text-decoration:none;transition:color .2s"
                               onmouseover="this.style.color='var(--sj-green)'" onmouseout="this.style.color='var(--sj-dark)'">
                                <?= $info[2] ?>
                            </a>
                            <?php else: ?>
                            <div style="font-weight:600;font-size:.92rem;color:var(--sj-dark)"><?= $info[2] ?></div>
                            <?php endif; ?>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>

                <!-- WhatsApp Highlight -->
                <div style="background:linear-gradient(135deg,var(--sj-green) 0%,#1e5c3f 100%);border-radius:20px;padding:2rem;color:#fff;position:relative;overflow:hidden">
                    <div style="position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.07)"></div>
                    <div style="display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem">
                        <i class="bi bi-whatsapp" style="font-size:1.6rem;color:#7ee8a2"></i>
                        <span style="font-family:var(--font-display);font-size:1.2rem;font-weight:600">Quick WhatsApp Response</span>
                    </div>
                    <p style="color:rgba(255,255,255,.75);font-size:.88rem;line-height:1.65;margin-bottom:1.2rem">
                        For the fastest response, message us on WhatsApp. We typically reply within 30 minutes.
                    </p>
                    <a href="https://wa.me/918420960825?text=Hi%20Susan%2C%20I%20found%20your%20website%20and%20have%20a%20question."
                       target="_blank"
                       style="display:inline-flex;align-items:center;gap:.5rem;background:#fff;color:var(--sj-green);border-radius:50px;padding:.6rem 1.3rem;font-weight:700;font-size:.88rem;text-decoration:none;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 16px rgba(0,0,0,.15)"
                       onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 6px 20px rgba(0,0,0,.2)'"
                       onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 4px 16px rgba(0,0,0,.15)'">
                        <i class="bi bi-whatsapp" style="color:#25D366"></i>
                        Message on WhatsApp
                    </a>
                </div>
            </div>

            <!-- Right: Contact Form -->
            <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">Send a Message</h3>
                    <p style="color:var(--sj-muted);font-size:.88rem;margin-bottom:2rem">We'll get back to you within 24 hours.</p>

                    <?php $form = ActiveForm::begin([
                        'id'      => 'contact-form',
                        'options' => ['novalidate' => true],
                        'fieldConfig' => [
                            'template'      => "{label}\n{input}\n{error}",
                            'labelOptions'  => ['style' => 'font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sj-green);display:block;margin-bottom:.5rem'],
                            'inputOptions'  => [
                                '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'",
                            ],
                            'errorOptions'  => ['style' => 'color:#dc3545;font-size:.8rem;margin-top:.3rem;display:block'],
                        ],
                    ]); ?>

                    <div class="row g-3">
                        <div class="col-md-6">
                            <?= $form->field($model, 'name')->textInput([
                                'autofocus'   => true,
                                'placeholder' => 'Your full name',
                                'style'       => 'width:100%;border:1.5px solid #e2e8f0;border-radius:12px;padding:.9rem 1.1rem;font-size:.95rem;color:var(--sj-text);background:#fafafa;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">
                            <?= $form->field($model, 'email')->input('email', [
                                'placeholder' => 'your@email.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;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-12">
                            <?= $form->field($model, 'subject')->textInput([
                                'placeholder' => 'How can we help you?',
                                'style'       => 'width:100%;border:1.5px solid #e2e8f0;border-radius:12px;padding:.9rem 1.1rem;font-size:.95rem;color:var(--sj-text);background:#fafafa;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-12">
                            <?= $form->field($model, 'body')->textarea([
                                'rows'        => 5,
                                'placeholder' => 'Tell us about your health goals, questions, or anything you\'d like to discuss…',
                                'style'       => 'width:100%;border:1.5px solid #e2e8f0;border-radius:12px;padding:.9rem 1.1rem;font-size:.95rem;color:var(--sj-text);background:#fafafa;outline:none;resize:vertical;min-height:120px;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'",
                            ]) ?>
                        </div>
                        <div class="col-12">
                            <?= $form->field($model, 'verifyCode')->widget(Captcha::class, [
                                'template' => '<div class="d-flex align-items-center gap-3 flex-wrap">{image}<div style="flex:1">{input}</div></div>',
                                'captchaAction' => '/site/captcha',
                            ]) ?>
                        </div>
                        <div class="col-12 mt-1">
                            <?= Html::submitButton(
                                '<i class="bi bi-send me-2"></i>Send Message',
                                [
                                    'class' => 'btn btn-sj w-100',
                                    'style' => 'padding:1rem;font-size:1rem;border-radius:14px;letter-spacing:.03em',
                                    'name'  => 'contact-button',
                                ]
                            ) ?>
                        </div>
                    </div>

                    <?php ActiveForm::end(); ?>
                </div>
            </div>

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

<!-- CTA Strip -->
<section style="background:var(--sj-stone);padding:3.5rem 0;border-top:1px solid var(--sj-border)">
    <div class="container text-center">
        <p style="color:var(--sj-muted);margin-bottom:1.2rem;font-size:.95rem">
            Ready to transform your nutrition? Book your free 30-minute consultation today.
        </p>
        <a href="<?= Url::to(['/site/lead']) ?>" class="btn btn-sj btn-lg">
            <i class="bi bi-calendar-check me-2"></i>Book Free Consultation
        </a>
    </div>
</section>
