---
const steps = [
  { icon: '\u{1F4AC}', label: 'Idea' },
  { icon: '\u{1F4A1}', label: 'Design' },
  { icon: '\u2728', label: 'Generate' },
  { icon: '\u{1F52C}', label: 'Validate' },
  { icon: '\u{1F3A8}', label: 'Decorate' },
  { icon: '\u2702\uFE0F', label: 'Slice' },
  { icon: '\u{1F5A8}', label: 'Print' },
  { icon: '\u{1F4F7}', label: 'Monitor' },
  // Iterate closes the loop — every outcome feeds the next branch.
  // Leaf icon matches the Git-for-3D feature card so the two surfaces
  // read as a single story.
  { icon: '\u{1F33F}', label: 'Iterate' },
];
---

<section id="how-it-works" style="border-top: 1px solid var(--border); padding: 56px 0;">
  <div class="container">
    <h2 style="font-size: clamp(24px, 4vw, 40px); font-weight: 700; margin-bottom: 8px;">How it works</h2>
    <p style="color: var(--text-muted); font-size: 17px; margin-bottom: 36px;">From idea to physical object &mdash; then branch, merge, and print a better one.</p>

    <div style="display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: nowrap;">
      {steps.map((s, i) => (
        <>
          <div style="display: flex; flex-direction: column; align-items: center; text-align: center;">
            <div style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px;">
              {s.icon}
            </div>
            <div style="font-size: 11px; font-weight: 600; color: var(--text); line-height: 1.2;">
              {s.label}
            </div>
          </div>
          {i < steps.length - 1 && (
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(255,107,43,0.4)" stroke-width="2" stroke-linecap="round" style="flex-shrink: 0; margin-top: -12px;">
              <polyline points="9 6 15 12 9 18" />
            </svg>
          )}
        </>
      ))}
    </div>

    <p style="text-align: center; color: var(--text-muted); font-size: 12px; margin-top: 24px;">
      Every step is an MCP tool. Agents compose the pipeline. Humans can run any step from the CLI. Every print outcome feeds the next iteration.
    </p>
  </div>
</section>
