feat: Hero-Hintergrundvideo im Admin, ScrollReveal + Bild-Perf auf Unterseiten

Neues admin-editierbares Hintergrundvideo fuer den Startseiten-Hero
(home.hero.video, MP4/WebM) mit eigenem, magic-byte-validiertem
Upload-Endpunkt (app/api/admin/upload-video) analog zur bestehenden
Bild-Upload-Pipeline. Ausserdem: ScrollReveal-Animation von der
Startseite auf Imkerei, Herkunft, Unternehmen, Ernten, Wissen, Kontakt,
Shop sowie die Produkt-/Ernte-/Chargen-Detailseiten ausgerollt (bisher
nur Startseite), priority auf bislang lazy geladene Above-the-fold-Bilder
(Herkunft/Unternehmen) gesetzt, und passende sizes-Hints auf Grid-Bilder
(Produktkarten, Origin/Regional/Business-Teaser, Ernten-Liste) ergaenzt
statt voller Viewport-Breite.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

src/components/admin-video-field.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useRef, useState, type ChangeEvent } from "react";
+import { useI18n } from "@/i18n/i18n-provider";
+
+interface AdminVideoFieldProps {
+  /** Formularfeld-Name, unter dem der aktuelle Videopfad beim Speichern des
+   * umgebenden <form> mitgeschickt wird (siehe admin/actions/content.ts). */
+  name: string;
+  label: string;
+  initialValue: string;
+}
+
+/**
+ * Video-Upload-Feld fuer admin/inhalte (Content-Registry-Feldtyp "video",
+ * aktuell nur home.hero.video). Analog zu AdminImageField: laedt die Datei
+ * sofort per fetch() an app/api/admin/upload-video hoch und haelt den
+ * zurueckgegebenen Pfad in einem versteckten Formularfeld — das eigentliche
+ * Speichern passiert weiterhin ueber das umgebende
+ * <form action={updateSiteContentAction}>.
+ */
+export function AdminVideoField({ name, label, initialValue }: AdminVideoFieldProps) {
+  const { t } = useI18n();
+  const [value, setValue] = useState(initialValue);
+  const [status, setStatus] = useState<"idle" | "uploading" | "error">("idle");
+  const [errorMessage, setErrorMessage] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  async function handleFileChange(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    setStatus("uploading");
+    setErrorMessage("");
+    try {
+      const body = new FormData();
+      body.append("file", file);
+      const response = await fetch("/api/admin/upload-video", { method: "POST", body });
+      const data: { path?: string; error?: string } = await response.json();
+      if (!response.ok || !data.path) {
+        throw new Error(data.error ?? t.adminVideoField.uploadError);
+      }
+      setValue(data.path);
+      setStatus("idle");
+    } catch (error: unknown) {
+      setStatus("error");
+      setErrorMessage(error instanceof Error ? error.message : t.adminVideoField.uploadError);
+    } finally {
+      if (inputRef.current) inputRef.current.value = "";
+    }
+  }
+
+  return (
+    <div>
+      <span className="text-sm text-ink/70">{label}</span>
+      <input type="hidden" name={name} value={value} />
+      <div className="mt-2 flex items-center gap-4">
+        {value ? (
+          <video src={value} className="h-20 w-32 object-cover border border-ink/10" muted loop autoPlay playsInline />
+        ) : (
+          <div className="h-20 w-32 border border-dashed border-ink/20 flex items-center justify-center text-center text-[10px] text-ink/40 px-1">
+            {t.adminVideoField.none}
+          </div>
+        )}
+        <div>
+          <input
+            ref={inputRef}
+            type="file"
+            accept="video/mp4,video/webm"
+            onChange={handleFileChange}
+            disabled={status === "uploading"}
+            className="block text-xs"
+          />
+          {status === "uploading" ? (
+            <p className="mt-1 text-xs text-ink/70">{t.adminVideoField.uploading}</p>
+          ) : null}
+          {status === "error" ? <p className="mt-1 text-xs text-red-700">{errorMessage}</p> : null}
+          {value ? (
+            <button
+              type="button"
+              onClick={() => setValue("")}
+              className="mt-1 text-xs text-ink/70 underline"
+            >
+              {t.adminVideoField.remove}
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}