---
import features from '../features.json';

// Single source of truth: site/src/features.json — the SAME list the README
// Features table is generated from (scripts/gen-readme.mjs), so the
// two can't drift. The bento shows the items that carry `card` metadata; cards
// deep-link into the Studio Wall channel that demos them live.
const cells = features.flatMap((f) =>
  f.card
    ? [
        {
          icon: f.icon,
          title: f.name,
          body: f.card.blurb ?? f.desc,
          href: f.card.href,
        },
      ]
    : []
);
---

<section id="features" class="features" data-floor="4">
  <div class="container">
    <div class="section-head reveal">
      <p class="eyebrow">4F · amenities — the office is alive</p>
      <h2>Not a dashboard. A little world.</h2>
      <p class="lead">
        pixtuoid renders your agents as coworkers in a top-down pixel office — with the small
        touches that make it worth glancing at.
      </p>
    </div>

    <div class="bento">
      {
        cells.map((c) => (
          <article class="bento__cell reveal">
            <div class="bento__body">
              <span class="bento__icon" aria-hidden="true">
                {c.icon}
              </span>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
              {c.href && (
                <a class="bento__link" href={c.href}>
                  See it live →
                </a>
              )}
            </div>
          </article>
        ))
      }
    </div>
  </div>
</section>

<style>
  .bento {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
  @media (min-width: 720px) {
    .bento {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1000px) {
    .bento {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .bento__cell {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
    transition:
      transform 0.2s ease,
      box-shadow 0.3s ease;
  }
  .bento__cell:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }
  .bento__icon {
    display: block;
    font-size: 1.6rem;
    margin-bottom: 0.45rem;
  }
  .bento__body {
    padding: 1rem 1.2rem 1.3rem;
  }
  .bento__body h3 {
    margin-bottom: 0.3rem;
  }
  .bento__body p {
    color: var(--fg-muted);
    font-size: 0.98rem;
    line-height: 1.55;
  }
  .bento__link {
    display: inline-block;
    margin-top: 0.6rem;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--coral-deep);
    text-decoration: none;
  }
  :global([data-theme='night']) .bento__link {
    color: var(--coral);
  }
</style>
