Feature Bento Grid

---
/**
 * FeatureBentoGrid — Full-page modern Bento-Grid features section with interactive widgets and metric cards.
 * 
 * @param {string} badge - Eyebrow badge text.
 * @param {string} title - Main section heading.
 * @param {string} subtitle - Supporting description text.
 */
interface Props {
  badge?: string;
  title?: string;
  subtitle?: string;
  className?: string;
}

const {
  badge = "Core Capabilities",
  title = "Engineered for Extreme Performance",
  subtitle = "Everything you need to build next-generation Astro applications with zero runtime overhead.",
  className = ""
} = Astro.props;
---

<div class="cq-feature-bento-grid-cq">
<section class={`bento-section ${className}`} aria-labelledby="bento-title">
  <div class="bento-bg" aria-hidden="true">
    <div class="bento-glow bento-glow--1"></div>
    <div class="bento-glow bento-glow--2"></div>
  </div>

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

    <!-- Bento Grid Container -->
    <div class="bento-grid">
      <!-- Slot 1: Large Highlight (Span 2 col) -->
      <article class="bento-card bento-card--wide">
        <div class="bento-card__content">
          <div class="bento-card__icon bento-card__icon--primary">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
          </div>
          <span class="bento-tag">Zero Runtime JS</span>
          <h3 class="bento-card__title">Pure Static Architecture</h3>
          <p class="bento-card__desc">
            Components ship zero client-side JavaScript by default, delivering perfect 100/100 Lighthouse performance scores out of the box.
          </p>
          <div class="bento-speed-stat">
            <div class="speed-score">
              <span class="score-number">100</span>
              <span class="score-label">Lighthouse Score</span>
            </div>
            <div class="speed-bars">
              <div class="speed-bar"><span class="bar-fill" style="width: 100%;"></span><span class="bar-name">Performance</span></div>
              <div class="speed-bar"><span class="bar-fill" style="width: 100%;"></span><span class="bar-name">Accessibility</span></div>
              <div class="speed-bar"><span class="bar-fill" style="width: 100%;"></span><span class="bar-name">Best Practices</span></div>
            </div>
          </div>
        </div>
      </article>

      <!-- Slot 2: Security & Accessibility (Tall) -->
      <article class="bento-card bento-card--tall">
        <div class="bento-card__content">
          <div class="bento-card__icon bento-card__icon--gold">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/><path d="m9 12 2 2 4-4"/></svg>
          </div>
          <span class="bento-tag">WCAG 2.1 AA</span>
          <h3 class="bento-card__title">Accessible & Tested</h3>
          <p class="bento-card__desc">
            Every button, input, and modal conforms strictly to WCAG AA guidelines with keyboard navigation and ARIA attributes.
          </p>
          <div class="a11y-pill-list">
            <div class="a11y-pill">✓ Focus Rings Built-in</div>
            <div class="a11y-pill">✓ Keyboard Nav (Tab/Esc)</div>
            <div class="a11y-pill">✓ Contrast Ratio ≥ 4.5:1</div>
            <div class="a11y-pill">✓ Screen Reader Ready</div>
          </div>
        </div>
      </article>

      <!-- Slot 3: Design Tokens & Theming -->
      <article class="bento-card">
        <div class="bento-card__content">
          <div class="bento-card__icon bento-card__icon--cyan">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg>
          </div>
          <span class="bento-tag">CSS Tokens</span>
          <h3 class="bento-card__title">Fluid Design Tokens</h3>
          <p class="bento-card__desc">
            Seamless global variables for colors, typography scales, glass blurs, and border radiuses.
          </p>
          <div class="tokens-preview">
            <span class="color-dot color-dot--gold"></span>
            <span class="color-dot color-dot--indigo"></span>
            <span class="color-dot color-dot--emerald"></span>
            <span class="color-dot color-dot--rose"></span>
          </div>
        </div>
      </article>

      <!-- Slot 4: TypeScript Strict -->
      <article class="bento-card">
        <div class="bento-card__content">
          <div class="bento-card__icon bento-card__icon--blue">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M7 7h10"/><path d="M12 7v10"/></svg>
          </div>
          <span class="bento-tag">TypeScript 5.x</span>
          <h3 class="bento-card__title">Strict Type Safety</h3>
          <p class="bento-card__desc">
            Full TypeScript IntelliSense with prop auto-completion and compile-time validation in your IDE.
          </p>
          <div class="code-snippet-mini">
            <code>interface Props &#123; variant: 'glass' | 'glow' &#125;</code>
          </div>
        </div>
      </article>

      <!-- Slot 5: 3D & Particle Shaders (Wide) -->
      <article class="bento-card bento-card--wide">
        <div class="bento-card__content">
          <div class="bento-card__icon bento-card__icon--purple">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
          </div>
          <span class="bento-tag">Three.js & WebGL</span>
          <h3 class="bento-card__title">Interactive 3D Galaxy & Visuals</h3>
          <p class="bento-card__desc">
            GPU-accelerated particle galaxy backgrounds with smooth physics, mouse-follow damping, and hardware-accelerated shaders.
          </p>
          <div class="live-pill">
            <span class="live-dot"></span>
            <span>60 FPS Fluid Physics Engine</span>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>
</div>
<style>
  .cq-feature-bento-grid-cq { container-type: inline-size; }
  .bento-section {
    position: relative;
    padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
    background: var(--c-bg-primary, #030712);
    overflow: hidden;
  }

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

  .bento-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.25;
  }

  .bento-glow--1 {
    top: 10%;
    left: 15%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #6366f1, transparent 70%);
  }

  .bento-glow--2 {
    bottom: 10%;
    right: 15%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, #d97706, transparent 70%);
  }

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

  .section-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--sp-12, 3rem);
  }

  .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;
  }

  /* Bento Grid */
  .bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .bento-card {
    position: relative;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
    border-radius: var(--r-xl, 20px);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
  }

  .bento-card:hover {
    transform: translateY(-4px);
    border-color: rgb(var(--ink-rgb, 255 255 255) / 0.18);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6);
  }

  .bento-card--wide {
    grid-column: span 2;
  }

  .bento-card--tall {
    grid-row: span 2;
  }

  .bento-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
  }

  .bento-card__icon--primary { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
  .bento-card__icon--gold { background: rgba(234, 179, 8, 0.15); color: #facc15; }
  .bento-card__icon--cyan { background: rgba(6, 182, 212, 0.15); color: #22d3ee; }
  .bento-card__icon--blue { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
  .bento-card__icon--purple { background: rgba(168, 85, 247, 0.15); color: #c084fc; }

  .bento-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 0.5rem;
  }

  .bento-card__title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.75rem;
    line-height: 1.3;
  }

  .bento-card__desc {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0 0 1.5rem;
  }

  /* Internal mini-widgets */
  .bento-speed-stat {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.05);
  }

  .speed-score {
    text-align: center;
    padding-right: 1.5rem;
    border-right: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
  }

  .score-number {
    display: block;
    font-size: 2.2rem;
    font-weight: 900;
    color: #10b981;
    line-height: 1;
  }

  .score-label {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
  }

  .speed-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .speed-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .bar-fill {
    height: 6px;
    background: #10b981;
    border-radius: 999px;
  }

  .bar-name {
    font-size: 0.75rem;
    color: #cbd5e1;
    font-weight: 600;
  }

  .a11y-pill-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .a11y-pill {
    padding: 0.6rem 0.85rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
    border-radius: 8px;
    font-size: 0.82rem;
    color: #cbd5e1;
    font-weight: 500;
  }

  .tokens-preview {
    display: flex;
    gap: 0.5rem;
  }

  .color-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgb(var(--ink-rgb, 255 255 255) / 0.2);
  }
  .color-dot--gold { background: #eab308; }
  .color-dot--indigo { background: #6366f1; }
  .color-dot--emerald { background: #10b981; }
  .color-dot--rose { background: #f43f5e; }

  .code-snippet-mini {
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
    font-size: 0.8rem;
    color: #93c5fd;
    font-family: var(--font-mono, monospace);
  }

  .live-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 9999px;
    font-size: 0.82rem;
    color: #d8b4fe;
    font-weight: 600;
  }

  .live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a855f7;
    box-shadow: 0 0 10px #a855f7;
    animation: pulse 2s infinite ease-in-out;
  }

  @keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
  }

  @container (max-width: 960px) {
    .bento-grid {
      grid-template-columns: 1fr;
    }
    .bento-card--wide, .bento-card--tall {
      grid-column: span 1;
      grid-row: span 1;
    }
    .bento-speed-stat {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
    }
    .speed-score {
      border-right: none;
      border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
      padding-right: 0;
      padding-bottom: 0.75rem;
      width: 100%;
      text-align: left;
    }
  }
</style>