@axzydev/axzy_ui_system 1.4.7 → 1.5.0

package/src/showcases/ProductoDetalle.tsx

@@ -1,181 +1,324 @@
-import { useState } from "react";
-import { FaCheck, FaExternalLinkAlt } from "react-icons/fa";
-import ITBadget from "../components/atoms/badget/badget";
-import ITDivider from "../components/atoms/divider/divider";
+import { useEffect, useState } from "react";
+import { FaArrowLeft, FaArrowRight, FaCheck, FaExternalLinkAlt } from "react-icons/fa";
 import ITFlex from "../components/atoms/flex/flex";
-import ITGrid from "../components/atoms/grid/grid";
-import ITStack from "../components/atoms/stack/stack";
 import ITText from "../components/atoms/text/text";
-import ITDialog from "../components/organisms/dialog/dialog";
 import ProductoIcono from "./ProductoIcono";
-import type { Producto } from "./productos";
+import { PRODUCTOS, type Producto } from "./productos";
+import {
+  BotonAccion,
+  CHIP,
+  ControlesPortafolio,
+  EYEBROW,
+  EnlaceBoton,
+  Etiqueta,
+  SaltarContenido,
+} from "./portfolioUi";
+import { useITTranslation } from "@/i18n";
 
 interface Props {
   /** Producto que se muestra. */
   producto: Producto;
-  /** Cierra la pantalla de detalle. */
-  onClose: () => void;
+  /** Vuelve al portafolio. */
+  onBack: () => void;
 }
 
+/** Ancho de la hoja: el mismo que el masthead del portafolio. */
+const HOJA = "mx-auto w-full max-w-[1180px] px-5 sm:px-8 lg:px-10";
+
+/** Filete de 1px entre bloques. */
+const FILETE = "border-slate-200 dark:border-slate-800";
+
+/** Productos que tienen pantalla de detalle (los que traen capturas). */
+const CON_DETALLE = PRODUCTOS.filter((p) => (p.capturas?.length ?? 0) > 0);
+
 /**
- * Pantalla de detalle de un producto del portafolio.
+ * Página de detalle de un producto del portafolio (`#proyecto/<id>`).
  *
- * Se abre a pantalla completa sobre la home: a la izquierda la galería de
- * capturas reales (con miniaturas y pie), a la derecha la ficha del producto
- * (qué resuelve, stack y datos técnicos).
+ * Es una **página completa**, no un modal: cabecera propia con volver al
+ * portafolio, ficha del producto (qué resuelve y datos técnicos en filas con
+ * filete), galería de capturas reales con miniaturas y navegación entre
+ * proyectos. La URL es compartible y el botón atrás del navegador funciona.
  *
  * @example
  * ```tsx
- * {detalle && <ProductoDetalle producto={detalle} onClose={() => setDetalle(null)} />}
+ * <ProductoDetalle producto={producto} onBack={() => goToPortfolio()} />
  * ```
  */
-export default function ProductoDetalle({ producto, onClose }: Props) {
+export default function ProductoDetalle({ producto, onBack }: Props) {
+  const { t } = useITTranslation();
   const capturas = producto.capturas ?? [];
   const [activa, setActiva] = useState(capturas[0]);
   const hayGaleria = capturas.length > 0;
+  const enlaceExterno = Boolean(producto.enlace && !producto.enlace.startsWith("#"));
+
+  // Navegación entre proyectos: solo entre los que tienen pantalla de detalle.
+  const indice = CON_DETALLE.findIndex((p) => p.id === producto.id);
+  const anterior = indice > 0 ? CON_DETALLE[indice - 1] : undefined;
+  const siguiente =
+    indice >= 0 && indice < CON_DETALLE.length - 1 ? CON_DETALLE[indice + 1] : undefined;
+
+  // Cada producto entra por arriba y con su primera captura activa.
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: "auto" });
+    setActiva(producto.capturas?.[0]);
+  }, [producto]);
 
   return (
-    <ITDialog isOpen onClose={onClose} title={producto.nombre} useFormHeader fullScreen>
-      <div className="mx-auto w-full max-w-6xl">
-        <ITGrid container spacing={8}>
-          {/* ─── Galería ─── */}
-          {hayGaleria && activa && (
-            <ITGrid item xs={12} lg={7}>
-              <ITStack spacing={3}>
-                <div className="overflow-hidden rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950/60">
-                  <img
-                    src={activa.src}
-                    alt={`${producto.nombre}: ${activa.titulo}`}
-                    className="block w-full"
-                  />
-                </div>
-
-                <ITFlex gap={2} wrap="wrap">
+    <>
+      <SaltarContenido />
+
+      {/* Cabecera: volver + producto + enlace */}
+      <header className="sticky top-0 z-[100] border-b border-slate-200 bg-white/85 backdrop-blur-md dark:border-slate-800 dark:bg-[#0b0d10]/85">
+        <div className={`${HOJA} flex h-14 items-center gap-3`}>
+          <BotonAccion onClick={onBack} icono={<FaArrowLeft size={11} />} className="!px-3 !py-1.5">
+            {t("showcase.producto.back")}
+          </BotonAccion>
+          <span aria-hidden className="text-slate-300 dark:text-slate-700">
+            /
+          </span>
+          <ITText
+            as="span"
+            className="truncate font-display !text-[13px] !font-bold -tracking-[0.01em] text-slate-900 dark:text-white"
+          >
+            {producto.nombre}
+          </ITText>
+
+          <div className="ml-auto flex items-center gap-2 sm:gap-3">
+            {producto.enlace && (
+              <a
+                href={producto.enlace}
+                {...(enlaceExterno ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+                className="hidden shrink-0 items-center gap-1.5 font-mono !text-[11px] uppercase !tracking-[0.14em] !text-primary-700 dark:!text-primary-500 sm:inline-flex"
+              >
+                {enlaceExterno && <FaExternalLinkAlt size={10} />}
+                {producto.enlaceTexto ?? t("showcase.home.viewRepo")}
+              </a>
+            )}
+            <ControlesPortafolio />
+          </div>
+        </div>
+      </header>
+
+      <main id="contenido">
+        {/* ─── FICHA ─── */}
+        <div className={`${HOJA} pb-10 pt-10 sm:pt-14`}>
+          <ITFlex align="center" gap={3} wrap="wrap">
+            <span className="grid h-11 w-11 place-items-center rounded-[10px] border border-slate-200 bg-white text-primary-700 dark:border-slate-800 dark:bg-slate-900 dark:text-primary-500">
+              <ProductoIcono icono={producto.icono} size={20} />
+            </span>
+            <Etiqueta>{producto.tipo}</Etiqueta>
+            <ITText as="span" className={EYEBROW}>
+              {`${String(indice + 1).padStart(2, "0")} / ${String(CON_DETALLE.length).padStart(2, "0")}`}
+            </ITText>
+          </ITFlex>
+
+          <ITText
+            as="h1"
+            className="font-display !mt-6 !text-[34px] !font-bold !leading-[1.08] -tracking-[0.02em] text-slate-900 dark:text-white sm:!text-[46px]"
+          >
+            {producto.nombre}
+          </ITText>
+
+          <ITText
+            as="p"
+            className="!mt-5 max-w-[70ch] !text-[15.5px] !leading-[1.75] text-slate-600 dark:text-slate-300 sm:!text-[16.5px]"
+          >
+            {producto.detalle ?? producto.descripcion}
+          </ITText>
+
+          <ITFlex gap={1.5} wrap="wrap" className="!mt-6">
+            {producto.stack.map((tecnologia) => (
+              <span key={tecnologia} className={CHIP}>
+                {tecnologia}
+              </span>
+            ))}
+          </ITFlex>
+        </div>
+
+        {/* ─── GALERÍA ─── */}
+        {hayGaleria && activa && (
+          <section aria-label={t("showcase.producto.gallery")}>
+            <div className={HOJA}>
+              <div className={`overflow-hidden rounded-[10px] border bg-slate-950 ${FILETE}`}>
+                <img src={activa.src} alt={`${producto.nombre}: ${activa.titulo}`} className="block w-full" />
+              </div>
+
+              {capturas.length > 1 && (
+                <ITFlex gap={2} wrap="wrap" className="!mt-3">
                   {capturas.map((captura) => (
                     <button
                       key={captura.src}
                       type="button"
                       title={captura.titulo}
                       aria-label={captura.titulo}
+                      aria-pressed={activa.src === captura.src}
                       onClick={() => setActiva(captura)}
-                      className={`h-14 w-20 shrink-0 overflow-hidden rounded-lg border-2 bg-slate-100 dark:bg-slate-950 transition-all ${
+                      className={`h-16 w-24 shrink-0 overflow-hidden rounded-[8px] border-2 bg-slate-100 transition-all dark:bg-slate-950 ${
                         activa.src === captura.src
-                          ? "border-primary-500 opacity-100"
-                          : "border-transparent opacity-55 hover:opacity-100"
+                          ? "border-primary-700 dark:border-primary-500"
+                          : "border-transparent opacity-60 hover:opacity-100"
                       }`}
                     >
                       <img src={captura.src} alt="" className="h-full w-full object-cover object-top" />
                     </button>
                   ))}
                 </ITFlex>
+              )}
 
-                <ITText as="p" muted className="!text-xs">
-                  {activa.titulo}
-                </ITText>
-              </ITStack>
-            </ITGrid>
+              <ITText
+                as="p"
+                className="!mt-3 font-mono !text-[11px] !leading-relaxed text-slate-500 dark:text-slate-400"
+              >
+                {activa.titulo}
+              </ITText>
+            </div>
+          </section>
+        )}
+
+        {/* ─── QUÉ RESUELVE + FICHA TÉCNICA ─── */}
+        <div className={`${HOJA} mt-12 grid gap-10 lg:grid-cols-12`}>
+          {!!producto.caracteristicas?.length && (
+            <section className="lg:col-span-7">
+              <ITText as="h2" className={EYEBROW}>
+                {t("showcase.producto.whatItSolves")}
+              </ITText>
+              <ul className={`mt-4 border-t ${FILETE}`}>
+                {producto.caracteristicas.map((caracteristica) => (
+                  <li key={caracteristica} className={`flex gap-3 border-b py-3.5 ${FILETE}`}>
+                    <FaCheck
+                      size={10}
+                      className="mt-1.5 shrink-0 text-primary-700 dark:text-primary-500"
+                    />
+                    <ITText
+                      as="span"
+                      className="!text-[14px] !leading-relaxed text-slate-600 dark:text-slate-300"
+                    >
+                      {caracteristica}
+                    </ITText>
+                  </li>
+                ))}
+              </ul>
+            </section>
           )}
 
-          {/* ─── Ficha ─── */}
-          <ITGrid item xs={12} lg={hayGaleria ? 5 : 12}>
-            <ITStack spacing={5}>
-              <ITFlex align="center" justify="between" gap={3}>
-                <ITFlex align="center" gap={3}>
-                  <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${producto.gradiente} text-white flex items-center justify-center shadow-md shrink-0`}>
-                    <ProductoIcono icono={producto.icono} size={20} />
+          {!!producto.ficha?.length && (
+            <section className="lg:col-span-5">
+              <ITText as="h2" className={EYEBROW}>
+                {t("showcase.producto.specSheet")}
+              </ITText>
+              <dl className={`mt-4 border-t ${FILETE}`}>
+                {producto.ficha.map((dato) => (
+                  <div key={dato.etiqueta} className={`border-b py-3.5 ${FILETE}`}>
+                    <dt className="font-mono text-[11px] uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400">
+                      {dato.etiqueta}
+                    </dt>
+                    <dd className="mt-1.5 text-[13px] leading-relaxed text-slate-700 dark:text-slate-200">
+                      {dato.valor}
+                    </dd>
                   </div>
-                  <ITText as="h2" className="!text-xl !font-bold">
-                    {producto.nombre}
-                  </ITText>
-                </ITFlex>
-                <ITBadget label={producto.tipo} color="primary" variant="outlined" />
-              </ITFlex>
+                ))}
+              </dl>
+            </section>
+          )}
+        </div>
 
-              {producto.detalle && (
-                <ITText as="p" muted className="!text-sm !leading-relaxed">
-                  {producto.detalle}
-                </ITText>
-              )}
+        {producto.nota && (
+          <div className={HOJA}>
+            <ITText
+              as="p"
+              className="!mt-8 max-w-[74ch] font-mono !text-[11px] !leading-relaxed text-slate-500 dark:text-slate-400"
+            >
+              {producto.nota}
+            </ITText>
+          </div>
+        )}
 
-              {!!producto.caracteristicas?.length && (
-                <div>
-                  <ITText as="h3" className="!text-sm !font-bold !mb-2.5">
-                    Qué resuelve
+        {/* ─── ANTERIOR / SIGUIENTE ─── */}
+        {(anterior || siguiente) && (
+          <nav aria-label={t("showcase.producto.navLabel")} className={`mt-14 border-t ${FILETE}`}>
+            <div className={`${HOJA} grid gap-px sm:grid-cols-2`}>
+              {anterior && (
+                <a
+                  href={`#proyecto/${anterior.id}`}
+                  className={`group flex flex-col gap-1.5 py-6 sm:pr-8 ${
+                    siguiente ? `sm:border-r ${FILETE}` : ""
+                  }`}
+                >
+                  <ITText as="span" className={`inline-flex items-center gap-2 ${EYEBROW}`}>
+                    <FaArrowLeft size={9} aria-hidden />
+                    {t("showcase.producto.prev")}
                   </ITText>
-                  <ITStack spacing={2}>
-                    {producto.caracteristicas.map((caracteristica) => (
-                      <ITFlex key={caracteristica} align="start" gap={2}>
-                        <FaCheck size={11} className="mt-1 shrink-0 text-emerald-500" />
-                        <ITText as="span" muted className="!text-xs !leading-relaxed">
-                          {caracteristica}
-                        </ITText>
-                      </ITFlex>
-                    ))}
-                  </ITStack>
-                </div>
-              )}
-
-              <div>
-                <ITText as="h3" className="!text-sm !font-bold !mb-2.5">
-                  Stack
-                </ITText>
-                <ITFlex gap={2} wrap="wrap">
-                  {producto.stack.map((tecnologia) => (
-                    <ITBadget key={tecnologia} label={tecnologia} color="gray" variant="outlined" />
-                  ))}
-                </ITFlex>
-              </div>
-
-              {!!producto.ficha?.length && (
-                <>
-                  <ITDivider />
-
-                  <div>
-                    <ITText as="h3" className="!text-sm !font-bold !mb-2.5">
-                      Ficha técnica
-                    </ITText>
-                    <ITStack spacing={2.5}>
-                      {producto.ficha.map((dato) => (
-                        <ITGrid container spacing={2} key={dato.etiqueta}>
-                          <ITGrid item xs={4}>
-                            <ITText as="span" muted className="!text-xs !font-semibold">
-                              {dato.etiqueta}
-                            </ITText>
-                          </ITGrid>
-                          <ITGrid item xs={8}>
-                            <ITText as="span" className="!text-xs !leading-relaxed">
-                              {dato.valor}
-                            </ITText>
-                          </ITGrid>
-                        </ITGrid>
-                      ))}
-                    </ITStack>
-                  </div>
-                </>
+                  <ITText
+                    as="span"
+                    className="font-display !text-[19px] !font-bold -tracking-[0.02em] text-slate-900 group-hover:text-primary-700 dark:text-white dark:group-hover:text-primary-500"
+                  >
+                    {anterior.nombre}
+                  </ITText>
+                  <ITText as="span" className="!text-[12px] text-slate-500 dark:text-slate-400">
+                    {anterior.tipo}
+                  </ITText>
+                </a>
               )}
 
-              {producto.enlace && (
+              {siguiente && (
                 <a
-                  href={producto.enlace}
-                  {...(producto.enlace.startsWith("#")
-                    ? {}
-                    : { target: "_blank", rel: "noopener noreferrer" })}
-                  className="!text-xs !font-semibold !text-primary-600 dark:!text-primary-400 inline-flex items-center gap-1.5"
+                  href={`#proyecto/${siguiente.id}`}
+                  className={`group flex flex-col gap-1.5 py-6 sm:pl-8 ${
+                    anterior ? "" : "sm:col-start-2 sm:items-end sm:text-right"
+                  }`}
                 >
-                  {!producto.enlace.startsWith("#") && <FaExternalLinkAlt size={11} />}
-                  {producto.enlaceTexto ?? "Ver el repositorio"}
+                  <ITText as="span" className={`inline-flex items-center gap-2 ${EYEBROW}`}>
+                    {t("showcase.producto.next")}
+                    <FaArrowRight size={9} aria-hidden />
+                  </ITText>
+                  <ITText
+                    as="span"
+                    className="font-display !text-[19px] !font-bold -tracking-[0.02em] text-slate-900 group-hover:text-primary-700 dark:text-white dark:group-hover:text-primary-500"
+                  >
+                    {siguiente.nombre}
+                  </ITText>
+                  <ITText as="span" className="!text-[12px] text-slate-500 dark:text-slate-400">
+                    {siguiente.tipo}
+                  </ITText>
                 </a>
               )}
+            </div>
+          </nav>
+        )}
+
+        {/* ─── CIERRE ─── */}
+        <section className={`border-t ${FILETE}`}>
+          <div
+            className={`${HOJA} flex flex-col gap-6 py-12 sm:flex-row sm:items-center sm:justify-between`}
+          >
+            <div>
+              <ITText as="p" className={EYEBROW}>
+                {t("showcase.home.eyebrowNext")}
+              </ITText>
+              <ITText
+                as="h2"
+                className="font-display !mt-2.5 !text-[24px] !font-bold -tracking-[0.02em] text-slate-900 dark:text-white sm:!text-[30px]"
+              >
+                {t("showcase.producto.cta")}
+              </ITText>
+            </div>
 
-              {producto.nota && (
-                <ITText as="p" muted className="!text-[11px] !leading-relaxed">
-                  {producto.nota}
-                </ITText>
+            <ITFlex gap={3} wrap="wrap" align="center" className="shrink-0">
+              <BotonAccion onClick={onBack} icono={<FaArrowLeft size={11} />}>
+                {t("showcase.producto.back")}
+              </BotonAccion>
+              {producto.enlace && (
+                <EnlaceBoton
+                  href={producto.enlace}
+                  icono={enlaceExterno ? <FaExternalLinkAlt size={11} /> : undefined}
+                >
+                  {producto.enlaceTexto ?? t("showcase.home.viewRepo")}
+                </EnlaceBoton>
               )}
-            </ITStack>
-          </ITGrid>
-        </ITGrid>
-      </div>
-    </ITDialog>
+            </ITFlex>
+          </div>
+        </section>
+      </main>
+    </>
   );
 }