---
import BaseLayout from '../layouts/BaseLayout.astro';
import Hero from '../components/Hero.astro';
import GitForThreeDHighlight from '../components/GitForThreeDHighlight.astro';
import FeatureGrid from '../components/FeatureGrid.astro';
import Steps from '../components/Steps.astro';
import ComparisonTable from '../components/ComparisonTable.astro';
import CTA from '../components/CTA.astro';

---

<BaseLayout
  title="Kiln 3D — Connect AI Agents to 3D Printers | OctoPrint, Creality, Bambu"
  description="Kiln 3D is open-source infrastructure that lets AI agents design objects, discover models, and safely operate OctoPrint, Moonraker, Creality, Bambu Lab, Elegoo, and Prusa printers through one MCP server and CLI."
  keywords={[
    'ai agent tools for 3d printers',
    'connect ai to 3d printer',
    'open source 3d printer tools',
    '3d printer tools for ai agents',
    'use ai with 3d printer',
    'mcp server 3d printing',
  ]}
>
  <Hero />

  <!--
    Receipts — promoted to the second screen on 2026-04-25.  The
    two existing object photos already carry the page's two
    strongest promises (one thing
    today / a hundred this week / your factory at home / your
    startup's merch from your bedroom).  Hiding them in section 9
    meant 80% of visitors decided to stay or leave before they
    ever saw the proof.  Promoting the section + re-captioning to
    name the buyer + the time turns the same two assets into the
    page's whole sales pitch on the second scroll.

    Heading is the single load-bearing sentence on the page after
    the hero: "One thing today. Or a hundred this week." — both of
    Adam's bullets in nine words.  Sub-line "Same printer. Same
    desk. One prompt each." carries the at-home / your-own-factory
    half so neither promise has to wait for the captions.

    Captions retain yesterday's italic-quote pattern (the strongest
    typography on the page) and add a time + buyer beat to the
    meta line so each photo proves a different door.

    Earlier shape (centered "A few words. A picture you already
    had. A real object in your hand." with two anonymous coasters
    and the run video) is preserved in git history at
    HEAD~ on 2026-04-24 if a rollback is ever needed.
  -->
  <section id="demo" class="receipts bordered">
    <div class="container">
      <h2 class="receipts-heading">One thing today. Or a hundred this week.</h2>
      <p class="receipts-sub">Same printer. Same desk. One prompt each.</p>

      <div class="receipts-grid">
        <!-- Door 1: one thing, today.  Ash coaster — the
             personal-prototype-by-dinner promise. -->
        <figure class="receipt">
          <div class="receipt-img-wrap">
            <img
              src="/demo/ash-coaster.jpg"
              alt="A white 3D-printed round coaster showing a relief portrait of a French bulldog and the name ASH along the bottom edge, held in a hand"
              loading="lazy"
              width="1200"
              height="1600"
            />
          </div>
          <figcaption class="receipt-caption">
            <p class="receipt-kicker">One thing, today</p>
            <q class="receipt-sentence">a coaster with a photo of my dog Ash</q>
            <p class="receipt-meta">Photo taken at lunch. Sentence sent. In hand by dinner.</p>
            <p class="receipt-printer">Bambu Lab A1 Mini</p>
          </figcaption>
        </figure>

        <!-- Door 2: a hundred this week.  Kiln-branded ashtray —
             the startup-merch / your-own-factory promise. -->
        <figure class="receipt">
          <div class="receipt-img-wrap">
            <img
              src="/demo/kiln-ashtray.jpg"
              alt="A red 3D-printed circular ashtray held in a hand, with the Kiln mark debossed into the inside"
              loading="lazy"
              width="1200"
              height="1600"
            />
          </div>
          <figcaption class="receipt-caption">
            <p class="receipt-kicker">Or a hundred, this week</p>
            <q class="receipt-sentence">an ashtray with our startup&rsquo;s logo</q>
            <p class="receipt-meta">Logo dropped in. Run queued. First of 100 by launch night.</p>
            <p class="receipt-printer">Bambu Lab A1 Mini</p>
          </figcaption>
        </figure>
      </div>

      <div class="receipts-video">
        <p class="receipts-video-label">The full run</p>
        <div class="receipts-video-wrap">
          <video
            src="/demo/kiln-demo-real.mp4"
            autoplay
            muted
            loop
            playsinline
            controls
            preload="metadata"
            aria-label="A Kiln agent runs the end-to-end pipeline: design, slice, print, monitor"
          ></video>
        </div>
      </div>
    </div>
  </section>

  <section class="bordered kit-promise">
    <div class="container">
      <h2 class="lc-heading">From idea to a printed product in an afternoon. Manual included. <span class="kit-pro-pill">Pro</span></h2>
      <p class="lc-lead">Multi-part prints ship with a printable PDF assembly manual &mdash; Bill of Materials, isometric step renders, pause-and-check verification gates.</p>
      <div class="manual-proof">
        <figure>
          <img src="/assets/manual-screenshots/desk-hook-cover.png" alt="Cover page of a Kiln-generated Desk Hook Kit assembly manual with labelled parts and scan-to-verify QR code" loading="lazy" width="1224" height="1584" />
          <figcaption>Cover page &mdash; labelled parts, QR verification, and build summary</figcaption>
        </figure>
        <figure>
          <img src="/assets/manual-screenshots/desk-hook-step-02.png" alt="Kiln-generated manual step page showing the hook arm snapping into the back plate with labelled parts, direction arrow, and instruction copy" loading="lazy" width="1224" height="1584" />
          <figcaption>Per-step page &mdash; part labels, mating arrow, and exact instruction copy</figcaption>
        </figure>
        <figure>
          <img src="/assets/manual-screenshots/desk-hook-step-03.png" alt="Final step of a Kiln-generated Desk Hook Kit manual with the current part highlighted and a warning check below the instruction" loading="lazy" width="1224" height="1584" />
          <figcaption>Final step &mdash; current part highlighted with a pause-and-check warning</figcaption>
        </figure>
      </div>
      <p class="manual-proof-caption">A real PDF generated by Kiln from a simple 3-part desk hook kit &mdash; cover, mid-build, and final step from the same manual.</p>
    </div>
  </section>

  <GitForThreeDHighlight />

  <FeatureGrid
    limit={5}
    moreLink="/features"
    lead="The five capabilities that make Kiln, Kiln."
  />
  <Steps />
  <ComparisonTable />

  <!--
    Intellectual property band — added 2026-05-16 as part of the
    patent-shield rewrite.  Replaces the per-row "Patent Pending"
    badges on the comparison table (13 badges that mapped the
    moat row-by-row) and the per-surface breakdown that used to
    live in the pricing footer.  One quiet, generic line in a
    Series-A-deck "Defensibility" treatment: confirms substance
    without naming filing surfaces a competitor could design
    around.  Same statement appears in the pricing footer; do
    not let the two strings drift.
  -->
  <section class="ip-band bordered">
    <div class="container">
      <p class="ip-label">Intellectual Property</p>
      <p class="ip-statement">Kiln's core technology is protected by multiple US patents pending.</p>
    </div>
  </section>

  <!--
    Topic hub — demoted on 2026-04-25 from section 5 to section 9.
    Rationale: docs navigation doesn't sell, it reassures.
    Reassurance belongs after the visitor is already convinced.
    Curious researchers and existing users still find it; they're
    patient enough to scroll.
  -->
  <section class="topic-hub bordered">
    <div class="container">
      <h2>Explore Kiln by topic</h2>
      <p class="lead">Everything you need for setup, integrations, operations, and production workflows.</p>

      <div class="hub-grid">
        <a href="/install" class="hub-card">
          <h3>Install and setup</h3>
          <p>Quick install, first printer connection, and MCP server setup.</p>
        </a>
        <a href="/integrations" class="hub-card">
          <h3>Printer and ecosystem integrations</h3>
          <p>OctoPrint, Moonraker, Creality, Bambu Lab, Prusa Link, Elegoo, marketplaces, and fulfillment.</p>
        </a>
        <a href="/use-cases" class="hub-card">
          <h3>Use cases</h3>
          <p>Print farm automation, AI prototyping, outsourced production, and lab operations.</p>
        </a>
        <a href="/docs" class="hub-card">
          <h3>Documentation</h3>
          <p>CLI, MCP tools, safety architecture, and full configuration reference.</p>
        </a>
        <a href="/blog" class="hub-card">
          <h3>Releases and updates</h3>
          <p>Feature launches, integration announcements, and real-world print stories.</p>
        </a>
        <a href="/faq" class="hub-card">
          <h3>FAQ</h3>
          <p>Answers on pricing, compatibility, deployment, safety, and operations.</p>
        </a>
      </div>
    </div>
  </section>

  <CTA />
</BaseLayout>

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

  /* ---- Intellectual property band ---- *
   * Quiet, considered "Defensibility" treatment.  Single label
   * + single statement, no list, no badges.  Strict rule: the
   * statement string must match the .patent-footer copy in
   * pricing.astro verbatim.  Drift here = drift in the IP
   * signal; keep them identical. */
  .ip-band {
    padding: 40px 0;
    text-align: center;
  }
  .ip-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 8px;
  }
  .ip-statement {
    font-size: 15px;
    color: var(--text);
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.5;
  }

  /* Shared centered section heading used by the product proof blocks. */
  .lc-heading {
    font-size: clamp(30px, 4.8vw, 54px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.022em;
    color: var(--text);
    margin: 0 auto 22px;
    max-width: 880px;
    text-wrap: balance;
  }
  .lc-lead {
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 620px;
    margin: 0 auto;
    text-wrap: pretty;
  }

  /* Kit-promise — sells the "from object to product" escalation
     after the receipts grid. */
  .kit-promise {
    text-align: center;
    padding: 112px 0 96px;
  }
  @media (max-width: 640px) {
    .kit-promise { padding: 72px 0 60px; }
  }

  /* Pro pill on the kit-promise heading.  Mirrors .g3d-pro-pill in
     GitForThreeDHighlight.astro so both Pro-tier sections wear the
     same quiet tier signal — visual consistency across the page. */
  .kit-pro-pill {
    display: inline-block;
    vertical-align: middle;
    margin-left: 14px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid rgba(255, 107, 43, 0.35);
    border-radius: 999px;
    position: relative;
    top: -0.15em;
  }

  /* 3-image proof strip below the kit-promise heading.  Square
     PNGs rendered by Kiln's assembly-manual generator on a cream
     background; the figcaption sits below each image as a quiet
     label.  Grid collapses to single-column under 720px. */
  .manual-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1040px;
    margin: 56px auto 0;
  }
  .manual-proof figure {
    margin: 0;
    min-width: 0;
    text-align: center;
  }
  .manual-proof img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff8ee;
    display: block;
  }
  .manual-proof figcaption {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
  }
  .manual-proof-caption {
    margin: 24px auto 0;
    font-size: 13px;
    color: var(--text-muted);
    max-width: 720px;
    font-style: italic;
  }
  @media (max-width: 720px) {
    .manual-proof {
      grid-template-columns: 1fr;
      gap: 32px;
      max-width: min(100%, 420px);
      width: 100%;
    }
  }

  .topic-hub {
    /* Symmetric vertical padding so the section breathes evenly
       between its border-top and the next section's border. */
    padding: 72px 0 80px;
  }

  .hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
  }

  .hub-card {
    display: block;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
  }

  .hub-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    text-decoration: none;
  }

  .hub-card h3 {
    color: var(--text);
    font-size: 18px;
    margin-bottom: 8px;
  }

  .hub-card p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
  }

  /* Receipts — demo section.  Object-first, no Telegram-screenshot
     grid, no "Read the full story" link punt.  Two hero prints
     captioned with the sentence that produced them, sitting above
     the unedited 1:18 agent-run video.  Typography matches the
     surrounding proof sections so the page reads as one system. */
  .receipts {
    padding: 120px 0;
    text-align: center;
  }
  .receipts-heading {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.022em;
    color: var(--text);
    /* Heading + subtitle act as a tight pair — keep them visually
       glued (16px gap) and let the subtitle carry the breath
       before the photo grid below.  Heading max-width tuned so
       "One thing today. Or a hundred this week." wraps into two
       balanced lines on every viewport, making the cadence
       visible: promise A. promise B. */
    margin: 0 auto 16px;
    max-width: 760px;
    text-wrap: balance;
  }
  /* Subtitle under the new two-promise heading.  Carries the
     "at-home / your-own-factory" half of Adam's value props so
     neither door has to wait for the captions to deliver it. */
  .receipts-sub {
    font-size: clamp(15px, 1.7vw, 18px);
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 560px;
    margin: 0 auto 64px;
    text-wrap: pretty;
  }
  /* Per-photo kicker — names which door the visitor is looking
     at without making them parse the caption.  Same uppercase
     voice as the run-video label below for vertical symmetry. */
  .receipt-kicker {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    margin: 0 0 10px;
  }

  .receipts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin: 0 auto 96px;
    max-width: 880px;
  }
  @media (max-width: 720px) {
    .receipts-grid {
      grid-template-columns: 1fr;
      gap: 64px;
    }
  }

  .receipt {
    margin: 0;
    min-width: 0;
    text-align: left;
  }
  .receipt-img-wrap {
    /* Portrait 3:4 frame — natural iPhone photo shape without
       cropping the object.  Subject stays comfortably in view. */
    aspect-ratio: 3 / 4;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 24px;
  }
  .receipt-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .receipt-caption {
    padding: 0 4px;
  }
  /* The sentence — rendered as a soft italic quote.  This is the
     "what they said" half of the prompt/result pair; the image is
     the "what they got."  Together they ARE the demo. */
  .receipt-sentence {
    display: block;
    font-size: clamp(17px, 1.7vw, 20px);
    font-weight: 500;
    line-height: 1.45;
    color: var(--text);
    font-style: italic;
    margin-bottom: 10px;
    text-wrap: pretty;
    quotes: "\201C" "\201D";
  }
  .receipt-sentence::before { content: open-quote; }
  .receipt-sentence::after { content: close-quote; }
  .receipt-meta {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: 0.01em;
  }
  /* Printer attribution — split off the meta line on 2026-04-25
     to let the three-beat poem above ("Photo taken at lunch.
     Sentence sent. In hand by dinner.") keep its rhythm without
     competing with a model number.  Reads as the receipt's
     printed-at-the-bottom strip. */
  .receipt-printer {
    font-size: 12px;
    color: var(--text-subtle, var(--text-muted));
    margin: 6px 0 0;
    letter-spacing: 0.04em;
    opacity: 0.75;
  }

  /* Full-run video block — framed the same as the object cards
     (same border radius, same border, same dark fill) so the
     section reads as one designed surface.  Quiet uppercase label
     above mirrors the kicker at the top of the section for
     vertical symmetry. */
  .receipts-video {
    max-width: 960px;
    margin: 0 auto;
  }
  .receipts-video-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-muted);
    margin: 0 0 18px;
  }
  .receipts-video-wrap {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #000;
    aspect-ratio: 16 / 9;
  }
  .receipts-video-wrap video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
  }

  @media (max-width: 720px) {
    .receipts { padding: 72px 0; }
    .receipts-heading { margin-bottom: 48px; }
    .receipts-grid { margin-bottom: 64px; }
  }

</style>
