From deb1291274dc0609a4e72f04af54ae5cfdf2f9c4 Mon Sep 17 00:00:00 2001
From: Horacio Daniel Ros <horaciodrs@gmail.com>
Date: Wed, 16 Sep 2026 09:51:52 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20agregar=20componente=20HelpContent=20y?=
 =?UTF-8?q?=20mejorar=20la=20navegaci=C3=B3n=20de=20videos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 txclient/src/app/landing/help/HelpContent.tsx | 335 +++++++++++++++++
 txclient/src/app/landing/help/help.module.css |  14 +
 txclient/src/app/landing/help/page.tsx        | 347 ++----------------
 .../app/landing/help/video/[videoId]/page.tsx |   2 +-
 txclient/src/app/landing/help/videoData.ts    |  20 +-
 5 files changed, 402 insertions(+), 316 deletions(-)
 create mode 100644 txclient/src/app/landing/help/HelpContent.tsx

diff --git a/txclient/src/app/landing/help/HelpContent.tsx b/txclient/src/app/landing/help/HelpContent.tsx
new file mode 100644
index 0000000..bc9bc42
--- /dev/null
+++ b/txclient/src/app/landing/help/HelpContent.tsx
@@ -0,0 +1,335 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import style from "./help.module.css";
+import { videoCategories, Video, getTotalVideoCount } from "./videoData";
+import VideoModal from "./components/VideoModal";
+import AnimatedContainer from "@core/app/components/AnimatedConainer/AnimatedContainer";
+import HeaderConfProvider from "@core/app/components/HeaderConfProvider/HeaderConfProvider";
+import DefaultLoginAction from "@core/app/components/LoginAction/DefaultLoginAction";
+import { ScrollToTop } from "@core/app/components/ScrollTop";
+import Link from "next/link";
+
+export default function HelpContent() {
+    const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [activeCategory, setActiveCategory] = useState<string>("all");
+    const [watchedVideos, setWatchedVideos] = useState<Set<string>>(new Set());
+
+    const totalVideos = getTotalVideoCount();
+
+    useEffect(() => {
+        const watched = localStorage.getItem("tx-help-watched");
+        if (watched) {
+            setWatchedVideos(new Set(JSON.parse(watched)));
+        }
+    }, []);
+
+    const handleVideoClick = (video: Video) => {
+        setSelectedVideo(video);
+        setIsModalOpen(true);
+        const newWatched = new Set(watchedVideos);
+        newWatched.add(video.id);
+        setWatchedVideos(newWatched);
+        localStorage.setItem("tx-help-watched", JSON.stringify([...newWatched]));
+    };
+
+    const handleVideoNavigate = (video: Video) => {
+        // Mark as watched without opening the modal, then let the Link navigate
+        const newWatched = new Set(watchedVideos);
+        newWatched.add(video.id);
+        setWatchedVideos(newWatched);
+        localStorage.setItem("tx-help-watched", JSON.stringify([...newWatched]));
+    };
+
+    const handleCloseModal = () => {
+        setIsModalOpen(false);
+        setTimeout(() => setSelectedVideo(null), 200);
+    };
+
+    const handleCategoryClick = (categoryId: string) => {
+        setActiveCategory(categoryId);
+        if (categoryId !== "all") {
+            const element = document.getElementById(`category-${categoryId}`);
+            if (element) {
+                element.scrollIntoView({ behavior: "smooth", block: "start" });
+            }
+        }
+    };
+
+    const progressPercent = Math.round((watchedVideos.size / totalVideos) * 100);
+
+    return (
+        <AnimatedContainer
+            color="#aeaeae"
+            minSize={150}
+            maxSize={500}
+            items={10}
+            style={{
+                display: "block",
+                width: "100%",
+                background: "var(--white)",
+            }}
+        >
+            <ScrollToTop />
+            <HeaderConfProvider />
+            <DefaultLoginAction />
+
+            <div className={style.container}>
+                {/* Hero Section */}
+                <div className={style.hero}>
+                    <div className={style.heroIcon}>
+                        <svg
+                            width="36"
+                            height="36"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="white"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                        >
+                            <polygon points="5 3 19 12 5 21 5 3" />
+                        </svg>
+                    </div>
+                    <h1 className={style.heroTitle}>Centro de Ayuda</h1>
+                    <p className={style.heroSubtitle}>
+                        Aprende a usar TurnosXpress paso a paso con nuestros tutoriales en video.
+                        Desde la configuración inicial hasta las funciones más avanzadas,
+                        tenemos todo lo que necesitas para aprovechar al máximo la plataforma.
+                    </p>
+                    <div className={style.heroStats}>
+                        <div className={style.statItem}>
+                            <span className={style.statNumber}>{totalVideos}</span>
+                            <span className={style.statLabel}>Video tutoriales</span>
+                        </div>
+                        <div className={style.statItem}>
+                            <span className={style.statNumber}>{videoCategories.length}</span>
+                            <span className={style.statLabel}>Categorías</span>
+                        </div>
+                        <div className={style.statItem}>
+                            <span className={style.statNumber}>{watchedVideos.size}</span>
+                            <span className={style.statLabel}>Vistos</span>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Progress Section */}
+                {watchedVideos.size > 0 && (
+                    <div className={style.progressSection}>
+                        <h2 className={style.progressTitle}>
+                            Tu progreso de aprendizaje
+                        </h2>
+                        <p className={style.progressText}>
+                            Has visto {watchedVideos.size} de {totalVideos} tutoriales.
+                            {progressPercent === 100
+                                ? " ¡Felicidades! Has completado todos los tutoriales."
+                                : ` ¡Sigue así, te faltan ${totalVideos - watchedVideos.size}!`}
+                        </p>
+                        <div className={style.progressBar}>
+                            <div
+                                className={style.progressFill}
+                                style={{ width: `${progressPercent}%` }}
+                            />
+                        </div>
+                    </div>
+                )}
+
+                {/* Category Navigation */}
+                <div className={style.categoryNav}>
+                    <button
+                        className={
+                            activeCategory === "all"
+                                ? style.categoryBtnActive
+                                : style.categoryBtn
+                        }
+                        onClick={() => {
+                            setActiveCategory("all");
+                            window.scrollTo({ top: 0, behavior: "smooth" });
+                        }}
+                    >
+                        Todos
+                    </button>
+                    {videoCategories.map((cat) => (
+                        <button
+                            key={cat.id}
+                            className={
+                                activeCategory === cat.id
+                                    ? style.categoryBtnActive
+                                    : style.categoryBtn
+                            }
+                            onClick={() => handleCategoryClick(cat.id)}
+                        >
+                            {cat.icon} {cat.name}
+                        </button>
+                    ))}
+                </div>
+
+                {/* Learning Path */}
+                <div className={style.learningPath}>
+                    <span className={style.learningPathIcon}>
+                        <svg
+                            width="20"
+                            height="20"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                        >
+                            <circle cx="12" cy="12" r="10" />
+                            <path d="M12 16v-4" />
+                            <path d="M12 8h.01" />
+                        </svg>
+                    </span>
+                    <span className={style.learningPathText}>
+                        <strong>Recomendación:</strong> Sigue el orden de las categorías para
+                        un aprendizaje progresivo. Comienza con &quot;Primeros Pasos&quot; y
+                        avanza según tus necesidades.
+                    </span>
+                </div>
+
+                {/* Video Categories */}
+                {videoCategories.map((category) => (
+                    <div
+                        key={category.id}
+                        id={`category-${category.id}`}
+                        className={style.categorySection}
+                    >
+                        <div className={style.categoryHeader}>
+                            <div
+                                className={style.categoryIcon}
+                                style={{ background: category.color }}
+                            >
+                                <span style={{ fontSize: "1.5rem" }}>{category.icon}</span>
+                            </div>
+                            <div>
+                                <h2 className={style.categoryTitle}>{category.name}</h2>
+                                <p className={style.categoryDescription}>
+                                    {category.description}
+                                </p>
+                            </div>
+                            <span className={style.categoryCount}>
+                                {category.videos.length} videos
+                            </span>
+                        </div>
+
+                        <div className={style.videoGrid}>
+                            {category.videos.map((video, idx) => (
+                                <div
+                                    key={video.id}
+                                    className={style.videoCard}
+                                    onClick={() => handleVideoClick(video)}
+                                >
+                                    <div className={style.videoThumbnail}>
+                                        <img
+                                            src={video.thumbnail}
+                                            alt={video.title}
+                                            loading="lazy"
+                                        />
+                                        <div className={style.playOverlay}>
+                                            <div className={style.playButton}>
+                                                <div className={style.playIcon} />
+                                            </div>
+                                        </div>
+                                        {watchedVideos.has(video.id) && (
+                                            <div
+                                                style={{
+                                                    position: "absolute",
+                                                    top: "8px",
+                                                    left: "8px",
+                                                    background:
+                                                        "linear-gradient(135deg, #2aaa2a, #008011)",
+                                                    color: "white",
+                                                    padding: "3px 8px",
+                                                    borderRadius: "4px",
+                                                    fontSize: "0.7rem",
+                                                    fontWeight: 700,
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    gap: "3px",
+                                                }}
+                                            >
+                                                ✓ Visto
+                                            </div>
+                                        )}
+                                    </div>
+                                    <div className={style.videoContent}>
+                                        <h3 className={style.videoTitle}>{video.title}</h3>
+                                        <p className={style.videoDescription}>
+                                            {video.description}
+                                        </p>
+                                        <div className={style.videoMeta}>
+                                            <div className={style.videoStep}>
+                                                <span className={style.stepNumber}>
+                                                    {idx + 1}
+                                                </span>
+                                                Paso {idx + 1} de {category.videos.length}
+                                            </div>
+                                            <Link
+                                                href={`/landing/help/video/${video.id}`}
+                                                className={style.videoPageLink}
+                                                onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    handleVideoNavigate(video);
+                                                }}
+                                            >
+                                                Ver tutorial completo
+                                            </Link>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                ))}
+
+                {/* CTA Section */}
+                <div className={style.ctaSection}>
+                    <h2 className={style.ctaTitle}>¿Necesitas más ayuda?</h2>
+                    <p className={style.ctaText}>
+                        Si no encontrás lo que buscás, nuestro equipo de soporte está
+                        listo para ayudarte. También podés visitar nuestro canal de YouTube
+                        para más contenido.
+                    </p>
+                    <div style={{ display: "flex", gap: "1rem", justifyContent: "center", flexWrap: "wrap" }}>
+                        <a
+                            href="mailto:info@turnosxpress.com.ar"
+                            className={style.ctaButton}
+                        >
+                            ✉ Escribinos
+                        </a>
+                        <a
+                            href="https://www.youtube.com/@turnosxpress"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className={style.ctaButton}
+                            style={{
+                                background: "var(--white)",
+                                color: "var(--wine-darkest)",
+                                boxShadow: "0 4px 15px rgba(0,0,0,0.1)",
+                            }}
+                        >
+                            ▶ Canal de YouTube
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            {/* Video Modal */}
+            <VideoModal
+                video={selectedVideo}
+                isOpen={isModalOpen}
+                onClose={handleCloseModal}
+                onSelectVideo={(video) => {
+                    setSelectedVideo(video);
+                    const newWatched = new Set(watchedVideos);
+                    newWatched.add(video.id);
+                    setWatchedVideos(newWatched);
+                    localStorage.setItem("tx-help-watched", JSON.stringify([...newWatched]));
+                }}
+            />
+        </AnimatedContainer>
+    );
+}
\ No newline at end of file
diff --git a/txclient/src/app/landing/help/help.module.css b/txclient/src/app/landing/help/help.module.css
index 1fcc1a9..2a1bbee 100644
--- a/txclient/src/app/landing/help/help.module.css
+++ b/txclient/src/app/landing/help/help.module.css
@@ -320,6 +320,20 @@
     font-weight: 600;
 }
 
+.videoPageLink {
+    margin-left: auto;
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--wine-dark);
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+.videoPageLink:hover {
+    color: var(--wine-red);
+    text-decoration: underline;
+}
+
 .stepNumber {
     width: 22px;
     height: 22px;
diff --git a/txclient/src/app/landing/help/page.tsx b/txclient/src/app/landing/help/page.tsx
index 986167c..3ee0d5d 100644
--- a/txclient/src/app/landing/help/page.tsx
+++ b/txclient/src/app/landing/help/page.tsx
@@ -1,317 +1,36 @@
-"use client";
+import { Metadata } from "next";
+import HelpContent from "./HelpContent";
 
-import { useState, useEffect } from "react";
-import style from "./help.module.css";
-import { videoCategories, Video, getTotalVideoCount } from "./videoData";
-import VideoModal from "./components/VideoModal";
-import AnimatedContainer from "@core/app/components/AnimatedConainer/AnimatedContainer";
-import HeaderConfProvider from "@core/app/components/HeaderConfProvider/HeaderConfProvider";
-import DefaultLoginAction from "@core/app/components/LoginAction/DefaultLoginAction";
-import { ScrollToTop } from "@core/app/components/ScrollTop";
-import Link from "next/link";
+const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "https://turnosxpress.com.ar";
+
+export const metadata: Metadata = {
+    title: "Centro de Ayuda y Tutoriales | TurnosXpress",
+    description:
+        "Aprende a usar TurnosXpress paso a paso con tutoriales en video. Desde la configuración inicial hasta las funciones más avanzadas: servicios, horarios, reservas, pagos y más.",
+    alternates: {
+        canonical: `${baseUrl}/landing/help`,
+    },
+    openGraph: {
+        type: "website",
+        title: "Centro de Ayuda y Tutoriales | TurnosXpress",
+        description:
+            "Aprende a usar TurnosXpress paso a paso con tutoriales en video. Desde la configuración inicial hasta las funciones más avanzadas: servicios, horarios, reservas, pagos y más.",
+        url: `${baseUrl}/landing/help`,
+        siteName: "TurnosXpress",
+        locale: "es_AR",
+    },
+    twitter: {
+        card: "summary",
+        title: "Centro de Ayuda y Tutoriales | TurnosXpress",
+        description:
+            "Aprende a usar TurnosXpress paso a paso con tutoriales en video.",
+    },
+    robots: {
+        index: true,
+        follow: true,
+    },
+};
 
 export default function HelpPage() {
-    const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
-    const [isModalOpen, setIsModalOpen] = useState(false);
-    const [activeCategory, setActiveCategory] = useState<string>("all");
-    const [watchedVideos, setWatchedVideos] = useState<Set<string>>(new Set());
-
-    const totalVideos = getTotalVideoCount();
-
-    useEffect(() => {
-        const watched = localStorage.getItem("tx-help-watched");
-        if (watched) {
-            setWatchedVideos(new Set(JSON.parse(watched)));
-        }
-    }, []);
-
-    const handleVideoClick = (video: Video) => {
-        setSelectedVideo(video);
-        setIsModalOpen(true);
-        const newWatched = new Set(watchedVideos);
-        newWatched.add(video.id);
-        setWatchedVideos(newWatched);
-        localStorage.setItem("tx-help-watched", JSON.stringify([...newWatched]));
-    };
-
-    const handleCloseModal = () => {
-        setIsModalOpen(false);
-        setTimeout(() => setSelectedVideo(null), 200);
-    };
-
-    const handleCategoryClick = (categoryId: string) => {
-        setActiveCategory(categoryId);
-        if (categoryId !== "all") {
-            const element = document.getElementById(`category-${categoryId}`);
-            if (element) {
-                element.scrollIntoView({ behavior: "smooth", block: "start" });
-            }
-        }
-    };
-
-    const progressPercent = Math.round((watchedVideos.size / totalVideos) * 100);
-
-    return (
-        <AnimatedContainer
-            color="#aeaeae"
-            minSize={150}
-            maxSize={500}
-            items={10}
-            style={{
-                display: "block",
-                width: "100%",
-                background: "var(--white)",
-            }}
-        >
-            <ScrollToTop />
-            <HeaderConfProvider />
-            <DefaultLoginAction />
-
-            <div className={style.container}>
-                {/* Hero Section */}
-                <div className={style.hero}>
-                    <div className={style.heroIcon}>
-                        <svg
-                            width="36"
-                            height="36"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="white"
-                            strokeWidth="2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                        >
-                            <polygon points="5 3 19 12 5 21 5 3" />
-                        </svg>
-                    </div>
-                    <h1 className={style.heroTitle}>Centro de Ayuda</h1>
-                    <p className={style.heroSubtitle}>
-                        Aprende a usar TurnosXpress paso a paso con nuestros tutoriales en video.
-                        Desde la configuración inicial hasta las funciones más avanzadas,
-                        tenemos todo lo que necesitas para aprovechar al máximo la plataforma.
-                    </p>
-                    <div className={style.heroStats}>
-                        <div className={style.statItem}>
-                            <span className={style.statNumber}>{totalVideos}</span>
-                            <span className={style.statLabel}>Video tutoriales</span>
-                        </div>
-                        <div className={style.statItem}>
-                            <span className={style.statNumber}>{videoCategories.length}</span>
-                            <span className={style.statLabel}>Categorías</span>
-                        </div>
-                        <div className={style.statItem}>
-                            <span className={style.statNumber}>{watchedVideos.size}</span>
-                            <span className={style.statLabel}>Vistos</span>
-                        </div>
-                    </div>
-                </div>
-
-                {/* Progress Section */}
-                {watchedVideos.size > 0 && (
-                    <div className={style.progressSection}>
-                        <h2 className={style.progressTitle}>
-                            Tu progreso de aprendizaje
-                        </h2>
-                        <p className={style.progressText}>
-                            Has visto {watchedVideos.size} de {totalVideos} tutoriales.
-                            {progressPercent === 100
-                                ? " ¡Felicidades! Has completado todos los tutoriales."
-                                : ` ¡Sigue así, te faltan ${totalVideos - watchedVideos.size}!`}
-                        </p>
-                        <div className={style.progressBar}>
-                            <div
-                                className={style.progressFill}
-                                style={{ width: `${progressPercent}%` }}
-                            />
-                        </div>
-                    </div>
-                )}
-
-                {/* Category Navigation */}
-                <div className={style.categoryNav}>
-                    <button
-                        className={
-                            activeCategory === "all"
-                                ? style.categoryBtnActive
-                                : style.categoryBtn
-                        }
-                        onClick={() => {
-                            setActiveCategory("all");
-                            window.scrollTo({ top: 0, behavior: "smooth" });
-                        }}
-                    >
-                        Todos
-                    </button>
-                    {videoCategories.map((cat) => (
-                        <button
-                            key={cat.id}
-                            className={
-                                activeCategory === cat.id
-                                    ? style.categoryBtnActive
-                                    : style.categoryBtn
-                            }
-                            onClick={() => handleCategoryClick(cat.id)}
-                        >
-                            {cat.icon} {cat.name}
-                        </button>
-                    ))}
-                </div>
-
-                {/* Learning Path */}
-                <div className={style.learningPath}>
-                    <span className={style.learningPathIcon}>
-                        <svg
-                            width="20"
-                            height="20"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                        >
-                            <circle cx="12" cy="12" r="10" />
-                            <path d="M12 16v-4" />
-                            <path d="M12 8h.01" />
-                        </svg>
-                    </span>
-                    <span className={style.learningPathText}>
-                        <strong>Recomendación:</strong> Sigue el orden de las categorías para
-                        un aprendizaje progresivo. Comienza con &quot;Primeros Pasos&quot; y
-                        avanza según tus necesidades.
-                    </span>
-                </div>
-
-                {/* Video Categories */}
-                {videoCategories.map((category) => (
-                    <div
-                        key={category.id}
-                        id={`category-${category.id}`}
-                        className={style.categorySection}
-                    >
-                        <div className={style.categoryHeader}>
-                            <div
-                                className={style.categoryIcon}
-                                style={{ background: category.color }}
-                            >
-                                <span style={{ fontSize: "1.5rem" }}>{category.icon}</span>
-                            </div>
-                            <div>
-                                <h2 className={style.categoryTitle}>{category.name}</h2>
-                                <p className={style.categoryDescription}>
-                                    {category.description}
-                                </p>
-                            </div>
-                            <span className={style.categoryCount}>
-                                {category.videos.length} videos
-                            </span>
-                        </div>
-
-                        <div className={style.videoGrid}>
-                            {category.videos.map((video, idx) => (
-                                <div
-                                    key={video.id}
-                                    className={style.videoCard}
-                                    onClick={() => handleVideoClick(video)}
-                                >
-                                    <div className={style.videoThumbnail}>
-                                        <img
-                                            src={video.thumbnail}
-                                            alt={video.title}
-                                            loading="lazy"
-                                        />
-                                        <div className={style.playOverlay}>
-                                            <div className={style.playButton}>
-                                                <div className={style.playIcon} />
-                                            </div>
-                                        </div>
-                                        {watchedVideos.has(video.id) && (
-                                            <div
-                                                style={{
-                                                    position: "absolute",
-                                                    top: "8px",
-                                                    left: "8px",
-                                                    background:
-                                                        "linear-gradient(135deg, #2aaa2a, #008011)",
-                                                    color: "white",
-                                                    padding: "3px 8px",
-                                                    borderRadius: "4px",
-                                                    fontSize: "0.7rem",
-                                                    fontWeight: 700,
-                                                    display: "flex",
-                                                    alignItems: "center",
-                                                    gap: "3px",
-                                                }}
-                                            >
-                                                ✓ Visto
-                                            </div>
-                                        )}
-                                    </div>
-                                    <div className={style.videoContent}>
-                                        <h3 className={style.videoTitle}>{video.title}</h3>
-                                        <p className={style.videoDescription}>
-                                            {video.description}
-                                        </p>
-                                        <div className={style.videoMeta}>
-                                            <div className={style.videoStep}>
-                                                <span className={style.stepNumber}>
-                                                    {idx + 1}
-                                                </span>
-                                                Paso {idx + 1} de {category.videos.length}
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-                ))}
-
-                {/* CTA Section */}
-                <div className={style.ctaSection}>
-                    <h2 className={style.ctaTitle}>¿Necesitas más ayuda?</h2>
-                    <p className={style.ctaText}>
-                        Si no encontrás lo que buscás, nuestro equipo de soporte está
-                        listo para ayudarte. También podés visitar nuestro canal de YouTube
-                        para más contenido.
-                    </p>
-                    <div style={{ display: "flex", gap: "1rem", justifyContent: "center", flexWrap: "wrap" }}>
-                        <a
-                            href="mailto:info@turnosxpress.com.ar"
-                            className={style.ctaButton}
-                        >
-                            ✉ Escribinos
-                        </a>
-                        <a
-                            href="https://www.youtube.com/@turnosxpress"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className={style.ctaButton}
-                            style={{
-                                background: "var(--white)",
-                                color: "var(--wine-darkest)",
-                                boxShadow: "0 4px 15px rgba(0,0,0,0.1)",
-                            }}
-                        >
-                            ▶ Canal de YouTube
-                        </a>
-                    </div>
-                </div>
-            </div>
-
-            {/* Video Modal */}
-            <VideoModal
-                video={selectedVideo}
-                isOpen={isModalOpen}
-                onClose={handleCloseModal}
-                onSelectVideo={(video) => {
-                    setSelectedVideo(video);
-                    const newWatched = new Set(watchedVideos);
-                    newWatched.add(video.id);
-                    setWatchedVideos(newWatched);
-                    localStorage.setItem("tx-help-watched", JSON.stringify([...newWatched]));
-                }}
-            />
-        </AnimatedContainer>
-    );
-}
+    return <HelpContent />;
+}
\ No newline at end of file
diff --git a/txclient/src/app/landing/help/video/[videoId]/page.tsx b/txclient/src/app/landing/help/video/[videoId]/page.tsx
index cc0ae75..8f1e3fc 100644
--- a/txclient/src/app/landing/help/video/[videoId]/page.tsx
+++ b/txclient/src/app/landing/help/video/[videoId]/page.tsx
@@ -103,7 +103,7 @@ export default async function VideoPage({
         thumbnailUrl: video.thumbnail,
         contentUrl: `https://www.youtube.com/watch?v=${video.id}`,
         embedUrl: `https://www.youtube.com/embed/${video.id}`,
-        uploadDate: "2025-01-01",
+        uploadDate: video.uploadDate,
         publisher: {
             "@type": "Organization",
             name: "TurnosXpress",
diff --git a/txclient/src/app/landing/help/videoData.ts b/txclient/src/app/landing/help/videoData.ts
index 685f5db..c45909c 100644
--- a/txclient/src/app/landing/help/videoData.ts
+++ b/txclient/src/app/landing/help/videoData.ts
@@ -5,6 +5,8 @@ export interface Video {
     thumbnail: string;
     category: string;
     order: number;
+    /** Date the tutorial was published on turnosxpress.com.ar (ISO yyyy-mm-dd). Defensible: matches git history of videoData.ts when the Help Center was added. */
+    uploadDate: string;
 }
 
 export interface VideoCategory {
@@ -31,6 +33,7 @@ export const videoCategories: VideoCategory[] = [
                 thumbnail: "https://i2.ytimg.com/vi/QE5pEw_af5g/hqdefault.jpg",
                 category: "getting-started",
                 order: 1,
+                uploadDate: "2026-09-02",
             },
             {
                 id: "Aufl00f4U0Y",
@@ -39,6 +42,7 @@ export const videoCategories: VideoCategory[] = [
                 thumbnail: "https://i2.ytimg.com/vi/Aufl00f4U0Y/hqdefault.jpg",
                 category: "getting-started",
                 order: 2,
+                uploadDate: "2026-09-02",
             },
         ],
     },
@@ -56,6 +60,7 @@ export const videoCategories: VideoCategory[] = [
                 thumbnail: "https://i1.ytimg.com/vi/hgs9w9Q7w2k/hqdefault.jpg",
                 category: "services",
                 order: 1,
+                uploadDate: "2026-09-02",
             },
             {
                 id: "UthPmnzR7fg",
@@ -64,6 +69,7 @@ export const videoCategories: VideoCategory[] = [
                 thumbnail: "https://i2.ytimg.com/vi/UthPmnzR7fg/hqdefault.jpg",
                 category: "services",
                 order: 2,
+                uploadDate: "2026-09-02",
             },
             {
                 id: "p6_ax-B2vDA",
@@ -72,6 +78,7 @@ export const videoCategories: VideoCategory[] = [
                 thumbnail: "https://i1.ytimg.com/vi/p6_ax-B2vDA/hqdefault.jpg",
                 category: "services",
                 order: 3,
+                uploadDate: "2026-09-02",
             },
             {
                 id: "tzVF2MeW37I",
@@ -80,6 +87,7 @@ export const videoCategories: VideoCategory[] = [
                 thumbnail: "https://i.ytimg.com/vi/tzVF2MeW37I/hqdefault.jpg",
                 category: "services",
                 order: 4,
+                uploadDate: "2026-09-02",
             },
         ],
     },
@@ -97,6 +105,7 @@ export const videoCategories: VideoCategory[] = [
                 thumbnail: "https://i2.ytimg.com/vi/enu2ny1k6XU/hqdefault.jpg",
                 category: "schedules",
                 order: 1,
+                uploadDate: "2026-09-02",
             },
             {
                 id: "8kBxSYoisSM",
@@ -105,6 +114,7 @@ export const videoCategories: VideoCategory[] = [
                 thumbnail: "https://i1.ytimg.com/vi/8kBxSYoisSM/hqdefault.jpg",
                 category: "schedules",
                 order: 2,
+                uploadDate: "2026-09-02",
             },
         ],
     },
@@ -122,6 +132,7 @@ export const videoCategories: VideoCategory[] = [
                 thumbnail: "https://i3.ytimg.com/vi/BcHrqxW_PTs/hqdefault.jpg",
                 category: "clients-bookings",
                 order: 1,
+                uploadDate: "2026-09-02",
             },
             {
                 id: "MVpCGA-w7c8",
@@ -130,6 +141,7 @@ export const videoCategories: VideoCategory[] = [
                 thumbnail: "https://i2.ytimg.com/vi/MVpCGA-w7c8/hqdefault.jpg",
                 category: "clients-bookings",
                 order: 2,
+                uploadDate: "2026-09-02",
             },
         ],
     },
@@ -147,6 +159,7 @@ export const videoCategories: VideoCategory[] = [
                 thumbnail: "https://i4.ytimg.com/vi/CpGNWAJo6MM/hqdefault.jpg",
                 category: "payments-discounts",
                 order: 1,
+                uploadDate: "2026-09-02",
             },
             {
                 id: "UAh7HkOcvMQ",
@@ -155,6 +168,7 @@ export const videoCategories: VideoCategory[] = [
                 thumbnail: "https://i2.ytimg.com/vi/UAh7HkOcvMQ/hqdefault.jpg",
                 category: "payments-discounts",
                 order: 2,
+                uploadDate: "2026-09-02",
             },
         ],
     },
@@ -172,6 +186,7 @@ export const videoCategories: VideoCategory[] = [
                 thumbnail: "https://i2.ytimg.com/vi/iu7sGYW1iGk/hqdefault.jpg",
                 category: "customization",
                 order: 1,
+                uploadDate: "2026-09-02",
             },
             {
                 id: "nZkBIpmLRyI",
@@ -180,6 +195,7 @@ export const videoCategories: VideoCategory[] = [
                 thumbnail: "https://i.ytimg.com/vi/nZkBIpmLRyI/hqdefault.jpg",
                 category: "customization",
                 order: 2,
+                uploadDate: "2026-09-02",
             },
             {
                 id: "oJuvDdewG1I",
@@ -188,6 +204,7 @@ export const videoCategories: VideoCategory[] = [
                 thumbnail: "https://i4.ytimg.com/vi/oJuvDdewG1I/hqdefault.jpg",
                 category: "customization",
                 order: 3,
+                uploadDate: "2026-09-02",
             },
             {
                 id: "wjJfoky6VD0",
@@ -196,6 +213,7 @@ export const videoCategories: VideoCategory[] = [
                 thumbnail: "https://i4.ytimg.com/vi/wjJfoky6VD0/hqdefault.jpg",
                 category: "customization",
                 order: 4,
+                uploadDate: "2026-09-02",
             },
         ],
     },
@@ -207,4 +225,4 @@ export const getAllVideos = (): Video[] => {
 
 export const getTotalVideoCount = (): number => {
     return getAllVideos().length;
-};
+};
\ No newline at end of file