// Recipes — nine non/low-alcohol re-interpretations of classic apéro drinks,
// each cross-linked to the catalog product it leans on.
//
// Data source: Shopify metaobjects of type "recipe". On boot, App.jsx calls
// shopify.getRecipes() and replaces window.RECIPES with the live data if any
// is returned. If the metaobject isn't set up in Shopify Admin yet (or the
// fetch fails), the RECIPES_FALLBACK below is what renders so the site never
// goes blank. Inga can take over by setting up the metaobject + filling it
// in — no code change needed.
//
// Components read window.RECIPES at render time so the swap is seamless.
const RECIPES_FALLBACK = [
  {
    slug: "garten-spritz",
    image: "../../assets/recipes/aperol-spritz.webp",
    imageSide: "../../assets/recipes/aperol-spritz-side.webp",
    classic: "Inspiriert vom Aperol Spritz",
    name: "Apéro Spritz",
    intro: "Bitterorange, Enzian und Rhabarber treffen auf kaltes Soda. Der Klassiker für die lange Tafel, ganz ohne Promille.",
    ingredients: [
      "8 cl Bittersüsser Apéritif",
      "12 cl Mineralwasser, kalt",
      "1 Scheibe Bio-Orange",
      "Eiswürfel",
    ],
    steps: [
      "Ein Weinglas zu zwei Dritteln mit Eis füllen.",
      "Bittersüsser Apéritif einschenken.",
      "Vorsichtig mit Mineralwasser auffüllen, einmal umrühren.",
      "Orangenscheibe einlegen, fertig.",
    ],
    glass: "Weinglas, gut gekühlt.",
    productHandle: "bittersusser-aperitif",
  },
  {
    slug: "espresso-garten",
    image: "../../assets/recipes/espresso-martini.webp",
    imageSide: "../../assets/recipes/espresso-martini-side.webp",
    classic: "Inspiriert vom Espresso Martini",
    name: "Espresso Tini",
    intro: "Doppelter Espresso über einem Schuss Roter Bitter. Bitter, tief, koffeingestützt. Nachmittagsspritz für Wache.",
    ingredients: [
      "1 doppelter Espresso, frisch",
      "4 cl Roter Bitter",
      "1 TL brauner Zucker (optional)",
      "Eiswürfel zum Shaken",
    ],
    steps: [
      "Espresso brühen und kurz abkühlen lassen.",
      "Mit Rotem Bitter, Zucker und Eis im Shaker kräftig schütteln.",
      "In ein kleines Cocktailglas abseihen.",
      "Mit dem Schaum auf der Oberfläche servieren.",
    ],
    glass: "Coupette oder kleines Cocktailglas.",
    productHandle: "roter-bitter",
  },
  {
    slug: "garten-margarita",
    image: "../../assets/recipes/margarita.webp",
    imageSide: "../../assets/recipes/margarita-side.webp",
    classic: "Inspiriert von der Margarita",
    name: "Virgin Margarita",
    intro: "Pinke Grapefruit, Rosmarin, ein Salzrand. Der Klassiker neu interpretiert, leicht und herb statt sticky.",
    ingredients: [
      "10 cl Rosmarin & Grapefruit",
      "2 cl frischer Limettensaft",
      "1 TL Agavendicksaft (optional)",
      "Meersalz für den Rand",
      "Eiswürfel",
    ],
    steps: [
      "Glasrand mit Limette befeuchten und in Meersalz tunken.",
      "Glas mit Eis füllen.",
      "Rosmarin & Grapefruit, Limettensaft und Agavendicksaft im Glas verrühren.",
      "Mit einem Rosmarinzweig garnieren.",
    ],
    glass: "Coupette mit Salzrand.",
    productHandle: "rosmarin-grapefruit",
  },
  {
    slug: "gurke-minze-mojito",
    image: "../../assets/recipes/mojito.webp",
    imageSide: "../../assets/recipes/mojito-side.webp",
    classic: "Inspiriert vom Mojito",
    name: "Nojito",
    intro: "Frische Gartenminze, ein Spritzer Limette, Gurke & Minze auf Eis. Das Erfrischendste, was die Theke hergibt.",
    ingredients: [
      "10 cl Gurke & Minze",
      "8 Blätter frische Minze",
      "2 cl frischer Limettensaft",
      "1 TL Rohrzucker",
      "Crushed Ice",
    ],
    steps: [
      "Minzblätter im Glas mit dem Stössel sanft andrücken (nicht zerquetschen).",
      "Rohrzucker und Limettensaft dazu, kurz verrühren.",
      "Glas randvoll mit Crushed Ice füllen.",
      "Mit Gurke & Minze auffüllen und vorsichtig umrühren.",
    ],
    glass: "Longdrink-Glas mit Crushed Ice.",
    productHandle: "gurke-minze",
  },
  {
    slug: "spagliato-botanico",
    image: "../../assets/recipes/negroni-spagliato.webp",
    imageSide: "../../assets/recipes/negroni-spagliato-side.webp",
    classic: "Inspiriert vom Negroni Sbagliato",
    name: "Sbagliato Bianco",
    intro: "Bittersüsser Apéritif, ein Hauch Hibiskus & Rose, ein Schluck Soda. Botanisch, leicht, elegant.",
    ingredients: [
      "5 cl Bittersüsser Apéritif",
      "5 cl Hibiskus & Rose",
      "5 cl Mineralwasser, kalt",
      "Eiswürfel",
      "1 Orangenzeste",
    ],
    steps: [
      "Cocktailglas mit Eis füllen.",
      "Bittersüsser und Hibiskus & Rose einschenken.",
      "Mit Mineralwasser auffüllen, einmal vorsichtig umrühren.",
      "Mit einer Orangenzeste garnieren, Öl über dem Glas auspressen.",
    ],
    glass: "Cocktailglas mit grossem Eiswürfel.",
    productHandle: "bittersusser-aperitif",
  },
  {
    slug: "garten-negroni",
    image: "../../assets/recipes/negroni.webp",
    imageSide: "../../assets/recipes/negroni-side.webp",
    classic: "Inspiriert vom Negroni",
    name: "Nogroni",
    intro: "Bittersüsser Apéritif und Roter Bitter, kalt gerührt, mit Orange. Der Klassiker, der ohne Gin auskommt.",
    ingredients: [
      "5 cl Bittersüsser Apéritif",
      "5 cl Roter Bitter",
      "Eiswürfel",
      "1 Orangenzeste",
    ],
    steps: [
      "Beide Apéros im Rührglas mit Eis kurz und kalt rühren.",
      "In ein Tumbler-Glas mit einem grossen Eiswürfel abseihen.",
      "Orangenzeste über dem Glas auspressen, ins Glas legen.",
    ],
    glass: "Tumbler mit einem grossen Eiswürfel.",
    productHandle: "roter-bitter",
  },
  {
    slug: "wacholder-tonic",
    image: "../../assets/recipes/gin-and-tonic.webp",
    imageSide: "../../assets/recipes/gin-and-tonic-side.webp",
    classic: "Inspiriert vom Gin Tonic",
    name: "Botanical Tonic",
    intro: "Gurke, Wacholder, Tonic. Die alkoholfreie Variante des Klassikers.",
    ingredients: [
      "10 cl Gurke & Minze",
      "10 cl trockenes Tonic Water",
      "3 Wacholderbeeren, angedrückt",
      "2 Gurkenscheiben",
      "Eiswürfel",
    ],
    steps: [
      "Wacholderbeeren mit der Klinge eines Messers leicht andrücken, ins Glas geben.",
      "Glas mit grossen Eiswürfeln füllen.",
      "Gurke & Minze einschenken, mit Tonic auffüllen.",
      "Mit Gurkenscheiben garnieren.",
    ],
    glass: "Copa-Glas oder Longdrink.",
    productHandle: "gurke-minze",
  },
  {
    slug: "garten-old-fashioned",
    image: "../../assets/recipes/old-fashioned.webp",
    imageSide: "../../assets/recipes/old-fashioned-side.webp",
    classic: "Inspiriert vom Old Fashioned",
    name: "New Fashioned",
    intro: "Bittersüsser Apéritif, ein Hauch Sirup, Orangenzeste. Die alkoholfreie Version des Klassikers, langsam genossen.",
    ingredients: [
      "10 cl Bittersüsser Apéritif",
      "1 TL Ahornsirup oder brauner Zuckersirup",
      "2 Spritzer Orangenbitter (alkoholfrei)",
      "1 Orangenzeste",
      "1 grosser Eiswürfel",
    ],
    steps: [
      "Sirup, Bitter und Bittersüsser im Tumbler kurz verrühren.",
      "Grossen Eiswürfel dazugeben, kalt rühren bis das Glas anläuft.",
      "Orangenzeste über dem Glas auspressen, ins Glas legen.",
    ],
    glass: "Tumbler mit einem klaren grossen Eiswürfel.",
    productHandle: "bittersusser-aperitif",
  },
  {
    slug: "garten-paloma",
    image: "../../assets/recipes/paloma.webp",
    imageSide: "../../assets/recipes/paloma-side.webp",
    classic: "Inspiriert von der Paloma",
    name: "Virgin Paloma",
    intro: "Rosmarin & Grapefruit, eine Prise Salz, ein Schluck Soda. Sonnig, herb, leicht. Der Sommer im Glas.",
    ingredients: [
      "10 cl Rosmarin & Grapefruit",
      "5 cl Mineralwasser, kalt",
      "2 cl frischer Limettensaft",
      "1 Prise Meersalz",
      "Eiswürfel, Rosmarinzweig",
    ],
    steps: [
      "Glas mit Eis füllen, eine Prise Meersalz hineingeben.",
      "Rosmarin & Grapefruit und Limettensaft einschenken.",
      "Mit Mineralwasser auffüllen, kurz umrühren.",
      "Mit einem Rosmarinzweig garnieren.",
    ],
    glass: "Longdrink-Glas mit Eis.",
    productHandle: "rosmarin-grapefruit",
  },
];

function RecipeCard({ r, onOpen }) {
  return (
    <article
      className="rcard"
      onClick={() => onOpen(r)}
      role="button"
      aria-label={`${r.name} Rezept öffnen`}
      tabIndex={0}
      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onOpen(r); } }}
    >
      <div className="rcard__media">
        <img src={r.image} alt={r.name} loading="lazy" />
      </div>
      <div className="rcard__body">
        <span className="eyebrow">{r.classic}</span>
        <h3 className="rcard__name">{r.name}</h3>
        <p className="rcard__intro">{r.intro}</p>
      </div>
    </article>
  );
}

function RecipesSection({ onOpenRecipe, onNav }) {
  const recipes = (typeof window !== "undefined" && window.RECIPES) || RECIPES_FALLBACK;
  return (
    <section className="section section--garden">
      <div className="wrap">
        <div className="section__head">
          <div>
            <span className="eyebrow">{t("recipes.eyebrow")}</span>
            <h2>{t("recipes.h2")}</h2>
            <p>{t("recipes.p")}</p>
          </div>
          <Button variant="ondark" size="md" onClick={() => onNav("recipes")}>{t("recipes.cta")}</Button>
        </div>
        <div className="rgrid">
          {recipes.map((r, i) => (
            <Reveal key={r.slug} delay={(i % 3) + 1}>
              <RecipeCard r={r} onOpen={onOpenRecipe} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function RecipesIndex({ onOpenRecipe }) {
  const recipes = (typeof window !== "undefined" && window.RECIPES) || RECIPES_FALLBACK;
  return (
    <section className="section" style={{ paddingTop: 48 }}>
      <div className="wrap">
        <div style={{ marginBottom: 32 }}>
          <span className="eyebrow">Aus dem Garten gemixt</span>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 40, letterSpacing: "-.02em", margin: "10px 0 8px" }}>Klassiker, neu interpretiert.</h2>
          <p style={{ color: "var(--fg-2)", margin: 0, maxWidth: "40em" }}>
            Unsere liebsten Apéro-Rezepte, alkoholfrei oder alkoholarm, gemixt mit den Tropfen aus dem Garten. Klick auf eines, leg los, geniess.
          </p>
        </div>
        <div className="rgrid">
          {recipes.map((r) => <RecipeCard key={r.slug} r={r} onOpen={onOpenRecipe} />)}
        </div>
      </div>
    </section>
  );
}

function RecipePage({ recipe, onNav, onOpen, onAdd }) {
  const product = PRODUCTS.find((p) => p.handle === recipe.productHandle);
  return (
    <article className="recipe">
      <div className="wrap">
        <div className="recipe__crumbs">
          <span onClick={() => onNav("home")}>Start</span> / <span onClick={() => onNav("recipes")}>Rezepte</span> / {recipe.name}
        </div>
        <div className="recipe__hero">
          <div className="recipe__media">
            <img src={recipe.imageSide || recipe.image} alt={recipe.name} />
          </div>
          <div className="recipe__intro">
            <span className="eyebrow">{recipe.classic}</span>
            <h1>{recipe.name}</h1>
            <p className="lead">{recipe.intro}</p>
            <div className="recipe__meta">
              <span><Icon name="wine" size={16} color="var(--brand)" /> {recipe.glass}</span>
            </div>
          </div>
        </div>
        <div className="recipe__body">
          <div className="recipe__ingredients">
            <h2>Zutaten</h2>
            <ul>
              {recipe.ingredients.map((it, i) => <li key={i}>{it}</li>)}
            </ul>
          </div>
          <div className="recipe__steps">
            <h2>So machst du's</h2>
            <ol>
              {recipe.steps.map((s, i) => <li key={i}>{s}</li>)}
            </ol>
          </div>
        </div>
        {product && (
          <div className="recipe__product">
            <span className="eyebrow">Im Garten erhältlich</span>
            <h2>Mach ihn nach.</h2>
            <div className="recipe__product-card">
              <ProductCard p={product} onOpen={onOpen} onAdd={onAdd} />
            </div>
          </div>
        )}
      </div>
    </article>
  );
}

// Initialise window.RECIPES with the fallback — App.jsx will overwrite it
// with live Shopify metaobject data once the boot fetch resolves.
if (typeof window !== "undefined" && !window.RECIPES) window.RECIPES = RECIPES_FALLBACK;
Object.assign(window, { RECIPES_FALLBACK, RecipeCard, RecipesSection, RecipesIndex, RecipePage });