// Stories — the broader content section Inga asked for instead of a pure
// recipe blog (site notes 2026-06-12: producer portraits, people and their
// opinions, general news/media, events & tastings & pop-ups, recipes,
// tips & tricks). "Stories" was her suggested name over "Blog".
//
// Content source: Shopify metaobject of type "story" with fields
//   title (Einzeiliger Text) · category (Einzeiliger Text — one of:
//   Produzenten, Events & Tastings, Tipps & Tricks, News)
//   teaser (Mehrzeiliger Text) · body (Mehrzeiliger Text)
//   image (Datei, optional)   · date (Einzeiliger Text, e.g. "Juni 2026")
//
// Recipes stay their own metaobject (already live) — the Stories page simply
// shows them as one category alongside the rest. The fallback below keeps
// the page alive until the metaobject exists; App.jsx overwrites
// window.STORIES after boot. Fallback entries are MOCKUP content for the
// design presentation.
const STORIES_FALLBACK = [
  {
    slug: "zu-besuch-manufaktur-brunnen",
    title: "Zu Besuch: Manufaktur Brunnen am Zürichsee",
    category: "Produzenten",
    date: "Juni 2026",
    teaser: "Vier Leute, eine alte Seidenweberei und der beste Holunder der Region. Ein Nachmittag bei den Menschen hinter unseren Garten-Spritz.",
    body: "Wer die Manufaktur Brunnen besucht, riecht sie vor dem ersten Schritt durch die Tür: Holunderblüten, kalt angesetzt, in grossen Glasballons direkt am Fenster.\n\nSeit 2022 füllt das Vierer-Team hier seine Spritz-Basen ab. Der Holunder kommt von einer Wiese oberhalb des Sees, die Zitronenmelisse aus dem eigenen Garten hinter dem Haus, die Gurken vom Nachbarhof. Grosse Romantik, kleine Chargen: an einem guten Tag verlassen achthundert Flaschen das Haus.\n\nFür den Garten ist Brunnen der Beweis, dass alkoholfrei nicht nach Verzicht schmecken muss. Wer einmal probiert hat, wie viel Tiefe eine kalt mazerierte Blüte mitbringt, bestellt das zweite Glas ohne Hintergedanken.",
  },
  {
    slug: "tasting-zuerich-juli",
    title: "Offenes Tasting in Zürich: der Garten zum Probieren",
    category: "Events & Tastings",
    date: "Juli 2026",
    teaser: "Ein Abend, sechs Sorten, ehrliche Meinungen. Wir schenken aus und ihr sagt uns, was ins Sortiment kommt.",
    body: "Am letzten Freitag im Juli stellen wir den ganzen Garten auf den Tresen: alle sechs Sorten, dazu zwei Kandidaten, die es noch nicht ins Sortiment geschafft haben.\n\nIhr probiert, wir notieren. Was überzeugt, bleibt. Was durchfällt, fliegt raus — so einfach ist die Regel, nach der wir kuratieren.\n\nDer Eintritt ist frei, die Plätze sind begrenzt. Anmeldung per Mail an hallo@aperogarden.ch, Stichwort «Tasting Juli».",
  },
  {
    slug: "lagerung-angebrochene-flaschen",
    title: "Wie lange hält eine angebrochene Flasche?",
    category: "Tipps & Tricks",
    date: "Juni 2026",
    teaser: "Kurz: länger als du denkst, wenn du zwei Dinge richtig machst. Kühl lagern und die Luft draussen halten.",
    body: "Die häufigste Frage an unserem Stand: «Und wie lange hält das, wenn es offen ist?»\n\nSpritz und Sodas leben von der Kohlensäure. Gut verschlossen und im Kühlschrank bleiben sie etwa drei Tage frisch. Ein Karbonisierungs-Verschluss (gibt es für wenige Franken) verlängert das auf knapp eine Woche.\n\nDie Apéritifs sind robuster: höher konzentriert, bitterer, weniger empfindlich. Im Kühlschrank halten sie zwei bis drei Wochen, ohne an Charakter zu verlieren. Faustregel: je bitterer der Drink, desto geduldiger die Flasche.",
  },
  {
    slug: "presse-nzz-alkoholfrei",
    title: "Die NZZ über die neue alkoholfreie Apéro-Kultur",
    category: "News",
    date: "Mai 2026",
    teaser: "«Der Apéro wird erwachsen» — ein lesenswertes Stück über die Szene, in der wir uns jeden Tag bewegen.",
    body: "Die NZZ am Sonntag hat der alkoholfreien Apéro-Kultur eine Doppelseite gewidmet, und wir haben sie mit Freude gelesen.\n\nDie These des Artikels: Alkoholfrei ist kein Verzichtsthema mehr, sondern eine eigene Genusskategorie mit eigenem Handwerk, eigenen Preisen und einem Publikum, das beides versteht.\n\nDass wir das unterschreiben, überrascht niemanden. Schön ist, dass es jetzt auch die grosse Presse tut.",
  },
];
window.STORIES = STORIES_FALLBACK;

// Category chips: keys are the canonical category values stored in Shopify;
// labels translate via i18n.
const STORY_CATS = [
  { key: "Alle",              tkey: "stories.cat.all" },
  { key: "Produzenten",       tkey: "stories.cat.producers" },
  { key: "Rezepte",           tkey: "stories.cat.recipes" },
  { key: "Events & Tastings", tkey: "stories.cat.events" },
  { key: "Tipps & Tricks",    tkey: "stories.cat.tipps" },
  { key: "News",              tkey: "stories.cat.news" },
];

function StoryCard({ s, onOpenStory }) {
  return (
    <article
      className="rcard"
      onClick={() => onOpenStory(s)}
      role="button"
      tabIndex={0}
      aria-label={s.title}
      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onOpenStory(s); } }}
    >
      {s.image && (
        <div className="rcard__media">
          <img src={s.image} alt={s.title} loading="lazy" />
        </div>
      )}
      <div className="rcard__body">
        <span className="eyebrow">{s.category}{s.date ? ` · ${s.date}` : ""}</span>
        <h3 className="rcard__name">{s.title}</h3>
        <p className="rcard__intro">{s.teaser}</p>
      </div>
    </article>
  );
}

function Stories({ onOpenRecipe, onOpenStory }) {
  const [cat, setCat] = useState("Alle");
  const stories = (typeof window !== "undefined" && window.STORIES) || STORIES_FALLBACK;
  const recipes = (typeof window !== "undefined" && window.RECIPES) || [];

  const showStories = cat === "Alle" ? stories : stories.filter((s) => s.category === cat);
  const showRecipes = (cat === "Alle" || cat === "Rezepte") ? recipes : [];

  return (
    <section className="section" style={{ paddingTop: 48 }}>
      <div className="wrap">
        <div className="collection__head">
          <span className="eyebrow">{t("stories.eyebrow")}</span>
          <h2>{t("stories.h2")}</h2>
          <p>{t("stories.lead")}</p>
        </div>

        <div className="collection__chips" style={{ marginBottom: 36 }}>
          {STORY_CATS.map((c) => (
            <button key={c.key} className={`chip${cat === c.key ? " chip--on" : ""}`} onClick={() => setCat(c.key)}>
              {t(c.tkey)}
            </button>
          ))}
        </div>

        <div className="rgrid">
          {showStories.map((s) => <StoryCard key={s.slug} s={s} onOpenStory={onOpenStory} />)}
          {showRecipes.map((r) => (
            <article
              key={r.slug}
              className="rcard"
              onClick={() => onOpenRecipe(r)}
              role="button"
              tabIndex={0}
              aria-label={`${r.name} Rezept öffnen`}
              onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onOpenRecipe(r); } }}
            >
              <div className="rcard__media">
                <img src={r.image} alt={r.name} loading="lazy" />
              </div>
              <div className="rcard__body">
                <span className="eyebrow">{t("stories.cat.recipes")} · {r.classic}</span>
                <h3 className="rcard__name">{r.name}</h3>
                <p className="rcard__intro">{r.intro}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// Single story article view.
function StoryPage({ story, onNav }) {
  const paragraphs = String(story.body || story.teaser || "").split(/\n\s*\n/).filter(Boolean);
  return (
    <article className="page-static">
      <div className="page-static-wrap">
        <a className="story__back" onClick={() => onNav("stories")}>{t("stories.back")}</a>
        <span className="eyebrow">{story.category}{story.date ? ` · ${story.date}` : ""}</span>
        <h1>{story.title}</h1>
        {story.image && (
          <div className="story__media">
            <img className="product-photo" src={story.image} alt={story.title} />
          </div>
        )}
        <div className="page-static__body">
          {paragraphs.map((p, i) => <p key={i}>{p}</p>)}
        </div>
      </div>
    </article>
  );
}
Object.assign(window, { Stories, StoryPage });