---
interface Row {
  capability: string;
  without: string;
  withKiln: string;
  tier?: 'pro' | 'business';
}

const rows: Row[] = [
  {
    capability: 'Create a 3D object',
    without: 'Learn Fusion 360, Tinkercad, or OnShape \u2014 or browse Thingiverse manually',
    withKiln: 'Describe it or sketch it \u2014 Kiln generates, validates, and prepares it',
  },
  {
    capability: 'Validate before printing',
    without: 'Slicer warnings + experience + wasted filament',
    withKiln: '7-dimension scoring (0\u2013100), auto-repair, mesh fix, auto-scale for AI models',
  },
  {
    capability: 'Add decorations',
    without: 'Blender or Photoshop, then re-import and hope it prints',
    withKiln: 'QR codes, photos, logos, text \u2014 emboss or deboss with one command',
  },
  {
    capability: 'Add surface textures',
    without: 'UV mapping skills + texture software \u2014 not practical for most users',
    withKiln: 'Tiger stripe, marble, snakeskin, wood grain, carbon fiber, honeycomb, etc. \u2014 applied directly to any model',
    tier: 'pro',
  },
  {
    capability: 'Multicolor printing',
    without: 'Manually configure AMS slots in Bambu Studio or paint regions in PrusaSlicer',
    withKiln: 'Automatic color segmentation, AMS slot mapping, and multi-gcode merging',
  },
  {
    capability: 'Product templates',
    without: 'Design every coaster, keychain, and ornament from scratch',
    withKiln: 'One command: "make me a coaster" \u2014 with QR codes, logos, and textures built in',
    tier: 'pro',
  },
  {
    capability: 'Control your printer',
    without: 'OctoPrint, Bambu Studio, Creality Print, or Prusa Connect \u2014 one tool per brand',
    withKiln: 'One interface for every supported backend \u2014 same commands, any printer',
  },
  {
    capability: 'Monitor for failures',
    without: 'Bambu\u2019s built-in camera or add-on webcam \u2014 no AI analysis, no auto-recovery',
    withKiln: 'AI vision analysis across any printer with automatic failure recovery',
  },
  {
    capability: 'Resume a cancelled print',
    without: 'Start over \u2014 the partial object is wasted',
    withKiln: 'Resume from the exact layer it stopped, no filament wasted',
    tier: 'pro',
  },
  {
    capability: 'Mid-print modifications',
    without: 'Cancel, redesign in CAD, re-slice, reprint from scratch',
    withKiln: 'Decorate, add features, or swap material on a live print \u2014 with atomic revert',
    tier: 'pro',
  },
  {
    capability: 'Manage a fleet',
    without: 'One dashboard per brand, no cross-brand routing or learning',
    withKiln: 'Unified fleet with smart job routing, failure rerouting, and cross-printer learning',
    tier: 'pro',
  },
  {
    capability: 'Learn from past prints',
    without: 'Start fresh every time \u2014 your experience stays in your head',
    withKiln: 'Kiln learns what worked \u2014 same material + printer = better settings next time',
    tier: 'pro',
  },
  {
    capability: 'Trust your printer\u2019s calibration',
    without: 'Generic slicer defaults; your tuned values stay tribal knowledge, and every print\u2019s calibration starts from zero',
    withKiln: 'Reads your slicer profiles AND keeps learning from every print \u2014 per-printer offsets refine over time with full provenance',
    tier: 'pro',
  },
  {
    capability: 'Safety beyond firmware',
    without: 'Firmware basics (thermal runaway, current limits)',
    withKiln: 'Per-printer profiles + G-code validation + preflight checks + real-time interception',
  },
  {
    capability: 'Outsource to pros',
    without: 'Visit Craftcloud or other services, compare quotes yourself',
    withKiln: 'Route to 150+ 3rd-party services via Craftcloud directly from your workflow',
  },
  {
    capability: 'Version-control your designs',
    without: 'Rename files v1, v2, v2-final, v2-final-FINAL \u2014 lose track of which printed right',
    withKiln: 'Branch, merge, cherry-pick, A/B across designs / decorations / features \u2014 three-way semantic merge at the mesh level',
    tier: 'pro',
  },
  {
    capability: 'Prove which version shipped',
    without: 'Email the STL and trust nobody edited it',
    withKiln: 'Sign a version the way you\u2019d sign a contract \u2014 anyone can verify later that nothing changed after you signed it',
    tier: 'pro',
  },
  {
    capability: 'Sync designs across devices',
    without: 'Dropbox and hope nothing drifts',
    withKiln: 'Push and pull between your machines through Kiln\u2019s cloud \u2014 tenant-isolated, RLS-secured',
    tier: 'pro',
  },
  {
    capability: 'Ship an assembly kit',
    without: 'Write a 30-page PDF in Word, photograph each step, hire a translator',
    withKiln: 'Multi-part prints ship with a printable PDF — BOM, isometric step renders, multilingual sections, "what changed" diffs for revisions',
    tier: 'pro',
  },
  {
    capability: 'Let AI run the whole thing',
    without: 'Not possible',
    withKiln: 'Full pipeline via MCP \u2014 any AI agent, any printer, start to finish',
  },
];
---

<section class="cmp-section">
  <div class="container">
    <h2 class="cmp-heading">Before and after Kiln</h2>
    <p class="cmp-sub">One tool instead of a dozen. One conversation instead of a dozen tabs.</p>

    <div class="cmp-table-outer">
      <table class="cmp-table">
        <thead>
          <tr>
            <th>Capability</th>
            <th>Without Kiln</th>
            <th class="cmp-th-with">With Kiln</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr class={i === rows.length - 1 ? 'cmp-last' : ''}>
              <td class="cmp-cap">{r.capability}</td>
              <td class="cmp-old">{r.without}</td>
              <td class="cmp-new">
                {r.withKiln}
                {r.tier && <span class={`cmp-tier cmp-tier-${r.tier}`}>{r.tier}</span>}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </div>
</section>

<style>
  .cmp-section {
    border-top: 1px solid var(--border);
    padding: 80px 0;
  }

  .cmp-heading {
    font-size: clamp(24px, 4vw, 40px);
    font-weight: 700;
    margin-bottom: 12px;
  }

  .cmp-sub {
    color: var(--text-muted);
    font-size: 18px;
    margin-bottom: 48px;
  }

  .cmp-table-outer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
  }

  .cmp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  /* ---- Header ---- */
  .cmp-table thead tr {
    background: rgba(255, 255, 255, 0.03);
  }

  .cmp-table th {
    padding: 18px 28px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    text-align: left;
    border-bottom: 1px solid var(--border);
  }

  .cmp-th-with {
    color: var(--accent) !important;
  }

  /* ---- Body cells ---- */
  .cmp-table td {
    padding: 20px 28px;
    vertical-align: top;
    font-size: 14px;
    line-height: 1.6;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    /* ``text-wrap: balance`` over ``pretty`` for table cells —
       balance is the typographically correct tool for short
       multi-line blocks in narrow columns.  pretty only kills
       widows; balance additionally shapes every cell so its lines
       are roughly equal width — each cell reads as a deliberately-
       formed block instead of a paragraph that happened to wrap.
       Same headline-balancing heuristic used in careful marketing type.  Browser
       support matches pretty (Chromium 117+ / Safari 17.4+ /
       Firefox 124+) and degrades gracefully — older browsers
       render exactly as they did before this rule landed. */
    text-wrap: balance;
  }

  .cmp-cap {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    width: 20%;
    font-size: 15px;
  }

  .cmp-old {
    color: rgba(255, 255, 255, 0.35);
    width: 38%;
    font-size: 13.5px;
  }

  .cmp-new {
    color: var(--text);
    width: 42%;
    font-size: 13.5px;
    background: rgba(255, 107, 43, 0.035);
    border-left: 2px solid rgba(255, 107, 43, 0.15);
  }

  /* ---- Alternating rows ---- */
  .cmp-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
  }

  .cmp-table tbody tr:nth-child(even) .cmp-new {
    background: rgba(255, 107, 43, 0.05);
  }

  /* ---- Hover ---- */
  .cmp-table tbody tr {
    transition: background 0.15s ease;
  }

  .cmp-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
  }

  .cmp-table tbody tr:hover .cmp-new {
    background: rgba(255, 107, 43, 0.07);
  }

  /* ---- Last row (no bottom border) ---- */
  .cmp-table tbody tr:last-child td {
    border-bottom: none;
  }

  /* ---- Mic-drop row ---- */
  .cmp-last {
    background: rgba(255, 107, 43, 0.06) !important;
  }

  .cmp-last .cmp-cap {
    color: var(--accent);
    font-size: 15px;
  }

  .cmp-last .cmp-old {
    color: rgba(255, 255, 255, 0.18);
    font-style: italic;
  }

  .cmp-last .cmp-new {
    color: var(--accent);
    font-weight: 600;
    font-size: 14px;
    background: rgba(255, 107, 43, 0.1) !important;
    border-left-color: var(--accent);
  }

  /* ---- Tier badges ---- */
  .cmp-tier {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 3px;
    vertical-align: middle;
  }

  .cmp-tier-pro {
    color: var(--accent);
    background: rgba(255, 107, 43, 0.12);
  }

  .cmp-tier-business {
    color: #6ea8fe;
    background: rgba(110, 168, 254, 0.10);
  }

  /* ---- Responsive ---- */
  @media (max-width: 768px) {
    .cmp-section {
      padding: 56px 0;
    }

    .cmp-table th {
      padding: 14px 16px;
      font-size: 10px;
    }

    .cmp-table td {
      padding: 14px 16px;
    }

    .cmp-cap {
      white-space: normal;
      font-size: 13px;
    }

    .cmp-old, .cmp-new {
      font-size: 12px;
    }
  }
</style>
