<%- include('partials/public-header') %>

<style>
  /* ── GLOBAL CONTAINER & WORKSPACE STYLES ── */
  *, *::before, *::after {
    box-sizing: border-box;
  }

  #main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(12px, 3vw, 24px) 64px;
    width: 100%;
    overflow-x: hidden;
  }

  /* ── BREADCRUMBS ── */
  .breadcrumb-nav { padding: 14px 0 6px; }
  .breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    font-size: 0.82rem;
    color: var(--text-muted);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    margin: 0;
    padding: 0;
  }
  .breadcrumbs::-webkit-scrollbar { display: none; }
  .breadcrumbs a {
    color: var(--text-muted);
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s;
  }
  .breadcrumbs a:hover { color: var(--primary); }
  .breadcrumbs .crumb-sep { color: var(--text-muted); opacity: 0.4; }
  .breadcrumbs .crumb-active {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text);
    font-weight: 700;
  }

  /* ── HERO SECTION ── */
  .tool-header {
    position: relative;
    padding: clamp(20px, 4vw, 36px) 0 clamp(24px, 4.5vw, 38px);
    text-align: center;
    width: 100%;
  }
  .ambient-glow {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: min(600px, 92vw);
    height: 240px;
    background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.22) 0%, rgba(16, 185, 129, 0.1) 45%, transparent 70%);
    filter: blur(45px);
    z-index: -1;
    pointer-events: none;
  }
  [data-theme="light"] .ambient-glow {
    background: radial-gradient(ellipse at center, rgba(37, 99, 235, 0.12) 0%, rgba(16, 185, 129, 0.06) 45%, transparent 70%);
  }

  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    background: var(--badge-bg);
    border: 1px solid var(--border);
    color: var(--badge-text);
    border-radius: 30px;
    font-size: 0.76rem;
    font-weight: 700;
    margin-bottom: 14px;
  }
  .hero-badge .pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    flex-shrink: 0;
  }
  .tool-header h1 {
    font-size: clamp(1.75rem, 5.5vw, 2.75rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    margin: 0 auto 12px;
    line-height: 1.22;
    color: var(--text);
    text-wrap: balance;
    word-break: break-word;
    max-width: 900px;
  }
  .tool-header h1 span {
    background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline;
  }
  .tool-header p {
    color: var(--text-muted);
    font-size: clamp(0.88rem, 2.2vw, 1.02rem);
    max-width: 620px;
    margin: 0 auto 16px;
    line-height: 1.6;
    text-wrap: balance;
  }
  .hero-highlights {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .highlight-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 9px;
    border-radius: 6px;
    background: var(--glass-bg);
    border: 1px solid var(--border);
  }
  .highlight-pill svg { color: var(--accent); flex-shrink: 0; }

  /* ── WORKSPACE CONTAINER ── */
  .tool-workspace {
    background: var(--surface-card);
    border: 1px solid var(--border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius);
    box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.25);
    margin-bottom: 40px;
    overflow: hidden;
    width: 100%;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .custom-engine-wrapper {
    padding: clamp(14px, 3vw, 24px);
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .custom-engine-wrapper * { max-width: 100% !important; word-break: break-word; }

  /* Mobile Tabs Switch */
  .mobile-tab-switch {
    display: flex;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 6px;
    gap: 6px;
  }
  @media (min-width: 768px) { .mobile-tab-switch { display: none; } }

  .tab-btn {
    flex: 1;
    padding: 9px 8px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
  }
  .tab-btn.active {
    background: var(--surface-hover);
    color: var(--text);
  }
  .tab-btn.active svg { color: var(--primary); }

  /* Action Toolbar */
  .workspace-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 8px;
  }
  .tool-actions-left, .tool-actions-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  @media (max-width: 600px) {
    .tool-actions-left, .tool-actions-right { width: 100%; }
    .tool-actions-left button, .tool-actions-right button, .tool-actions-left label { flex: 1 1 calc(50% - 6px); justify-content: center; }
  }

  .btn-action {
    background: var(--surface-hover);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 7px 12px;
    min-height: 36px;
    border-radius: 8px;
    font-size: 0.81rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.18s ease;
    font-family: inherit;
    white-space: nowrap;
    text-decoration: none !important;
  }
  .btn-action:hover {
    border-color: var(--primary);
    background: var(--surface);
  }
  .btn-action.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 4px 14px var(--primary-glow);
  }
  .btn-action.btn-primary:hover {
    background: var(--primary-hover);
  }

  #fileUploadInput { display: none; }

  /* Editor Grid & Dual Pane */
  .editor-grid {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 360px;
  }
  @media (min-width: 768px) { .editor-grid { grid-template-columns: 1fr 1fr; } }

  .editor-box {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--surface);
    min-width: 0;
  }
  @media (min-width: 768px) { .editor-box:first-child { border-right: 1px solid var(--border); } }
  @media (max-width: 767px) { .editor-box.mobile-hidden { display: none; } }

  .editor-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: var(--surface-hover);
    border-bottom: 1px solid var(--border);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .editor-stats {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
  }

  .editor-textarea {
    width: 100%;
    flex-grow: 1;
    height: 360px;
    background: transparent;
    border: none;
    padding: 14px;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 0.86rem;
    color: var(--text);
    line-height: 1.65;
    resize: vertical;
    outline: none;
  }
  @media (max-width: 767px) { .editor-textarea { height: 280px; font-size: 0.83rem; } }

  /* Status Bar */
  .status-bar {
    padding: 9px 14px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.76rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 8px;
  }
  .status-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
  .status-badge.valid { color: var(--accent); }
  .status-badge.error { color: #ef4444; }

  /* ── CONTENT SECTION (SEO & INFORMATION) ── */
  .seo-content {
    max-width: 920px;
    margin: 0 auto;
    content-visibility: auto;
    contain-intrinsic-size: 1px 1000px;
  }
  .content-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(18px, 3.5vw, 30px);
    margin-bottom: 20px;
    transition: border-color 0.2s;
  }
  .content-card:hover { border-color: var(--border-hover); }

  .card-heading-wrap {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
  }
  .heading-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--badge-bg);
    color: var(--badge-text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
    margin-top: 2px;
  }
  .content-card h2 {
    font-size: clamp(1.1rem, 3vw, 1.35rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
    line-height: 1.35;
    flex: 1;
    min-width: 0;
    word-break: break-word;
    text-wrap: balance;
  }
  .content-card > p, .content-card .text-muted {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 14px;
    font-size: 0.91rem;
  }

  /* ── 1, 2, 3 AUTO STEPS CARDS ── */
  .steps-auto-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 14px;
  }
  @media (min-width: 680px) {
    .steps-auto-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  }
  .step-auto-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 15px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: transform 0.2s ease, border-color 0.2s ease;
  }
  .step-auto-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
  }
  .step-auto-badge {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
    color: #ffffff;
    font-weight: 900;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .step-auto-content {
    flex: 1;
    min-width: 0;
    font-size: 0.86rem;
    color: var(--text);
    line-height: 1.55;
    word-break: break-word;
  }

  /* ── FEATURES GRID ── */
  .features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 14px;
  }
  @media (min-width: 640px) { .features-grid { grid-template-columns: repeat(3, 1fr); } }

  .feature-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .feature-item-top {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--text);
    font-size: 0.88rem;
  }
  .feature-item-top svg { color: var(--accent); flex-shrink: 0; }
  .feature-item p {
    font-size: 0.81rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.52;
  }

  /* ── FAQ ACCORDION ── */
  .faq-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 12px;
  }
  .faq-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
  }
  .faq-question {
    width: 100%;
    padding: 13px 15px;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    cursor: pointer;
    gap: 10px;
    font-family: inherit;
  }
  .faq-q-text { display: inline-flex; align-items: flex-start; gap: 8px; line-height: 1.4; flex: 1; }
  .faq-q-text svg { color: var(--primary); flex-shrink: 0; margin-top: 2px; }
  .faq-icon { transition: transform 0.2s ease; color: var(--text-muted); flex-shrink: 0; margin-top: 2px; }
  .faq-answer {
    padding: 0 15px 14px 36px;
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.65;
    display: none;
  }
  .faq-item.open .faq-answer { display: block; }
  .faq-item.open .faq-icon { transform: rotate(180deg); color: var(--primary); }

  /* ── RECOMMENDED TOOLS SECTION (STRICT 2x2 GRID & CLEAN CARD) ── */
  .related-tools-wrap {
    margin-top: 24px;
  }
  .related-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Always 2x2 layout */
    gap: clamp(10px, 2.5vw, 16px);
    margin-top: 16px;
  }

  .related-tool-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: clamp(14px, 2.5vw, 18px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none !important;
    color: inherit;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    min-width: 0;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }
  .related-tool-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-hover);
    box-shadow: 0 10px 24px -6px var(--primary-glow);
    text-decoration: none !important;
  }

  /* Card Top Row: Icon + Badge */
  .related-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  /* Dynamic SVG Icon Box */
  .related-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(16, 185, 129, 0.12) 100%);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--badge-text);
    flex-shrink: 0;
  }
  .related-icon-box svg {
    width: 22px !important;
    height: 22px !important;
    display: block;
  }

  .related-tool-tag {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 10px;
    background: var(--badge-bg);
    color: var(--badge-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* Tool Name Directly Below Icon (2-Line Uniform Clamp) */
  .related-tool-card h3 {
    font-size: clamp(0.92rem, 2.2vw, 1.05rem);
    font-weight: 800;
    color: var(--text);
    margin: 0 0 12px 0;
    letter-spacing: -0.015em;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(1.35em * 2); /* Keeps all card titles in the 2x2 grid neatly aligned */
  }

  /* Card Bottom: Left Usage Pill + Right Open Button */
  .related-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    gap: 6px;
    margin-top: auto;
  }
  .related-usage {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--glass-bg);
    border: 1px solid var(--border);
    padding: 3px 8px;
    border-radius: 20px;
  }
  .related-usage svg { color: var(--accent); flex-shrink: 0; }

  .related-open-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    transition: all 0.18s ease;
    flex-shrink: 0;
    text-decoration: none !important;
  }
  .related-open-arrow {
    transition: transform 0.18s ease, color 0.18s ease;
  }
  .related-tool-card:hover .related-open-btn {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
  }
  .related-tool-card:hover .related-open-arrow {
    transform: translate(2px, -2px);
    color: #ffffff;
  }

  /* ── DYNAMIC ENGINE CSS FROM DB ── */
  <%- (typeof tool !== 'undefined' && tool.engine && tool.engine.css) ? tool.engine.css : '' %>
</style>

<main id="main-content">

  <!-- BREADCRUMBS -->
  <nav class="breadcrumb-nav" aria-label="Breadcrumb">
    <ol class="breadcrumbs">
      <li>
        <a href="/">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
          <span>Home</span>
        </a>
      </li>
      <li class="crumb-sep">/</li>
      <li>
        <a href="/category/<%= (tool.category || 'utility').toLowerCase() %>">
          <span><%= tool.category || 'Utility' %> Tools</span>
        </a>
      </li>
      <li class="crumb-sep">/</li>
      <li class="crumb-active" aria-current="page">
        <span><%= tool.name %></span>
      </li>
    </ol>
  </nav>

  <!-- HERO SECTION -->
  <section class="tool-header">
    <div class="ambient-glow" aria-hidden="true"></div>
    <div class="hero-badge">
      <span class="pulse-dot"></span>
      <span>Instant Client-Side &bull; <%= (tool.usageCount || 0).toLocaleString() %> Uses</span>
    </div>
    
    <h1><span><%= tool.name %></span></h1>
    
    <p><%= tool.seo && tool.seo.metaDescription ? tool.seo.metaDescription : 'Parse, clean, and convert data with zero server latency and total privacy.' %></p>
    
    <div class="hero-highlights">
      <span class="highlight-pill">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
        100% Client-Side
      </span>
      <span class="highlight-pill">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
        Zero Logs
      </span>
      <span class="highlight-pill">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
        Offline Ready
      </span>
    </div>
  </section>

  <!-- =============================================
       WORKSPACE CONTAINER
       ============================================= -->
  <% if (tool.engine && tool.engine.html) { %>

    <section class="tool-workspace" id="tool-app">
      <div class="custom-engine-wrapper">
        <%- tool.engine.html %>
      </div>
    </section>

  <% } else { %>

    <section class="tool-workspace" id="tool-app" aria-label="Tool Workspace">

      <!-- Mobile Tabs -->
      <div class="mobile-tab-switch" role="tablist">
        <button class="tab-btn active" id="tabInputBtn" role="tab" aria-selected="true">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
          <span>Input</span>
        </button>
        <button class="tab-btn" id="tabOutputBtn" role="tab" aria-selected="false">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="20 6 9 17 4 12"/></svg>
          <span>Result</span>
        </button>
      </div>

      <!-- Action Toolbar -->
      <div class="workspace-toolbar">
        <div class="tool-actions-left">
          <button class="btn-action btn-primary" id="formatBtn">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
            <span>Process</span>
          </button>
          <button class="btn-action" id="minifyBtn">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" y1="10" x2="21" y2="3"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
            <span>Minify</span>
          </button>
          <label class="btn-action" for="fileUploadInput" title="Upload local file">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
            <span>Upload</span>
          </label>
          <input type="file" id="fileUploadInput">
          <button class="btn-action" id="sampleBtn">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
            <span>Sample</span>
          </button>
        </div>
        <div class="tool-actions-right">
          <button class="btn-action" id="copyBtn">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
            <span>Copy</span>
          </button>
          <button class="btn-action" id="downloadBtn">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            <span>Download</span>
          </button>
          <button class="btn-action" id="clearBtn">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
            <span>Clear</span>
          </button>
        </div>
      </div>

      <!-- Editors -->
      <div class="editor-grid">
        <div class="editor-box" id="boxInput">
          <div class="editor-top">
            <span class="editor-title">Input Data</span>
            <span class="editor-stats" id="inputStats">0 lines &bull; 0 chars</span>
          </div>
          <textarea id="jsonInput" class="editor-textarea" placeholder="Paste or drop data here..." spellcheck="false"></textarea>
        </div>

        <div class="editor-box mobile-hidden" id="boxOutput">
          <div class="editor-top">
            <span class="editor-title">Result</span>
            <span class="editor-stats" id="outputStats">Ready</span>
          </div>
          <textarea id="jsonOutput" class="editor-textarea" placeholder="Result will appear here..." readonly spellcheck="false"></textarea>
        </div>
      </div>

      <!-- Status Bar -->
      <div class="status-bar">
        <div id="statusBadge" class="status-badge">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
          <span id="statusText">Ready</span>
        </div>
        <div><span>100% Client-Side Sandbox</span></div>
      </div>

    </section>
  <% } %>

  <!-- =============================================
       SEO CONTENT
       ============================================= -->
  <article class="seo-content">

    <!-- How-To Card with Auto Step Parser -->
    <div class="content-card">
      <div class="card-heading-wrap">
        <div class="heading-icon">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
        </div>
        <h2>How to Use <%= tool.name %> Online?</h2>
      </div>

      <%
        let autoSteps = [];
        if (tool.content && tool.content.howTo && tool.content.howTo.trim().length > 0) {
          const rawLines = tool.content.howTo.split(/\r?\n/).map(s => s.trim()).filter(Boolean);
          if (rawLines.length > 1) {
            autoSteps = rawLines.map(line => line.replace(/^(\d+[\.\)\-:]|\bstep\s*\d+[:\.\-]?)\s*/i, '').trim());
          } else if (tool.content.howTo.includes('.')) {
            autoSteps = tool.content.howTo.split(/(?<=[.?!])\s+/).filter(s => s.trim().length > 8);
          } else {
            autoSteps = [tool.content.howTo];
          }
        }
      %>

      <% if (autoSteps.length > 0) { %>
        <p>Follow these simple steps to use <strong><%= tool.name %></strong>:</p>
        <div class="steps-auto-grid">
          <% autoSteps.forEach(function(stepText, index) { %>
            <div class="step-auto-card">
              <div class="step-auto-badge"><%= index + 1 %></div>
              <div class="step-auto-content"><%= stepText %></div>
            </div>
          <% }); %>
        </div>
      <% } else { %>
        <div class="steps-auto-grid">
          <div class="step-auto-card">
            <div class="step-auto-badge">1</div>
            <div class="step-auto-content"><strong>Paste Data:</strong> Insert your raw content into the input container.</div>
          </div>
          <div class="step-auto-card">
            <div class="step-auto-badge">2</div>
            <div class="step-auto-content"><strong>Execute:</strong> Click Process to compile instantly client-side.</div>
          </div>
          <div class="step-auto-card">
            <div class="step-auto-badge">3</div>
            <div class="step-auto-content"><strong>Export / Copy:</strong> Grab the formatted output with one single click.</div>
          </div>
        </div>
      <% } %>
    </div>

    <!-- About Card -->
    <div class="content-card">
      <div class="card-heading-wrap">
        <div class="heading-icon">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        </div>
        <h2>Why Choose Our <%= tool.name %>?</h2>
      </div>
      <p><%= (tool.content && tool.content.about) ? tool.content.about : 'Our tools execute 100% locally inside your web browser without sending any sensitive data over remote cloud servers.' %></p>

      <div class="features-grid">
        <div class="feature-item">
          <div class="feature-item-top">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
            <span>Total Privacy</span>
          </div>
          <p>Zero database logs, zero tracking, and complete client-side security.</p>
        </div>
        <div class="feature-item">
          <div class="feature-item-top">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
            <span>Zero Latency</span>
          </div>
          <p>Direct browser memory compilation with immediate response.</p>
        </div>
        <div class="feature-item">
          <div class="feature-item-top">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><line x1="1" y1="1" x2="23" y2="23"/><path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"/><path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"/><path d="M10.71 5.05A16 16 0 0 1 22.58 9"/><path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/></svg>
            <span>Offline Ready</span>
          </div>
          <p>Operates smoothly even when your internet connection drops.</p>
        </div>
      </div>
    </div>

    <!-- FAQ Card -->
    <% if (tool.faqs && tool.faqs.length > 0) { %>
    <div class="content-card">
      <div class="card-heading-wrap">
        <div class="heading-icon">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
        </div>
        <h2>Frequently Asked Questions</h2>
      </div>
      <div class="faq-list">
        <% tool.faqs.forEach(function(faq) { %>
        <div class="faq-item">
          <button class="faq-question" aria-expanded="false">
            <span class="faq-q-text">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
              <span><%= faq.q %></span>
            </span>
            <svg class="faq-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
          </button>
          <div class="faq-answer"><%= faq.a %></div>
        </div>
        <% }); %>
      </div>
    </div>
    <% } %>

    <!-- =============================================
         RECOMMENDED TOOLS SECTION (STRICT 2x2 GRID)
         ============================================= -->
    <%
      let relList = [];
      if (typeof relatedTools !== 'undefined' && Array.isArray(relatedTools) && relatedTools.length > 0) {
        relList = relatedTools.filter(t => t.slug !== tool.slug).slice(0, 4);
      } else if (typeof tools !== 'undefined' && Array.isArray(tools) && tools.length > 0) {
        relList = tools.filter(t => t.active && t.slug !== tool.slug && (t.category || '').toLowerCase() === (tool.category || '').toLowerCase()).slice(0, 4);
        if (relList.length < 4) {
          const others = tools.filter(t => t.active && t.slug !== tool.slug && !relList.some(r => r.slug === t.slug)).slice(0, 4 - relList.length);
          relList = relList.concat(others);
        }
      }
    %>

    <% if (relList && relList.length > 0) { %>
    <div class="content-card related-tools-wrap">
      <div class="card-heading-wrap">
        <div class="heading-icon">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
        </div>
        <h2>Recommended Tools</h2>
      </div>
      <p>Explore more high-performance utilities with instant in-browser execution:</p>

      <div class="related-tools-grid">
        <% relList.forEach(function(relTool) { %>
          <a href="/tool/<%= relTool.slug %>" class="related-tool-card">
            
            <!-- Top Row: Dynamic SVG Icon + Badge -->
            <div class="related-card-top">
              <div class="related-icon-box" aria-hidden="true">
                <% if (relTool.iconSvg && relTool.iconSvg.trim().startsWith('<svg')) { %>
                  <%- relTool.iconSvg %>
                <% } else { %>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
                <% } %>
              </div>
              <span class="related-tool-tag"><%= relTool.badge || 'Instant' %></span>
            </div>
            
            <!-- Tool Name: Directly Under Icon (2-Line Balanced Display) -->
            <h3><%= relTool.name %></h3>
            
            <!-- Bottom Row: Left Usage Pill + Right Open Button -->
            <div class="related-card-bottom">
              <div class="related-usage">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
                <span><%= (relTool.usageCount || 0).toLocaleString() %></span>
              </div>
              
              <span class="related-open-btn" aria-label="Open <%= relTool.name %>">
                <svg class="related-open-arrow" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
              </span>
            </div>
          </a>
        <% }); %>
      </div>
    </div>
    <% } %>

  </article>

</main>

<!-- =============================================
     SAFE JAVASCRIPT EXECUTION
     ============================================= -->
<script>
(function () {
  'use strict';

  // ── TOOL WORKSPACE LOGIC ONLY (Theme & Drawer handled by public-footer) ──
  const jsonInput   = document.getElementById('jsonInput');
  const jsonOutput  = document.getElementById('jsonOutput');
  const formatBtn   = document.getElementById('formatBtn');
  const minifyBtn   = document.getElementById('minifyBtn');
  const sampleBtn   = document.getElementById('sampleBtn');
  const copyBtn     = document.getElementById('copyBtn');
  const clearBtn    = document.getElementById('clearBtn');
  const downloadBtn = document.getElementById('downloadBtn');
  const fileUpload  = document.getElementById('fileUploadInput');
  const statusBadge = document.getElementById('statusBadge');
  const inputStats  = document.getElementById('inputStats');
  const outputStats = document.getElementById('outputStats');
  const tabInputBtn = document.getElementById('tabInputBtn');
  const tabOutputBtn= document.getElementById('tabOutputBtn');
  const boxInput    = document.getElementById('boxInput');
  const boxOutput   = document.getElementById('boxOutput');

  const SVG_OK   = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>';
  const SVG_ERR  = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>';

  function setStatus(msg, type) {
    if (!statusBadge) return;
    statusBadge.className = 'status-badge' + (type ? ' ' + type : '');
    statusBadge.innerHTML = (type === 'valid' ? SVG_OK : SVG_ERR) + '<span>' + msg + '</span>';
  }

  function updateStats() {
    if (inputStats && jsonInput) {
      const chars = jsonInput.value.length;
      const lines = jsonInput.value ? jsonInput.value.split('\n').length : 0;
      inputStats.textContent = lines + ' lines • ' + chars.toLocaleString() + ' chars';
    }
    if (outputStats && jsonOutput) {
      outputStats.textContent = jsonOutput.value ? jsonOutput.value.length.toLocaleString() + ' chars' : 'Ready';
    }
  }

  function showTab(tab) {
    if (window.innerWidth >= 768 || !tabInputBtn) return;
    if (tab === 'input') {
      tabInputBtn.classList.add('active'); tabOutputBtn.classList.remove('active');
      boxInput.classList.remove('mobile-hidden'); boxOutput.classList.add('mobile-hidden');
    } else {
      tabOutputBtn.classList.add('active'); tabInputBtn.classList.remove('active');
      boxOutput.classList.remove('mobile-hidden'); boxInput.classList.add('mobile-hidden');
    }
  }

  if (tabInputBtn && tabOutputBtn) {
    tabInputBtn.addEventListener('click',  () => showTab('input'), {passive: true});
    tabOutputBtn.addEventListener('click', () => showTab('output'), {passive: true});
  }

  function runProcess() {
    if (!jsonInput || !jsonOutput) return;
    const raw = jsonInput.value.trim();
    if (!raw) return;
    try {
      jsonOutput.value = JSON.stringify(JSON.parse(raw), null, 2);
      setStatus('Formatted successfully', 'valid');
    } catch (err) {
      jsonOutput.value = raw;
      setStatus('Processed successfully', 'valid');
    }
    updateStats();
    if (window.innerWidth < 768) showTab('output');
  }

  if (formatBtn) formatBtn.addEventListener('click', runProcess);

  if (minifyBtn && jsonInput && jsonOutput) {
    minifyBtn.addEventListener('click', () => {
      const raw = jsonInput.value.trim();
      if (!raw) return;
      try { jsonOutput.value = JSON.stringify(JSON.parse(raw)); }
      catch (e) { jsonOutput.value = raw.replace(/\s+/g, ' '); }
      setStatus('Minified successfully', 'valid');
      updateStats();
      if (window.innerWidth < 768) showTab('output');
    });
  }

  if (fileUpload && jsonInput) {
    fileUpload.addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (!file) return;
      const reader = new FileReader();
      reader.onload = (event) => {
        jsonInput.value = event.target.result;
        updateStats();
        setStatus('File loaded', 'valid');
        runProcess();
      };
      reader.readAsText(file);
    });
  }

  if (downloadBtn && jsonOutput) {
    downloadBtn.addEventListener('click', () => {
      const content = jsonOutput.value || jsonInput.value;
      if (!content) return setStatus('Nothing to download', 'error');
      const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = '<%= (tool.slug || tool.name).toLowerCase().replace(/\\s+/g, "-") %>-output.txt';
      a.click();
      URL.revokeObjectURL(a.href);
      setStatus('File downloaded', 'valid');
    });
  }

  if (copyBtn && jsonOutput) {
    copyBtn.addEventListener('click', async () => {
      if (!jsonOutput.value) return;
      try {
        await navigator.clipboard.writeText(jsonOutput.value);
        const prev = copyBtn.innerHTML;
        copyBtn.innerHTML = SVG_OK + '<span>Copied!</span>';
        setTimeout(() => { copyBtn.innerHTML = prev; }, 1600);
      } catch (e) { setStatus('Copy failed', 'error'); }
    });
  }

  if (clearBtn && jsonInput && jsonOutput) {
    clearBtn.addEventListener('click', () => {
      jsonInput.value = ''; jsonOutput.value = '';
      setStatus('Cleared', ''); updateStats(); showTab('input');
    });
  }

  if (sampleBtn && jsonInput && formatBtn) {
    sampleBtn.addEventListener('click', () => {
      jsonInput.value = JSON.stringify({ name: "<%= tool.name %>", status: "ready" }, null, 2);
      runProcess();
    });
  }

  if (jsonInput) jsonInput.addEventListener('input', updateStats, {passive: true});

  // Accordion Logic
  document.querySelectorAll('.faq-question').forEach(function(btn) {
    btn.addEventListener('click', function() {
      const item = btn.parentElement;
      const isOpen = item.classList.contains('open');
      document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
      if (!isOpen) item.classList.add('open');
    });
  });
})();

// ── Dynamic Custom Tool JS from Database ──
<%- (typeof tool !== 'undefined' && tool.engine && tool.engine.js) ? tool.engine.js : '' %>
</script>

<%- include('partials/public-footer') %>