flixcooks-website/recipe.php

<?php
require __DIR__ . '/helpers.php';

$lang = (isset($_GET['lang']) && strtolower($_GET['lang']) === 'de') ? 'de' : 'en';
$copy = [
    'en' => [
        'not_found'     => 'Recipe not found',
        'not_found_sub' => 'Try searching for something else.',
        'back_home'     => '← Back to all recipes',
        'ingredients'   => 'Ingredients',
        'utensils'      => 'Utensils',
        'steps'         => 'Steps',
        'also_tasty'    => 'Also tasty',
        'more_dishes'   => 'More dishes to keep you cooking.',
        'prep'          => 'Prep',
        'cook'          => 'Cook',
        'total'         => 'Total',
        'serves'        => 'Serves',
        'level'         => 'Level',
    ],
    'de' => [
        'not_found'     => 'Rezept nicht gefunden',
        'not_found_sub' => 'Versuche eine andere Suche.',
        'back_home'     => '← Zurück zu allen Rezepten',
        'ingredients'   => 'Zutaten',
        'utensils'      => 'Küchenwerkzeug',
        'steps'         => 'Schritte',
        'also_tasty'    => 'Auch lecker',
        'more_dishes'   => 'Noch mehr zum Nachkochen.',
        'prep'          => 'Vorbereitung',
        'cook'          => 'Garen',
        'total'         => 'Gesamt',
        'serves'        => 'Portionen',
        'level'         => 'Level',
    ],
];
$t = $copy[$lang];

$allRecipes       = load_recipes();
$slug             = isset($_GET['slug']) ? trim($_GET['slug']) : '';
$recipeRaw        = $slug ? find_recipe_by_slug($allRecipes, $slug) : null;
$recipe           = $recipeRaw ? localize_recipe($recipeRaw, $lang) : null;
$allRecipesLocal  = localize_recipes($allRecipes, $lang);

$langSwitchLabel = $lang === 'de' ? 'EN' : 'DE';
$langSwitchHref  = lang_url($lang === 'de' ? 'en' : 'de');

if (!$recipe) {
    http_response_code(404);
    $pageTitle   = $t['not_found'] . ' | FlixCooks';
    $description = $t['not_found_sub'];
    include __DIR__ . '/partials/head.php';
    include __DIR__ . '/partials/header.php';
    ?>
    <main class="not-found">
      <h1><?php echo e($t['not_found']); ?></h1>
      <p><?php echo e($t['not_found_sub']); ?></p>
      <a class="btn-reveal" href="/index.php?lang=<?php echo e($lang); ?>#recipes-start">
        <span class="btn-reveal-text"><?php echo e($t['back_home']); ?></span>
        <span class="btn-reveal-arrow">→</span>
      </a>
    </main>
    <?php
    include __DIR__ . '/partials/footer.php';
    exit;
}

$pageTitle   = e($recipe['title']) . ' | FlixCooks';
$description = $recipe['description'] ?? '';
include __DIR__ . '/partials/head.php';
include __DIR__ . '/partials/header.php';
?>

<article class="recipe">
  <div class="recipe__hero">
    <img src="<?php echo e($recipe['hero']); ?>" alt="<?php echo e($recipe['title']); ?>">
    <div class="recipe__hero__copy">
      <?php if (!empty($recipe['category'])): ?>
        <p class="pill pill--gold"><?php echo e($recipe['category']); ?></p>
      <?php endif; ?>
      <h1><?php echo e($recipe['title']); ?></h1>
      <p class="lede"><?php echo e($recipe['description']); ?></p>
      <div class="meta meta--row">
        <span><?php echo e($t['prep']); ?>: <?php echo format_minutes((int)$recipe['prep_time']); ?></span>
        <span><?php echo e($t['cook']); ?>: <?php echo format_minutes((int)$recipe['cook_time']); ?></span>
        <span><?php echo e($t['total']); ?>: <?php echo format_minutes((int)$recipe['total_time']); ?></span>
        <span><?php echo e($t['serves']); ?>: <?php echo e($recipe['servings']); ?></span>
        <span><?php echo e($t['level']); ?>: <?php echo e($recipe['difficulty']); ?></span>
      </div>
      <a class="btn-reveal" href="/index.php?lang=<?php echo e($lang); ?>#recipes-start">
        <span class="btn-reveal-text"><?php echo e($t['back_home']); ?></span>
        <span class="btn-reveal-arrow">←</span>
      </a>
    </div>
  </div>

  <div class="recipe__body">
    <section class="panel">
      <h2><?php echo e($t['ingredients']); ?></h2>
      <ul class="ingredients">
        <?php foreach ($recipe['ingredients'] as $item): ?>
          <li><?php echo e($item); ?></li>
        <?php endforeach; ?>
      </ul>
    </section>

    <?php if (!empty($recipe['utensils'])): ?>
    <section class="panel">
      <h2><?php echo e($t['utensils']); ?></h2>
      <ul class="ingredients">
        <?php foreach ($recipe['utensils'] as $item): ?>
          <li><?php echo e($item); ?></li>
        <?php endforeach; ?>
      </ul>
    </section>
    <?php endif; ?>

    <section class="panel">
      <h2><?php echo e($t['steps']); ?></h2>
      <ol class="steps">
        <?php foreach ($recipe['steps'] as $step): ?>
          <li><?php echo e($step); ?></li>
        <?php endforeach; ?>
      </ol>
    </section>
  </div>

  <section class="more">
    <div class="section-header section-header--stack">
      <p class="eyebrow"><?php echo e($t['also_tasty']); ?></p>
      <h3><?php echo e($t['more_dishes']); ?></h3>
    </div>
    <div class="grid grid--tight">
      <?php foreach ($allRecipesLocal as $other): ?>
        <?php if ($other['slug'] === $recipe['slug'] || !empty($other['coming_soon'])) continue; ?>
        <article class="card card--bare reveal-target">
          <a href="/recipe.php?<?php echo http_build_query(['slug' => $other['slug'], 'lang' => $lang]); ?>" class="card__image">
            <img src="<?php echo e($other['hero']); ?>" alt="<?php echo e($other['title']); ?>" loading="lazy">
          </a>
          <div class="card__body">
            <h4><a href="/recipe.php?<?php echo http_build_query(['slug' => $other['slug'], 'lang' => $lang]); ?>"><?php echo e($other['title']); ?></a></h4>
            <p><?php echo e($other['description']); ?></p>
            <div class="meta">
              <span>⏱ <?php echo format_minutes((int)($other['total_time'] ?? 0)); ?></span>
              <span>🙂 <?php echo e($other['difficulty']); ?></span>
            </div>
          </div>
        </article>
      <?php endforeach; ?>
    </div>
  </section>
</article>

<?php include __DIR__ . '/partials/footer.php'; ?>

<script>
// Scroll reveal on recipe page
if ('IntersectionObserver' in window) {
  var obs = new IntersectionObserver(function(entries) {
    entries.forEach(function(e) {
      if (e.isIntersecting) { e.target.classList.add('revealed'); obs.unobserve(e.target); }
    });
  }, { threshold: 0.08 });
  document.querySelectorAll('.reveal-target').forEach(function(el) { obs.observe(el); });
}
// Lenis init for recipe page
if (typeof Lenis !== 'undefined') {
  var lenis = new Lenis({ duration: 1.2, smooth: true, smoothTouch: false });
  window.lenis = lenis;
  function raf(time) { lenis.raf(time); requestAnimationFrame(raf); }
  requestAnimationFrame(raf);
}
</script>