Feature Timeline Flow

---
/**
 * FeatureTimelineFlow — Full-page step-by-step product architecture and workflow section with glowing nodes.
 * 
 * @param {string} badge - Eyebrow badge text.
 * @param {string} title - Section main heading.
 * @param {string} subtitle - Description text.
 */
interface Props {
  badge?: string;
  title?: string;
  subtitle?: string;
  className?: string;
}

const {
  badge = "Step-by-Step Workflow",
  title = "From Idea to Production in 3 Simple Steps",
  subtitle = "Streamline your frontend engineering lifecycle with an intuitive, pre-tested architecture.",
  className = ""
} = Astro.props;

const steps = [
  {
    number: "01",
    tag: "Install & Setup",
    title: "One Command Installation",
    desc: "Add astro-component-kit to your Astro project with npm. Zero complex configuration files or build tool plugins required.",
    code: "npm install astro-component-kit",
    color: "#6366f1"
  },
  {
    number: "02",
    tag: "Compose & Theme",
    title: "Import Modular Components",
    desc: "Import accessible cards, navigation bars, interactive inputs, and 3D scenes directly into your Astro frontmatter with strict TypeScript typings.",
    code: "import { GlassCard, StatCard } from 'astro-component-kit';",
    color: "#eab308"
  },
  {
    number: "03",
    tag: "Build & Deploy",
    title: "Deploy Anywhere at 100/100 Speed",
    desc: "Generate static pre-rendered HTML with zero runtime JavaScript. Deploy effortlessly to Coolify, Vercel, Cloudflare Pages, or Docker.",
    code: "npm run build && coolify deploy",
    color: "#10b981"
  }
];
---

<div class="cq-feature-timeline-flow-cq">
<section class={`timeline-section ${className}`} aria-labelledby="timeline-title">
  <div class="timeline-bg" aria-hidden="true">
    <div class="timeline-glow"></div>
  </div>

  <div class="container">
    <!-- Header -->
    <div class="section-header">
      {badge && <span class="section-badge">{badge}</span>}
      <h2 id="timeline-title" class="section-title">{title}</h2>
      <p class="section-subtitle">{subtitle}</p>
    </div>

    <!-- Timeline Steps -->
    <div class="steps-flow">
      <div class="flow-line" aria-hidden="true"></div>

      {steps.map((step) => (
        <div class="step-card">
          <div class="step-badge-circle" style={`--step-color: ${step.color};`}>
            <span>{step.number}</span>
          </div>
          <div class="step-card__body">
            <span class="step-tag" style={`color: ${step.color};`}>{step.tag}</span>
            <h3 class="step-title">{step.title}</h3>
            <p class="step-desc">{step.desc}</p>
            <div class="step-code">
              <code>{step.code}</code>
            </div>
          </div>
        </div>
      ))}
    </div>
  </div>
</section>
</div>
<style>
  .cq-feature-timeline-flow-cq { container-type: inline-size; }
  .timeline-section {
    position: relative;
    padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
    background: var(--c-bg-primary, #030712);
    overflow: hidden;
  }

  .timeline-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }

  .timeline-glow {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 500px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.1), transparent 70%);
    filter: blur(120px);
  }

  .container {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
  }

  .section-header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 4rem;
  }

  .section-badge {
    display: inline-flex;
    padding: 0.35rem 0.9rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--c-primary, #b8860b) 12%, transparent);
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, 0.25);
    margin-bottom: var(--sp-4, 1rem);
  }

  .section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--sp-4, 1rem);
  }

  .section-subtitle {
    font-size: 1.1rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0;
  }

  /* Steps Flow */
  .steps-flow {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  .flow-line {
    position: absolute;
    top: 30px;
    bottom: 30px;
    left: 27px;
    width: 2px;
    background: linear-gradient(180deg, #6366f1, #eab308, #10b981);
    opacity: 0.3;
    z-index: 0;
  }

  .step-card {
    position: relative;
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    z-index: 1;
  }

  .step-badge-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #0f172a;
    border: 2px solid var(--step-color, #6366f1);
    box-shadow: 0 0 20px -3px var(--step-color, #6366f1);
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
  }

  .step-card__body {
    flex: 1;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
    border-radius: 20px;
    padding: 2rem;
    transition: transform 0.3s ease, border-color 0.3s ease;
  }

  .step-card__body:hover {
    transform: translateX(4px);
    border-color: rgb(var(--ink-rgb, 255 255 255) / 0.18);
  }

  .step-tag {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .step-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    margin: 0.4rem 0 0.6rem;
  }

  .step-desc {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0 0 1.25rem;
  }

  .step-code {
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
    border-radius: 10px;
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    color: #93c5fd;
    overflow-x: auto;
  }

  @container (max-width: 640px) {
    .flow-line {
      display: none;
    }
    .step-card {
      flex-direction: column;
      gap: 1rem;
    }
  }
</style>