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

const title = 'Building Your Own | Learning Lab';
const description = 'Step-by-step guide to building your own multi-phase workflow using the test harness pattern.';

const currentGuide = 2;
const guides = [
  { slug: 'start-here', title: 'Start Here', number: 0 },
  { slug: 'pattern-explained', title: 'Pattern Explained', number: 1 },
  { slug: 'building-your-own', title: 'Building Your Own', number: 2 },
  { slug: 'debugging-tips', title: 'Debugging Tips', number: 3 },
  { slug: 'orchestration-pattern', title: 'Orchestration', number: 4 },
  { slug: 'visual-map', title: 'Visual Map', number: 5 },
  { slug: 'reference-implementation', title: 'Reference', number: 6 },
  { slug: 'overview', title: 'Overview', number: 7 }
];
---

<BaseLayout title={title} description={description}>
  <div class="guide-page">
    <div class="guide-container">
      <div class="progress-bar">
        <div class="progress-fill" style="width: 37.5%"></div>
      </div>

      <div class="guide-header">
        <a href="/learning" class="back-link">← Back to Learning Hub</a>
        <div class="guide-meta">
          <span>Guide 3 of 8</span>
          <span>30 min read</span>
        </div>
      </div>

      <article class="guide-content">
        <h1>Building Your Own Workflow</h1>

        <div class="goal-box">
          <strong>Goal:</strong> Adapt the reference implementation for your production use case
        </div>

        <section>
          <h2>Full Guide Available on GitHub</h2>
          <p>This comprehensive 30-minute guide walks you through building a custom multi-phase workflow from scratch.</p>
          <p>You'll learn how to:</p>
          <ul>
            <li>Design your workflow phases</li>
            <li>Create orchestrator logic</li>
            <li>Implement validation gates</li>
            <li>Add verification scripts</li>
            <li>Deploy to production</li>
          </ul>
          <div class="source-link-box">
            <a href="https://github.com/jeremylongshore/claude-code-plugins/blob/main/workspace/lab/GUIDE-02-BUILDING-YOUR-OWN.md" class="github-link" target="_blank" rel="noopener noreferrer">
              View Full Guide on GitHub →
            </a>
          </div>
        </section>
      </article>

      <nav class="guide-nav">
        <a href="/learning/pattern-explained">← Pattern Explained</a>
        <a href="/learning/debugging-tips">Debugging Tips →</a>
      </nav>
    </div>
  </div>
</BaseLayout>

<style>
.guide-page{min-height:100vh;background:var(--brand-light)}.guide-container{max-width:900px;margin:0 auto;padding:2rem 1rem}.progress-bar{width:100%;height:4px;background:var(--brand-light-gray);border-radius:2px;margin-bottom:2rem}.progress-fill{height:100%;background:linear-gradient(90deg,var(--brand-orange),var(--brand-orange))}.guide-header{margin-bottom:2rem}.back-link{color:var(--brand-mid-gray);text-decoration:none;font-size:.875rem}.guide-meta{display:flex;gap:1rem;font-size:.875rem;color:var(--brand-mid-gray);margin-top:.5rem}.guide-content{background:var(--brand-light-gray);border:1px solid var(--brand-light-gray);border-radius:.5rem;padding:3rem;margin-bottom:2rem}.guide-content h1{font-size:2.5rem;color:var(--brand-dark);margin:0 0 2rem}.guide-content h2{font-size:1.75rem;color:var(--brand-dark);margin:2.5rem 0 1rem;border-bottom:2px solid var(--brand-light-gray);padding-bottom:.5rem}.guide-content p{color:var(--brand-mid-gray);line-height:1.7;margin:1rem 0}.guide-content ul{color:var(--brand-mid-gray);padding-left:2rem}.guide-content li{margin:.5rem 0}.goal-box{background:linear-gradient(135deg,rgba(217,119,87,.2),rgba(217,119,87,.2));border-left:4px solid var(--brand-orange);padding:1rem 1.5rem;margin:2rem 0;border-radius:.375rem;color:var(--brand-dark)}.source-link-box{text-align:center;margin:2rem 0}.github-link{display:inline-block;padding:1rem 2rem;background:var(--brand-orange);color:white;text-decoration:none;border-radius:.375rem;font-weight:600}.github-link:hover{background:var(--brand-orange-dark)}.guide-nav{display:flex;justify-content:space-between;margin-top:2rem}.guide-nav a{padding:1rem 1.5rem;background:var(--brand-light-gray);border:1px solid var(--brand-light-gray);border-radius:.5rem;color:var(--brand-dark);text-decoration:none}.guide-nav a:hover{border-color:var(--brand-orange)}
</style>
