/* NeuralVault — Stories.jsx
   "Space Transitions" — operational reports from the studio.
   Cards driven by STORIES data, filterable by tag. */

const { useState, useMemo } = React;

function StoryCard({ story, onOpen }) {
  const open = () => onOpen(story.id);
  const onKey = (e) => (e.key === "Enter" || e.key === " ") && open();
  return (
    <article className="card" tabIndex={0} onClick={open} onKeyDown={onKey}>
      <div className="card-meta">
        <span className="tag mono">{story.tag}</span>
        <span>{String(story.minutes).padStart(2, "0")} MIN · {story.date}</span>
      </div>
      <div className="card-thumb">
        <span className="glyph">{story.fig}</span>
      </div>
      <h3 className="card-title">{story.title}</h3>
      <p className="card-snip">{story.snippet}</p>
      <div className="card-foot">
        <span>{story.author}</span>
        <span className="card-ref mono">{story.ref}</span>
        <Icon name="arrow" className="card-arrow" />
      </div>
    </article>
  );
}

function StoryFilter({ value, onChange }) {
  return (
    <div className="story-bar">
      {STORY_TAGS.map((t) => (
        <Chip key={t.key} active={value === t.key} onClick={() => onChange(t.key)}>
          {t.label}
        </Chip>
      ))}
    </div>
  );
}

function Stories({ onOpenStory }) {
  const [tag, setTag] = useState("ALL");
  const filtered = useMemo(
    () => (tag === "ALL" ? STORIES : STORIES.filter((s) => s.tag === tag)),
    [tag]
  );

  return (
    <section className="s" id="stories" data-screen-label="03 Transitions">
      <div className="wrap">
        <div className="s-head">
          <div>
            <div className="s-num mono">§02 — Space Transitions</div>
            <h2 className="s-title">
              Operational reports<br />
              <em>The catalyst archive</em>
            </h2>
          </div>
          <p className="s-sub">
            <strong>Field notes</strong> from the engineers, principals, and operators
            redefining the spaces — physical, digital, cognitive — where attention
            and intelligence meet. Each report is logged, dated, and referenced.
          </p>
        </div>

        <StoryFilter value={tag} onChange={setTag} />

        <div className="stories">
          {filtered.map((s) => <StoryCard key={s.id} story={s} onOpen={onOpenStory} />)}
        </div>
      </div>
      <SectionRef pos="br" ref_="REF · ARCHIVE.A" />
    </section>
  );
}

Object.assign(window, { Stories, StoryCard, StoryFilter });