// Produzenten — the people behind the bottles. Inga wants producer stories
// as real site content ("could be quite nice content", site notes 2026-06-12).
//
// Content source: Shopify metaobject of type "producer" with fields
//   name (Einzeiliger Text) · region (Einzeiliger Text)
//   claim (Einzeiliger Text) · story (Mehrzeiliger Text)
//   image (Datei, optional)  · products (Einzeiliger Text, comma-separated
//   product handles — used to link the producer's drinks below the story)
//
// Until that metaobject exists, the fallback below keeps the page alive.
// App.jsx overwrites window.PRODUCERS after boot if Shopify returns entries.
// NOTE: fallback producers are MOCKUP content for the design presentation —
// replace with the real suppliers before launch.
const PRODUCERS_FALLBACK = [
  {
    slug: "manufaktur-brunnen",
    name: "Manufaktur Brunnen",
    region: "Zürichsee, Schweiz",
    claim: "Die Spritz-Spezialisten der ersten Stunde.",
    story: "Ein Vierer-Team in einer alten Seidenweberei am See. Hier entstehen unsere Garten-Spritz: Holunder und Zitronenmelisse aus dem eigenen Garten, Gurke vom Nachbarhof, alles in kleinen Chargen kalt angesetzt. Wer einmal zuschaut, wie hier abgefüllt wird, versteht den Preis einer guten Flasche.",
    products: "garden-spritz-no-1,abendsonne-spritz",
  },
  {
    slug: "botanica-basel",
    name: "Botanica Basel",
    region: "Basel, Schweiz",
    claim: "Bitterkunst aus dem Dreiländereck.",
    story: "Gegründet von zwei ehemaligen Barkeeperinnen, die fanden, dass alkoholfrei nicht harmlos schmecken muss. Enzianwurzel, Bitterorange und Cascarilla werden hier einzeln mazeriert und erst am Ende verschnitten. Das Ergebnis sind Apéritifs mit Länge, Tiefe und einem trocken-bitteren Abgang.",
    products: "bittersusser-aperitif,roter-bitter",
  },
  {
    slug: "kellerei-steinbach",
    name: "Kellerei Steinbach",
    region: "Bündner Herrschaft, Schweiz",
    claim: "Wein-Handwerk, neu gedacht.",
    story: "Eine traditionsreiche Kellerei in dritter Generation, die seit 2021 einen Teil ihrer Ernte entalkoholisiert und mit botanischen Auszügen neu aufbaut. Hibiskus & Rose entsteht hier: Traubenbasis aus der Herrschaft, Hibiskus aus dem Burgund, Rosenblätter aus dem eigenen Versuchsgarten.",
    products: "hibiskus-rose",
  },
  {
    slug: "hof-lindengruen",
    name: "Hof Lindengrün",
    region: "Thurgau, Schweiz",
    claim: "Kräuter-Sodas direkt vom Feld.",
    story: "Ein Bio-Hof mit eigener Brennerei, die heute vor allem destilliert, was nicht berauscht: Gartenminze, Rosmarin und Gurke wachsen hundert Meter von der Abfüllanlage entfernt. Die Sodas sind die jüngsten Mitglieder im Garten und unsere Antwort auf die Frage nach dem leichten Feierabendglas.",
    products: "gurke-minze,rosmarin-grapefruit",
  },
];
window.PRODUCERS = PRODUCERS_FALLBACK;

function ProducerCard({ pr, onOpen }) {
  // Resolve comma-separated handles against the live catalog.
  const drinks = String(pr.products || "")
    .split(",")
    .map((h) => h.trim())
    .filter(Boolean)
    .map((h) => PRODUCTS.find((p) => p.handle === h))
    .filter(Boolean);

  return (
    <article className="prodcard">
      <div className="prodcard__head">
        {pr.image
          ? <div className="prodcard__media"><img className="product-photo" src={pr.image} alt={pr.name} loading="lazy" /></div>
          : <div className="prodcard__initial" aria-hidden="true">{String(pr.name || "?").charAt(0)}</div>}
        <div>
          <h3>{pr.name}</h3>
          <span className="prodcard__region">{pr.region}</span>
        </div>
      </div>
      {pr.claim && <p className="prodcard__claim">{pr.claim}</p>}
      <p className="prodcard__story">{pr.story}</p>
      {drinks.length > 0 && (
        <div className="prodcard__drinks">
          <span className="prodcard__drinks-label">{t("producers.drinks")}:</span>
          {drinks.map((d) => (
            <a key={d.id} className="prodcard__drink" onClick={() => onOpen(d)}>{d.name}</a>
          ))}
        </div>
      )}
    </article>
  );
}

function Producers({ onNav, onOpen }) {
  const producers = (typeof window !== "undefined" && window.PRODUCERS) || PRODUCERS_FALLBACK;
  return (
    <section className="section" style={{ paddingTop: 48 }}>
      <div className="wrap">
        <div className="collection__head">
          <span className="eyebrow">{t("producers.eyebrow")}</span>
          <h2>{t("producers.h2")}</h2>
          <p>{t("producers.lead")}</p>
        </div>
        <div className="prodgrid">
          {producers.map((pr) => <ProducerCard key={pr.slug} pr={pr} onOpen={onOpen} />)}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Producers });