<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sign in · EmailToPrint</title>
  <meta name="referrer" content="no-referrer" />

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap"
    rel="stylesheet"
  />
  <link rel="stylesheet" href="login.css" />
</head>
<body>
  <main class="auth">
    <!-- Brand / story panel -->
    <section class="auth__brand" aria-hidden="true">
      <div class="brand-mark">
        <span class="brand-mark__dot"></span>
        EmailToPrint
      </div>

      <div class="brand-copy">
        <h1>Your inbox,<br />ready for the press.</h1>
        <p>Turn customer emails into print orders without leaving your mailbox. Securely connected to Gmail.</p>
      </div>

      <ul class="brand-points">
        <li><span class="tick">✓</span> Read-only Gmail access</li>
        <li><span class="tick">✓</span> Orders built on top of real email threads</li>
        <li><span class="tick">✓</span> Bank-grade encryption of your connection</li>
      </ul>

      <div class="brand-foot">© <span id="year"></span> EmailToPrint</div>
    </section>

    <!-- Sign-in panel -->
    <section class="auth__panel">
      <div class="card">
        <div class="card__logo">
          <span class="brand-mark__dot"></span>
        </div>

        <h2 class="card__title">Sign in</h2>
        <p class="card__subtitle">Connect your Google account to continue</p>

        <div id="errorBanner" class="error-banner" hidden>
          <span class="material-x">!</span>
          <span id="errorText"></span>
        </div>

        <!-- This is a LINK to the OAuth initiator. Clicking it sends the user
             to Google's own login screen — we never see their password. -->
        <a id="googleBtn" class="google-btn" href="../gmail/oauth2start.php">
          <svg class="google-btn__icon" viewBox="0 0 48 48" width="20" height="20" aria-hidden="true">
            <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
            <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
            <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
            <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
          </svg>
          <span class="google-btn__label">Sign in with Google</span>
        </a>

        <p class="card__legal">
          By continuing you allow EmailToPrint to read your Gmail messages on
          your behalf. We request <strong>read-only</strong> access and never
          store your Google password. You can revoke access anytime from your
          <a href="https://myaccount.google.com/permissions" target="_blank" rel="noreferrer noopener">Google Account</a>.
        </p>
      </div>
    </section>
  </main>

  <script src="login.js"></script>
</body>
</html>
