<?php
declare(strict_types=1);

use Shared\DB;
use App\Services\Mailer;

// ─────────────────────────────────────────────────────────────
// Helper: HTML escape
// ─────────────────────────────────────────────────────────────
$h = static fn($v) => htmlspecialchars((string)$v, ENT_QUOTES, 'UTF-8');

// ─────────────────────────────────────────────────────────────
// Config: where CP gets trial notifications
// ─────────────────────────────────────────────────────────────
const CP_EMAIL   = 'askklinflow@gmail.com';   // Control Panel / team inbox
const FROM_EMAIL = 'no-reply@klinflow.com';   // domain email (SPF/DKIM)

// ─────────────────────────────────────────────────────────────
// Helper functions
// ─────────────────────────────────────────────────────────────
function pdo(): PDO {
    return DB::pdo();
}

function normalise_slug(string $slug): string {
    $slug = strtolower(trim($slug));
    $slug = preg_replace('/[^a-z0-9-]+/', '-', $slug) ?? '';
    $slug = preg_replace('/-+/', '-', $slug) ?? '';
    return trim($slug, '-');
}

function reserved_slugs(): array {
    return [
        'www','web','app','apps','api','cp','admin','root','system',
        'tenant','login','signup','pricing','public','static','assets'
    ];
}

function slug_taken(string $slug): ?string {
    $pdo = pdo();

    // Existing organizations
    $stmt = $pdo->prepare('SELECT id FROM cp_organizations WHERE slug = :slug LIMIT 1');
    $stmt->execute(['slug' => $slug]);
    if ($stmt->fetchColumn()) {
        return 'taken';
    }

    // Pending signups
    try {
        $stmt2 = $pdo->prepare('SELECT id FROM cp_trial_signups WHERE slug = :slug LIMIT 1');
        $stmt2->execute(['slug' => $slug]);
        if ($stmt2->fetchColumn()) {
            return 'pending';
        }
    } catch (Throwable $e) {
        // If cp_trial_signups not yet created, ignore
    }

    return null; // available
}

/**
 * Notify KlinFlow CP that a new trial signup was created.
 */
function notify_cp(
    int $signupId,
    string $company,
    string $slug,
    string $contactName,
    string $email,
    array $modules,
    string $notes,
    string $ip,
    string $ua
): void {
    $to      = CP_EMAIL;
    $subject = "[KlinFlow • Trial Signup] {$company} ({$slug})";
    $from    = FROM_EMAIL;

    $mods      = $modules ? implode(', ', $modules) : '(none)';
    $notesText = $notes !== '' ? $notes : '(no additional notes)';

    $body = "New trial signup received:\n\n"
          . "Signup ID: {$signupId}\n"
          . "Company:   {$company}\n"
          . "Slug:      {$slug}\n"
          . "Contact:   {$contactName}\n"
          . "Email:     {$email}\n"
          . "Modules:   {$mods}\n"
          . "Notes:     {$notesText}\n\n"
          . "IP:        {$ip}\n"
          . "User-Agent:\n{$ua}\n\n"
          . "Next steps (manual):\n"
          . "1) Validate the org and contact.\n"
          . "2) Create cp_organizations row with slug='{$slug}'.\n"
          . "3) Create tenant user using stored password_hash from cp_trial_signups.\n"
          . "4) Enable requested modules in Control Panel.\n";

    $headers  = "From: KlinFlow Trials <{$from}>\r\n";
    $headers .= "Reply-To: {$email}\r\n";
    $headers .= "Content-Type: text/plain; charset=UTF-8\r\n";

    @mail($to, $subject, $body, $headers);
}

/**
 * Send a “we got your trial request” email to the requester,
 * using the unified App\Services\Mailer.
 */
function send_trial_welcome_email(
    string $toEmail,
    string $contactName,
    string $company,
    string $slug,
    array $modules
): void {
    try {
        $mailer = new Mailer();

        $safeName = trim($contactName) !== ''
            ? $contactName
            : ucfirst((string)strtok((string)$toEmail, '@'));

        $scheme = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http';
        $host   = $_SERVER['HTTP_HOST'] ?? 'klinflow.com';
        $base   = $scheme.'://'.$host;

        $logoUrl      = $base . '/assets/img/logo/klinflow.png';
        $brandColor   = '#228B22';
        $modulesLabel = $modules ? implode(', ', $modules) : '(no modules selected)';
        $tenantUrl    = $base . '/t/' . rawurlencode($slug) . '/dashboard';

        ob_start();
        ?>
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Your KlinFlow trial request</title>
    <meta name="x-apple-disable-message-reformatting">
    <meta name="color-scheme" content="light only">
    <style>
      body { margin:0; padding:0; background:#f6f9fc; }
      img { border:0; outline:none; text-decoration:none; display:block; }
      a { text-decoration:none; }
      .btn a { color:#ffffff !important; }
    </style>
  </head>
  <body style="margin:0; padding:24px; background:#f6f9fc;">
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
        <td align="center">
          <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="640" style="max-width:640px; width:100%;">
            <!-- Header -->
            <tr>
              <td style="padding:0;">
                <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tr>
                    <td width="60%" align="left" style="padding:16px 16px 16px 20px; background:#ffffff; border:1px solid #eef2f7; border-bottom:none; border-radius:16px 0 0 0;">
                      <img src="<?= htmlspecialchars($logoUrl, ENT_QUOTES, 'UTF-8') ?>" alt="KlinFlow" width="148" style="height:32px; width:auto;">
                    </td>
                    <td width="40%" align="right" style="padding:0; background:<?= $brandColor ?>; border:1px solid #eef2f7; border-left:none; border-bottom:none; border-radius:0 16px 0 0;">
                      <div style="height:64px; line-height:64px; font-size:0;">&nbsp;</div>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>

            <!-- Card body -->
            <tr>
              <td style="background:#ffffff; border:1px solid #eef2f7; border-top:none; border-bottom:none; padding:24px 20px;">
                <h1 style="margin:0 0 8px 0; font-family:Inter,Arial,Helvetica,sans-serif; font-size:22px; line-height:1.3; color:#111827;">
                  Thank you for your KlinFlow trial request
                </h1>
                <div style="font-family:Inter,Arial,Helvetica,sans-serif; color:#111827; font-size:15px; line-height:1.6;">
                  <p style="margin:12px 0;">Dear <?= htmlspecialchars($safeName, ENT_QUOTES, 'UTF-8') ?>,</p>

                  <p style="margin:12px 0;">
                    We’ve received your request to create a KlinFlow trial tenant for
                    <strong><?= htmlspecialchars($company, ENT_QUOTES, 'UTF-8') ?></strong>.
                  </p>

                  <p style="margin:12px 0;">
                    <strong>Requested tenant slug:</strong>
                    <span style="font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;">
                      /t/<?= htmlspecialchars($slug, ENT_QUOTES, 'UTF-8') ?>/apps/pos
                    </span>
                  </p>

                  <!-- Modules box -->
                  <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:16px 0; background:#f9fafb; border:1px solid #eef2f7; border-radius:12px;">
                    <tr>
                      <td style="padding:14px 16px;">
                        <p style="margin:0 0 4px 0; font-size:14px;">
                          <strong>Modules you requested:</strong>
                        </p>
                        <p style="margin:0; font-size:14px; color:#4b5563;">
                          <?= htmlspecialchars($modulesLabel, ENT_QUOTES, 'UTF-8') ?>
                        </p>
                      </td>
                    </tr>
                  </table>

                  <p style="margin:12px 0;">
                    <strong>What happens next:</strong>
                  </p>
                  <ul style="margin:8px 0 16px 20px; padding:0; color:#4b5563; font-size:14px;">
                    <li style="margin:4px 0;">Our team will review your request and validate the details.</li>
                    <li style="margin:4px 0;">We’ll provision your tenant and initial admin user.</li>
                    <li style="margin:4px 0;">You’ll receive another welcome email with your login link and password once everything is ready.</li>
                  </ul>

                  <!-- CTA -->
                  <table role="presentation" cellpadding="0" cellspacing="0" border="0" class="btn" style="margin:18px 0;">
                    <tr>
                      <td align="center" bgcolor="<?= $brandColor ?>" style="border-radius:12px;">
                        <a href="<?= htmlspecialchars($base.'/pricing', ENT_QUOTES, 'UTF-8') ?>"
                           style="display:inline-block; padding:12px 20px; font-weight:700; font-size:14px; font-family:Inter,Arial,Helvetica,sans-serif; color:#ffffff; background:<?= $brandColor ?>; border-radius:12px;">
                          Explore KlinFlow pricing & modules
                        </a>
                      </td>
                    </tr>
                  </table>

                  <p style="margin:12px 0; font-size:13px; color:#6b7280;">
                    Once your tenant is activated, your dashboard will be available at:<br>
                    <a href="<?= htmlspecialchars($tenantUrl, ENT_QUOTES, 'UTF-8') ?>" style="color:#2563eb;">
                      <?= htmlspecialchars($tenantUrl, ENT_QUOTES, 'UTF-8') ?>
                    </a>
                  </p>

                  <p style="margin:18px 0 0 0;">— Team KlinFlow</p>
                </div>
              </td>
            </tr>

            <!-- Footer -->
            <tr>
              <td style="background:#ffffff; border:1px solid #eef2f7; border-top:none; border-radius:0 0 16px 16px; padding:16px 20px;">
                <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tr>
                    <td valign="top" style="font-family:Inter,Arial,Helvetica,sans-serif; font-size:12px; color:#6b7280;">
                      <strong>KlinFlow</strong><br>
                      House 12, Road 34, Gulshan, Dhaka 1212<br>
                      <a href="mailto:support@klinflow.com" style="color:#2563eb;">support@klinflow.com</a> ·
                      <a href="<?= htmlspecialchars($base, ENT_QUOTES, 'UTF-8') ?>" style="color:#2563eb;"><?= htmlspecialchars($host, ENT_QUOTES, 'UTF-8') ?></a>
                    </td>
                    <td align="right" valign="top" style="font-family:Inter,Arial,Helvetica,sans-serif; font-size:12px; color:#6b7280;">
                      © <?= date('Y') ?> KlinFlow. All rights reserved.
                    </td>
                  </tr>
                </table>
              </td>
            </tr>

          </table>
        </td>
      </tr>
    </table>
  </body>
</html>
        <?php
        $html = (string)ob_get_clean();

        $text = "Dear {$safeName},\n\n"
              . "We’ve received your request to create a KlinFlow trial tenant for {$company}.\n"
              . "Requested slug: {$slug}\n"
              . "Modules: {$modulesLabel}\n\n"
              . "Our team will review your request and provision your tenant. "
              . "You’ll receive another email with your login link and password once everything is ready.\n\n"
              . "— Team KlinFlow";

        $subject = "Your KlinFlow trial request for {$company}";

        // use the 'welcome' sender profile
        $mailer->sendWelcome($toEmail, $subject, $html, $text);
    } catch (\Throwable $e) {
        error_log('[signup] trial welcome mail failed: '.$e->getMessage());
    }
}

// ─────────────────────────────────────────────────────────────
// Handle POST
// ─────────────────────────────────────────────────────────────
$errors  = [];
$success = false;

// Keep old values for sticky form
$old = [
    'company' => '',
    'slug'    => '',
    'name'    => '',
    'email'   => '',
    'notes'   => '',
    'modules' => [],
];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $company       = trim((string)($_POST['company'] ?? ''));
    $slugRaw       = (string)($_POST['slug'] ?? '');
    $slug          = normalise_slug($slugRaw);
    $contactName   = trim((string)($_POST['name'] ?? ''));
    $email         = trim((string)($_POST['email'] ?? ''));
    $passwordPlain = (string)($_POST['password'] ?? '');
    $confirm       = (string)($_POST['confirm'] ?? '');
    $modules       = isset($_POST['modules']) && is_array($_POST['modules']) ? array_values($_POST['modules']) : [];
    $notes         = trim((string)($_POST['notes'] ?? ''));
    $termsAccepted = isset($_POST['terms']);
    $source        = 'public-trial-signup';

    $old = [
        'company' => $company,
        'slug'    => $slug,
        'name'    => $contactName,
        'email'   => $email,
        'notes'   => $notes,
        'modules' => $modules,
    ];

    // Validation
    if ($company === '') {
        $errors['company'] = 'Company/organization is required.';
    }

    if ($slug === '') {
        $errors['slug'] = 'Slug is required.';
    } elseif (strlen($slug) < 3) {
        $errors['slug'] = 'Slug must be at least 3 characters.';
    } elseif (strlen($slug) > 40) {
        $errors['slug'] = 'Slug may not exceed 40 characters.';
    } elseif (in_array($slug, reserved_slugs(), true)) {
        $errors['slug'] = 'This slug is reserved by KlinFlow.';
    } else {
        $status = slug_taken($slug);
        if ($status === 'taken') {
            $errors['slug'] = 'This slug is already in use by an existing tenant.';
        } elseif ($status === 'pending') {
            $errors['slug'] = 'A trial request already exists for this slug.';
        }
    }

    if ($contactName === '') {
        $errors['name'] = 'Your name is required.';
    }

    if ($email === '' || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors['email'] = 'A valid email address is required.';
    }

    if ($passwordPlain === '' || strlen($passwordPlain) < 8) {
        $errors['password'] = 'Password must be at least 8 characters.';
    }

    if ($confirm === '' || $confirm !== $passwordPlain) {
        $errors['confirm'] = 'Passwords must match.';
    }

    if (count($modules) === 0) {
        $errors['modules'] = 'Please select at least one module.';
    }

    if (!$termsAccepted) {
        $errors['terms'] = 'You must accept the terms to continue.';
    }

    if (!$errors) {
        $pdo = pdo();

        $passwordHash = password_hash($passwordPlain, PASSWORD_DEFAULT);
        $ip           = $_SERVER['REMOTE_ADDR']     ?? '';
        $ua           = $_SERVER['HTTP_USER_AGENT'] ?? '';

        try {
            $stmt = $pdo->prepare(
                'INSERT INTO cp_trial_signups
                   (company, slug, contact_name, email, password_hash, modules, notes,
                    source, created_at, ip_address, user_agent, status)
                 VALUES
                   (:company, :slug, :contact_name, :email, :password_hash, :modules, :notes,
                    :source, NOW(), :ip, :ua, :status)'
            );
            $stmt->execute([
                'company'       => $company,
                'slug'          => $slug,
                'contact_name'  => $contactName,
                'email'         => $email,
                'password_hash' => $passwordHash,
                'modules'       => json_encode($modules, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE),
                'notes'         => $notes,
                'source'        => $source,
                'ip'            => $ip,
                'ua'            => $ua,
                'status'        => 'pending',
            ]);
            $signupId = (int)$pdo->lastInsertId();

            // Notify CP team inbox
            notify_cp($signupId, $company, $slug, $contactName, $email, $modules, $notes, $ip, $ua);

            // Send confirmation email to requester
            send_trial_welcome_email($email, $contactName, $company, $slug, $modules);

            $success = true;
            // Reset sensitive fields
            $old['password'] = '';
            $old['confirm']  = '';
        } catch (Throwable $e) {
            error_log('[signup] save failed: '.$e->getMessage());
            $errors['__global'] = 'Failed to save your request. Please try again later.';
        }
    }
}
?>
<!DOCTYPE html>
<html lang="en" class="h-full scroll-smooth">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  
  <title>Start your 14-day Free Trial — KlinFlow</title>
  <meta name="description" content="Create your KlinFlow tenant and request a trial for POS, Distribution, HotelFlow, MedFlow, School and more. Slug-based, not sub-domain.">
  <meta name="theme-color" content="#10b981" />
  <link rel="icon" type="image/png" href="/assets/img/logo/favicon.png" />
  <link rel="apple-touch-icon" href="/assets/img/logo/favicon.png" />

  <!-- Tailwind CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
          animation: {
            'float': 'float 6s ease-in-out infinite',
            'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
          },
          keyframes: {
            float: {
              '0%, 100%': { transform: 'translateY(0px)' },
              '50%': { transform: 'translateY(-20px)' },
            },
          },
        },
      },
    }
  </script>

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
  
  <!-- Google Fonts -->
  <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=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
  
  <!-- Global Styles -->
  <link rel="stylesheet" href="/assets/css/styles.css" />

  <style>
    /* Specific styles for signup */
    .glass-input {
      background: rgba(255, 255, 255, 0.5);
      border: 1px solid #e5e7eb;
    }
    .dark .glass-input {
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: white;
    }
    .glass-input:focus {
      border-color: #10b981;
      ring: 2px solid #10b981;
      background: white;
    }
    .dark .glass-input:focus {
      background: rgba(0, 0, 0, 0.4);
    }

    .check-card {
      transition: all 0.2s;
      cursor: pointer;
    }
    .check-card:hover {
      border-color: #10b981;
      background: rgba(16, 185, 129, 0.05);
    }
    .check-card.checked {
      border-color: #10b981;
      background: rgba(16, 185, 129, 0.1);
    }
    .dark .check-card.checked {
      background: rgba(16, 185, 129, 0.2);
    }
    .gradient-text {
      background: linear-gradient(135deg, #10b981 0%, #3b82f6 50%, #8b5cf6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .blob {
      position: absolute;
      filter: blur(80px);
      z-index: 0;
      opacity: 0.4;
    }
  </style>
</head>

<body class="font-sans antialiased bg-gray-50 dark:bg-slate-900 text-gray-900 dark:text-gray-100 overflow-x-hidden transition-colors duration-300">

  <a href="#main" class="sr-only focus:not-sr-only focus-ring fixed left-4 top-4 z-50 bg-white text-gray-900 rounded px-3 py-2 shadow-lg">Skip to main</a>

  <!-- ==================== HEADER ==================== -->
  <header class="fixed top-0 w-full bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl border-b border-gray-200 dark:border-white/10 z-50 transition-colors duration-300">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16 sm:h-20">
        <a href="/" class="flex items-center gap-3 focus-ring rounded-lg p-1" aria-label="KlinFlow Home">
          <img src="/assets/img/logo/klinflow.png" alt="KlinFlow Logo" class="h-8 sm:h-10 w-auto dark:brightness-0 dark:invert" loading="eager">
        </a>

        <!-- Desktop Nav -->
        <nav class="hidden md:flex items-center gap-1" aria-label="Main Navigation">
          <a href="/about" class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 transition focus-ring">About</a>
          <a href="/pricing" class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 transition focus-ring">Pricing</a>
          <a href="/why" class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 transition focus-ring">Why KlinFlow</a>
          <a href="/contact" class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 transition focus-ring">Contact</a>
          <a href="/ticket" class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 transition focus-ring">Support</a>
        </nav>

        <div class="hidden md:flex items-center gap-3">
          <!-- Theme Toggle Button -->
          <button class="theme-toggle focus-ring w-10 h-10 rounded-xl bg-gray-100 dark:bg-white/10 flex items-center justify-center text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-white/20 transition" aria-label="Toggle theme">
            <svg class="w-5 h-5 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
            </svg>
            <svg class="w-5 h-5 block dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
            </svg>
          </button>
          
          <a href="/tenant/login" class="focus-ring inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold text-white bg-gray-900 dark:bg-white/10 dark:text-white rounded-xl hover:bg-gray-800 dark:hover:bg-white/20 transition">
            Sign In
          </a>
        </div>

        <!-- Mobile Toggle -->
        <div class="flex md:hidden items-center gap-2">
          <button class="theme-toggle focus-ring w-10 h-10 rounded-xl bg-gray-100 dark:bg-white/10 flex items-center justify-center text-gray-600 dark:text-gray-300" aria-label="Toggle theme">
            <svg class="w-5 h-5 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
            </svg>
            <svg class="w-5 h-5 block dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
            </svg>
          </button>
          <button id="nav-toggle" class="focus-ring p-2 rounded-lg text-gray-700 dark:text-white hover:bg-gray-100 dark:hover:bg-white/10" aria-label="Toggle mobile menu" aria-expanded="false" aria-controls="mobile-menu">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </header>

  <!-- ==================== OFFCANVAS MOBILE MENU ==================== -->
  <div id="mobile-menu" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden" role="dialog" aria-modal="true" aria-label="Mobile Navigation">
    <aside class="absolute top-0 right-0 w-72 h-full bg-white dark:bg-slate-900 shadow-2xl flex flex-col transition-transform duration-300">
      <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-white/10">
        <span class="font-semibold text-gray-900 dark:text-white">Menu</span>
        <button id="nav-close" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-white/10 text-gray-700 dark:text-white focus-ring" aria-label="Close mobile menu">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <nav class="p-4 space-y-2 flex-1 overflow-y-auto" aria-label="Mobile menu links">
        <a href="/about" class="block px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-white/10 text-gray-700 dark:text-gray-300">About</a>
        <a href="/pricing" class="block px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-white/10 text-emerald-600 dark:text-emerald-400 font-semibold">Pricing</a>
        <a href="/why" class="block px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-white/10 text-gray-700 dark:text-gray-300">Why KlinFlow</a>
        <a href="/contact" class="block px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-white/10 text-gray-700 dark:text-gray-300">Contact</a>
        <a href="/ticket" class="block px-4 py-3 rounded-lg hover:bg-gray-100 dark:hover:bg-white/10 text-gray-700 dark:text-gray-300">Support</a>
        <div class="pt-4 space-y-2 border-t border-gray-200 dark:border-white/10 mt-4">
          <a href="/tenant/login" class="block w-full text-center px-4 py-3 bg-gray-900 dark:bg-white/10 text-white rounded-xl font-semibold hover:bg-gray-800 dark:hover:bg-white/20">Sign In</a>
        </div>
      </nav>
    </aside>
  </div>

  <!-- ==================== MAIN CONTENT ==================== -->
  <main id="main" class="relative pt-24 pb-12 lg:pt-32 min-h-screen flex items-center justify-center">
    
    <!-- Background Blobs -->
    <div class="blob bg-emerald-500 w-96 h-96 rounded-full top-20 left-10 animate-float" aria-hidden="true"></div>
    <div class="blob bg-blue-500 w-80 h-80 rounded-full bottom-20 right-10 animate-float" style="animation-delay: -3s" aria-hidden="true"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full relative z-10 reveal">
      <div class="grid lg:grid-cols-5 gap-12 lg:gap-20 items-start">
        
        <!-- LEFT COLUMN: Marketing -->
        <div class="lg:col-span-2 space-y-8 pt-10">
          <!-- Badge -->
          <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-100 dark:bg-emerald-500/20 text-emerald-700 dark:text-emerald-400 text-xs font-semibold ring-1 ring-emerald-500/20">
            <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" aria-hidden="true"></span>
            14-Day Free Trial
          </div>

          <h1 class="text-4xl sm:text-5xl font-extrabold text-gray-900 dark:text-white leading-tight">
            Start your journey with <span class="gradient-text">KlinFlow</span>
          </h1>
          
          <p class="text-lg text-gray-600 dark:text-gray-400">
            Join 100+ businesses running on Bangladesh's most advanced multi-tenant ERP platform. No credit card required.
          </p>

          <!-- Benefits List -->
          <ul class="space-y-4">
            <li class="flex items-center gap-3">
              <div class="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-100 dark:bg-emerald-500/20 flex items-center justify-center text-emerald-600 dark:text-emerald-400" aria-hidden="true">
                <i class="fa-solid fa-check text-xs"></i>
              </div>
              <span class="text-gray-700 dark:text-gray-300">Access to all premium modules</span>
            </li>
            <li class="flex items-center gap-3">
              <div class="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-100 dark:bg-emerald-500/20 flex items-center justify-center text-emerald-600 dark:text-emerald-400" aria-hidden="true">
                <i class="fa-solid fa-check text-xs"></i>
              </div>
              <span class="text-gray-700 dark:text-gray-300">Dedicated slug (your-org.klinflow.com)</span>
            </li>
            <li class="flex items-center gap-3">
              <div class="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-100 dark:bg-emerald-500/20 flex items-center justify-center text-emerald-600 dark:text-emerald-400" aria-hidden="true">
                <i class="fa-solid fa-check text-xs"></i>
              </div>
              <span class="text-gray-700 dark:text-gray-300">Priority local support</span>
            </li>
          </ul>

          <!-- Testimonial / Trust -->
          <div class="pt-8 border-t border-gray-200 dark:border-white/10">
            <p class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">Trusted by</p>
            <div class="flex flex-wrap gap-6 opacity-60 grayscale dark:invert" aria-hidden="true">
               <!-- Placeholders for partner logos -->
               <div class="h-8 w-24 bg-gray-300 dark:bg-white/20 rounded"></div>
               <div class="h-8 w-24 bg-gray-300 dark:bg-white/20 rounded"></div>
               <div class="h-8 w-24 bg-gray-300 dark:bg-white/20 rounded"></div>
            </div>
          </div>
        </div>


        <!-- RIGHT COLUMN: Form -->
        <div class="lg:col-span-3">
          <div class="glass p-6 sm:p-8 rounded-3xl shadow-2xl dark:shadow-emerald-500/10 border border-gray-200 dark:border-white/10 relative overflow-hidden">
             
            <!-- Success Message -->
            <?php if ($success): ?>
              <div class="mb-6 p-4 rounded-xl bg-emerald-50 dark:bg-emerald-500/20 border border-emerald-200 dark:border-emerald-500/30 text-emerald-800 dark:text-emerald-200 flex gap-3">
                <i class="fa-solid fa-circle-check mt-1" aria-hidden="true"></i>
                <div>
                  <h3 class="font-bold">Request Sent!</h3>
                  <p class="text-sm mt-1">Check your email for login details. We will activate your tenant shortly.</p>
                </div>
              </div>
            <?php endif; ?>

            <form method="POST" class="space-y-6" novalidate>
              
              <!-- SECTION 1: Organization Infos -->
              <div class="grid sm:grid-cols-2 gap-5">
                <!-- Company Name -->
                <div class="sm:col-span-2">
                  <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5" for="company">Company / Organization Name</label>
                  <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400" aria-hidden="true">
                      <i class="fa-solid fa-building"></i>
                    </div>
                    <input type="text" id="company" name="company" required value="<?= $h($old['company']) ?>" placeholder="e.g. Acme Corp" 
                           class="glass-input focus-ring w-full pl-10 pr-4 py-3 rounded-xl outline-none transition <?= isset($errors['company']) ? 'border-red-500' : '' ?>">
                  </div>
                   <?php if (isset($errors['company'])): ?> <p class="text-xs text-red-500 mt-1"><?= $h($errors['company']) ?></p> <?php endif; ?>
                </div>

                <!-- Slug -->
                <div class="sm:col-span-2">
                  <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5" for="slug">Tenant URL (Slug)</label>
                  <div class="flex items-center rounded-xl overflow-hidden glass-input transition focus-within:ring-2 focus-within:ring-emerald-500 <?= isset($errors['slug']) ? 'border-red-500' : '' ?>">
                    <span class="pl-4 pr-2 py-3 bg-gray-50/50 dark:bg-white/5 text-gray-500 border-r border-gray-200 dark:border-white/10 text-sm font-mono whitespace-nowrap">
                      klinflow.com/t/
                    </span>
                    <input type="text" id="slug" name="slug" required value="<?= $h($old['slug']) ?>" placeholder="your-company"
                           class="w-full px-4 py-3 bg-transparent outline-none font-mono text-sm text-emerald-600 dark:text-emerald-400 font-bold placeholder-gray-400 focus:outline-none focus:ring-0 border-none">
                  </div>
                  <p id="slugHint" class="mt-1 text-xs text-gray-500 dark:text-gray-400">Only lowercase letters, numbers, and hyphens.</p>
                  <?php if (isset($errors['slug'])): ?> <p class="text-xs text-red-500 mt-1"><?= $h($errors['slug']) ?></p> <?php endif; ?>
                </div>
              </div>

              <!-- SECTION 2: User Infos -->
              <div class="grid sm:grid-cols-2 gap-5 pt-2">
                <!-- Name -->
                <div>
                  <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5" for="name">Your Name</label>
                  <div class="relative">
                     <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400" aria-hidden="true">
                      <i class="fa-solid fa-user"></i>
                    </div>
                    <input type="text" id="name" name="name" required value="<?= $h($old['name']) ?>" placeholder="John Doe"
                           class="glass-input focus-ring w-full pl-10 pr-4 py-3 rounded-xl outline-none transition <?= isset($errors['name']) ? 'border-red-500' : '' ?>">
                  </div>
                  <?php if (isset($errors['name'])): ?> <p class="text-xs text-red-500 mt-1"><?= $h($errors['name']) ?></p> <?php endif; ?>
                </div>

                <!-- Email -->
                <div>
                  <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5" for="email">Work Email</label>
                   <div class="relative">
                     <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400" aria-hidden="true">
                      <i class="fa-solid fa-envelope"></i>
                    </div>
                    <input type="email" id="email" name="email" required value="<?= $h($old['email']) ?>" placeholder="you@company.com"
                           class="glass-input focus-ring w-full pl-10 pr-4 py-3 rounded-xl outline-none transition <?= isset($errors['email']) ? 'border-red-500' : '' ?>">
                   </div>
                  <?php if (isset($errors['email'])): ?> <p class="text-xs text-red-500 mt-1"><?= $h($errors['email']) ?></p> <?php endif; ?>
                </div>

                <!-- Password -->
                <div>
                  <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5" for="password">Password</label>
                   <div class="relative">
                     <input id="password" type="password" name="password" required placeholder="••••••••"
                           class="glass-input focus-ring w-full pl-10 pr-10 py-3 rounded-xl outline-none transition <?= isset($errors['password']) ? 'border-red-500' : '' ?>">
                     <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400" aria-hidden="true">
                      <i class="fa-solid fa-lock"></i>
                    </div>
                     <button type="button" class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-400 hover:text-gray-600 focus-ring rounded-r-xl" data-toggle="password" aria-label="Toggle password visibility"><i class="fa-solid fa-eye" aria-hidden="true"></i></button>
                   </div>
                   <!-- Password Strength Bar -->
                   <div class="mt-2 h-1 w-full bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                     <div id="pwBar" class="h-full bg-emerald-500 transition-all duration-300 w-0"></div>
                   </div>
                   <p id="pwHint" class="text-xs text-gray-500 mt-1"></p>
                   <?php if (isset($errors['password'])): ?> <p class="text-xs text-red-500 mt-1"><?= $h($errors['password']) ?></p> <?php endif; ?>
                </div>

                <!-- Confirm Password -->
                <div>
                  <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5" for="confirm">Confirm Password</label>
                  <div class="relative">
                    <input id="confirm" type="password" name="confirm" required placeholder="••••••••"
                           class="glass-input focus-ring w-full pl-10 pr-10 py-3 rounded-xl outline-none transition <?= isset($errors['confirm']) ? 'border-red-500' : '' ?>">
                     <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400" aria-hidden="true">
                      <i class="fa-solid fa-lock"></i>
                    </div>
                    <button type="button" class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-400 hover:text-gray-600 focus-ring rounded-r-xl" data-toggle="confirm" aria-label="Toggle confirm password visibility"><i class="fa-solid fa-eye" aria-hidden="true"></i></button>
                  </div>
                   <p id="matchHint" class="text-xs mt-1"></p>
                   <?php if (isset($errors['confirm'])): ?> <p class="text-xs text-red-500 mt-1"><?= $h($errors['confirm']) ?></p> <?php endif; ?>
                </div>
              </div>

              <!-- SECTION 3: Modules -->
              <div class="pt-2">
                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Select Modules needed</label>
                <div class="grid grid-cols-2 lg:grid-cols-3 gap-3">
                  <?php 
                    $availableModules = [
                      'Retail POS' => 'fa-cash-register', 
                      'HotelFlow' => 'fa-hotel', 
                      'Bhata' => 'fa-cubes-stacked', 
                      'School' => 'fa-graduation-cap', 
                      'MedFlow' => 'fa-pills', 
                      'BizFlow' => 'fa-briefcase'
                    ];
                  ?>
                  <?php foreach($availableModules as $mod => $icon): ?>
                    <label class="check-card border border-gray-200 dark:border-white/10 rounded-xl p-3 flex flex-col items-center justify-center gap-2 cursor-pointer transition select-none <?= in_array($mod, $old['modules']) ? 'checked' : '' ?>">
                      <input type="checkbox" name="modules[]" value="<?= $mod ?>" class="hidden peer focus-ring" <?= in_array($mod, $old['modules']) ? 'checked' : '' ?>>
                      <div class="w-8 h-8 rounded-lg bg-gray-100 dark:bg-white/5 flex items-center justify-center text-gray-500 peer-checked:bg-emerald-500 peer-checked:text-white transition">
                        <i class="fa-solid <?= $icon ?>" aria-hidden="true"></i>
                      </div>
                      <span class="text-xs font-semibold text-gray-700 dark:text-gray-300 peer-checked:text-emerald-600 dark:peer-checked:text-emerald-400"><?= $mod ?></span>
                    </label>
                  <?php endforeach; ?>
                </div>
                <?php if (isset($errors['modules'])): ?> <p class="text-xs text-red-500 mt-1"><?= $h($errors['modules']) ?></p> <?php endif; ?>
              </div>

               <!-- Notes -->
              <div>
                 <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5" for="notes">Additional Notes (Optional)</label>
                 <textarea id="notes" name="notes" rows="2" class="glass-input focus-ring w-full px-4 py-3 rounded-xl outline-none transition" placeholder="Tell us more about your business..."><?= $h($old['notes']) ?></textarea>
              </div>

              <!-- Terms -->
              <label class="flex items-start gap-3 cursor-pointer">
                <input type="checkbox" name="terms" class="mt-1 w-4 h-4 text-emerald-600 rounded border-gray-300 focus-ring">
                <span class="text-sm text-gray-600 dark:text-gray-400">
                  I agree to the <a href="/terms" class="text-emerald-600 hover:underline focus-ring rounded-sm">Terms of Service</a> and <a href="/privacy" class="text-emerald-600 hover:underline focus-ring rounded-sm">Privacy Policy</a>.
                </span>
              </label>
              <?php if (isset($errors['terms'])): ?> <p class="text-xs text-red-500 mt-1"><?= $h($errors['terms']) ?></p> <?php endif; ?>

              <!-- Global Error -->
              <?php if (isset($errors['__global'])): ?>
                <div class="p-3 rounded-lg bg-red-50 text-red-600 text-sm text-center font-medium">
                  <?= $h($errors['__global']) ?>
                </div>
              <?php endif; ?>

              <!-- Submit -->
              <button type="submit" class="focus-ring w-full py-4 rounded-xl bg-gradient-to-r from-emerald-600 to-teal-600 text-white font-bold text-lg shadow-lg shadow-emerald-500/30 hover:shadow-emerald-500/50 hover:scale-[1.01] transition transform active:scale-[0.99]">
                Create My Tenant
              </button>

            </form>
          </div>
          
          <p class="text-center text-sm text-gray-500 dark:text-gray-400 mt-6">
            Already have an account? <a href="/tenant/login" class="text-emerald-600 font-semibold hover:underline focus-ring rounded-sm">Sign in here</a>
          </p>
        </div>
        
      </div>
    </div>
  </main>

  <script src="/assets/js/main.js" defer></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // Module selection visual toggle
      document.querySelectorAll('input[type="checkbox"][name="modules[]"]').forEach(box => {
        box.addEventListener('change', function() {
          const card = this.closest('.check-card');
          if(this.checked) card.classList.add('checked');
          else card.classList.remove('checked');
        });
      });

      /* ───────────────────── Slug sanitization + availability ───────────────────── */
      const slugEl   = document.getElementById('slug');
      const slugHint = document.getElementById('slugHint');
      let slugTimer  = null;

      if (slugEl) {
        slugEl.addEventListener('input', () => {
          let v = slugEl.value.toLowerCase()
            .replace(/[^a-z0-9-]/g, '-')
            .replace(/--+/g, '-')
            .replace(/^-+|-+$/g, '');

          if (v !== slugEl.value) slugEl.value = v;

          if (!slugHint) return;

          if (v.length < 3) {
             slugHint.textContent = 'Use lowercase letters, digits and dashes. Min 3 characters.';
             slugHint.className   = 'mt-1 text-xs text-gray-500 dark:text-gray-400';
             return;
          }

          slugHint.textContent = 'Checking availability…';
          slugHint.className   = 'mt-1 text-xs text-gray-500 dark:text-gray-400';
          slugEl.classList.add('animate-pulse');

          clearTimeout(slugTimer);
          slugTimer = setTimeout(async () => {
            try {
              const res = await fetch('/api/public/slug-available?slug=' + encodeURIComponent(slugEl.value), {
                headers: { 'Accept': 'application/json' }
              });
              if (!res.ok) throw new Error('status ' + res.status);

              const data = await res.json();
              slugEl.classList.remove('animate-pulse');

              if (data && data.ok) {
                slugHint.textContent = 'Good news — this slug looks available.';
                slugHint.className   = 'mt-1 text-xs text-emerald-600 dark:text-emerald-400';
              } else {
                const reason = data?.reason || 'unavailable';
                slugHint.textContent = reason === 'taken' ? 'Slug already taken.' : 'Slug unavailable.';
                slugHint.className   = 'mt-1 text-xs text-rose-600 dark:text-rose-400';
              }
            } catch (err) {
              slugHint.textContent = 'Unable to check availability.';
              slugHint.className   = 'mt-1 text-xs text-amber-600 dark:text-amber-400';
            }
          }, 400);
        });
      }

      /* ───────────────────── Password show/hide & strength ───────────────────── */
      const pw        = document.getElementById('password');
      const cf        = document.getElementById('confirm');
      const bar       = document.getElementById('pwBar');
      const pwHint    = document.getElementById('pwHint');
      const matchHint = document.getElementById('matchHint');
      
      document.querySelectorAll('[data-toggle="password"]').forEach(btn => {
          btn.addEventListener('click', () => {
              if(pw) pw.type = pw.type === 'password' ? 'text' : 'password';
          });
      });
      document.querySelectorAll('[data-toggle="confirm"]').forEach(btn => {
          btn.addEventListener('click', () => {
              if(cf) cf.type = cf.type === 'password' ? 'text' : 'password';
          });
      });

      const calcStrength = (s) => {
        let score = 0;
        if (s.length >= 8) score++;
        if (/[A-Z]/.test(s)) score++;
        if (/[a-z]/.test(s)) score++;
        if (/[0-9]/.test(s)) score++;
        if (/[^A-Za-z0-9]/.test(s)) score++;
        return score;
      };

      if (pw && bar) {
          pw.addEventListener('input', () => {
               const score = calcStrength(pw.value);
               const w = (score / 5) * 100;
               bar.style.width = w + '%';
               bar.style.backgroundColor = score < 3 ? '#ef4444' : score < 4 ? '#f59e0b' : '#10b981';
               if (pwHint) {
                  pwHint.textContent = score < 3 ? 'Weak password' : score < 4 ? 'Okay' : 'Strong password';
               }
          });
      }

      const checkMatch = () => {
        if (!pw || !cf || !matchHint) return;
        if (pw.value && cf.value && pw.value === cf.value) {
          matchHint.textContent = 'Passwords match ✔';
          matchHint.className   = 'mt-1 text-xs text-emerald-600 dark:text-emerald-400';
        } else {
          matchHint.textContent = 'Passwords must match.';
          matchHint.className   = 'mt-1 text-xs text-gray-500 dark:text-gray-400';
        }
      };
      pw?.addEventListener('input', checkMatch);
      cf?.addEventListener('input', checkMatch);
    });
  </script>
</body>
</html>