<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Register – Collnetwork Technology</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --purple-deep:  #3b1f6e;
      --purple-mid:   #6b3fa0;
      --purple-light: #9b6dce;
      --green-vivid:  #22c55e;
      --green-mid:    #16a34a;
      --green-glow:   #4ade80;
      --white:        #ffffff;
      --off-white:    #f3eeff;
      --text-dark:    #1a0a3c;
      --text-muted:   #7c6fa0;
      --error:        #ef4444;
      --card-bg:      rgba(255,255,255,0.97);
    }

    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

    body {
      font-family: 'Nunito', sans-serif;
      min-height: 100vh;
      background: var(--purple-deep);
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
    }

    body::before {
      content:'';
      position:fixed; inset:0; z-index:0;
      background:
        radial-gradient(ellipse 80% 60% at 10% 10%,  rgba(107,63,160,0.6) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 90% 80%,  rgba(34,197,94,0.15) 0%, transparent 55%),
        radial-gradient(ellipse 100% 100% at 50% 50%, #2a1250 0%, #0d0620 100%);
      animation: bgPulse 8s ease-in-out infinite alternate;
    }
    @keyframes bgPulse { from{opacity:0.9} to{opacity:1} }

    .orb { position:fixed; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0; }
    .orb-1 { width:400px; height:400px; background:rgba(107,63,160,0.35); top:-100px; left:-100px; animation:float1 12s ease-in-out infinite; }
    .orb-2 { width:300px; height:300px; background:rgba(34,197,94,0.18);  bottom:-80px; right:-80px; animation:float2 10s ease-in-out infinite; }
    .orb-3 { width:200px; height:200px; background:rgba(155,109,206,0.2); top:50%; left:60%; animation:float3 14s ease-in-out infinite; }
    @keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,30px)} }
    @keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,-40px)} }
    @keyframes float3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-20px,25px)} }

    header {
      position:relative; z-index:10;
      display:flex; align-items:center; gap:14px;
      padding:16px 32px;
      background:rgba(59,31,110,0.7);
      backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(155,109,206,0.25);
    }
    .logo-badge {
      width:48px; height:48px;
      background:linear-gradient(135deg, var(--green-vivid) 0%, var(--purple-mid) 100%);
      border-radius:12px;
      display:flex; align-items:center; justify-content:center;
      box-shadow:0 4px 15px rgba(34,197,94,0.4);
      flex-shrink:0; overflow:hidden;
    }
    .logo-badge img { width:100%; height:100%; object-fit:contain; padding:6px; }
    .logo-text { font-size:19px; font-weight:800; color:white; letter-spacing:0.3px; }
    .logo-text span { color:var(--green-vivid); }

    .page-wrap {
      flex:1; position:relative; z-index:5;
      display:flex; align-items:center; justify-content:center;
      padding:32px 16px;
    }

    .card-container {
      width:100%; max-width:520px;
      animation:slideUp 0.6s cubic-bezier(0.22,1,0.36,1) forwards;
    }
    @keyframes slideUp {
      from { opacity:0; transform:translateY(30px); }
      to   { opacity:1; transform:translateY(0);    }
    }

    .card {
      background:var(--card-bg);
      border-radius:24px; overflow:hidden;
      box-shadow:0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(155,109,206,0.2);
    }

    .card-header {
      background:linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-mid) 100%);
      padding:28px 32px 24px; text-align:center;
      position:relative; overflow:hidden;
    }
    .card-header::before {
      content:''; position:absolute; inset:0;
      background:radial-gradient(ellipse 80% 80% at 50% 120%, rgba(34,197,94,0.25) 0%, transparent 70%);
    }
    .card-header-logo {
      width:70px; height:70px; background:white; border-radius:18px;
      margin:0 auto 12px;
      display:flex; align-items:center; justify-content:center;
      box-shadow:0 8px 24px rgba(0,0,0,0.3);
      position:relative; z-index:1; overflow:hidden;
    }
    .card-header-logo img { width:100%; height:100%; object-fit:contain; padding:8px; }
    .card-header-logo .logo-fallback {
      font-family:'Space Mono', monospace;
      font-weight:700; font-size:11px; text-align:center; line-height:1.3;
      background:linear-gradient(135deg, var(--green-vivid), var(--purple-mid));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    }
    .card-header h1 { position:relative; z-index:1; color:white; font-size:22px; font-weight:800; margin-bottom:4px; }
    .card-header p  { position:relative; z-index:1; color:rgba(255,255,255,0.75); font-size:14px; }

    .plan-badge {
      display:inline-flex; align-items:center; gap:8px;
      background:rgba(34,197,94,0.15); border:1px solid rgba(34,197,94,0.4);
      border-radius:50px; padding:6px 16px;
      margin-top:12px; position:relative; z-index:1;
    }
    .plan-badge .dot {
      width:8px; height:8px; border-radius:50%;
      background:var(--green-vivid); box-shadow:0 0 8px var(--green-glow);
      animation:pulse-dot 2s ease-in-out infinite;
    }
    @keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.4} }
    .plan-badge span { color:var(--green-vivid); font-size:13px; font-weight:700; }

    .card-body { padding:28px 32px 32px; }

    .flash-msg {
      padding:12px 16px; border-radius:10px;
      margin-bottom:20px; font-size:14px; font-weight:600;
    }
    .flash-msg.error   { background:#fef2f2; border:1px solid #fecaca; color:var(--error); }
    .flash-msg.success { background:#f0fdf4; border:1px solid #bbf7d0; color:var(--green-mid); }

    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

    .form-group { margin-bottom:18px; }
    .form-group label {
      display:block; font-size:12px; font-weight:700;
      color:var(--text-muted); text-transform:uppercase;
      letter-spacing:0.8px; margin-bottom:7px;
    }
    .input-wrap { position:relative; }
    .input-wrap .icon {
      position:absolute; left:14px; top:50%; transform:translateY(-50%);
      font-size:17px; pointer-events:none;
    }
    .input-wrap input {
      width:100%; padding:12px 16px 12px 42px;
      border:2px solid #e4d9f5; border-radius:12px;
      font-family:'Nunito', sans-serif;
      font-size:14px; font-weight:600;
      color:var(--text-dark); background:#faf7ff;
      transition:border-color 0.25s, box-shadow 0.25s, background 0.25s;
      outline:none;
    }
    .input-wrap input:focus {
      border-color:var(--purple-mid); background:white;
      box-shadow:0 0 0 4px rgba(107,63,160,0.12);
    }
    .input-wrap input::placeholder { color:#b8a9d4; font-weight:400; }

    .strength-bar { margin-top:6px; height:4px; border-radius:4px; background:#e4d9f5; overflow:hidden; }
    .strength-fill { height:100%; width:0%; border-radius:4px; transition:width 0.3s, background 0.3s; }

    /* ── Amount / Fee box ── */
    .amount-notice {
      border-radius:14px; padding:16px; margin-bottom:22px;
      background:linear-gradient(135deg, rgba(107,63,160,0.06), rgba(34,197,94,0.05));
      border:1px solid rgba(107,63,160,0.15);
    }
    .amount-top {
      display:flex; align-items:center; gap:14px; margin-bottom:12px;
    }
    .naira-big {
      font-family:'Space Mono', monospace;
      font-size:28px; font-weight:700;
      color:var(--purple-mid); white-space:nowrap;
    }
    .amount-desc { font-size:13px; color:var(--text-muted); line-height:1.5; }
    .amount-desc strong { color:var(--purple-deep); display:block; margin-bottom:2px; }

    .fee-breakdown {
      background:rgba(255,255,255,0.7);
      border:1px dashed rgba(107,63,160,0.2);
      border-radius:10px; padding:10px 14px;
    }
    .fee-row {
      display:flex; justify-content:space-between; align-items:center;
      font-size:13px; padding:4px 0; color:var(--text-muted);
    }
    .fee-row .val {
      font-family:'Space Mono', monospace;
      font-size:12px; font-weight:700;
    }
    .fee-row.total {
      border-top:1px solid rgba(107,63,160,0.2);
      margin-top:5px; padding-top:8px;
      font-weight:800; color:var(--purple-deep);
      font-size:14px;
    }
    .fee-row.total .val {
      font-size:14px; color:var(--purple-mid);
    }
    .fee-tag {
      font-size:10px; background:rgba(239,68,68,0.1);
      color:#dc2626; border-radius:4px; padding:1px 5px;
      font-weight:700; margin-left:6px;
    }

    .submit-btn {
      width:100%; padding:15px;
      background:linear-gradient(135deg, var(--green-mid) 0%, var(--green-vivid) 60%, var(--green-glow) 100%);
      color:white; border:none; border-radius:14px;
      font-family:'Nunito', sans-serif;
      font-size:16px; font-weight:800; letter-spacing:0.3px;
      cursor:pointer;
      box-shadow:0 6px 20px rgba(34,197,94,0.4);
      transition:transform 0.2s, box-shadow 0.2s;
      margin-top:6px; position:relative; overflow:hidden;
    }
    .submit-btn::after {
      content:''; position:absolute; inset:0;
      background:linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 100%);
    }
    .submit-btn:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(34,197,94,0.5); }
    .submit-btn:active { transform:translateY(0); }

    .links-row {
      text-align:center; margin-top:20px;
      font-size:13px; color:var(--text-muted);
    }
    .links-row a { color:var(--purple-mid); font-weight:700; text-decoration:none; transition:color 0.2s; }
    .links-row a:hover { color:var(--green-mid); }
    .links-row .sep { margin:0 10px; color:#d4c5e8; }

    .powered {
      text-align:center; margin-top:14px;
      font-size:11px; color:rgba(255,255,255,0.35); letter-spacing:0.5px;
    }

    footer {
      position:relative; z-index:10;
      background:rgba(59,31,110,0.7); backdrop-filter:blur(12px);
      border-top:1px solid rgba(155,109,206,0.25);
      padding:12px 32px;
      display:flex; justify-content:space-between; align-items:center;
      flex-wrap:wrap; gap:8px;
    }
    footer .ft { color:rgba(255,255,255,0.6); font-size:12px; }
    footer a.support {
      display:flex; align-items:center; gap:6px;
      background:rgba(255,255,255,0.1); padding:7px 16px; border-radius:20px;
      color:white; text-decoration:none; font-size:12px; font-weight:700;
      transition:background 0.2s;
    }
    footer a.support:hover { background:rgba(255,255,255,0.18); }

    @media(max-width:520px) {
      .form-row { grid-template-columns:1fr; }
      .card-body { padding:22px 20px 28px; }
      .card-header { padding:22px 20px 20px; }
    }
  </style>
</head>
<body>

  <div class="orb orb-1"></div>
  <div class="orb orb-2"></div>
  <div class="orb orb-3"></div>

  <header>
    <div class="logo-badge">
      <img src="/static/images/logo.png" alt="Logo"
           onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
      <span class="logo-fallback" style="display:none">COLL<br>NET</span>
    </div>
    <div class="logo-text">Collnetwork <span>Technology</span> LTD</div>
  </header>

  <div class="page-wrap">
    <div class="card-container">
      <div class="card">

        <div class="card-header">
          <div class="card-header-logo">
            <img src="/static/images/logo.png" alt="Collnetwork Logo"
                 onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">
            <div class="logo-fallback" style="display:none">COLL<br>NET</div>
          </div>
          <h1>Create Your Account</h1>
          <p>Get connected to fast, reliable internet</p>
          <div class="plan-badge">
            <div class="dot"></div>
            <span>₦3,000 · 30-Day Unlimited Access</span>
          </div>
        </div>

        <div class="card-body">

          {% with messages = get_flashed_messages(with_categories=true) %}
            {% for cat, msg in messages %}
              <div class="flash-msg {{ cat }}">{{ msg }}</div>
            {% endfor %}
          {% endwith %}

          <!-- Amount box with fee breakdown -->
          <div class="amount-notice">
            <div class="amount-top">
              <div class="naira-big">₦3,000</div>
              <div class="amount-desc">
                <strong>30-Day Internet Subscription</strong>
                You'll be redirected to Paystack to complete payment securely
              </div>
            </div>
            <div class="fee-breakdown">
              <div class="fee-row">
                <span>Internet subscription (30 days)</span>
                <span class="val">₦3,000</span>
              </div>
              
            </div>
          </div>

          <form method="POST" action="/submit" id="regForm">

            <div class="form-row">
              <div class="form-group">
                <label>First Name</label>
                <div class="input-wrap">
                  <span class="icon">👤</span>
                  <input type="text" name="first_name" placeholder="John" required autocomplete="given-name"/>
                </div>
              </div>
              <div class="form-group">
                <label>Surname</label>
                <div class="input-wrap">
                  <span class="icon">👤</span>
                  <input type="text" name="surname" placeholder="Doe" required autocomplete="family-name"/>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label>Email Address</label>
              <div class="input-wrap">
                <span class="icon">📧</span>
                <input type="email" name="email" placeholder="john@example.com" required autocomplete="email"/>
              </div>
            </div>

            <div class="form-group">
              <label>Phone Number</label>
              <div class="input-wrap">
                <span class="icon">📱</span>
                <input type="tel" name="phone" placeholder="08012345678" autocomplete="tel"/>
              </div>
            </div>

            <div class="form-group">
              <label>Password <span style="text-transform:none;font-weight:400">(used for WiFi login)</span></label>
              <div class="input-wrap">
                <span class="icon">🔒</span>
                <input type="password" name="password" id="passwordField"
                       placeholder="Choose a strong password" required autocomplete="new-password"
                       oninput="checkStrength(this.value)"/>
              </div>
              <div class="strength-bar"><div class="strength-fill" id="strengthFill"></div></div>
            </div>

            <button type="submit" class="submit-btn" id="submitBtn">
              💳 &nbsp;Proceed to Payment – ₦3,000
            </button>

          </form>

          <div class="links-row">
            <a href="/login">Already have an account? Login</a>
            <span class="sep">|</span>
            <a href="/forgot-password">Forgot Password?</a>
          </div>

        </div>
      </div>

      <div class="powered">Secured by Paystack &nbsp;·&nbsp; Powered by MikroTik RouterOS</div>
    </div>
  </div>

  <footer>
    <div class="ft">© 2025 Collnetwork Technology LTD · All rights reserved</div>
    <a class="support" href="https://customersupport.collnetwork.net" target="_blank">💬 Customer Support</a>
  </footer>

  <script>
    function checkStrength(val) {
      const fill = document.getElementById('strengthFill');
      let score = 0;
      if (val.length >= 6)  score++;
      if (val.length >= 10) score++;
      if (/[A-Z]/.test(val)) score++;
      if (/[0-9]/.test(val)) score++;
      if (/[^A-Za-z0-9]/.test(val)) score++;
      const pct   = (score / 5) * 100;
      const color = score <= 1 ? '#ef4444' : score <= 3 ? '#f59e0b' : '#22c55e';
      fill.style.width      = pct + '%';
      fill.style.background = color;
    }

    document.getElementById('regForm').addEventListener('submit', function() {
      const btn = document.getElementById('submitBtn');
      btn.disabled = true;
      btn.textContent = '⏳  Redirecting to payment…';
    });
  </script>
</body>
</html>