<?php
/**
 * Nesvra Admin — Visual No-Code Post Composer
 * 
 * 100% No-Code visual editor designed for non-technical admins and content writers.
 * Includes interactive WYSIWYG formatting, visual block builders, and automatic styling.
 */

require_once __DIR__ . '/../includes/blog-service.php';

$successMessage = null;
$errorMessage = null;
$newPostSlug = null;

// Handle Form Submission
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'save_post') {
    $title       = trim($_POST['title'] ?? '');
    $slug        = trim($_POST['slug'] ?? '');
    $category    = trim($_POST['category'] ?? '');
    $customCat   = trim($_POST['custom_category'] ?? '');
    $description = trim($_POST['description'] ?? '');
    $image       = trim($_POST['image'] ?? '');
    $publishDate = trim($_POST['publish_date'] ?? date('F d, Y'));
    $readTime    = trim($_POST['read_time'] ?? '6 min read');
    $featured    = isset($_POST['featured']) && $_POST['featured'] === 'yes' ? 'yes' : 'no';
    $authorName  = trim($_POST['author_name'] ?? 'Nesvra Strategy Team');
    $authorRole  = trim($_POST['author_role'] ?? 'Fintech & Systems Architecture');
    $content     = trim($_POST['content'] ?? '');

    // Resolve category
    if (!empty($customCat)) {
        $category = $customCat;
    }
    if (empty($category)) {
        $category = 'Fintech';
    }

    // Basic Validation
    if (empty($title)) {
        $errorMessage = "Please enter a title for your article.";
    } elseif (empty($content) || $content === '<p><br></p>') {
        $errorMessage = "Please write some content for your article.";
    } else {
        // Default cover image if empty
        if (empty($image)) {
            $image = 'https://images.unsplash.com/photo-1559526324-4b87b5e36e44?q=80&w=1200&auto=format&fit=crop';
        }

        // Automatic clean slug
        if (empty($slug)) {
            $slug = preg_replace('/[^a-z0-9-]+/', '-', strtolower($title));
            $slug = trim($slug, '-');
        } else {
            $slug = preg_replace('/[^a-z0-9-]+/', '-', strtolower($slug));
            $slug = trim($slug, '-');
        }

        // Auto calculate read time
        $words = str_word_count(strip_tags($content));
        $mins = max(3, ceil($words / 200));
        $readTime = "{$mins} min read";

        // Auto-wrap bare headings/paragraphs with Nesvra brand styling if needed
        $cleanContent = $content;

        $postData = [
            'id'          => 'post_' . time() . '_' . substr(md5($slug), 0, 4),
            'slug'        => $slug,
            'title'       => $title,
            'description' => $description,
            'category'    => $category,
            'image'       => $image,
            'publishDate' => $publishDate,
            'readTime'    => $readTime,
            'featured'    => $featured,
            'author_name' => $authorName,
            'author_role' => $authorRole,
            'content'     => $cleanContent
        ];

        if (save_blog($postData)) {
            $successMessage = "Article published successfully!";
            $newPostSlug = $slug;
        } else {
            $errorMessage = "Failed to save article. Please check file permissions on data/blogs.json.";
        }
    }
}

// Fetch categories
$existingCategories = get_blog_categories();
unset($existingCategories['All Blog']);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Write New Blog Post | Nesvra Admin</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <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=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet" />

    <!-- Quill Visual WYSIWYG Editor (No Code Required) -->
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        royal: '#081F5C',
                        electric: '#2563FF',
                        brandOrange: '#FF8A00',
                        dark: '#0A0A0A',
                        soft: '#666666',
                    },
                    fontFamily: {
                        sans: ['Geist', 'sans-serif'],
                        mono: ['Geist Mono', 'monospace'],
                    },
                },
            },
        };
    </script>
    <style>
        body {
            font-family: 'Geist', sans-serif;
            background-color: #0c101d;
            color: #f3f4f6;
        }
        /* Custom Quill Visual Editor Styling for Nesvra Dark Admin */
        .ql-toolbar.ql-snow {
            background-color: #151a2d;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-top-left-radius: 1rem;
            border-top-right-radius: 1rem;
            padding: 12px !important;
        }
        .ql-container.ql-snow {
            background-color: #ffffff;
            color: #0A0A0A;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-top: none !important;
            border-bottom-left-radius: 1rem;
            border-bottom-right-radius: 1rem;
            font-family: 'Geist', sans-serif;
            font-size: 16px;
            min-height: 480px;
        }
        .ql-editor {
            min-height: 480px;
            padding: 24px !important;
            line-height: 1.8;
        }
        .ql-editor h2 {
            font-size: 1.75rem !important;
            font-weight: 600 !important;
            color: #081F5C !important;
            margin-top: 1.5rem !important;
            margin-bottom: 0.75rem !important;
            letter-spacing: -0.03em;
        }
        .ql-editor h3 {
            font-size: 1.35rem !important;
            font-weight: 600 !important;
            color: #081F5C !important;
            margin-top: 1.25rem !important;
            margin-bottom: 0.5rem !important;
        }
        .ql-editor p {
            color: #4A5568 !important;
            font-size: 1.05rem !important;
            margin-bottom: 1.25rem !important;
        }
        .ql-editor blockquote {
            border-left: 4px solid #2563FF !important;
            padding-left: 16px !important;
            color: #1A202C !important;
            font-style: italic !important;
            background: #F8F9FA;
            padding: 12px 16px;
            border-radius: 0 12px 12px 0;
            margin: 1.5rem 0;
        }
        /* Custom Block inside Visual Editor */
        .nesvra-visual-block {
            cursor: pointer;
            user-select: none;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .nesvra-visual-block:hover {
            transform: scale(1.005);
            box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
        }
        /* Toolbar Icons Dark Mode */
        .ql-snow .ql-stroke {
            stroke: #cbd5e1 !important;
        }
        .ql-snow .ql-fill {
            fill: #cbd5e1 !important;
        }
        .ql-snow .ql-picker {
            color: #cbd5e1 !important;
        }
        .ql-snow .ql-picker-options {
            background-color: #151a2d !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
        }
    </style>
</head>
<body class="min-h-screen bg-[#080B14] text-zinc-200 pb-20">

    <!-- TOP NAVIGATION BAR -->
    <header class="sticky top-0 z-50 border-b border-white/10 bg-[#080B14]/90 backdrop-blur-xl px-6 py-4">
        <div class="max-w-7xl mx-auto flex items-center justify-between">
            <div class="flex items-center gap-4">
                <a href="../index.php" target="_blank" class="flex items-center gap-2 group">
                    <img src="../Asset/logo-colored.png" alt="Nesvra" class="h-7 w-auto">
                    <span class="font-mono text-xs uppercase tracking-widest text-white/50 group-hover:text-white transition-colors">Admin Studio</span>
                </a>
                <span class="text-white/20">/</span>
                <span class="text-xs font-mono uppercase tracking-widest text-brandOrange font-semibold">Write Article (No-Code)</span>
            </div>

            <div class="flex items-center gap-3">
                <button type="button" onclick="toggleHelpModal()" class="flex items-center gap-2 px-4 py-2 rounded-xl bg-white/5 border border-white/10 hover:bg-white/10 text-xs font-mono tracking-wider transition-colors text-white">
                    <i class="ri-questionnaire-line text-brandOrange"></i> How this works
                </button>
                <a href="../blog.php" target="_blank" class="flex items-center gap-2 px-4 py-2 rounded-xl bg-electric/10 border border-electric/30 hover:bg-electric/20 text-electric text-xs font-mono tracking-wider transition-colors">
                    <i class="ri-external-link-line"></i> View Live Blog
                </a>
            </div>
        </div>
    </header>

    <main class="max-w-7xl mx-auto px-6 py-8">

        <!-- SUCCESS ALERT -->
        <?php if ($successMessage): ?>
            <div class="mb-8 p-6 rounded-3xl bg-emerald-500/10 border border-emerald-500/30 flex items-start justify-between gap-4 text-emerald-300 shadow-xl">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 rounded-2xl bg-emerald-500/20 flex items-center justify-center text-emerald-400 text-2xl flex-shrink-0">
                        <i class="ri-checkbox-circle-fill"></i>
                    </div>
                    <div>
                        <h4 class="font-semibold text-base text-white"><?= $successMessage ?></h4>
                        <p class="text-xs text-emerald-300/80 mt-0.5">Your article was saved to the JSON database and is now live on the website.</p>
                        <?php if ($newPostSlug): ?>
                            <a href="../blog-details.php?slug=<?= urlencode($newPostSlug) ?>" target="_blank" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-emerald-500 text-dark font-semibold text-xs mt-3 hover:bg-emerald-400 transition-all shadow-md">
                                <i class="ri-eye-line"></i> View Live Article Now →
                            </a>
                        <?php endif; ?>
                    </div>
                </div>
                <button onclick="this.parentElement.remove()" class="text-emerald-400/60 hover:text-emerald-400"><i class="ri-close-line text-xl"></i></button>
            </div>
        <?php endif; ?>

        <!-- ERROR ALERT -->
        <?php if ($errorMessage): ?>
            <div class="mb-8 p-5 rounded-2xl bg-rose-500/10 border border-rose-500/30 flex items-center justify-between gap-4 text-rose-300">
                <div class="flex items-center gap-3">
                    <i class="ri-error-warning-fill text-xl text-rose-400"></i>
                    <p class="font-medium text-sm"><?= $errorMessage ?></p>
                </div>
                <button onclick="this.parentElement.remove()" class="text-rose-400/60 hover:text-rose-400"><i class="ri-close-line text-lg"></i></button>
            </div>
        <?php endif; ?>

        <!-- MAIN POST FORM -->
        <form method="POST" id="visualBlogForm" onsubmit="prepareSubmission(event)" class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
            <input type="hidden" name="action" value="save_post">
            <input type="hidden" name="content" id="hiddenContentInput">

            <!-- LEFT 8 COLUMNS: Post Writing Area -->
            <div class="lg:col-span-8 space-y-6">

                <!-- 1. Post Title -->
                <div class="bg-[#101424] border border-white/10 rounded-3xl p-6 md:p-8 space-y-4 shadow-xl">
                    <div>
                        <label for="postTitle" class="block text-xs font-mono uppercase tracking-widest text-zinc-400 font-semibold mb-2">
                            Article Headline <span class="text-brandOrange">*</span>
                        </label>
                        <input
                            type="text"
                            name="title"
                            id="postTitle"
                            required
                            placeholder="Type your article title here..."
                            class="w-full bg-white/[0.04] border border-white/10 rounded-2xl px-5 py-4 text-xl md:text-2xl font-medium text-white focus:outline-none focus:border-brandOrange focus:bg-white/[0.08] transition-all placeholder:text-zinc-600"
                            oninput="autoGenerateSlug(this.value)"
                        />
                    </div>

                    <!-- Clean URL Preview (No code needed) -->
                    <div class="flex items-center gap-2 text-xs font-mono text-zinc-400 bg-black/40 px-4 py-2.5 rounded-xl border border-white/5">
                        <i class="ri-link text-brandOrange"></i>
                        <span class="text-zinc-500">Live URL: nesvra.com/blog/</span>
                        <input
                            type="text"
                            name="slug"
                            id="postSlug"
                            placeholder="article-url-slug"
                            class="bg-transparent text-brandOrange font-mono focus:outline-none flex-1 placeholder:text-zinc-700 text-xs font-semibold"
                        />
                    </div>
                </div>

                <!-- 2. Summary / Excerpt -->
                <div class="bg-[#101424] border border-white/10 rounded-3xl p-6 space-y-3 shadow-xl">
                    <div class="flex items-center justify-between">
                        <label for="postDescription" class="block text-xs font-mono uppercase tracking-widest text-zinc-400 font-semibold">
                            Short Summary (Displayed on article cards)
                        </label>
                        <span id="charCount" class="text-[10px] font-mono text-zinc-500">0 / 250 characters</span>
                    </div>
                    <textarea
                        name="description"
                        id="postDescription"
                        rows="2"
                        placeholder="Write a 1-2 sentence preview hook that explains what readers will learn..."
                        class="w-full bg-white/[0.04] border border-white/10 rounded-2xl p-4 text-sm text-zinc-200 focus:outline-none focus:border-electric focus:bg-white/[0.08] transition-all placeholder:text-zinc-600 leading-relaxed"
                        oninput="document.getElementById('charCount').innerText = this.value.length + ' / 250 characters'"
                    ></textarea>
                </div>

                <!-- 3. VISUAL WYSIWYG EDITOR -->
                <div class="bg-[#101424] border border-white/10 rounded-3xl p-6 md:p-8 space-y-4 shadow-xl">
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                        <div>
                            <h3 class="text-sm font-semibold text-white tracking-tight flex items-center gap-2">
                                <i class="ri-edit-2-line text-brandOrange"></i> Visual Article Writer
                            </h3>
                            <p class="text-xs text-zinc-400">Type naturally like Word or Google Docs. No HTML code required.</p>
                        </div>
                        <div class="text-xs font-mono text-zinc-400" id="wordCountDisplay">
                            0 words · ~1 min read
                        </div>
                    </div>

                    <!-- 1-CLICK VISUAL BLOCK BUILDERS (Friendly Buttons) -->
                    <div class="p-4 rounded-2xl bg-white/[0.03] border border-white/10 space-y-2">
                        <span class="text-[10px] font-mono uppercase tracking-widest text-brandOrange font-semibold block">
                            ✨ Insert Smart Design Cards:
                        </span>
                        <div class="flex flex-wrap gap-2 text-xs font-medium">
                            <button type="button" onclick="openMetricModal()" class="px-3.5 py-2 rounded-xl bg-white/5 hover:bg-brandOrange hover:text-white border border-white/10 text-zinc-200 transition-all flex items-center gap-2 shadow-sm">
                                <i class="ri-bar-chart-box-line text-brandOrange group-hover:text-white"></i> 3-Stat Metric Strip
                            </button>
                            <button type="button" onclick="openInsightModal()" class="px-3.5 py-2 rounded-xl bg-white/5 hover:bg-electric hover:text-white border border-white/10 text-zinc-200 transition-all flex items-center gap-2 shadow-sm">
                                <i class="ri-lightbulb-line text-electric group-hover:text-white"></i> Key Insight Box
                            </button>
                            <button type="button" onclick="openStepModal()" class="px-3.5 py-2 rounded-xl bg-white/5 hover:bg-purple-500 hover:text-white border border-white/10 text-zinc-200 transition-all flex items-center gap-2 shadow-sm">
                                <i class="ri-list-ordered-2 text-purple-400 group-hover:text-white"></i> Numbered Steps (01, 02)
                            </button>
                            <button type="button" onclick="openTableModal()" class="px-3.5 py-2 rounded-xl bg-white/5 hover:bg-emerald-500 hover:text-white border border-white/10 text-zinc-200 transition-all flex items-center gap-2 shadow-sm">
                                <i class="ri-table-line text-emerald-400 group-hover:text-white"></i> Comparison Table
                            </button>
                            <button type="button" onclick="openCtaModal()" class="px-3.5 py-2 rounded-xl bg-white/5 hover:bg-rose-500 hover:text-white border border-white/10 text-zinc-200 transition-all flex items-center gap-2 shadow-sm">
                                <i class="ri-rocket-line text-rose-400 group-hover:text-white"></i> "Book a Demo" CTA
                            </button>
                        </div>
                    </div>

                    <!-- Quill Container -->
                    <div id="quillEditor"></div>
                </div>

            </div>

            <!-- RIGHT 4 COLUMNS: Publishing & Settings -->
            <div class="lg:col-span-4 space-y-6">

                <!-- 1. Publish Action Card -->
                <div class="bg-[#101424] border border-white/10 rounded-3xl p-6 space-y-4 shadow-xl">
                    <h4 class="text-xs font-mono uppercase tracking-widest text-zinc-400 font-semibold flex items-center gap-2">
                        <i class="ri-send-plane-fill text-brandOrange"></i> Publishing
                    </h4>

                    <div class="space-y-3">
                        <!-- Featured Toggle -->
                        <div class="flex items-center justify-between p-3.5 rounded-2xl bg-white/[0.03] border border-white/5">
                            <div>
                                <span class="block text-xs font-semibold text-white">Hero Spotlight</span>
                                <span class="block text-[10px] text-zinc-400">Feature this on the home & blog top banner</span>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" name="featured" value="yes" class="sr-only peer">
                                <div class="w-11 h-6 bg-zinc-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brandOrange"></div>
                            </label>
                        </div>

                        <!-- Date -->
                        <div class="flex items-center justify-between p-3.5 rounded-2xl bg-white/[0.03] border border-white/5">
                            <span class="text-xs font-semibold text-white">Publish Date</span>
                            <input
                                type="text"
                                name="publish_date"
                                value="<?= date('F d, Y') ?>"
                                class="w-28 text-right bg-transparent text-zinc-300 font-mono text-xs focus:outline-none border-b border-white/20 pb-0.5"
                            />
                        </div>
                    </div>

                    <button
                        type="submit"
                        class="w-full py-4 rounded-2xl bg-brandOrange text-white font-semibold text-sm tracking-wide shadow-lg shadow-orange-500/20 hover:bg-orange-600 active:scale-[0.98] transition-all flex items-center justify-center gap-2 cursor-pointer"
                    >
                        <i class="ri-check-line text-lg"></i> Publish Article Now
                    </button>
                </div>

                <!-- 2. Category Selector -->
                <div class="bg-[#101424] border border-white/10 rounded-3xl p-6 space-y-4 shadow-xl">
                    <h4 class="text-xs font-mono uppercase tracking-widest text-zinc-400 font-semibold flex items-center gap-2">
                        <i class="ri-folder-3-line text-electric"></i> Topic Category
                    </h4>

                    <div class="space-y-3">
                        <select
                            name="category"
                            id="categorySelect"
                            class="w-full bg-white/[0.04] border border-white/10 rounded-xl px-4 py-3 text-xs font-medium text-white focus:outline-none focus:border-electric"
                        >
                            <?php foreach ($existingCategories as $catName => $catCount): ?>
                                <option value="<?= htmlspecialchars($catName) ?>" class="bg-[#101424] text-white">
                                    <?= htmlspecialchars($catName) ?>
                                </option>
                            <?php endforeach; ?>
                        </select>

                        <div>
                            <span class="text-[10px] text-zinc-400 font-mono block mb-1">Or create a new category:</span>
                            <input
                                type="text"
                                name="custom_category"
                                placeholder="e.g. AI & Robotics"
                                class="w-full bg-white/[0.04] border border-white/10 rounded-xl px-4 py-2 text-xs text-white focus:outline-none focus:border-electric placeholder:text-zinc-600"
                            />
                        </div>
                    </div>
                </div>

                <!-- 3. Cover Image (With Presets & Live Preview) -->
                <div class="bg-[#101424] border border-white/10 rounded-3xl p-6 space-y-4 shadow-xl">
                    <h4 class="text-xs font-mono uppercase tracking-widest text-zinc-400 font-semibold flex items-center gap-2">
                        <i class="ri-image-line text-purple-400"></i> Featured Cover Image
                    </h4>

                    <div class="space-y-3">
                        <input
                            type="url"
                            name="image"
                            id="coverImageUrl"
                            value="https://images.unsplash.com/photo-1559526324-4b87b5e36e44?q=80&w=1200&auto=format&fit=crop"
                            placeholder="Paste image URL..."
                            class="w-full bg-white/[0.04] border border-white/10 rounded-xl px-4 py-2.5 text-xs text-white focus:outline-none focus:border-purple-400 placeholder:text-zinc-600 font-mono"
                            oninput="document.getElementById('coverImgPreview').src = this.value"
                        />

                        <!-- 1-Click Quick Presets for Admin -->
                        <div>
                            <span class="text-[10px] font-mono text-zinc-400 block mb-1.5">Pick a curated high-res photo:</span>
                            <div class="grid grid-cols-3 gap-2">
                                <button type="button" onclick="setPresetImage('https://images.unsplash.com/photo-1559526324-4b87b5e36e44?q=80&w=1200&auto=format&fit=crop')" class="text-[10px] p-1.5 rounded-lg bg-white/5 hover:bg-white/15 border border-white/10 text-zinc-300 text-center">Fintech</button>
                                <button type="button" onclick="setPresetImage('https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=1200&auto=format&fit=crop')" class="text-[10px] p-1.5 rounded-lg bg-white/5 hover:bg-white/15 border border-white/10 text-zinc-300 text-center">Analytics</button>
                                <button type="button" onclick="setPresetImage('https://images.unsplash.com/photo-1556742049-0a67c5574f73?q=80&w=1200&auto=format&fit=crop')" class="text-[10px] p-1.5 rounded-lg bg-white/5 hover:bg-white/15 border border-white/10 text-zinc-300 text-center">Commerce</button>
                            </div>
                        </div>

                        <!-- Live Preview Thumbnail -->
                        <div class="relative rounded-2xl overflow-hidden aspect-[16/9] bg-black/50 border border-white/10">
                            <img
                                id="coverImgPreview"
                                src="https://images.unsplash.com/photo-1559526324-4b87b5e36e44?q=80&w=1200&auto=format&fit=crop"
                                alt="Preview"
                                class="w-full h-full object-cover"
                            />
                        </div>
                    </div>
                </div>

                <!-- 4. Author -->
                <div class="bg-[#101424] border border-white/10 rounded-3xl p-6 space-y-3 shadow-xl">
                    <h4 class="text-xs font-mono uppercase tracking-widest text-zinc-400 font-semibold flex items-center gap-2">
                        <i class="ri-user-3-line text-emerald-400"></i> Author Info
                    </h4>
                    <div class="space-y-2">
                        <input
                            type="text"
                            name="author_name"
                            value="Nesvra Strategy Team"
                            placeholder="Author Name"
                            class="w-full bg-white/[0.04] border border-white/10 rounded-xl px-4 py-2.5 text-xs text-white focus:outline-none focus:border-emerald-400 font-medium"
                        />
                        <input
                            type="text"
                            name="author_role"
                            value="Fintech & Systems Architecture"
                            placeholder="Role / Title"
                            class="w-full bg-white/[0.04] border border-white/10 rounded-xl px-4 py-2.5 text-xs text-zinc-400 focus:outline-none focus:border-emerald-400 text-[11px]"
                        />
                    </div>
                </div>

            </div>

        </form>

    </main>

    <!-- ==================== POPUP MODAL BUILDERS (NO CODE NEEDED) ==================== -->

    <!-- 1. Metric Stat Strip Modal -->
    <div id="modalMetric" class="fixed inset-0 z-[100] bg-black/80 backdrop-blur-md hidden items-center justify-center p-4">
        <div class="bg-[#101424] border border-white/20 rounded-3xl max-w-lg w-full p-6 space-y-5 shadow-2xl">
            <div class="flex items-center justify-between border-b border-white/10 pb-4">
                <h3 class="font-semibold text-white text-sm flex items-center gap-2">
                    <i class="ri-bar-chart-box-line text-brandOrange"></i> Insert 3-Stat Metric Strip
                </h3>
                <button type="button" onclick="closeModal('modalMetric')" class="text-zinc-400 hover:text-white"><i class="ri-close-line text-lg"></i></button>
            </div>
            <div class="space-y-3 text-xs">
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-zinc-400 mb-1">Stat #1 Value</label>
                        <input id="metric1_val" value="85%" class="w-full bg-white/5 border border-white/10 rounded-xl p-2.5 text-white font-bold" />
                    </div>
                    <div>
                        <label class="block text-zinc-400 mb-1">Stat #1 Label</label>
                        <input id="metric1_lbl" value="Faster Deployment" class="w-full bg-white/5 border border-white/10 rounded-xl p-2.5 text-white" />
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-zinc-400 mb-1">Stat #2 Value</label>
                        <input id="metric2_val" value="100%" class="w-full bg-white/5 border border-white/10 rounded-xl p-2.5 text-white font-bold" />
                    </div>
                    <div>
                        <label class="block text-zinc-400 mb-1">Stat #2 Label</label>
                        <input id="metric2_lbl" value="IP Ownership" class="w-full bg-white/5 border border-white/10 rounded-xl p-2.5 text-white" />
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-zinc-400 mb-1">Stat #3 Value</label>
                        <input id="metric3_val" value="24/7" class="w-full bg-white/5 border border-white/10 rounded-xl p-2.5 text-white font-bold" />
                    </div>
                    <div>
                        <label class="block text-zinc-400 mb-1">Stat #3 Label</label>
                        <input id="metric3_lbl" value="Active Monitoring" class="w-full bg-white/5 border border-white/10 rounded-xl p-2.5 text-white" />
                    </div>
                </div>
            </div>
            <div class="flex justify-end gap-3 pt-2">
                <button type="button" onclick="closeModal('modalMetric')" class="px-4 py-2 rounded-xl text-xs text-zinc-400 hover:text-white">Cancel</button>
                <button type="button" onclick="insertMetricBlock()" class="px-5 py-2.5 rounded-xl bg-brandOrange text-white font-semibold text-xs shadow-lg">Insert into Article</button>
            </div>
        </div>
    </div>

    <!-- 2. Key Insight Modal -->
    <div id="modalInsight" class="fixed inset-0 z-[100] bg-black/80 backdrop-blur-md hidden items-center justify-center p-4">
        <div class="bg-[#101424] border border-white/20 rounded-3xl max-w-lg w-full p-6 space-y-5 shadow-2xl">
            <div class="flex items-center justify-between border-b border-white/10 pb-4">
                <h3 class="font-semibold text-white text-sm flex items-center gap-2">
                    <i class="ri-lightbulb-line text-electric"></i> Insert Key Insight Box
                </h3>
                <button type="button" onclick="closeModal('modalInsight')" class="text-zinc-400 hover:text-white"><i class="ri-close-line text-lg"></i></button>
            </div>
            <div class="space-y-3 text-xs">
                <div>
                    <label class="block text-zinc-400 mb-1">Badge Tag</label>
                    <input id="insight_tag" value="Key Takeaway" class="w-full bg-white/5 border border-white/10 rounded-xl p-2.5 text-white" />
                </div>
                <div>
                    <label class="block text-zinc-400 mb-1">Insight Message</label>
                    <textarea id="insight_text" rows="4" class="w-full bg-white/5 border border-white/10 rounded-xl p-3 text-white leading-relaxed">Building on modular, API-first infrastructure allows modern enterprises to scale transaction volume by 10x without increasing headcount.</textarea>
                </div>
            </div>
            <div class="flex justify-end gap-3 pt-2">
                <button type="button" onclick="closeModal('modalInsight')" class="px-4 py-2 rounded-xl text-xs text-zinc-400 hover:text-white">Cancel</button>
                <button type="button" onclick="insertInsightBlock()" class="px-5 py-2.5 rounded-xl bg-electric text-white font-semibold text-xs shadow-lg">Insert into Article</button>
            </div>
        </div>
    </div>

    <!-- 3. Numbered Step Modal -->
    <div id="modalStep" class="fixed inset-0 z-[100] bg-black/80 backdrop-blur-md hidden items-center justify-center p-4">
        <div class="bg-[#101424] border border-white/20 rounded-3xl max-w-lg w-full p-6 space-y-5 shadow-2xl">
            <div class="flex items-center justify-between border-b border-white/10 pb-4">
                <h3 class="font-semibold text-white text-sm flex items-center gap-2">
                    <i class="ri-list-ordered-2 text-purple-400"></i> Insert Numbered Steps
                </h3>
                <button type="button" onclick="closeModal('modalStep')" class="text-zinc-400 hover:text-white"><i class="ri-close-line text-lg"></i></button>
            </div>
            <div class="space-y-3 text-xs">
                <div class="p-3 bg-white/5 rounded-xl space-y-2">
                    <div class="flex items-center gap-2">
                        <span class="font-mono text-purple-400 font-bold">01.</span>
                        <input id="step1_title" value="Discovery & Architecture Blueprint" placeholder="Step 1 Title" class="w-full bg-transparent border-b border-white/10 p-1 text-white font-semibold focus:outline-none" />
                    </div>
                    <input id="step1_desc" value="Map required regulatory rails, ledger schemas, and compliance touchpoints." placeholder="Step 1 Description" class="w-full bg-transparent p-1 text-zinc-300 focus:outline-none" />
                </div>
                <div class="p-3 bg-white/5 rounded-xl space-y-2">
                    <div class="flex items-center gap-2">
                        <span class="font-mono text-purple-400 font-bold">02.</span>
                        <input id="step2_title" value="API Integration & Launch" placeholder="Step 2 Title" class="w-full bg-transparent border-b border-white/10 p-1 text-white font-semibold focus:outline-none" />
                    </div>
                    <input id="step2_desc" value="Connect core payment rails, liquidity pools, and identity verification partners." placeholder="Step 2 Description" class="w-full bg-transparent p-1 text-zinc-300 focus:outline-none" />
                </div>
            </div>
            <div class="flex justify-end gap-3 pt-2">
                <button type="button" onclick="closeModal('modalStep')" class="px-4 py-2 rounded-xl text-xs text-zinc-400 hover:text-white">Cancel</button>
                <button type="button" onclick="insertStepBlock()" class="px-5 py-2.5 rounded-xl bg-purple-500 text-white font-semibold text-xs shadow-lg">Insert into Article</button>
            </div>
        </div>
    </div>

    <!-- 4. Comparison Table Modal -->
    <div id="modalTable" class="fixed inset-0 z-[100] bg-black/80 backdrop-blur-md hidden items-center justify-center p-4">
        <div class="bg-[#101424] border border-white/20 rounded-3xl max-w-lg w-full p-6 space-y-5 shadow-2xl">
            <div class="flex items-center justify-between border-b border-white/10 pb-4">
                <h3 class="font-semibold text-white text-sm flex items-center gap-2">
                    <i class="ri-table-line text-emerald-400"></i> Insert Comparison Table
                </h3>
                <button type="button" onclick="closeModal('modalTable')" class="text-zinc-400 hover:text-white"><i class="ri-close-line text-lg"></i></button>
            </div>
            <div class="space-y-3 text-xs">
                <div>
                    <label class="block text-zinc-400 mb-1">Table Title</label>
                    <input id="table_title" value="Solutions Comparison" class="w-full bg-white/5 border border-white/10 rounded-xl p-2.5 text-white font-semibold" />
                </div>
                <div class="p-3 bg-white/5 rounded-xl space-y-2">
                    <input id="tab_row1_feat" value="Time to Market" class="w-full bg-transparent border-b border-white/10 p-1 text-white" />
                    <div class="grid grid-cols-2 gap-2 text-[11px]">
                        <input id="tab_row1_legacy" value="9–18 Months" placeholder="Legacy Value" class="bg-black/30 p-1.5 rounded-lg text-zinc-400" />
                        <input id="tab_row1_nesvra" value="4–8 Weeks (Fast)" placeholder="Nesvra Value" class="bg-black/30 p-1.5 rounded-lg text-emerald-400 font-semibold" />
                    </div>
                </div>
                <div class="p-3 bg-white/5 rounded-xl space-y-2">
                    <input id="tab_row2_feat" value="IP Ownership" class="w-full bg-transparent border-b border-white/10 p-1 text-white" />
                    <div class="grid grid-cols-2 gap-2 text-[11px]">
                        <input id="tab_row2_legacy" value="Locked / Rented" placeholder="Legacy Value" class="bg-black/30 p-1.5 rounded-lg text-zinc-400" />
                        <input id="tab_row2_nesvra" value="100% Full IP" placeholder="Nesvra Value" class="bg-black/30 p-1.5 rounded-lg text-emerald-400 font-semibold" />
                    </div>
                </div>
            </div>
            <div class="flex justify-end gap-3 pt-2">
                <button type="button" onclick="closeModal('modalTable')" class="px-4 py-2 rounded-xl text-xs text-zinc-400 hover:text-white">Cancel</button>
                <button type="button" onclick="insertTableBlock()" class="px-5 py-2.5 rounded-xl bg-emerald-500 text-white font-semibold text-xs shadow-lg">Insert into Article</button>
            </div>
        </div>
    </div>

    <!-- 5. CTA Modal -->
    <div id="modalCta" class="fixed inset-0 z-[100] bg-black/80 backdrop-blur-md hidden items-center justify-center p-4">
        <div class="bg-[#101424] border border-white/20 rounded-3xl max-w-lg w-full p-6 space-y-5 shadow-2xl">
            <div class="flex items-center justify-between border-b border-white/10 pb-4">
                <h3 class="font-semibold text-white text-sm flex items-center gap-2">
                    <i class="ri-rocket-line text-rose-400"></i> Insert Conversion CTA Banner
                </h3>
                <button type="button" onclick="closeModal('modalCta')" class="text-zinc-400 hover:text-white"><i class="ri-close-line text-lg"></i></button>
            </div>
            <div class="space-y-3 text-xs">
                <div>
                    <label class="block text-zinc-400 mb-1">Headline</label>
                    <input id="cta_headline" value="Ready to scale your systems?" class="w-full bg-white/5 border border-white/10 rounded-xl p-2.5 text-white font-semibold" />
                </div>
                <div>
                    <label class="block text-zinc-400 mb-1">Subtitle</label>
                    <input id="cta_sub" value="See how Nesvra provides enterprise software and dedicated technology teams." class="w-full bg-white/5 border border-white/10 rounded-xl p-2.5 text-white" />
                </div>
                <div>
                    <label class="block text-zinc-400 mb-1">Button Text</label>
                    <input id="cta_btn" value="Talk to Strategy Team →" class="w-full bg-white/5 border border-white/10 rounded-xl p-2.5 text-white font-bold" />
                </div>
            </div>
            <div class="flex justify-end gap-3 pt-2">
                <button type="button" onclick="closeModal('modalCta')" class="px-4 py-2 rounded-xl text-xs text-zinc-400 hover:text-white">Cancel</button>
                <button type="button" onclick="insertCtaBlock()" class="px-5 py-2.5 rounded-xl bg-rose-500 text-white font-semibold text-xs shadow-lg">Insert into Article</button>
            </div>
        </div>
    </div>

    <!-- 6. Help / Guide Modal -->
    <div id="modalHelp" class="fixed inset-0 z-[100] bg-black/80 backdrop-blur-md hidden items-center justify-center p-4 md:p-8">
        <div class="bg-[#0D111F] border border-white/20 rounded-3xl max-w-2xl w-full p-6 md:p-8 space-y-6 shadow-2xl">
            <div class="flex items-center justify-between border-b border-white/10 pb-4">
                <div class="flex items-center gap-3">
                    <div class="w-9 h-9 rounded-xl bg-brandOrange/10 flex items-center justify-center text-brandOrange">
                        <i class="ri-book-read-line text-lg"></i>
                    </div>
                    <h3 class="text-base font-semibold text-white">How the Admin Post Studio Works</h3>
                </div>
                <button onclick="closeModal('modalHelp')" class="text-zinc-400 hover:text-white"><i class="ri-close-line text-lg"></i></button>
            </div>
            <div class="space-y-4 text-xs text-zinc-300 leading-relaxed font-sans">
                <p>
                    <strong class="text-white">1. Writing Content:</strong> You don't need any coding knowledge! Use the visual editor just like Google Docs or Word. Use the toolbar at the top to make text bold, add headings, bullet lists, or quotes.
                </p>
                <p>
                    <strong class="text-white">2. Adding Smart Design Cards:</strong> Want 3 stat boxes, a key takeaway, or a comparison table? Simply click any of the <em>"Insert Smart Design Cards"</em> buttons above the editor, fill in your text, and click Insert!
                </p>
                <p>
                    <strong class="text-white">3. Automatic Saving:</strong> When you click <em>"Publish Article Now"</em>, the system automatically packages your post and saves it directly to the live website database.
                </p>
            </div>
            <div class="flex justify-end pt-2">
                <button onclick="closeModal('modalHelp')" class="px-6 py-2.5 rounded-xl bg-royal hover:bg-electric text-white text-xs font-semibold">Got it, close guide</button>
            </div>
        </div>
    </div>

    <!-- JAVASCRIPT: Visual Editor Controller & Block Injectors -->
    <script>
        let quill;

        document.addEventListener('DOMContentLoaded', () => {
            // Initialize Quill Visual WYSIWYG Editor
            quill = new Quill('#quillEditor', {
                theme: 'snow',
                placeholder: 'Start writing your article here. Use the buttons above to format headings, bullet points, or insert metric stat cards...',
                modules: {
                    toolbar: [
                        [{ 'header': [2, 3, false] }],
                        ['bold', 'italic', 'underline', 'strike'],
                        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                        ['blockquote', 'link'],
                        ['clean']
                    ]
                }
            });

            // Starter sample structure so admin isn't staring at a blank screen
            const initialStarterHTML = `
<h2>1. Strategic Overview</h2>
<p>In today's fast-moving market, growing businesses need technology infrastructure designed for speed, reliability, and automated scale.</p>

<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 my-10 not-prose">
    <div class="flex flex-col gap-1 p-5 bg-[#F8F9FA] rounded-[20px] text-center border border-zinc-100">
        <span class="text-2xl md:text-3xl font-semibold text-royal tracking-tight">85%</span>
        <span class="text-[11px] font-mono uppercase tracking-widest text-soft">Faster Deployment</span>
    </div>
    <div class="flex flex-col gap-1 p-5 bg-[#F8F9FA] rounded-[20px] text-center border border-zinc-100">
        <span class="text-2xl md:text-3xl font-semibold text-royal tracking-tight">100%</span>
        <span class="text-[11px] font-mono uppercase tracking-widest text-brandOrange font-semibold">IP Ownership</span>
    </div>
    <div class="flex flex-col gap-1 p-5 bg-[#F8F9FA] rounded-[20px] text-center border border-zinc-100">
        <span class="text-2xl md:text-3xl font-semibold text-royal tracking-tight">24/7</span>
        <span class="text-[11px] font-mono uppercase tracking-widest text-soft">Active Ops</span>
    </div>
</div>

<h2>2. Key Implementation Steps</h2>
<p>Focusing on unified software rather than fragmented tools allows your team to move 10x faster with complete data sovereignty.</p>

<div class="bg-[#F8F9FA] rounded-[24px] p-6 md:p-8 my-8 border-l-4 border-electric not-prose">
    <p class="font-mono text-[10px] uppercase tracking-widest text-brandOrange font-semibold mb-2">Key Takeaway</p>
    <p class="text-dark text-base md:text-lg font-[400] leading-relaxed">
        Standardizing on modern, modular infrastructure reduces operational friction and protects revenue margins as transaction volume expands.
    </p>
</div>
`;
            quill.clipboard.dangerouslyPasteHTML(0, initialStarterHTML);

            // Track word count
            quill.on('text-change', () => {
                const text = quill.getText().trim();
                const words = text ? text.split(/\s+/).length : 0;
                const minutes = Math.max(1, Math.ceil(words / 200));
                document.getElementById('wordCountDisplay').innerText = `${words} words · ~${minutes} min read`;
            });
        });

        // Auto Slug
        function autoGenerateSlug(title) {
            const slugInput = document.getElementById('postSlug');
            if (slugInput) {
                slugInput.value = title
                    .toLowerCase()
                    .replace(/[^\w\s-]/g, '')
                    .replace(/[\s_-]+/g, '-')
                    .replace(/^-+|-+$/g, '');
            }
        }

        // Image Presets
        function setPresetImage(url) {
            document.getElementById('coverImageUrl').value = url;
            document.getElementById('coverImgPreview').src = url;
        }

        // Modal Controls
        function openMetricModal()  { document.getElementById('modalMetric').classList.remove('hidden'); document.getElementById('modalMetric').classList.add('flex'); }
        function openInsightModal() { document.getElementById('modalInsight').classList.remove('hidden'); document.getElementById('modalInsight').classList.add('flex'); }
        function openStepModal()    { document.getElementById('modalStep').classList.remove('hidden'); document.getElementById('modalStep').classList.add('flex'); }
        function openTableModal()   { document.getElementById('modalTable').classList.remove('hidden'); document.getElementById('modalTable').classList.add('flex'); }
        function openCtaModal()     { document.getElementById('modalCta').classList.remove('hidden'); document.getElementById('modalCta').classList.add('flex'); }
        function toggleHelpModal()  { document.getElementById('modalHelp').classList.toggle('hidden'); document.getElementById('modalHelp').classList.toggle('flex'); }
        function closeModal(id)     { document.getElementById(id).classList.add('hidden'); document.getElementById(id).classList.remove('flex'); }

        // Block Insert Helpers
        function insertHTMLAtCursor(html) {
            const range = quill.getSelection(true);
            const index = range ? range.index : quill.getLength();
            quill.clipboard.dangerouslyPasteHTML(index, html);
            quill.setSelection(index + 1);
        }

        function insertMetricBlock() {
            const v1 = document.getElementById('metric1_val').value;
            const l1 = document.getElementById('metric1_lbl').value;
            const v2 = document.getElementById('metric2_val').value;
            const l2 = document.getElementById('metric2_lbl').value;
            const v3 = document.getElementById('metric3_val').value;
            const l3 = document.getElementById('metric3_lbl').value;

            const html = `
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 my-10 not-prose nesvra-visual-block">
    <div class="flex flex-col gap-1 p-5 bg-[#F8F9FA] rounded-[20px] text-center border border-zinc-100">
        <span class="text-2xl md:text-3xl font-semibold text-royal tracking-tight">${v1}</span>
        <span class="text-[11px] font-mono uppercase tracking-widest text-soft">${l1}</span>
    </div>
    <div class="flex flex-col gap-1 p-5 bg-[#F8F9FA] rounded-[20px] text-center border border-zinc-100">
        <span class="text-2xl md:text-3xl font-semibold text-royal tracking-tight">${v2}</span>
        <span class="text-[11px] font-mono uppercase tracking-widest text-brandOrange font-semibold">${l2}</span>
    </div>
    <div class="flex flex-col gap-1 p-5 bg-[#F8F9FA] rounded-[20px] text-center border border-zinc-100">
        <span class="text-2xl md:text-3xl font-semibold text-royal tracking-tight">${v3}</span>
        <span class="text-[11px] font-mono uppercase tracking-widest text-soft">${l3}</span>
    </div>
</div><p><br></p>`;
            insertHTMLAtCursor(html);
            closeModal('modalMetric');
        }

        function insertInsightBlock() {
            const tag = document.getElementById('insight_tag').value;
            const text = document.getElementById('insight_text').value;
            const html = `
<div class="bg-[#F8F9FA] rounded-[24px] p-6 md:p-8 my-8 border-l-4 border-electric not-prose nesvra-visual-block">
    <p class="font-mono text-[10px] uppercase tracking-widest text-brandOrange font-semibold mb-2">${tag}</p>
    <p class="text-dark text-base md:text-lg font-[400] leading-relaxed">${text}</p>
</div><p><br></p>`;
            insertHTMLAtCursor(html);
            closeModal('modalInsight');
        }

        function insertStepBlock() {
            const t1 = document.getElementById('step1_title').value;
            const d1 = document.getElementById('step1_desc').value;
            const t2 = document.getElementById('step2_title').value;
            const d2 = document.getElementById('step2_desc').value;

            const html = `
<div class="flex flex-col gap-4 my-8 not-prose nesvra-visual-block">
    <div class="flex items-start gap-5 p-5 md:p-6 border border-zinc-100 rounded-[20px] bg-white hover:border-royal/20 hover:bg-zinc-50 transition-all duration-300 shadow-sm">
        <span class="bg-royal text-white w-8 h-8 rounded-full flex items-center justify-center font-mono text-xs flex-shrink-0 mt-0.5 font-bold">01</span>
        <div>
            <h4 class="font-semibold text-dark mb-1 text-base">${t1}</h4>
            <p class="text-soft text-sm leading-relaxed">${d1}</p>
        </div>
    </div>
    <div class="flex items-start gap-5 p-5 md:p-6 border border-zinc-100 rounded-[20px] bg-white hover:border-royal/20 hover:bg-zinc-50 transition-all duration-300 shadow-sm">
        <span class="bg-royal text-white w-8 h-8 rounded-full flex items-center justify-center font-mono text-xs flex-shrink-0 mt-0.5 font-bold">02</span>
        <div>
            <h4 class="font-semibold text-dark mb-1 text-base">${t2}</h4>
            <p class="text-soft text-sm leading-relaxed">${d2}</p>
        </div>
    </div>
</div><p><br></p>`;
            insertHTMLAtCursor(html);
            closeModal('modalStep');
        }

        function insertTableBlock() {
            const title = document.getElementById('table_title').value;
            const r1f = document.getElementById('tab_row1_feat').value;
            const r1l = document.getElementById('tab_row1_legacy').value;
            const r1n = document.getElementById('tab_row1_nesvra').value;
            const r2f = document.getElementById('tab_row2_feat').value;
            const r2l = document.getElementById('tab_row2_legacy').value;
            const r2n = document.getElementById('tab_row2_nesvra').value;

            const html = `
<div class="mt-8 mb-8 not-prose nesvra-visual-block">
    <h3 class="text-xl md:text-2xl font-semibold text-royal tracking-tighter mb-4">${title}</h3>
    <div class="overflow-x-auto rounded-[20px] border border-zinc-100 bg-white">
        <table class="w-full text-left border-collapse text-sm">
            <thead>
                <tr class="border-b border-zinc-200 bg-[#F8F9FA]">
                    <th class="py-4 px-5 font-mono text-[10px] uppercase tracking-widest text-soft">Feature</th>
                    <th class="py-4 px-5 font-mono text-[10px] uppercase tracking-widest text-soft text-center">Legacy Models</th>
                    <th class="py-4 px-5 font-mono text-[10px] uppercase tracking-widest text-brandOrange text-center font-bold">Nesvra Solution</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-zinc-100">
                <tr class="hover:bg-zinc-50 transition-colors">
                    <td class="py-4 px-5 font-medium text-dark">${r1f}</td>
                    <td class="py-4 px-5 text-center text-soft">${r1l}</td>
                    <td class="py-4 px-5 text-center font-semibold text-emerald-600">${r1n}</td>
                </tr>
                <tr class="hover:bg-zinc-50 transition-colors">
                    <td class="py-4 px-5 font-medium text-dark">${r2f}</td>
                    <td class="py-4 px-5 text-center text-soft">${r2l}</td>
                    <td class="py-4 px-5 text-center font-semibold text-emerald-600">${r2n}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div><p><br></p>`;
            insertHTMLAtCursor(html);
            closeModal('modalTable');
        }

        function insertCtaBlock() {
            const h = document.getElementById('cta_headline').value;
            const s = document.getElementById('cta_sub').value;
            const b = document.getElementById('cta_btn').value;

            const html = `
<div class="border border-zinc-100 rounded-[28px] p-6 md:p-8 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6 bg-[#F8F9FA] my-10 not-prose nesvra-visual-block">
    <div>
        <p class="font-mono text-[10px] uppercase tracking-widest text-brandOrange mb-1 font-semibold">Ready to scale?</p>
        <p class="text-dark font-medium text-lg leading-snug">${s}</p>
    </div>
    <a href="book-strategy-call.php" class="shrink-0 bg-royal text-white font-semibold text-sm px-8 py-4 rounded-full hover:bg-electric transition-colors duration-300 shadow-lg shadow-royal/20 whitespace-nowrap">
        ${b}
    </a>
</div><p><br></p>`;
            insertHTMLAtCursor(html);
            closeModal('modalCta');
        }

        // On Submit: Copy visual HTML into hidden field
        function prepareSubmission(e) {
            const html = quill.getSemanticHTML();
            document.getElementById('hiddenContentInput').value = html;
        }
    </script>

</body>
</html>
