@tomako/tools-runtime 0.1.0

package/src/features/tools/app-store-screenshot-generator/widget/app-store-screenshot-generator.tsx

@@ -0,0 +1,1250 @@
+"use client";
+
+/* eslint-disable @next/next/no-img-element -- Generated image URLs are returned at runtime by the backend image task service. */
+
+import { Button } from "@tomako/ui/button";
+import { Checkbox } from "@tomako/ui/checkbox";
+import { Field, Input, Textarea } from "@tomako/ui/input";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@tomako/ui/select";
+import { useToolHandoff } from "../../../../features/tools/shared/tool-handoff";
+import { useLocale, useTranslations } from "../../../../i18n/client";
+import {
+    inferDurableActivityArtifact,
+    publishActivityArtifact,
+} from "../../../../lib/activity-task-handoff";
+import { downloadBlob } from "../../../../lib/file/download";
+import {
+    appStoreScreenshotGeneratorInputSchema,
+    appStoreScreenshotGeneratorOutputSchema,
+    type AppStoreScreenshotAsset,
+    type AppStoreScreenshotGeneratorInput,
+    type AppStoreScreenshotGeneratorOutput,
+    type AppStoreScreenshotReference,
+} from "../../../../lib/tools/app-store-screenshot-generator-schema";
+import {
+    ChevronLeft,
+    ChevronRight,
+    Download,
+    Loader2,
+    RotateCcw,
+    Upload,
+    X,
+} from "lucide-react";
+import type { ChangeEvent, DragEvent, FormEvent, TouchEvent } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { ZodIssue } from "zod";
+
+import {
+    buildGeneratedAssetSlots,
+    clampAssetCount,
+    dimensionsForAssetFormat,
+    widthForAssetFormat,
+} from "./asset-slots";
+import {
+    LOGO_REFERENCE_MAX_DATA_URL_LENGTH,
+    MAX_SCREENSHOT_REFERENCES,
+    assetCountOptions,
+    formLabelClassName,
+    initialDraft,
+    outputLanguageOptions,
+    platformOptions,
+    styleOptions,
+} from "./constants";
+import {
+    AssetCountGroup,
+    AssetImage,
+    OptionGroup,
+    StorePlatformGroup,
+} from "./form-controls";
+import {
+    expectedAssetCount,
+    formatGenerationError,
+    formatRemainingTime,
+    generateStoreAssets,
+    initialEstimatedSeconds,
+    renderAssetToPngBlob,
+} from "./generation";
+import {
+    assetFileBase,
+    buildScreenshotsZipName,
+    createGeneratedAssetsZip,
+    getScreenshotReferenceReadOptions,
+    inferSource,
+    normalizeUrl,
+    readImageAsset,
+} from "./input-media";
+import type {
+    GenerationProgress,
+    OutputLanguageKey,
+    StyleKey
+} from "./types";
+
+export function AppStoreScreenshotGenerator() {
+  const locale = useLocale();
+  const t = useTranslations("toolsUi.appStoreScreenshotGenerator");
+  const [draft, setDraft] = useState<AppStoreScreenshotGeneratorInput>(() => ({
+    ...initialDraft,
+    outputLanguage: locale === "en" ? "en" : "zh",
+  }));
+  const [screenshotReferences, setScreenshotReferences] = useState<AppStoreScreenshotReference[]>([]);
+  const [output, setOutput] = useState<AppStoreScreenshotGeneratorOutput | null>(null);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
+  const [screenshotLightboxIndex, setScreenshotLightboxIndex] = useState<number | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [resultWarning, setResultWarning] = useState<string | null>(null);
+  const [downloadError, setDownloadError] = useState<string | null>(null);
+  const [downloadSelectionMode, setDownloadSelectionMode] = useState(false);
+  const [downloadSelectionIds, setDownloadSelectionIds] = useState<Set<string>>(() => new Set());
+  const [downloading, setDownloading] = useState(false);
+  const [generationProgress, setGenerationProgress] =
+    useState<GenerationProgress | null>(null);
+  const resultRef = useRef<HTMLDivElement | null>(null);
+  const screenshotInputRef = useRef<HTMLInputElement | null>(null);
+  const logoInputRef = useRef<HTMLInputElement | null>(null);
+  const touchStartX = useRef<number | null>(null);
+  const [screenshotDragActive, setScreenshotDragActive] = useState(false);
+  const [logoDragActive, setLogoDragActive] = useState(false);
+  const { brief: activityBrief } = useToolHandoff();
+
+  useEffect(() => {
+    if (!activityBrief || busy || !output) return;
+    publishActivityArtifact(
+      activityBrief,
+      inferDurableActivityArtifact(output),
+    );
+  }, [activityBrief, busy, output]);
+
+  const selectedAsset = useMemo(
+    () => output?.assets.find((asset) => asset.id === selectedId) ?? null,
+    [output, selectedId],
+  );
+  const lightboxAsset =
+    lightboxIndex === null ? null : output?.assets[lightboxIndex] ?? null;
+  const screenshotLightboxReference =
+    screenshotLightboxIndex === null ? null : screenshotReferences[screenshotLightboxIndex] ?? null;
+  const downloadableAssets = useMemo(
+    () => output?.assets.filter((asset) => Boolean(asset.imageUrl || asset.svg)) ?? [],
+    [output],
+  );
+  const selectedDownloadAssets = useMemo(
+    () => downloadableAssets.filter((asset) => downloadSelectionIds.has(asset.id)),
+    [downloadSelectionIds, downloadableAssets],
+  );
+  const downloadButtonLabel = downloadSelectionMode
+    ? `${t("download")} ${selectedDownloadAssets.length}/${downloadableAssets.length}`
+    : t("download");
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+    setResultWarning(null);
+    setDownloadError(null);
+
+    if (!screenshotReferences.length) {
+      setError(t("validationScreenshotRequired"));
+      return;
+    }
+
+    const inputForParse = {
+      ...draft,
+      layout: "mixed",
+      palette: "auto",
+      style: draft.style,
+      productUrl: normalizeUrl(draft.productUrl),
+      source: inferSource({
+        ...draft,
+        hasScreenshot: screenshotReferences.length > 0,
+        screenshotReferences,
+        screenshotDataUrl: "",
+      }),
+      hasScreenshot: screenshotReferences.length > 0,
+      screenshotReferences,
+      screenshotName: screenshotReferences.map((item) => item.name).join(", "),
+      screenshotDataUrl: "",
+      screenshotWidth: screenshotReferences[0]?.width,
+      screenshotHeight: screenshotReferences[0]?.height,
+    };
+    const parsed = appStoreScreenshotGeneratorInputSchema.safeParse(inputForParse);
+
+    if (!parsed.success) {
+      setError(formatInputValidationIssues(parsed.error.issues));
+      return;
+    }
+
+    try {
+      setDraft(parsed.data);
+      setBusy(true);
+      setOutput(null);
+      setSelectedId(null);
+      setLightboxIndex(null);
+      setScreenshotLightboxIndex(null);
+      resetDownloadSelection();
+      setGenerationProgress({
+        phase: "submitting",
+        completedCount: 0,
+        totalCount: expectedAssetCount(parsed.data),
+        failedCount: 0,
+        estimatedRemainingSeconds: initialEstimatedSeconds(parsed.data),
+      });
+      requestAnimationFrame(() => {
+        resultRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+      });
+
+      const generated = await generateStoreAssets(
+        parsed.data,
+        locale,
+        (progress) => {
+          const parsedProgressOutput = appStoreScreenshotGeneratorOutputSchema.safeParse(
+            progress.output,
+          );
+          if (parsedProgressOutput.success) {
+            setOutput(parsedProgressOutput.data);
+            setSelectedId((current) =>
+              current && parsedProgressOutput.data.assets.some((asset) => asset.id === current)
+                ? current
+                : parsedProgressOutput.data.assets[0]?.id ?? null,
+            );
+          }
+          updateGenerationProgress({
+            phase: progress.reportStatus === "final" ? "finalizing" : "generating",
+            completedCount: progress.completedCount,
+            totalCount: progress.totalCount,
+            failedCount: progress.failedCount,
+            inProgressTitle: progress.inProgressTitle,
+            estimatedRemainingSeconds: progress.estimatedRemainingSeconds,
+          });
+        },
+        () => {
+          updateGenerationProgress({
+            phase: "planning",
+            completedCount: 0,
+            totalCount: expectedAssetCount(parsed.data),
+            failedCount: 0,
+            estimatedRemainingSeconds: initialEstimatedSeconds(parsed.data),
+          });
+        },
+      );
+      const parsedOutput = appStoreScreenshotGeneratorOutputSchema.safeParse(generated.output);
+
+      if (!parsedOutput.success) {
+        setError(t("errorOutput"));
+        setBusy(false);
+        setGenerationProgress(null);
+        return;
+      }
+
+      setOutput(parsedOutput.data);
+      setSelectedId(parsedOutput.data.assets[0]?.id ?? null);
+      setGenerationProgress({
+        phase: "finalizing",
+        completedCount: generated.completedCount,
+        totalCount: generated.totalCount,
+        failedCount: generated.failedCount,
+        estimatedRemainingSeconds: 0,
+      });
+      if (generated.failures.length > 0) {
+        const failedFormats = generated.failures
+          .map((failure) => failure.spec.title)
+          .join("、");
+        setResultWarning(
+          t("partialGenerationWarning", {
+            successCount: parsedOutput.data.assets.length,
+            failedCount: generated.failures.length,
+            formats: failedFormats,
+          }),
+        );
+      }
+      if (generated.reportStatus === "partial") {
+        setResultWarning(
+          t("partialStillProcessingWarning", {
+            successCount: parsedOutput.data.assets.length,
+            totalCount: generated.totalCount,
+          }),
+        );
+      }
+      setBusy(false);
+      setGenerationProgress(null);
+    } catch (generationError) {
+      setError(
+        formatGenerationError(generationError, {
+          generic: t("generationError"),
+          withDetail: (detail) => t("generationErrorWithDetail", { detail }),
+          formatLabel: (format) => t(`formats.${format}`),
+        }),
+      );
+      setBusy(false);
+      setGenerationProgress(null);
+    }
+  }
+
+  function reset() {
+    setOutput(null);
+    setSelectedId(null);
+    setLightboxIndex(null);
+    setScreenshotLightboxIndex(null);
+    setError(null);
+    setResultWarning(null);
+    setDownloadError(null);
+    resetDownloadSelection();
+    setGenerationProgress(null);
+  }
+
+  function resetDownloadSelection() {
+    setDownloadSelectionMode(false);
+    setDownloadSelectionIds(new Set());
+    setDownloading(false);
+  }
+
+  function updateGenerationProgress(next: GenerationProgress) {
+    setGenerationProgress((current) => {
+      const estimatedRemainingSeconds =
+        current?.estimatedRemainingSeconds === undefined ||
+        next.estimatedRemainingSeconds === undefined
+          ? next.estimatedRemainingSeconds ?? current?.estimatedRemainingSeconds
+          : Math.min(current.estimatedRemainingSeconds, next.estimatedRemainingSeconds);
+
+      return {
+        ...next,
+        estimatedRemainingSeconds,
+      };
+    });
+  }
+
+  function formatInputValidationIssues(issues: ZodIssue[]) {
+    const paths = issues.map((issue) => issue.path.join("."));
+    const hasProductNameIssue = paths.some((path) => path === "productName");
+    const hasSourceIssue = paths.some((path) => path === "productUrl");
+    const hasScreenshotIssue = paths.some(
+      (path) =>
+        path === "screenshotName" ||
+        path === "screenshotDataUrl" ||
+        path === "hasScreenshot" ||
+        path.startsWith("screenshotReferences"),
+    );
+
+    if (hasScreenshotIssue) return t("validationScreenshotInput");
+    if (hasProductNameIssue) return t("validationProductNameRequired");
+    if (hasSourceIssue) return t("validationSourceRequired");
+    return t("validationInput");
+  }
+
+  async function handleFileChange(event: ChangeEvent<HTMLInputElement>) {
+    await addScreenshotFiles(Array.from(event.target.files ?? []));
+    event.target.value = "";
+  }
+
+  async function addScreenshotFiles(filesInput: File[]) {
+    const remainingSlots = Math.max(MAX_SCREENSHOT_REFERENCES - screenshotReferences.length, 0);
+    const files = filesInput.slice(0, remainingSlots);
+    setError(null);
+
+    if (!files.length) {
+      return;
+    }
+
+    if (files.some((file) => !file.type.startsWith("image/"))) {
+      setError(t("fileTypeError"));
+      return;
+    }
+
+    try {
+      const screenshotReadOptions = getScreenshotReferenceReadOptions(files.length);
+      const references = await Promise.all(
+        files.map(async (file) => {
+          const image = await readImageAsset(file, screenshotReadOptions);
+          return {
+            name: file.name,
+            dataUrl: image.dataUrl,
+            width: image.width,
+            height: image.height,
+          };
+        }),
+      );
+      syncScreenshotReferences([...screenshotReferences, ...references].slice(0, MAX_SCREENSHOT_REFERENCES));
+    } catch {
+      setError(t("fileReadError"));
+    }
+  }
+
+  function handleScreenshotDrop(event: DragEvent<HTMLElement>) {
+    event.preventDefault();
+    setScreenshotDragActive(false);
+    void addScreenshotFiles(Array.from(event.dataTransfer.files ?? []));
+  }
+
+  function syncScreenshotReferences(nextReferences: AppStoreScreenshotReference[]) {
+    setScreenshotReferences(nextReferences);
+    setDraft((current) => ({
+      ...current,
+      hasScreenshot: nextReferences.length > 0,
+      screenshotName: nextReferences.map((item) => item.name).join(", "),
+      screenshotDataUrl: "",
+      screenshotWidth: nextReferences[0]?.width,
+      screenshotHeight: nextReferences[0]?.height,
+      screenshotReferences: nextReferences,
+    }));
+  }
+
+  function removeScreenshotReference(index: number) {
+    const nextReferences = screenshotReferences.filter((_, itemIndex) => itemIndex !== index);
+    setError(null);
+    setScreenshotLightboxIndex(null);
+    syncScreenshotReferences(nextReferences);
+  }
+
+  async function handleLogoChange(event: ChangeEvent<HTMLInputElement>) {
+    await setLogoFile(event.target.files?.[0] ?? null);
+  }
+
+  async function setLogoFile(file: File | null) {
+    setError(null);
+
+    if (!file) {
+      setDraft((current) => ({
+        ...current,
+        logoName: "",
+        logoDataUrl: "",
+        logoWidth: undefined,
+        logoHeight: undefined,
+      }));
+      return;
+    }
+
+    if (!file.type.startsWith("image/")) {
+      setError(t("fileTypeError"));
+      return;
+    }
+
+    try {
+      const image = await readImageAsset(file, {
+        maxEdge: 384,
+        quality: 0.62,
+        maxDataUrlLength: LOGO_REFERENCE_MAX_DATA_URL_LENGTH,
+      });
+      setDraft((current) => ({
+        ...current,
+        logoName: file.name,
+        logoDataUrl: image.dataUrl,
+        logoWidth: image.width,
+        logoHeight: image.height,
+      }));
+    } catch {
+      setError(t("fileReadError"));
+    }
+  }
+
+  function handleLogoDrop(event: DragEvent<HTMLButtonElement>) {
+    event.preventDefault();
+    setLogoDragActive(false);
+    void setLogoFile(event.dataTransfer.files?.[0] ?? null);
+  }
+
+  async function handleDownloadClick() {
+    if (!downloadableAssets.length || downloading) return;
+    setDownloadError(null);
+
+    if (!downloadSelectionMode) {
+      setDownloadSelectionMode(true);
+      setDownloadSelectionIds(
+        new Set(
+          selectedAsset && downloadableAssets.some((asset) => asset.id === selectedAsset.id)
+            ? [selectedAsset.id]
+            : [],
+        ),
+      );
+      return;
+    }
+
+    if (!selectedDownloadAssets.length) {
+      setDownloadError(t("downloadSelectHint"));
+      return;
+    }
+
+    await downloadAssets(selectedDownloadAssets, {
+      forceZip: selectedDownloadAssets.length > 1,
+      zipName: buildScreenshotsZipName(draft, "selected"),
+    });
+  }
+
+  async function handleDownloadAllClick() {
+    if (!downloadableAssets.length || downloading) return;
+    setDownloadError(null);
+    await downloadAssets(downloadableAssets, {
+      forceZip: true,
+      zipName: buildScreenshotsZipName(draft, "all"),
+    });
+  }
+
+  function cancelDownloadSelection() {
+    setDownloadSelectionMode(false);
+    setDownloadSelectionIds(new Set());
+    setDownloadError(null);
+  }
+
+  async function downloadAssets(
+    assets: readonly AppStoreScreenshotAsset[],
+    options: { forceZip: boolean; zipName: string },
+  ) {
+    setDownloading(true);
+    try {
+      if (assets.length === 1 && !options.forceZip) {
+        const asset = assets[0];
+        if (!asset) return;
+        const blob = await renderAssetToPngBlob(asset);
+        downloadBlob(blob, `${assetFileBase(draft, asset)}.png`);
+        return;
+      }
+
+      const zipBlob = await createGeneratedAssetsZip(assets, draft);
+      downloadBlob(zipBlob, options.zipName);
+    } catch {
+      setDownloadError(t("downloadError"));
+    } finally {
+      setDownloading(false);
+    }
+  }
+
+  function toggleDownloadSelection(assetId: string) {
+    setDownloadError(null);
+    setDownloadSelectionIds((current) => {
+      const next = new Set(current);
+      if (next.has(assetId)) next.delete(assetId);
+      else next.add(assetId);
+      return next;
+    });
+  }
+
+  function handleAssetCardClick(asset: AppStoreScreenshotAsset, index: number) {
+    if (downloadSelectionMode) {
+      toggleDownloadSelection(asset.id);
+      return;
+    }
+    openLightbox(asset, index);
+  }
+
+  function openLightbox(asset: AppStoreScreenshotAsset, index: number) {
+    setSelectedId(asset.id);
+    setLightboxIndex(index);
+    setDownloadError(null);
+  }
+
+  function showAdjacentLightboxAsset(direction: -1 | 1) {
+    if (!output?.assets.length) return;
+    setLightboxIndex((current) => {
+      const currentIndex =
+        current ?? Math.max(output.assets.findIndex((asset) => asset.id === selectedId), 0);
+      const nextIndex = (currentIndex + direction + output.assets.length) % output.assets.length;
+      setSelectedId(output.assets[nextIndex]?.id ?? null);
+      return nextIndex;
+    });
+  }
+
+  function showAdjacentScreenshotReference(direction: -1 | 1) {
+    if (!screenshotReferences.length) return;
+    setScreenshotLightboxIndex((current) => {
+      const currentIndex = current ?? 0;
+      return (currentIndex + direction + screenshotReferences.length) % screenshotReferences.length;
+    });
+  }
+
+  function handleLightboxTouchStart(event: TouchEvent<HTMLDivElement>) {
+    touchStartX.current = event.touches[0]?.clientX ?? null;
+  }
+
+  function handleLightboxTouchEnd(event: TouchEvent<HTMLDivElement>) {
+    const startX = touchStartX.current;
+    const endX = event.changedTouches[0]?.clientX;
+    touchStartX.current = null;
+    if (startX === null || endX === undefined) return;
+    const delta = endX - startX;
+    if (Math.abs(delta) < 48) return;
+    showAdjacentLightboxAsset(delta > 0 ? -1 : 1);
+  }
+
+  function handleScreenshotLightboxTouchEnd(event: TouchEvent<HTMLDivElement>) {
+    const startX = touchStartX.current;
+    const endX = event.changedTouches[0]?.clientX;
+    touchStartX.current = null;
+    if (startX === null || endX === undefined) return;
+    const delta = endX - startX;
+    if (Math.abs(delta) < 48) return;
+    showAdjacentScreenshotReference(delta > 0 ? -1 : 1);
+  }
+
+  const hasGeneratedAssets = Boolean(output?.assets.length);
+  const remainingTimeLabel =
+    generationProgress?.estimatedRemainingSeconds === undefined
+      ? null
+      : formatRemainingTime(generationProgress.estimatedRemainingSeconds, {
+          minutes: (minutes) => t("remainingMinutes", { minutes }),
+          stillWorking: t("stillWorking"),
+        });
+  const resultSlots = useMemo(
+    () =>
+      buildGeneratedAssetSlots({
+        assets: output?.assets ?? [],
+        expectedCount: expectedAssetCount(draft),
+        includePending: busy && Boolean(output?.assets.length),
+        platform: draft.platform,
+        totalCount: generationProgress?.totalCount,
+      }),
+    [busy, draft, generationProgress?.totalCount, output?.assets],
+  );
+  return (
+    <section className="max-w-full overflow-hidden rounded-lg border border-[#D8D4CA] bg-white shadow-[0_24px_70px_rgba(17,17,17,0.08)] lg:h-[860px]">
+      <div className="grid h-full max-w-full items-stretch lg:grid-cols-[minmax(360px,0.28fr)_minmax(0,1fr)]">
+        <form
+          onSubmit={(event) => void submit(event)}
+          className="relative flex min-h-[680px] min-w-0 max-w-full flex-col overflow-x-hidden border-b border-[#E5E5E5] bg-white lg:h-full lg:min-h-0 lg:overflow-hidden lg:border-b-0 lg:border-r"
+        >
+          {error ? (
+            <div
+              className="pointer-events-none absolute left-4 right-4 top-4 z-20 rounded-lg border border-[#F2B7A3] bg-[#FFF4EC] px-4 py-3 text-sm font-semibold leading-5 text-[#8E2A17] shadow-[0_14px_36px_rgba(142,42,23,0.12)]"
+              aria-live="polite"
+            >
+              {error}
+            </div>
+          ) : null}
+          <div className="min-h-0 min-w-0 flex-1 overflow-y-auto overflow-x-hidden px-5 py-5 pb-4 [scrollbar-gutter:stable] md:px-6">
+            <div className="mb-6">
+              <h3 className="text-xl font-semibold leading-tight text-[#111111]">
+                {t("workspaceTitle")}
+              </h3>
+              <p className="mt-2 text-sm leading-6 text-[#666666]">{t("mockNotice")}</p>
+            </div>
+
+            <div className="grid min-w-0 gap-5">
+              <div className="min-w-0 max-w-full">
+                <div className="mb-2 flex items-center gap-1.5">
+                  <p className="truncate text-sm font-semibold text-[#111111]">
+                    {t("screenshotLabel")}
+                  </p>
+                  <span
+                    aria-hidden="true"
+                    className="inline-flex items-center text-xs font-bold leading-none text-[#C22114]"
+                  >
+                    *
+                  </span>
+                  <span className="sr-only">{t("required")}</span>
+                </div>
+                <Input
+                  ref={screenshotInputRef}
+                  id="app-store-screenshot-upload"
+                  className="hidden"
+                  type="file"
+                  accept="image/png,image/jpeg,image/webp"
+                  multiple
+                  onChange={(event) => void handleFileChange(event)}
+                />
+                {screenshotReferences.length ? (
+                  <div
+                    className={`min-h-[220px] w-full max-w-full rounded-lg border border-dashed bg-white p-3 outline-none transition ${
+                      screenshotDragActive
+                        ? "border-[#111111] ring-4 ring-[#111111]/10"
+                        : "border-[#D4D4D4]"
+                    }`}
+                    onDragEnter={(event) => {
+                      event.preventDefault();
+                      setScreenshotDragActive(true);
+                    }}
+                    onDragLeave={(event) => {
+                      event.preventDefault();
+                      setScreenshotDragActive(false);
+                    }}
+                    onDragOver={(event) => event.preventDefault()}
+                    onDrop={handleScreenshotDrop}
+                  >
+                    <div
+                      className="max-h-[288px] overflow-y-auto pr-1 [scrollbar-gutter:stable]"
+                      data-screenshot-scroll
+                    >
+                      <div className="grid grid-cols-3 gap-2">
+                        {screenshotReferences.map((item, index) => (
+                          <div key={`${item.name}-${index}`} className="group relative min-w-0">
+                            <button
+                              type="button"
+                              aria-label={t("previewScreenshot", { index: index + 1 })}
+                              onClick={() => setScreenshotLightboxIndex(index)}
+                              className="block aspect-[3/4] w-full overflow-hidden rounded-lg border border-[#E5E5E5] bg-[#F7F7F7] p-1 outline-none transition hover:border-[#111111] focus-visible:border-[#111111] focus-visible:ring-4 focus-visible:ring-[#111111]/10"
+                            >
+                              <img
+                                alt=""
+                                className="h-full w-full object-contain"
+                                src={item.dataUrl}
+                              />
+                            </button>
+                            <button
+                              type="button"
+                              aria-label={t("removeScreenshot")}
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                removeScreenshotReference(index);
+                              }}
+                              className="absolute right-1 top-1 flex size-6 items-center justify-center rounded-full bg-black/75 text-white opacity-0 shadow-[0_8px_18px_rgba(0,0,0,0.22)] transition hover:bg-black group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
+                            >
+                              <X aria-hidden className="size-3.5" />
+                            </button>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      disabled={screenshotReferences.length >= MAX_SCREENSHOT_REFERENCES}
+                      onClick={() => screenshotInputRef.current?.click()}
+                      className="mt-3 h-9 w-full rounded-lg border-[#D8D4CA] bg-white text-sm font-semibold text-[#111111] shadow-none hover:bg-[#F4F4F4] disabled:pointer-events-none disabled:opacity-50"
+                    >
+                      {t("continueUpload")}
+                    </Button>
+                  </div>
+                ) : (
+                  <button
+                    aria-label={t("screenshotLabel")}
+                    className={`group flex min-h-[220px] w-full max-w-full flex-col items-center justify-center rounded-lg border border-dashed bg-white p-5 text-center outline-none transition ${
+                      screenshotDragActive
+                        ? "border-[#111111] ring-4 ring-[#111111]/10"
+                        : "border-[#D4D4D4] hover:border-[#111111] focus-visible:border-[#111111] focus-visible:ring-4 focus-visible:ring-[#111111]/10"
+                    }`}
+                    type="button"
+                    onClick={() => screenshotInputRef.current?.click()}
+                    onDragEnter={(event) => {
+                      event.preventDefault();
+                      setScreenshotDragActive(true);
+                    }}
+                    onDragLeave={(event) => {
+                      event.preventDefault();
+                      setScreenshotDragActive(false);
+                    }}
+                    onDragOver={(event) => event.preventDefault()}
+                    onDrop={handleScreenshotDrop}
+                  >
+                    <>
+                      <span className="flex size-12 items-center justify-center rounded-lg bg-[#F4F4F4] text-[#111111]">
+                        <Upload aria-hidden className="size-5" />
+                      </span>
+                      <span className="mt-4 text-base font-semibold text-[#111111]">
+                        {t("chooseScreenshot")}
+                      </span>
+                      <span className="mt-2 max-w-xs text-sm leading-6 text-[#555555]">
+                        {t("screenshotRequiredHint")}
+                      </span>
+                    </>
+                  </button>
+                )}
+              </div>
+
+              <div className="grid min-w-0 max-w-full gap-3">
+                <Field label={t("productNameLabel")} labelClassName={formLabelClassName}>
+                  <Input
+                    className="h-11 max-w-full rounded-lg border-[#D8D4CA] bg-white text-[15px] shadow-none focus-visible:border-[#111111] focus-visible:ring-[#111111]/15"
+                    placeholder={t("productNamePlaceholder")}
+                    value={draft.productName}
+                    onChange={(event) =>
+                      setDraft((current) => ({ ...current, productName: event.target.value }))
+                    }
+                  />
+                </Field>
+
+                <Field label={t("productUrlLabel")} labelClassName={formLabelClassName}>
+                  <Input
+                    className="h-11 max-w-full rounded-lg border-[#D8D4CA] bg-white text-[15px] shadow-none focus-visible:border-[#111111] focus-visible:ring-[#111111]/15"
+                    placeholder={t("productUrlPlaceholder")}
+                    value={draft.productUrl}
+                    onChange={(event) =>
+                      setDraft((current) => ({ ...current, productUrl: event.target.value }))
+                    }
+                  />
+                </Field>
+              </div>
+
+              <Field label={t("benefitsLabel")} labelClassName={formLabelClassName}>
+                <Textarea
+                  className="min-h-[84px] max-w-full resize-none rounded-lg border-[#D8D4CA] bg-white text-[15px] shadow-none focus-visible:border-[#111111] focus-visible:ring-[#111111]/15"
+                  maxLength={1000}
+                  placeholder={t("benefitsPlaceholder")}
+                  value={draft.productBenefits}
+                  onChange={(event) =>
+                    setDraft((current) => ({ ...current, productBenefits: event.target.value }))
+                  }
+                />
+              </Field>
+
+              <OptionGroup<OutputLanguageKey>
+                label={t("outputLanguageLabel")}
+                options={outputLanguageOptions}
+                selected={draft.outputLanguage}
+                labelFor={(key) => t(`outputLanguages.${key}`)}
+                onSelect={(outputLanguage) =>
+                  setDraft((current) => ({ ...current, outputLanguage }))
+                }
+              />
+
+              <StorePlatformGroup
+                label={t("platformLabel")}
+                options={platformOptions}
+                selected={draft.platform}
+                labelFor={(key) => t(`platforms.${key}`)}
+                onSelect={(platform) =>
+                  setDraft((current) => ({
+                    ...current,
+                    platform,
+                    layout: "mixed",
+                    assetCount: clampAssetCount(current.assetCount),
+                  }))
+                }
+              />
+
+              <AssetCountGroup
+                label={t("assetCountLabel")}
+                options={assetCountOptions}
+                selected={draft.assetCount}
+                labelFor={(count) => t(`assetCountOptions.${count}`)}
+                onSelect={(assetCount) =>
+                  setDraft((current) => ({ ...current, assetCount }))
+                }
+              />
+
+              <details className="min-w-0 max-w-full overflow-hidden rounded-lg border border-[#E5E5E5] bg-[#FAFAFA]">
+                <summary className="cursor-pointer px-4 py-3 text-sm font-semibold text-[#111111] marker:text-[#777777]">
+                  {t("advancedSummary")}
+                </summary>
+                <div className="grid min-w-0 gap-5 px-4 pb-4 pt-1">
+                  <Field label={t("styleLabel")} labelClassName={formLabelClassName}>
+                    <Select
+                      value={draft.style}
+                      onValueChange={(style) =>
+                        setDraft((current) => ({ ...current, style: style as StyleKey }))
+                      }
+                    >
+                      <SelectTrigger className="h-12 w-full min-w-0 max-w-full rounded-lg border-[#D8D4CA] bg-white text-[15px] font-semibold shadow-none focus-visible:border-[#111111] focus-visible:ring-[#111111]/15">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent align="start" className="rounded-lg border-[#D8D4CA]">
+                        {styleOptions.map((style) => (
+                          <SelectItem key={style} value={style} className="text-sm">
+                            {t(`styles.${style}`)}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </Field>
+
+                  <div className="min-w-0 max-w-full">
+                    <p className="mb-2 text-[14px] font-semibold text-[#111111]">
+                      {t("logoLabel")}
+                    </p>
+                    <Input
+                      ref={logoInputRef}
+                      className="hidden"
+                      type="file"
+                      accept="image/png,image/jpeg,image/webp"
+                      onChange={(event) => void handleLogoChange(event)}
+                    />
+                    <button
+                      aria-label={t("logoLabel")}
+                      className={`group flex min-h-[220px] w-full max-w-full flex-col items-center justify-center rounded-lg border border-dashed bg-white p-5 text-center outline-none transition ${
+                        logoDragActive
+                          ? "border-[#111111] ring-4 ring-[#111111]/10"
+                          : "border-[#D4D4D4] hover:border-[#111111] focus-visible:border-[#111111] focus-visible:ring-4 focus-visible:ring-[#111111]/10"
+                      }`}
+                      type="button"
+                      onClick={() => logoInputRef.current?.click()}
+                      onDragEnter={(event) => {
+                        event.preventDefault();
+                        setLogoDragActive(true);
+                      }}
+                      onDragLeave={(event) => {
+                        event.preventDefault();
+                        setLogoDragActive(false);
+                      }}
+                      onDragOver={(event) => event.preventDefault()}
+                      onDrop={handleLogoDrop}
+                    >
+                      {draft.logoDataUrl ? (
+                        <>
+                          <img
+                            alt=""
+                            className="max-h-[104px] max-w-[180px] rounded-md bg-[#F4F4F4] object-contain shadow-[0_14px_34px_rgba(17,17,17,0.10)]"
+                            src={draft.logoDataUrl}
+                          />
+                          <span className="mt-4 block max-w-full truncate text-sm font-semibold text-[#111111]">
+                            {t("uploadedLogoWithSize", {
+                              name: draft.logoName,
+                              width: draft.logoWidth ?? 0,
+                              height: draft.logoHeight ?? 0,
+                            })}
+                          </span>
+                          <span className="mt-1 text-xs font-semibold leading-5 text-[#111111]">
+                            {t("replaceLogo")}
+                          </span>
+                        </>
+                      ) : (
+                        <>
+                          <span className="flex size-12 items-center justify-center rounded-lg bg-[#F4F4F4] text-[#111111]">
+                            <Upload aria-hidden className="size-5" />
+                          </span>
+                          <span className="mt-4 text-base font-semibold text-[#111111]">
+                            {t("chooseLogo")}
+                          </span>
+                          <span className="mt-2 max-w-xs text-sm leading-6 text-[#555555]">
+                            {t("optionalLogoFormats")}
+                          </span>
+                        </>
+                      )}
+                    </button>
+                  </div>
+                </div>
+              </details>
+
+            </div>
+          </div>
+
+          <div className="shrink-0 border-t border-[#E5E5E5] bg-white px-5 py-5 shadow-[0_-12px_28px_rgba(17,17,17,0.04)] md:px-6">
+            <div className={output ? "grid grid-cols-[auto_minmax(0,1fr)] gap-2" : "grid"}>
+              {output ? (
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={reset}
+                  disabled={busy}
+                  className="h-12 rounded-lg border-[#D8D4CA] bg-white px-4 text-sm font-semibold text-[#111111] shadow-none hover:bg-[#F4F4F4] disabled:pointer-events-none disabled:opacity-55"
+                >
+                  <RotateCcw aria-hidden className="size-4" />
+                  {t("reset")}
+                </Button>
+              ) : null}
+              <Button
+                type="submit"
+                disabled={busy}
+                className="h-12 w-full rounded-lg bg-[#111111] text-sm font-semibold text-white shadow-none hover:bg-[#2A2A2A] disabled:pointer-events-none disabled:opacity-55"
+              >
+                {busy ? t("generating") : t("generate")}
+              </Button>
+            </div>
+          </div>
+        </form>
+
+        <aside ref={resultRef} className="flex min-h-[620px] min-w-0 overflow-hidden bg-white p-5 md:p-6 lg:h-full lg:min-h-0">
+          <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border border-[#E5E5E5] bg-[#FAFAFA] p-4 md:p-5">
+            {busy || output ? (
+              <div className="flex flex-col justify-between gap-3 md:flex-row md:items-start">
+                <div>
+                  <h3 className="text-xl font-semibold leading-tight text-[#111111]">
+                    {t("previewTitle")}
+                  </h3>
+                  <p className="mt-2 text-sm leading-6 text-[#666666]">{t("previewHint")}</p>
+                </div>
+                {output && downloadableAssets.length > 0 ? (
+                  <div className="flex shrink-0 flex-wrap gap-2 md:justify-end">
+                    <Button
+                      type="button"
+                      onClick={() => void handleDownloadClick()}
+                      disabled={downloading}
+                      className="h-10 rounded-lg bg-[#111111] px-4 text-xs font-semibold text-white shadow-none hover:bg-[#2A2A2A] disabled:pointer-events-none disabled:opacity-55"
+                    >
+                      {downloading ? (
+                        <Loader2 aria-hidden className="size-4 animate-spin" />
+                      ) : (
+                        <Download aria-hidden className="size-4" />
+                      )}
+                      <span className="whitespace-nowrap">
+                        {downloading ? t("downloading") : downloadButtonLabel}
+                      </span>
+                    </Button>
+                    {downloadSelectionMode ? (
+                      <Button
+                        type="button"
+                        variant="outline"
+                        onClick={cancelDownloadSelection}
+                        disabled={downloading}
+                        className="h-10 rounded-lg border-[#D8D4CA] bg-white px-4 text-xs font-semibold text-[#111111] shadow-none hover:bg-[#F4F4F4] disabled:pointer-events-none disabled:opacity-55"
+                      >
+                        {t("cancelDownloadSelection")}
+                      </Button>
+                    ) : null}
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={() => void handleDownloadAllClick()}
+                      disabled={downloading}
+                      className="h-10 rounded-lg border-[#D8D4CA] bg-white px-4 text-xs font-semibold text-[#111111] shadow-none hover:bg-[#F4F4F4] disabled:pointer-events-none disabled:opacity-55"
+                    >
+                      <Download aria-hidden className="size-4" />
+                      {t("downloadAll")}
+                    </Button>
+                  </div>
+                ) : null}
+              </div>
+            ) : null}
+            {downloadError ? (
+              <p className="mt-3 text-xs font-semibold leading-5 text-[#8E2A17]">
+                {downloadError}
+              </p>
+            ) : null}
+            {resultWarning && output ? (
+              <p className="mt-3 rounded-lg border border-[#E9D4A8] bg-[#FFF9EA] px-3 py-2 text-xs font-semibold leading-5 text-[#6F4B0C]">
+                {resultWarning}
+              </p>
+            ) : null}
+
+            {busy && !hasGeneratedAssets ? (
+              <div className="mt-5 flex min-h-0 flex-1 flex-col items-center justify-center rounded-lg border border-[#E5E5E5] bg-white p-8 text-center">
+                <span className="flex size-12 items-center justify-center rounded-lg bg-[#F4F4F4] text-[#111111]">
+                  <Loader2 aria-hidden className="size-5 animate-spin" />
+                </span>
+                <h4 className="mt-4 text-lg font-semibold text-[#111111]">{t("loadingTitle")}</h4>
+                <p className="mx-auto mt-2 max-w-sm text-sm leading-6 text-[#555555]">
+                  {t("loadingHint")}
+                </p>
+                {generationProgress ? (
+                  <div
+                    className="mt-5 w-full max-w-md rounded-lg border border-[#E5E5E5] bg-[#FAFAFA] p-4 text-left"
+                    aria-live="polite"
+                  >
+                    <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#777777]">
+                      {t(`loadingPhases.${generationProgress.phase}`)}
+                    </p>
+                    <p className="mt-2 text-sm font-semibold text-[#111111]">
+                      {t("progressCount", {
+                        completed: generationProgress.completedCount,
+                        total: generationProgress.totalCount,
+                      })}
+                    </p>
+                    {remainingTimeLabel ? (
+                      <p className="mt-1 text-sm leading-6 text-[#555555]">
+                        {remainingTimeLabel}
+                      </p>
+                    ) : null}
+                    <p className="mt-2 text-xs leading-5 text-[#777777]">
+                      {t("progressDisclosure")}
+                    </p>
+                  </div>
+                ) : null}
+              </div>
+            ) : output ? (
+              <div className="mt-5 min-h-0 flex-1 overflow-y-auto pr-1">
+                {busy && generationProgress ? (
+                  <div className="mb-4 rounded-lg border border-[#E5E5E5] bg-white p-4" aria-live="polite">
+                    <div className="flex flex-col justify-between gap-3 sm:flex-row sm:items-start">
+                      <div>
+                        <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#777777]">
+                          {t(`loadingPhases.${generationProgress.phase}`)}
+                        </p>
+                        <p className="mt-2 text-sm font-semibold text-[#111111]">
+                          {t("progressCount", {
+                            completed: generationProgress.completedCount,
+                            total: generationProgress.totalCount,
+                          })}
+                        </p>
+                        <p className="mt-1 text-xs leading-5 text-[#777777]">
+                          {t("partialReadyHint")}
+                        </p>
+                      </div>
+                      {remainingTimeLabel ? (
+                        <p className="rounded-lg bg-[#F4F4F4] px-3 py-2 text-xs font-semibold text-[#444444]">
+                          {remainingTimeLabel}
+                        </p>
+                      ) : null}
+                    </div>
+                  </div>
+                ) : null}
+                <div className="flex flex-wrap items-start gap-4">
+                  {resultSlots.map(({ asset, format, slot }) => {
+                    if (!asset) {
+                      const dimensions = dimensionsForAssetFormat(format);
+                      return (
+                        <div
+                          key={`pending-${slot}`}
+                          aria-label={t("pendingImageLoading", { index: slot })}
+                          role="status"
+                          style={{
+                            aspectRatio: `${dimensions.width} / ${dimensions.height}`,
+                            width: widthForAssetFormat(format),
+                          }}
+                          className="flex max-w-full flex-col items-center justify-center rounded-lg border border-dashed border-[#D8D4CA] bg-white p-4 text-center shadow-[0_8px_22px_rgba(17,17,17,0.04)]"
+                        >
+                          <span className="flex size-10 items-center justify-center rounded-lg bg-[#F4F4F4] text-[#111111]">
+                            <Loader2 aria-hidden className="size-4 animate-spin" />
+                          </span>
+                          <span className="mt-3 text-xs font-semibold leading-5 text-[#111111]">
+                            {t("pendingImageShort", { index: slot })}
+                          </span>
+                        </div>
+                      );
+                    }
+
+                    const selected = selectedId === asset.id;
+                    const selectedForDownload = downloadSelectionIds.has(asset.id);
+                    const active = downloadSelectionMode ? selectedForDownload : selected;
+                    const index = Math.max(
+                      output.assets.findIndex((item) => item.id === asset.id),
+                      0,
+                    );
+                    return (
+                      <div
+                        key={asset.id}
+                        style={{ width: widthForAssetFormat(asset.format) }}
+                        className="relative max-w-full"
+                      >
+                        <button
+                          type="button"
+                          aria-label={asset.title ?? t(`formats.${asset.format}`)}
+                          aria-pressed={active}
+                          style={{
+                            borderColor: active ? "#111111" : "#E1DDD3",
+                            borderWidth: active ? 2 : 1,
+                          }}
+                          onClick={() => handleAssetCardClick(asset, index)}
+                          className={`block w-full overflow-hidden rounded-lg border-solid bg-white p-0 transition hover:border-[#111111] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#111111]/20 ${
+                            active
+                              ? "shadow-[0_14px_34px_rgba(17,17,17,0.12)]"
+                              : "shadow-[0_8px_22px_rgba(17,17,17,0.05)]"
+                          }`}
+                        >
+                          <AssetImage
+                            asset={asset}
+                            alt={asset.title ?? t(`formats.${asset.format}`)}
+                            className="block w-full bg-[#ECE7DD] object-contain"
+                          />
+                        </button>
+                        {downloadSelectionMode ? (
+                          <Checkbox
+                            checked={selectedForDownload}
+                            onCheckedChange={() => toggleDownloadSelection(asset.id)}
+                            aria-label={t("selectForDownload", { title: asset.title ?? asset.id })}
+                            className="absolute right-2 top-2 z-10 size-6 border-[#111111] bg-white shadow-[0_6px_16px_rgba(17,17,17,0.12)] data-[state=checked]:border-[#111111] data-[state=checked]:bg-[#111111] data-[state=checked]:text-white"
+                          />
+                        ) : null}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            ) : (
+              <div className="flex min-h-0 flex-1 items-center justify-center p-8 text-center">
+                <div className="max-w-md">
+                  <span className="mx-auto flex size-12 items-center justify-center rounded-lg bg-white text-[#111111] shadow-[0_10px_26px_rgba(17,17,17,0.06)]">
+                    <Upload aria-hidden className="size-5" />
+                  </span>
+                  <h4 className="mt-5 text-lg font-semibold leading-tight text-[#111111]">
+                    {t("emptyTitle")}
+                  </h4>
+                  <p className="mx-auto mt-3 max-w-sm text-sm leading-6 text-[#666666]">
+                    {t("emptyHint")}
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
+        </aside>
+      </div>
+      {lightboxAsset ? (
+        <div
+          className="fixed inset-0 z-[80] flex items-center justify-center bg-black/85 p-4 backdrop-blur-sm md:p-8"
+          role="dialog"
+          aria-modal="true"
+          aria-label={lightboxAsset.title ?? t(`formats.${lightboxAsset.format}`)}
+          onTouchStart={handleLightboxTouchStart}
+          onTouchEnd={handleLightboxTouchEnd}
+        >
+          <Button
+            type="button"
+            variant="ghost"
+            aria-label="Close preview"
+            onClick={() => setLightboxIndex(null)}
+            className="absolute right-4 top-4 z-10 size-11 rounded-lg bg-white/10 p-0 text-white hover:bg-white/20 hover:text-white"
+          >
+            <X aria-hidden className="size-5" />
+          </Button>
+          {output && output.assets.length > 1 ? (
+            <>
+              <Button
+                type="button"
+                variant="ghost"
+                aria-label="Previous image"
+                onClick={() => showAdjacentLightboxAsset(-1)}
+                className="absolute left-4 top-1/2 z-10 size-11 -translate-y-1/2 rounded-lg bg-white/10 p-0 text-white hover:bg-white/20 hover:text-white"
+              >
+                <ChevronLeft aria-hidden className="size-6" />
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                aria-label="Next image"
+                onClick={() => showAdjacentLightboxAsset(1)}
+                className="absolute right-4 top-1/2 z-10 size-11 -translate-y-1/2 rounded-lg bg-white/10 p-0 text-white hover:bg-white/20 hover:text-white"
+              >
+                <ChevronRight aria-hidden className="size-6" />
+              </Button>
+            </>
+          ) : null}
+          <div className="flex h-full w-full items-center justify-center px-10 py-12 md:px-16">
+            <AssetImage
+              asset={lightboxAsset}
+              alt={lightboxAsset.title ?? t(`formats.${lightboxAsset.format}`)}
+              className="block max-h-full max-w-full rounded-lg bg-white object-contain shadow-[0_28px_80px_rgba(0,0,0,0.45)]"
+            />
+          </div>
+        </div>
+      ) : null}
+      {screenshotLightboxReference ? (
+        <div
+          className="fixed inset-0 z-[80] flex items-center justify-center bg-black/85 p-4 backdrop-blur-sm md:p-8"
+          role="dialog"
+          aria-modal="true"
+          aria-label={screenshotLightboxReference.name}
+          onTouchStart={handleLightboxTouchStart}
+          onTouchEnd={handleScreenshotLightboxTouchEnd}
+        >
+          <Button
+            type="button"
+            variant="ghost"
+            aria-label={t("closePreview")}
+            onClick={() => setScreenshotLightboxIndex(null)}
+            className="absolute right-4 top-4 z-10 size-11 rounded-lg bg-white/10 p-0 text-white hover:bg-white/20 hover:text-white"
+          >
+            <X aria-hidden className="size-5" />
+          </Button>
+          {screenshotReferences.length > 1 ? (
+            <>
+              <Button
+                type="button"
+                variant="ghost"
+                aria-label={t("previousScreenshot")}
+                onClick={() => showAdjacentScreenshotReference(-1)}
+                className="absolute left-4 top-1/2 z-10 size-11 -translate-y-1/2 rounded-lg bg-white/10 p-0 text-white hover:bg-white/20 hover:text-white"
+              >
+                <ChevronLeft aria-hidden className="size-6" />
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                aria-label={t("nextScreenshot")}
+                onClick={() => showAdjacentScreenshotReference(1)}
+                className="absolute right-4 top-1/2 z-10 size-11 -translate-y-1/2 rounded-lg bg-white/10 p-0 text-white hover:bg-white/20 hover:text-white"
+              >
+                <ChevronRight aria-hidden className="size-6" />
+              </Button>
+            </>
+          ) : null}
+          <div className="flex h-full w-full items-center justify-center px-10 py-12 md:px-16">
+            <img
+              src={screenshotLightboxReference.dataUrl}
+              alt={screenshotLightboxReference.name}
+              className="block max-h-full max-w-full rounded-lg bg-white object-contain shadow-[0_28px_80px_rgba(0,0,0,0.45)]"
+            />
+          </div>
+        </div>
+      ) : null}
+    </section>
+  );
+}