---
import BaseLayout from '../layouts/BaseLayout.astro';

interface Integration {
  name: string;
  title: string;
  description: string;
  icon: string;
  tag: string;
}

const printerIntegrations: Integration[] = [
  {
    name: 'octoprint',
    title: 'OctoPrint',
    description:
      'Connect any OctoPrint-powered printer to Kiln so AI agents can run monitored prints, queue jobs, and enforce safety checks through one interface.',
    icon: '🐙',
    tag: 'REST API',
  },
  {
    name: 'moonraker',
    title: 'Moonraker / Klipper',
    description:
      'Use Kiln with Moonraker and Klipper printers for high-speed workflows, fleet routing, and JSON-first automation in CLI or MCP.',
    icon: '🌙',
    tag: 'REST API',
  },
  {
    name: 'creality',
    title: 'Creality',
    description:
      'Connect Creality K1, K2, Hi, Ender V3 KE, and similar CrealityOS printers through local Moonraker when reachable on the LAN. Older Marlin Creality machines still work through OctoPrint or Direct USB.',
    icon: '🟩',
    tag: 'Moonraker',
  },
  {
    name: 'bambu',
    title: 'Bambu Lab',
    description:
      'Bring Bambu Lab printers (X1C, P1S, P1P, A1, A1 Mini) into an AI-native workflow with controlled commands, telemetry, and queue orchestration.',
    icon: '🟦',
    tag: 'MQTT',
  },
  {
    name: 'prusa',
    title: 'Prusa Link',
    description:
      'Run Prusa printers through a consistent API so agents can monitor status, launch prints, and manage multi-printer jobs without custom glue code.',
    icon: '🟧',
    tag: 'REST API',
  },
  {
    name: 'elegoo',
    title: 'Elegoo',
    description:
      'Give AI agents access to Elegoo printers with standardized command handling, safety profiles, and remote monitoring inside the Kiln control plane.',
    icon: '⬛',
    tag: 'REST API',
  },
  {
    name: 'usb',
    title: 'Direct USB',
    description:
      'Connect any Marlin-based printer over USB — no OctoPrint or Klipper needed. Plug in a cable and go. Works with Ender 3, Prusa MK3, CR-10, and any printer running Marlin or RepRapFirmware.',
    icon: '🔌',
    tag: 'USB',
  },
];

const ecosystemIntegrations: Integration[] = [
  {
    name: 'craftcloud',
    title: 'Craftcloud',
    description:
      'Get quotes and place outsourced 3D print orders across 150+ providers when local printers are busy, offline, or unavailable.',
    icon: '☁️',
    tag: 'Fulfillment',
  },
  {
    name: 'marketplaces',
    title: 'Search 3rd-Party Marketplaces',
    description:
      'Search and download 3D models from MyMiniFactory (works out of the box) and Cults3D (search only, requires your own API key). Find existing blueprints before generating from scratch.',
    icon: '🔍',
    tag: 'Discovery',
  },
  {
    name: 'slicing',
    title: 'PrusaSlicer & OrcaSlicer',
    description:
      'Auto-detect installed slicers. Slice STL files with bundled printer profiles, adaptive layer heights, and material-aware settings. Go from model to G-code in one call.',
    icon: '✂️',
    tag: 'Slicing',
  },
  {
    name: 'mcp',
    title: 'Model Context Protocol',
    description:
      'Expose Kiln as an MCP server so Claude, GPT, and other AI agents can use 793 MCP tools safely with structured, typed responses.',
    icon: '🤖',
    tag: 'AI Protocol',
  },
  {
    name: 'generation',
    title: 'Text & Sketch to 3D',
    description:
      'Generate printable models from text or sketches via Gemini Deep Think, Meshy, Tripo3D, Stability AI, or parametric OpenSCAD. Auto-discovered from env vars.',
    icon: '✨',
    tag: 'Generation',
  },
  {
    name: 'webhooks',
    title: 'Webhooks & Event Bus',
    description:
      'Register HTTP endpoints for instant notifications when jobs complete, fail, or change state. HMAC-SHA256 signed payloads for secure integration.',
    icon: '🔔',
    tag: 'Events',
  },
];

const integrationSchema = {
  '@type': 'ItemList',
  name: 'Kiln Integrations',
  itemListElement: [...printerIntegrations, ...ecosystemIntegrations].map(
    (integration, index) => ({
      '@type': 'ListItem',
      position: index + 1,
      name: integration.title,
      description: integration.description,
    }),
  ),
};
---

<BaseLayout
  title="Kiln Integrations — OctoPrint, Moonraker, Creality, Bambu, Prusa, Elegoo, MCP"
  description="Kiln integrations for OctoPrint, Moonraker, Creality, Bambu Lab, Prusa Link, Elegoo, MCP clients, fulfillment, and model marketplaces."
  current="integrations"
  keywords={[
    'kiln integrations',
    'octoprint ai tools',
    'moonraker mcp integration',
    'creality k1 max ai tools',
    'bambu lab ai tools',
    'prusa link ai tools',
    'ai tools for 3d printer control',
  ]}
  schema={integrationSchema}
>
  <section class="integrations-hero">
    <div class="container">
      <h1>Kiln integrations for the full 3D printing stack</h1>
      <p class="lead">
        Kiln connects AI agents to printers, slicers, fulfillment providers, and model marketplaces.
        One control plane, consistent safety model, and shared agent workflow.
      </p>
      <div class="stat-row">
        <div class="stat">
          <span class="stat-num">7</span>
          <span class="stat-label">Printer backends</span>
        </div>
        <div class="stat">
          <span class="stat-num">150+</span>
          <span class="stat-label">Fulfillment providers</span>
        </div>
        <div class="stat">
          <span class="stat-num">2</span>
          <span class="stat-label">3rd-party marketplaces</span>
        </div>
        <div class="stat">
          <span class="stat-num">789</span>
          <span class="stat-label">MCP tools</span>
        </div>
      </div>
    </div>
  </section>

  <section class="integrations-section bordered">
    <div class="container">
      <div class="section-header">
        <span class="section-label">Printer backends</span>
        <h2>Works with your existing printers</h2>
        <p class="lead">Use Kiln as a universal interface for mixed-brand 3D printer fleets.</p>
      </div>
      <div class="printer-grid">
        {printerIntegrations.map((integration, i) => (
          <article class="card integration-card" id={integration.name}>
            <div class="card-inner">
              <div class="card-top">
                <span class="card-icon">{integration.icon}</span>
                <span class="card-tag">{integration.tag}</span>
              </div>
              <h3>{integration.title}</h3>
              <p>{integration.description}</p>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>

  <section class="integrations-section bordered">
    <div class="container">
      <div class="section-header">
        <span class="section-label">Ecosystem</span>
        <h2>Fulfillment, discovery, and AI interop</h2>
        <p class="lead">Route to 3rd-party fulfillment providers, search existing marketplaces, generate models, and plug into AI agents.</p>
      </div>
      <div class="ecosystem-grid">
        {ecosystemIntegrations.map((integration) => (
          <article class="card integration-card" id={integration.name}>
            <div class="card-inner">
              <div class="card-top">
                <span class="card-icon">{integration.icon}</span>
                <span class="card-tag">{integration.tag}</span>
              </div>
              <h3>{integration.title}</h3>
              <p>{integration.description}</p>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>

  <section class="integrations-cta bordered">
    <div class="container">
      <h2>Start integrating in minutes</h2>
      <p class="lead">
        Install Kiln, connect your printer backend, and expose tools to your AI agent through MCP or the CLI.
      </p>
      <div class="cta-actions">
        <a href="/install" class="btn">Install Kiln</a>
        <a href="/docs" class="btn btn-ghost">Read Docs</a>
      </div>
    </div>
  </section>
</BaseLayout>

<style>
  .integrations-hero {
    text-align: center;
    padding: 96px 0 48px;
  }

  .integrations-hero h1 {
    font-size: clamp(30px, 4.5vw, 48px);
    line-height: 1.15;
    margin-bottom: 16px;
  }

  .integrations-hero .lead {
    max-width: 700px;
    margin: 0 auto 48px;
  }

  /* Stat row */
  .stat-row {
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
  }

  .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .stat-num {
    font-size: 36px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
  }

  .stat-label {
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* Section */
  .integrations-section {
    padding: 64px 0;
  }

  .bordered {
    border-top: 1px solid var(--border);
  }

  .section-header {
    margin-bottom: 36px;
  }

  .section-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid rgba(255, 107, 43, 0.25);
    border-radius: 20px;
    padding: 3px 12px;
    margin-bottom: 12px;
  }

  .section-header h2 {
    font-size: clamp(22px, 3vw, 32px);
    margin-bottom: 10px;
  }

  .section-header .lead {
    color: var(--text-muted);
    max-width: 600px;
  }

  /* Printer grid: 3x2 */
  .printer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .card-wide p {
    grid-row: 2;
    grid-column: 2;
    margin-top: 8px;
  }

  /* Ecosystem grid: 2×2 */
  .ecosystem-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* Cards */
  .integration-card {
    padding: 0;
    height: 100%;
    transition: border-color 0.15s ease, transform 0.15s ease;
  }

  .integration-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
  }

  .card-inner {
    padding: 24px;
  }

  .card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }

  .card-icon {
    font-size: 22px;
    line-height: 1;
  }

  .card-tag {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--bg-code);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 8px;
    font-family: var(--mono);
  }

  .integration-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .integration-card p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
  }

  /* CTA */
  .integrations-cta {
    text-align: center;
    padding: 64px 0 96px;
  }

  .integrations-cta h2 {
    font-size: clamp(22px, 3vw, 32px);
    margin-bottom: 12px;
  }

  .integrations-cta .lead {
    margin: 0 auto 28px;
    max-width: 600px;
  }

  .cta-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  @media (max-width: 640px) {
    .integrations-hero {
      padding: 64px 0 32px;
    }

    .stat-row {
      gap: 28px;
    }

    .stat-num {
      font-size: 28px;
    }

    .printer-grid,
    .ecosystem-grid {
      grid-template-columns: 1fr;
    }

    .integrations-section {
      padding: 44px 0;
    }

    .integrations-cta {
      padding: 44px 0 64px;
    }
  }
</style>
