<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= e($pageTitle ?? 'SmartForm') ?> — SmartForm Funnel Builder</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <style>
        * { font-family: 'Plus Jakarta Sans', sans-serif; }
        code, pre, .mono { font-family: 'JetBrains Mono', monospace; }
        :root { --sidebar-w: 260px; }
        .sidebar { width: var(--sidebar-w); }
        .main-content { margin-left: var(--sidebar-w); }
        .nav-link { display:flex;align-items:center;gap:.75rem;padding:.625rem 1rem;border-radius:.75rem;font-size:.875rem;font-weight:500;color:#9ca3af;text-decoration:none;transition:all .15s; }
        .nav-link:hover { color:#fff;background:rgba(255,255,255,.1); }
        .nav-link.active { color:#fff;background:#4f46e5; }
        .nav-link i { width:18px;text-align:center; }
        .btn-primary { display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#4f46e5;color:#fff;font-size:.875rem;font-weight:600;border-radius:.75rem;border:none;cursor:pointer;text-decoration:none;transition:all .15s; }
        .btn-primary:hover { background:#4338ca; }
        .btn-secondary { display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#fff;color:#374151;font-size:.875rem;font-weight:600;border-radius:.75rem;border:1px solid #e5e7eb;cursor:pointer;text-decoration:none;transition:all .15s; }
        .btn-secondary:hover { background:#f9fafb; }
        .btn-danger { display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#dc2626;color:#fff;font-size:.875rem;font-weight:600;border-radius:.75rem;border:none;cursor:pointer;text-decoration:none;transition:all .15s; }
        .btn-danger:hover { background:#b91c1c; }
        .btn-sm { padding:.375rem .75rem;font-size:.75rem; }
        .card { background:#fff;border-radius:1rem;border:1px solid #f3f4f6;box-shadow:0 1px 3px rgba(0,0,0,.06); }
        .form-input { width:100%;padding:.625rem .875rem;border-radius:.75rem;border:1px solid #e5e7eb;font-size:.875rem;outline:none;transition:all .15s;font-family:'Plus Jakarta Sans',sans-serif; }
        .form-input:focus { border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.15); }
        .form-label { display:block;font-size:.7rem;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.375rem; }
        .badge { display:inline-flex;align-items:center;padding:.25rem .625rem;border-radius:9999px;font-size:.75rem;font-weight:500; }
        .badge-blue { background:#e0e7ff;color:#3730a3; }
        .badge-green { background:#d1fae5;color:#065f46; }
        .badge-gray { background:#f3f4f6;color:#4b5563; }
        .badge-orange { background:#fff7ed;color:#9a3412; }
        .badge-purple { background:#f3e8ff;color:#6b21a8; }
        .toast-container { position:fixed;top:1rem;right:1rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem; }
        .toast { display:flex;align-items:center;gap:.75rem;padding:.875rem 1.25rem;border-radius:.875rem;font-size:.875rem;font-weight:500;box-shadow:0 10px 40px rgba(0,0,0,.15);min-width:280px;animation:slideIn .3s ease; }
        .toast.success { background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0; }
        .toast.error   { background:#fef2f2;color:#991b1b;border:1px solid #fecaca; }
        .toast.info    { background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe; }
        @keyframes slideIn { from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1} }
        .sortable-ghost { opacity:.4;background:#e0e7ff!important;border:2px dashed #6366f1!important; }
        .sortable-chosen { box-shadow:0 8px 25px rgba(99,102,241,.2); }
        .drag-handle { cursor:grab; }
        .drag-handle:active { cursor:grabbing; }
        ::-webkit-scrollbar{width:5px;height:5px}
        ::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px}
    </style>
</head>
<body class="bg-gray-50 h-full">

<div class="toast-container" id="toastContainer"></div>

<!-- Sidebar -->
<aside class="sidebar fixed top-0 left-0 h-full bg-gray-900 flex flex-col z-40 overflow-y-auto">
    <div class="px-5 py-5 border-b border-white/10">
        <a href="<?= url('/') ?>" class="flex items-center gap-3" style="text-decoration:none">
            <div style="width:36px;height:36px;background:#4f46e5;border-radius:.75rem;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.875rem;flex-shrink:0">SF</div>
            <div>
                <div style="color:#fff;font-weight:700;font-size:.875rem;line-height:1.2">SmartForm</div>
                <div style="color:#6b7280;font-size:.7rem">Funnel Builder</div>
            </div>
        </a>
    </div>
    <nav class="flex-1 px-3 py-4 space-y-1">
        <p style="color:#4b5563;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:0 1rem;margin-bottom:.5rem">Main</p>
        <a href="<?= url('/') ?>" class="nav-link <?= ($currentPage ?? '') === 'dashboard' ? 'active' : '' ?>">
            <i class="fas fa-chart-pie"></i> Dashboard
        </a>
        <a href="<?= url('/forms') ?>" class="nav-link <?= ($currentPage ?? '') === 'forms' ? 'active' : '' ?>">
            <i class="fas fa-wpforms"></i> Forms
        </a>
        <a href="<?= url('/funnels') ?>" class="nav-link <?= ($currentPage ?? '') === 'funnels' ? 'active' : '' ?>">
            <i class="fas fa-filter"></i> Funnels
        </a>
        <p style="color:#4b5563;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:0 1rem;margin:.75rem 0 .5rem" >Tools</p>
        <a href="#" onclick="copyToClipboard('<?= url('/') ?>');return false;" class="nav-link">
            <i class="fas fa-link"></i> Copy Base URL
        </a>
    </nav>
    <div class="px-5 py-4 border-t border-white/10">
        <p style="color:#4b5563;font-size:.7rem">SmartForm v1.0 &copy; <?= date('Y') ?></p>
    </div>
</aside>

<!-- Main Content -->
<div class="main-content min-h-screen flex flex-col">
    <header class="bg-white border-b border-gray-100 px-6 py-4 flex items-center justify-between sticky top-0 z-30">
        <div>
            <h1 style="font-size:1.1rem;font-weight:800;color:#111827;margin:0"><?= e($pageTitle ?? 'Dashboard') ?></h1>
            <?php if (!empty($breadcrumb)): ?>
            <nav style="display:flex;align-items:center;gap:.25rem;font-size:.7rem;color:#9ca3af;margin-top:.125rem">
                <?php foreach ($breadcrumb as $i => $crumb): ?>
                    <?php if ($i > 0): ?><i class="fas fa-chevron-right" style="font-size:.55rem"></i><?php endif; ?>
                    <?php if (isset($crumb['url'])): ?>
                        <a href="<?= e($crumb['url']) ?>" style="color:#9ca3af;text-decoration:none" onmouseover="this.style.color='#4f46e5'" onmouseout="this.style.color='#9ca3af'"><?= e($crumb['label']) ?></a>
                    <?php else: ?>
                        <span style="color:#374151;font-weight:600"><?= e($crumb['label']) ?></span>
                    <?php endif; ?>
                <?php endforeach; ?>
            </nav>
            <?php endif; ?>
        </div>
        <div style="display:flex;align-items:center;gap:.75rem">
            <?php if (!empty($headerActions)) echo $headerActions; ?>
            <div style="width:32px;height:32px;background:#4f46e5;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;font-weight:700">A</div>
        </div>
    </header>
    <main class="flex-1 p-6">
        <?php if (!empty($_SESSION['success'])): ?>
            <script>document.addEventListener('DOMContentLoaded',()=>showToast(<?= json_encode($_SESSION['success']) ?>,'success'));</script>
            <?php unset($_SESSION['success']); ?>
        <?php endif; ?>
        <?php if (!empty($_SESSION['error'])): ?>
            <script>document.addEventListener('DOMContentLoaded',()=>showToast(<?= json_encode($_SESSION['error']) ?>,'error'));</script>
            <?php unset($_SESSION['error']); ?>
        <?php endif; ?>
