<?= $this->extend('layouts/guest') ?>

<?= $this->section('content') ?>
<div class="auth-screen">
    <div class="auth-hero" aria-hidden="true">
        <svg viewBox="0 0 280 180" class="auth-hero-svg">
            <ellipse cx="140" cy="150" rx="90" ry="12" fill="#f1f1f1"/>
            <rect x="170" y="40" width="70" height="90" rx="8" fill="#fff" stroke="#111" stroke-width="2"/>
            <rect x="180" y="55" width="50" height="8" rx="2" fill="#ffb74d"/>
            <rect x="180" y="70" width="40" height="6" rx="2" fill="#90caf9"/>
            <rect x="180" y="84" width="45" height="6" rx="2" fill="#aed581"/>
            <circle cx="95" cy="95" r="28" fill="#fff" stroke="#111" stroke-width="2"/>
            <path d="M80 150c8-32 22-48 30-48s18 12 28 48" fill="#111"/>
        </svg>
    </div>

    <h1 class="auth-title">Sign In</h1>

    <form class="auth-form" method="post" action="<?= site_url('auth/send-otp') ?>">
        <?= csrf_field() ?>
        <label class="field-label" for="email">Email Address <span class="req">*</span></label>
        <input class="field-input" type="email" id="email" name="email" placeholder="name@example.com" required maxlength="190" autocomplete="email" value="<?= esc(old('email', $email ?? '')) ?>">
        <button class="btn-primary" type="submit">Continue</button>
        <a class="text-link" href="<?= site_url('sign-in') ?>">Back to Home</a>
    </form>
</div>
<?= $this->endSection() ?>
