<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>LeadIntelligence AI — Register</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- === Minimal, self-contained CSS (no external deps) === -->
  <style>
    :root{
      --bg1:#6f79cf; --bg2:#6273c3; --bg3:#5a6db7;
      --ink:#0f172a; --muted:#475569;
      --primary:#6366f1; --primary-600:#4f46e5;
      --card:#ffffff; --line:#e5e7eb;
      --success:#10b981; --warn:#f59e0b; --danger:#ef4444;
      --radius:16px; --shadow:0 18px 45px rgba(2,6,23,.14);
    }

    /* Reset-ish */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;color:var(--ink);font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;background:linear-gradient(135deg,var(--bg1),var(--bg2) 50%,var(--bg3))}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}

    /* Header */
    .site-header{
      position:sticky;top:0;z-index:20;background:rgba(255,255,255,.85);backdrop-filter:saturate(140%) blur(8px);
      border-bottom:1px solid var(--line);
    }
    .nav{
      max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
      padding:10px 16px;
    }
    .brand{display:flex;align-items:center;gap:10px;font-weight:800}
    .brand-badge{
      width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#a78bfa,#6366f1);
      display:grid;place-items:center;color:white;font-size:14px;box-shadow:0 6px 16px rgba(99,102,241,.35)
    }
    .nav-links{display:flex;gap:18px}
    .nav a{color:#334155;font-weight:600;opacity:.95}
    .nav a:hover{color:var(--primary)}
    .nav-cta{display:flex;align-items:center;gap:12px}
    .btn{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:10px 14px;font-weight:700;border:1px solid transparent}
    .btn-plain{color:#334155}
    .btn-primary{background:linear-gradient(135deg,#7c83f8,#6366f1);color:#fff;box-shadow:0 8px 20px rgba(99,102,241,.35)}
    .btn-primary:hover{filter:brightness(.98)}

    /* Layout wrapper */
    .wrap{
      max-width:1120px;margin:0 auto;padding:28px 16px 32px;
      display:grid;grid-template-columns:1fr;gap:24px;
    }

    /* Auth section */
    .auth-slab{
      margin:14px auto 32px;max-width:820px;width:100%;
      background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
      overflow:hidden;border:1px solid #e6e9ef;
    }
    .auth-head{
      padding:22px 22px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#f8f9ff,#ffffff);
    }
    .auth-title{margin:0 0 6px;font-size:22px;letter-spacing:.2px}
    .auth-sub{margin:0;color:var(--muted)}
    .auth-sub a{color:var(--primary);font-weight:700}

    .auth-body{padding:22px}
    .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    @media (max-width:720px){.grid-2{grid-template-columns:1fr}}

    .label{font-weight:700;margin-bottom:6px;display:block}
    .req{color:#ef4444;margin-left:4px}
    .input, .radio-card{
      width:100%;border:1px solid #d9dee8;border-radius:12px;background:#fff;
      padding:12px 12px;font:inherit;outline:none
    }
    .input:focus{border-color:#b4baf0;box-shadow:0 0 0 3px rgba(99,102,241,.18)}
    .hint{color:#6b7280;font-size:12px;margin-top:6px}

    /* Account type cards */
    .type-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
    @media (max-width:560px){.type-grid{grid-template-columns:1fr}}
    .radio-card{
      position:relative;padding:14px 14px 14px 48px;cursor:pointer;display:grid;gap:4px
    }
    .radio-card .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:20px}
    .radio-card.selected{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.18)}
    .radio-card input{position:absolute;opacity:0;pointer-events:none}

    .company-box{border:1px dashed #c7cce0;border-radius:12px;padding:14px;margin-top:10px;background:#fafbff}
    .company-box.hidden{display:none}

    /* Password meter */
    .meter{height:8px;background:#eef2ff;border-radius:999px;overflow:hidden;margin-top:8px}
    .meter > span{display:block;height:100%;width:0%;background:linear-gradient(90deg,#f43f5e,#f59e0b,#10b981);transition:width .25s ease;border-radius:inherit}
    .meter-text{font-size:12px;color:#475569;margin-top:6px}

    /* Checkbox */
    .check{display:flex;gap:10px;align-items:flex-start}
    .check input{margin-top:2px;transform:scale(1.1)}
    .check a{color:var(--primary);font-weight:700}

    /* Submit */
    .actions{margin-top:14px}
    .btn-full{width:100%;padding:13px 16px;border-radius:12px;font-weight:800;background:linear-gradient(135deg,#7c83f8,#6366f1);color:#fff;border:0;box-shadow:0 10px 24px rgba(99,102,241,.35)}
    .btn-full:hover{filter:brightness(.98);cursor:pointer}

    /* Footer */
    .site-footer{
      color:#e7e9ffb5
    }
    .fwrap{max-width:1120px;margin:0 auto;padding:22px 16px 34px}
    .fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:18px}
    @media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
    @media (max-width:560px){.fgrid{grid-template-columns:1fr}}
    .fbrand{display:flex;align-items:center;gap:10px;font-weight:800;color:white}
    .fbrand .brand-badge{box-shadow:none}
    .fcol h4{margin:0 0 10px;color:#ffffff;font-weight:800}
    .fcol a{display:block;color:#e7e9ffb5;margin:6px 0}
    .fcol a:hover{color:white}
    .fbottom{border-top:1px solid rgba(255,255,255,.25);margin-top:18px;padding-top:14px;color:#e7e9ffb5}
  </style>
</head>
<body>

  <!-- HEADER -->
  <header class="site-header">
    <div class="nav">
      <a class="brand" href="/lead-management/public/">
        <span class="brand-badge">🧠</span>
        <span>LeadIntelligence AI</span>
      </a>

      <nav class="nav-links" aria-label="Primary">
        <a href="/lead-management/public/#features">Features</a>
        <a href="/lead-management/public/#pricing">Pricing</a>
        <a href="/lead-management/public/#about">About</a>
      </nav>

      <div class="nav-cta">
        <a class="btn btn-plain" href="/lead-management/public/login">Sign In</a>
        <a class="btn btn-primary" href="/lead-management/public/register">Get Started Free</a>
      </div>
    </div>
  </header>

  <!-- CONTENT -->
  <main class="wrap" role="main">
    <section class="auth-slab">
      <div class="auth-head">
        <h1 class="auth-title">Create your account</h1>
        <p class="auth-sub">Or <a href="/lead-management/public/login">sign in to your existing account</a></p>
      </div>

      <div class="auth-body">
        <!-- IMPORTANT: same action + names/ids as your existing flow -->
        <form action="/lead-management/public/register" method="post" id="registerForm" novalidate>
          
          <!-- Account Type -->
          <label class="label">Account Type <span class="req">*</span></label>
          <div class="type-grid" id="typeGrid">
            <label class="radio-card selected" data-type="individual">
              <span class="icon">👤</span>
              <strong>Individual Account</strong>
              <small class="muted">For personal use</small>
              <input type="radio" name="account_type" value="individual" id="account_type_individual" checked />
            </label>
            <label class="radio-card" data-type="company">
              <span class="icon">🏢</span>
              <strong>Business Account</strong>
              <small class="muted">For teams & organizations</small>
              <input type="radio" name="account_type" value="company" id="account_type_company" />
            </label>
          </div>

          <!-- Company -->
          <div id="company-field" class="company-box hidden" aria-live="polite">
            <h4 style="margin:0 0 8px">🏢 Company Information</h4>
            <label for="company_name" class="label">Company Name <span id="company-required" class="req" style="display:none">*</span></label>
            <input class="input" id="company_name" name="company_name" type="text" placeholder="Enter your company name" />
          </div>

          <!-- Name -->
          <div class="grid-2" style="margin-top:12px">
            <div>
              <label for="first_name" class="label">First Name <span class="req">*</span></label>
              <input class="input" id="first_name" name="first_name" type="text" placeholder="Enter your first name" required />
            </div>
            <div>
              <label for="last_name" class="label">Last Name <span class="req">*</span></label>
              <input class="input" id="last_name" name="last_name" type="text" placeholder="Enter your last name" required />
            </div>
          </div>

          <!-- Email -->
          <div style="margin-top:12px">
            <label for="email" class="label">Email Address <span class="req">*</span></label>
            <input class="input" id="email" name="email" type="email" placeholder="Enter your email address" required />
            <div class="hint">We'll send a verification email to this address</div>
          </div>

          <!-- Password -->
          <div style="margin-top:12px">
            <label for="password" class="label">Password <span class="req">*</span></label>
            <input class="input" id="password" name="password" type="password" placeholder="Create a secure password" required />
            <div class="meter"><span id="pwMeter"></span></div>
            <div class="meter-text" id="pwText">Password strength: —</div>
            <div class="hint">Minimum 8 characters with letters and numbers</div>
          </div>

          <!-- Confirm -->
          <div style="margin-top:12px">
            <label for="confirm_password" class="label">Confirm Password <span class="req">*</span></label>
            <input class="input" id="confirm_password" name="confirm_password" type="password" placeholder="Confirm your password" required />
          </div>

          <!-- Terms -->
          <div class="check" style="margin-top:12px">
            <input type="checkbox" id="agree_terms" name="agree_terms" required />
            <label for="agree_terms">I agree to the <a href="/lead-management/public/terms">Terms of Service</a> and <a href="/lead-management/public/privacy">Privacy Policy</a></label>
          </div>

          <!-- Submit -->
          <div class="actions">
            <button type="submit" class="btn-full">Create Account</button>
          </div>

          <p class="hint" style="margin-top:10px">
            Already have an account? <a href="/lead-management/public/login" style="color:var(--primary);font-weight:800">Sign in</a>
          </p>
        </form>
      </div>
    </section>
  </main>

  <!-- FOOTER -->
  <footer class="site-footer">
    <div class="fwrap">
      <div class="fgrid">
        <div class="fbrand">
          <span class="brand-badge">🧠</span>
          <span>LeadIntelligence AI</span>
        </div>
        <div class="fcol">
          <h4>Product</h4>
          <a href="/lead-management/public/#features">Features</a>
          <a href="/lead-management/public/#pricing">Pricing</a>
          <a href="/lead-management/public/integrations">Integrations</a>
        </div>
        <div class="fcol">
          <h4>Company</h4>
          <a href="/lead-management/public/about">About</a>
          <a href="/lead-management/public/blog">Blog</a>
          <a href="/lead-management/public/careers">Careers</a>
        </div>
        <div class="fcol">
          <h4>Support</h4>
          <a href="#">Documentation</a>
          <a href="/lead-management/public/contact">Contact</a>
          <a href="/lead-management/public/status">Status</a>
        </div>
      </div>
      <div class="fbottom">© 2025 LeadIntelligence AI. All rights reserved.</div>
    </div>
  </footer>

  <!-- === Lightweight JS (keeps existing flow/IDs) === -->
  <script>
    (function(){
      // Account type toggle (cards + required company field)
      const grid = document.getElementById('typeGrid');
      const companyBox = document.getElementById('company-field');
      const companyInput = document.getElementById('company_name');
      const companyReq = document.getElementById('company-required');

      function selectType(type){
        document.querySelectorAll('.radio-card').forEach(c=>{
          c.classList.toggle('selected', c.dataset.type===type);
          const input = c.querySelector('input[type="radio"]');
          input.checked = c.dataset.type===type;
        });
        const isCompany = type === 'company';
        companyBox.classList.toggle('hidden', !isCompany);
        companyInput.required = isCompany;
        companyReq.style.display = isCompany ? 'inline' : 'none';
        if(!isCompany){ companyInput.value=''; }
      }

      grid.addEventListener('click', (e)=>{
        const card = e.target.closest('.radio-card');
        if(card) selectType(card.dataset.type);
      });

      // Init with current
      selectType(document.querySelector('input[name="account_type"]:checked')?.value || 'individual');

      // Password strength meter
      const pw = document.getElementById('password');
      const bar = document.getElementById('pwMeter');
      const txt = document.getElementById('pwText');
      pw.addEventListener('input', ()=>{
        const v = pw.value;
        let s = 0;
        if (v.length >= 8) s++;
        if (/[a-z]/.test(v)) s++;
        if (/[A-Z]/.test(v)) s++;
        if (/[0-9]/.test(v)) s++;
        if (/[^a-zA-Z0-9]/.test(v)) s++;

        const widths = ['0%','25%','50%','75%','100%','100%'];
        bar.style.width = widths[s];

        const labels = ['—','Weak','Medium','Strong','Very Strong','Very Strong'];
        txt.textContent = 'Password strength: ' + labels[s];

        // color shift (weak→warn→success)
        bar.style.background = s < 2 ? '#f43f5e'
                             : s < 3 ? '#f59e0b'
                                     : '#10b981';
      });

      // Simple client-side check for company name on company type
      document.getElementById('registerForm').addEventListener('submit', (e)=>{
        const type = document.querySelector('input[name="account_type"]:checked')?.value || 'individual';
        if (type === 'company' && !companyInput.value.trim()){
          e.preventDefault();
          companyInput.focus();
          alert('Please enter your company name for business accounts.');
        }
      });
    })();
  </script>
</body>
</html>
