<?php
require_once __DIR__ . '/includes/functions.php';

$pageTitle       = 'Member Login - US Business Funding Solutions';
$pageDescription = 'Sign in to your member dashboard to access funding resources, your business plan template, and track your grant applications.';
$activePage      = 'member-login.php';

require __DIR__ . '/includes/header.php';
?>
      <!-- ============================================================= hero -->
      <section class="section section--top">
        <div class="container">
          <div class="center stack-xl animate-fade-in">
            <div>
              <h1 class="title-xl" style="margin-bottom: 1.5rem">
                Member <span class="gradient-text">Portal</span>
              </h1>
              <p class="lead lead--lg measure">
                Access your personalized funding dashboard, business plan template, track applications, and connect
                with our team of professionals dedicated to your success.
              </p>
            </div>
          </div>
        </div>
      </section>

      <!-- =========================================================== login -->
      <section class="section section--muted">
        <div class="container">
          <div class="measure-sm">
            <!-- Sign-in panel -->
            <div class="animate-fade-in" data-login-panel>
              <div class="card card--elegant">
                <div class="card__header center">
                  <div class="icon-tile icon-tile--center icon-tile--round"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg></div>
                  <h2 class="card__title">Welcome Back</h2>
                  <p class="card__description">
                    Sign in to access your member dashboard and funding resources.
                  </p>
                </div>
                <div class="card__body">
                  <form class="form" data-login-form novalidate>
                    <div class="field">
                      <label class="field__label" for="login-email">Email Address</label>
                      <input class="field__control field__control--tall" id="login-email" name="email" type="email" placeholder="Enter your email address" autocomplete="email" />
                      <p class="field__error" data-error-for="email"></p>
                    </div>

                    <div class="field">
                      <label class="field__label" for="login-password">Password</label>
                      <div class="password-wrap">
                        <input class="field__control field__control--tall" id="login-password" name="password" type="password" placeholder="Enter your password" autocomplete="current-password" />
                        <button class="password-toggle" type="button" data-password-toggle="login-password" aria-label="Show password"></button>
                      </div>
                      <p class="field__error" data-error-for="password"></p>
                    </div>

                    <div style="display: flex; justify-content: flex-end">
                      <button class="btn btn--link" type="button" data-show-reset>Forgot password?</button>
                    </div>

                    <button class="btn btn--full btn--tall btn--gradient" type="submit">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" /></svg>
                      <span data-submit-label>Sign In</span>
                    </button>
                  </form>
                </div>
              </div>
            </div>

            <!-- Password reset panel -->
            <div class="animate-fade-in" data-reset-panel hidden>
              <div class="card card--elegant">
                <div class="card__header center">
                  <div class="icon-tile icon-tile--center icon-tile--round"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" /></svg></div>
                  <h2 class="card__title">Reset Password</h2>
                  <p class="card__description">
                    Enter your email address and we'll send you instructions to reset your password.
                  </p>
                </div>
                <div class="card__body">
                  <form class="form" data-reset-form novalidate>
                    <div class="field">
                      <label class="field__label" for="reset-email">Email Address</label>
                      <input class="field__control field__control--tall" id="reset-email" name="email" type="email" placeholder="Enter your email address" autocomplete="email" />
                      <p class="field__error" data-error-for="email"></p>
                    </div>

                    <div class="form-actions">
                      <button class="btn btn--tall btn--outline" type="button" data-show-login>
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" /></svg>
                        Back to Login
                      </button>
                      <button class="btn btn--tall btn--gradient" type="submit">
                        <span data-submit-label>Send Reset Link</span>
                      </button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    
<?php require __DIR__ . '/includes/footer.php'; ?>