// react
import React, { useCallback, useEffect, useRef, useState } from "react";
// third-party
import classNames from "classnames";
import Slick from "react-slick";
import { FormattedMessage } from "react-intl";
import { useRouter } from "next/router";
// application
import AppImage from "~/components/shared/AppImage";
import AppLink from "~/components/shared/AppLink";
import AppSlick from "~/components/shared/AppSlick";
import { IProduct } from "~/interfaces/product";
import url from "~/services/url";
import { shopApi, sucursalApi } from "~/api";
import type { ISucursal } from "~/api/real";
import { useMedia } from "~/store/hooks";
import { toTitleCase } from "~/utils/textFormat";

export interface IPaymentMethodRow {
    paymentID: number;
    name: string;
    image_url: string;
    url: string;
}

interface IAvailabilityResultado {
    stock_actual: number;
}

interface IAvailabilityTienda {
    numero: number;
    nombre: string;
    conectada: boolean;
    resultados: IAvailabilityResultado[];
}

interface IAvailabilityResponse {
    ok: boolean;
    termino: string;
    tiendas: IAvailabilityTienda[];
}

/** Agrupa tiendas por ciudad, extrayendo la ciudad del nombre tipo "Tienda <Ciudad> ...". */
function groupByCity(tiendas: IAvailabilityTienda[]): { city: string; stores: Array<IAvailabilityTienda & { storeName: string }> }[] {
    const groups: { city: string; stores: Array<IAvailabilityTienda & { storeName: string }> }[] = [];
    const index: Record<string, number> = {};
    (Array.isArray(tiendas) ? tiendas : []).forEach((tienda) => {
        const tokens = (tienda.nombre || "").trim().split(/\s+/);
        let city: string;
        let storeName: string;
                if (tokens[0] && tokens[0].toLowerCase() === "tienda" && tokens.length >= 2) {
            // Nombres tipo "Tienda 8" (numerico, sin ciudad conocida): agrupar en "Otras tiendas"
            if (/^\d+$/.test(tokens[1])) {
                city = "Otras tiendas";
                storeName = tienda.nombre || tokens[1];
            } else {
                city = tokens[1];
                storeName = tokens.slice(2).join(" ") || tokens[1];
            }
        } else {
            city = "Otras tiendas";
            storeName = tienda.nombre || "";
        }
                // Agrupar "Michelena" y "Cedeño" bajo la ciudad "Valencia"
        if (city === "Michelena" || city === "Cedeño") {
            city = "Valencia";
        }
        // Mostrar el nombre del estado en lugar de la ciudad (Carabobo: Valencia, Guacara, Naguanagua; Tinaquillo -> Cojedes)
        const estadoMap: Record<string, string> = {
            Valencia: "Carabobo",
            Guacara: "Carabobo",
            Naguanagua: "Carabobo",
            Tinaquillo: "Cojedes",
        };
        city = estadoMap[city] || city;
        if (index[city] === undefined) {
            index[city] = groups.length;
            groups.push({ city, stores: [] });
        }
        groups[index[city]].stores.push({ ...tienda, storeName });
    });
    return groups;
}

interface Props {
    product: IProduct;
    relatedProducts: IProduct[];
    shippingMethods: IPaymentMethodRow[];
    paymentMethods: IPaymentMethodRow[];
    isAvailable: boolean;
    hasDiscount: boolean;
    discountValue: number;
    /** Precio USD mostrado (con descuento si aplica) */
    dollarMain: string;
    /** Precio Bs mostrado */
    bolivarMain: string;
    dollarStrike?: string;
    bolivarStrike?: string;
    /** Contenido opcional del formulario (opciones de producto) */
    optionsSlot: React.ReactNode;
    /** Botón enviar (añadir a cotización) */
    submitSlot: React.ReactNode;
}

function ProductDetailMonticarsLayout(props: Props) {
    const {
        product,
        relatedProducts,
        shippingMethods,
        paymentMethods,
        isAvailable,
        hasDiscount,
        discountValue,
        dollarMain,
        bolivarMain,
        dollarStrike,
        bolivarStrike,
        optionsSlot,
        submitSlot,
    } = props;

    const images = product.images?.length ? product.images : ["/images/categories/category-overlay-3.jpg"];
    const [activeIndex, setActiveIndex] = useState(0);
    /** Direccion del ultimo cambio de imagen (para la animacion de deslizamiento en telefono) */
    const [slideDir, setSlideDir] = useState<1 | -1>(1);
    /** Estado del efecto lupa sobre la foto principal */
    const [zooming, setZooming] = useState(false);
    const [zoomOrigin, setZoomOrigin] = useState("50% 50%");
    /** Estado del lightbox (imagen a pantalla completa) */
    const [lightboxOpen, setLightboxOpen] = useState(false);
    const slickRef = useRef<Slick | null>(null);
    const router = useRouter();

    /** Mueve el origen del zoom (lupa) siguiendo el cursor sobre la foto */
    const handleZoomMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
        const rect = e.currentTarget.getBoundingClientRect();
        const x = ((e.clientX - rect.left) / rect.width) * 100;
        const y = ((e.clientY - rect.top) / rect.height) * 100;
        setZoomOrigin(`${x}% ${y}%`);
    }, []);

    /** Cambia de imagen con las flechas (con ciclo: la ultima vuelve a la primera) */
    const goImage = useCallback((dir: 1 | -1) => {
        setSlideDir(dir);
        setActiveIndex((prev) => (prev + dir + images.length) % images.length);
    }, [images.length]);

    /** Deslizar (swipe) y pellizcar (pinch zoom) en el telefono en la vista ampliada */
    const touchStartX = useRef<number | null>(null);
    const [pinchScale, setPinchScale] = useState(1);
    const pinchActive = useRef(false);
    const pinchStartDist = useRef(0);
    const pinchBaseScale = useRef(1);

    const handleLightboxTouchStart = useCallback((e: React.TouchEvent<HTMLDivElement>) => {
        if (e.touches.length === 2) {
            // Gesto de pellizco: guardar distancia inicial entre dedos
            pinchActive.current = true;
            const [a, b] = [e.touches[0], e.touches[1]];
            pinchStartDist.current = Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
            touchStartX.current = null;
        } else {
            touchStartX.current = e.touches[0].clientX;
        }
    }, []);
    const handleLightboxTouchMove = useCallback((e: React.TouchEvent<HTMLDivElement>) => {
        if (pinchActive.current && e.touches.length === 2) {
            const [a, b] = [e.touches[0], e.touches[1]];
            const dist = Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
            if (pinchStartDist.current > 0) {
                const scale = Math.min(Math.max((pinchBaseScale.current * dist) / pinchStartDist.current, 1), 4);
                setPinchScale(scale);
            }
        }
    }, []);
    const handleLightboxTouchEnd = useCallback((e: React.TouchEvent<HTMLDivElement>) => {
        if (pinchActive.current) {
            // Fin del pellizco: si quedo en ~1x se resetea
            pinchActive.current = false;
            if (pinchScale <= 1.05) setPinchScale(1);
            else pinchBaseScale.current = pinchScale;
            return;
        }
        if (touchStartX.current === null) return;
        const dx = e.changedTouches[0].clientX - touchStartX.current;
        touchStartX.current = null;
        if (Math.abs(dx) < 40) return; // deslizamiento muy corto: ignorar
        goImage(dx < 0 ? 1 : -1);      // izquierda = siguiente, derecha = anterior
    }, [goImage, pinchScale]);

    /** Arrastrar/deslizar horizontal sobre la foto de la ficha: cambia de imagen (dedo o mouse) */
    const fichaPointerStart = useRef<{ x: number; active: boolean }>({ x: 0, active: false });
    const fichaLastSwipe = useRef(0);
    const handleFichaPointerDown = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
        fichaPointerStart.current = { x: e.clientX, active: true };
    }, []);
    const handleFichaPointerUp = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
        if (!fichaPointerStart.current.active) return;
        fichaPointerStart.current.active = false;
        const dx = e.clientX - fichaPointerStart.current.x;
        if (Math.abs(dx) < 40) return; // movimiento corto: se considera tap/clic y abre la vista ampliada
        goImage(dx < 0 ? 1 : -1);      // izquierda = siguiente, derecha = anterior
        fichaLastSwipe.current = Date.now(); // evita que el arrastre tambien abra el lightbox
    }, [goImage]);
    /** Clic en la foto de la ficha: abre la vista ampliada (salvo que venga de un arrastre) */
    const handleMainPhotoClick = useCallback(() => {
        if (Date.now() - fichaLastSwipe.current < 500) return;
        setLightboxOpen(true);
    }, []);

    /** Arrastre con el mouse en la vista ampliada (solo mouse: el dedo ya usa touch para swipe/pinch) */
    const lightboxPointerStart = useRef<{ x: number; active: boolean }>({ x: 0, active: false });
    const handleLightboxPointerDown = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
        if (e.pointerType !== "mouse") return;
        lightboxPointerStart.current = { x: e.clientX, active: true };
    }, []);
    const handleLightboxPointerUp = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
        if (e.pointerType !== "mouse" || !lightboxPointerStart.current.active) return;
        lightboxPointerStart.current.active = false;
        const dx = e.clientX - lightboxPointerStart.current.x;
        if (Math.abs(dx) < 40) return;
        goImage(dx < 0 ? 1 : -1);
    }, [goImage]);

    /** Lightbox: bloquea el scroll del fondo y cierra con la tecla Escape */
    useEffect(() => {
        if (!lightboxOpen) return;
        document.body.style.overflow = "hidden";
        const onKey = (e: KeyboardEvent) => {
            if (e.key === "Escape") setLightboxOpen(false);
        };
        window.addEventListener("keydown", onKey);
        return () => {
            document.body.style.overflow = "";
            window.removeEventListener("keydown", onKey);
        };
    }, [lightboxOpen]);

    const codeDisplay = (product.sku || product.partNumber || String(product.id)).trim() || "—";
    const [brandDisplay, setBrandDisplay] = useState(() => (product.brand?.name || "").trim());
    const [availabilityData, setAvailabilityData] = useState<IAvailabilityResponse | null>(null);
    const [availabilityLoading, setAvailabilityLoading] = useState(false);
    const [availabilityError, setAvailabilityError] = useState("");
    // Lista de sucursales (con phone/whatsapp/address/map) para los botones de contacto
    const [sucursales, setSucursales] = useState<ISucursal[] | null>(null);

    const AVALIABILITY_URL = "https://galponkg.alfamonticars.com/tiendas/api.php";

    const checkAvailability = useCallback(async () => {
        const term = (product.sku || "").trim();
        if (!term) {
            setAvailabilityError("Este producto no tiene código de consulta.");
            setAvailabilityData(null);
            return;
        }
        setAvailabilityLoading(true);
        setAvailabilityError("");
        try {
            const res = await fetch(`${AVALIABILITY_URL}?q=${encodeURIComponent(term)}`);
            if (!res.ok) throw new Error("Error al consultar disponibilidad");
            const data = (await res.json()) as IAvailabilityResponse;
            setAvailabilityData(data);

            // Cargamos (cacheado) la lista de sucursales con phone/whatsapp/address/map
            if (sucursales === null) {
                try {
                    const list = await sucursalApi.getAllSucursales();
                    setSucursales(Array.isArray(list) ? list : []);
                } catch {
                    setSucursales([]);
                }
            }
        } catch {
            setAvailabilityError("No se pudo consultar la disponibilidad. Inténtalo de nuevo.");
            setAvailabilityData(null);
        } finally {
            setAvailabilityLoading(false);
        }
    }, [product.sku]);

    // Limpiar la consulta de disponibilidad al cambiar de producto
    useEffect(() => {
        setAvailabilityData(null);
        setAvailabilityLoading(false);
        setAvailabilityError("");
    }, [product.sku, product.id]);

    useEffect(() => {
        const directName = (product.brand?.name || "").trim();
        if (directName) {
            setBrandDisplay(directName);
            return;
        }

        const brandIdFromProduct = product.brand?.id;
        const brandIdFromQuery = router.query.filter_marca
            ? Number(router.query.filter_marca)
            : undefined;
        const brandId =
            brandIdFromProduct && brandIdFromProduct > 0
                ? brandIdFromProduct
                : brandIdFromQuery && !Number.isNaN(brandIdFromQuery)
                  ? brandIdFromQuery
                  : undefined;

        if (!brandId) {
            setBrandDisplay("");
            return;
        }

        let cancelled = false;
        shopApi
            .getLocaleBrands()
            .then((brands) => {
                if (cancelled) return;
                const matchedBrand = brands.find((brand) => brand.id === brandId);
                setBrandDisplay(matchedBrand?.name?.trim() || "");
            })
            .catch(() => {
                if (!cancelled) setBrandDisplay("");
            });

        return () => {
            cancelled = true;
        };
    }, [product.brand?.id, product.brand?.name, router.query.filter_marca]);

    const goRelated = useCallback((dir: -1 | 1) => {
        if (!slickRef.current) return;
        if (dir < 0) slickRef.current.slickPrev();
        else slickRef.current.slickNext();
    }, []);

    const handleBack = useCallback(
        (event: React.MouseEvent<HTMLAnchorElement>) => {
            event.preventDefault();

            if (typeof window !== "undefined" && window.history.length > 1) {
                router.back();
                return;
            }

            router.push(url.shop());
        },
        [router],
    );

    const relatedSlides = Math.min(3, Math.max(1, relatedProducts.length));
    const isPhone = useMedia("(max-width: 992px)");
    const phoneSlides = Math.min(2, Math.max(1, relatedProducts.length));
    const relatedSlick =
        relatedProducts.length > 0
            ? {
                dots: false,
                arrows: false,
                infinite: relatedProducts.length > (isPhone ? phoneSlides : relatedSlides),
                speed: 400,
                slidesToShow: isPhone ? phoneSlides : relatedSlides,
                slidesToScroll: 1,
                                autoplay: true,
                autoplaySpeed: 3000,
            }
            : null;

    return (
        <div className="product-detail-mont">
            <div className="product-detail-mont__card">
                <div className="product-detail-mont__toolbar pb-4">
                    <h2 className="product-detail-mont__toolbar-title">
                        <FormattedMessage id="HEADER_PRODUCT_PHOTOS" defaultMessage="Foto del Producto" />
                    </h2>
                    <AppLink href={url.shop()} className="product-detail-mont__btn-back" onClick={handleBack}>
                        <FormattedMessage id="BUTTON_BACK_TO_SHOP" defaultMessage="← VOLVER" />
                    </AppLink>
                </div>

                <div className="row product-detail-mont__row">
                    <div className="col-lg-8 product-detail-mont__col-gallery">
                        <div className="product-detail-mont__gallery">
                            <div className="product-detail-mont__thumbs" role="tablist" aria-label="Miniaturas">
                                {images.map((src, index) => (
                                    <button
                                        key={index}
                                        type="button"
                                        className={classNames("product-detail-mont__thumb", {
                                            "product-detail-mont__thumb--active": index === activeIndex,
                                        })}
                                        onMouseEnter={() => setActiveIndex(index)}
                                        onClick={() => setActiveIndex(index)}
                                        aria-label={`Imagen ${index + 1}`}
                                        aria-selected={index === activeIndex}
                                    >
                                        <AppImage src={src} alt="" />
                                    </button>
                                ))}
                            </div>
                            <div
                                className="product-detail-mont__main-photo"
                                onMouseEnter={() => setZooming(true)}
                                onMouseLeave={() => setZooming(false)}
                                onMouseMove={handleZoomMove}
                                onClick={handleMainPhotoClick}
                                onPointerDown={handleFichaPointerDown}
                                onPointerUp={handleFichaPointerUp}
                            >
                                <AppImage
                                    key={`ficha-${activeIndex}`}
                                    className={classNames(
                                        "product-detail-mont__main-img",
                                        slideDir === 1 ? "product-detail-mont__slide-right" : "product-detail-mont__slide-left",
                                        {
                                            "product-detail-mont__main-img--zoom": zooming,
                                        },
                                    )}
                                    style={{ transformOrigin: zoomOrigin }}
                                    src={images[activeIndex]}
                                    alt={product.name}
                                    draggable={false}
                                />
                                <div className="product-detail-mont__photo-counter">
                                    {activeIndex + 1}/{images.length}
                                </div>
                            </div>
                        </div>

                        {relatedProducts.length > 0 && relatedSlick && (
                            <div className="product-detail-mont__related-wrap">
                                <button
                                    type="button"
                                    className="product-detail-mont__related-arrow product-detail-mont__related-arrow--prev"
                                    onClick={() => goRelated(-1)}
                                    aria-label="Anterior"
                                >
                                    <i className="fas fa-chevron-left" />
                                </button>
                                <div className="product-detail-mont__related-inner">
                                    <AppSlick ref={slickRef} {...relatedSlick}>
                                        {relatedProducts.map((p) => (
                                            <div key={p.id} className="product-detail-mont__related-slide">
                                                <AppLink href={url.product(p)} className="product-detail-mont__related-card">
                                                    <div className="product-detail-mont__related-img-wrap">
                                                        <AppImage
                                                            src={p.images?.[0] || "/images/categories/category-overlay-3.jpg"}
                                                            alt={p.name}
                                                        />
                                                    </div>
                                                    <div className="product-detail-mont__related-name">{p.name}</div>
                                                </AppLink>
                                            </div>
                                        ))}
                                    </AppSlick>
                                </div>
                                <button
                                    type="button"
                                    className="product-detail-mont__related-arrow product-detail-mont__related-arrow--next"
                                    onClick={() => goRelated(1)}
                                    aria-label="Siguiente"
                                >
                                    <i className="fas fa-chevron-right" />
                                </button>
                            </div>
                        )}
                    </div>

                    <div className="col-lg-4 product-detail-mont__col-info">
                        <div className="product-detail-mont__panel product-detail-mont__panel--primary">
                            <div className="product-detail-mont__status">
                                <span
                                    className={classNames("product-detail-mont__dot", {
                                        "product-detail-mont__dot--ok": isAvailable,
                                        "product-detail-mont__dot--no": !isAvailable,
                                    })}
                                />
                                <span>
                                    {isAvailable ? (
                                        <FormattedMessage id="TEXT_PRODUCT_AVAILABLE" defaultMessage="Disponible" />
                                    ) : (
                                        <FormattedMessage id="TEXT_PRODUCT_UNAVAILABLE" defaultMessage="No Disponible" />
                                    )}
                                </span>
                                {hasDiscount ? (
                                    <span className="product-detail-mont__discount-pill bg-degree">-{discountValue}% Descuento</span>
                                ) : null}
                            </div>

                            <h1 className="product-detail-mont__title">{toTitleCase(product.name)}</h1>

                            <div className="product-detail-mont__prices">
                                {hasDiscount && dollarStrike && bolivarStrike ? (
                                    <>
                                        <div className="product-detail-mont__price-strike">US$ {dollarStrike}</div>
                                        <div className="product-detail-mont__price-usd">US$ {dollarMain}</div>
                                        <div className="product-detail-mont__price-bs mb-2">Bs. {bolivarMain}</div>
                                    </>
                                ) : (
                                    <>
                                        <div className="product-detail-mont__price-usd">US$ {dollarMain}</div>
                                        <div className="product-detail-mont__price-bs">Bs. {bolivarMain}</div>
                                    </>
                                )}
                            </div>

                            <dl className="product-detail-mont__specs">
                                <div className="product-detail-mont__spec-row">
                                    <dt>
                                        <FormattedMessage id="LABEL_PRODUCT_CODE" defaultMessage="Código" />
                                    </dt>
                                    <dd>{codeDisplay}</dd>
                                </div>
                                <div className="product-detail-mont__spec-row">
                                    <dt>
                                        <FormattedMessage id="LABEL_PRODUCT_BRAND" defaultMessage="Marca" />
                                    </dt>
                                    <dd>{brandDisplay || "—"}</dd>
                                </div>
                                <div className="product-detail-mont__spec-row">
                                    <dt>
                                        <FormattedMessage id="LABEL_PRODUCT_PIECES" defaultMessage="Cantidad piezas" />
                                    </dt>
                                    <dd>{product.numberPieces ?? 0}</dd>
                                </div>
                            </dl>

                            {optionsSlot ? <div className="product-detail-mont__options">{optionsSlot}</div> : null}

                            <div className="product-detail-mont__cta">{submitSlot}</div>
                        </div>

                        <div className="product-detail-mont__panel product-detail-mont__panel--secondary">
                            <div className="product-detail-mont__methods-block">
                                <div className="product-detail-mont__methods-label">
                                    Disponibilidad en tienda
                                </div>
                                <button
                                    type="button"
                                    className="product-detail-mont__avail-btn"
                                    onClick={checkAvailability}
                                    disabled={availabilityLoading || !isAvailable}
                                    title={!isAvailable ? "Producto no disponible" : "Consultar disponibilidad en tienda"}
                                >
                                    {availabilityLoading ? (
                                        <>Cargando...</>
                                    ) : isAvailable && availabilityData && availabilityData.tiendas.length > 0 ? (
                                        <>
                                            <i className="fas fa-store-alt" aria-hidden />
                                            Disponible
                                        </>
                                    ) : (
                                        <>
                                            <i className="fas fa-store" aria-hidden />
                                            {isAvailable ? "Consultar disponibilidad" : "No disponible en tiendas"}
                                        </>
                                    )}
                                </button>

                                {availabilityError ? (
                                    <div className="product-detail-mont__avail-error">{availabilityError}</div>
                                ) : null}

                                {isAvailable && availabilityData && availabilityData.tiendas.length > 0 ? (
                                    (() => {
                                        // Todas las tiendas: conectadas y sin conexion (las sin conexion se muestran en amarillo).
                                        // Excluimos SOLO las sin conexion de nombre numerico ("Tienda 8", "Tienda 9")
                                        // que la API devuelve sin info util y quedarian agrupadas en "Otras tiendas".
                                        const isNumericStore = (t) => t.nombre && /^Tienda\s+\d+$/i.test(t.nombre);
                                        const tiendasVisibles = availabilityData.tiendas.filter(
                                            (t) => t.conectada || !isNumericStore(t),
                                        );
                                        if (tiendasVisibles.length === 0) {
                                            return (
                                                <div className="product-detail-mont__avail-error">
                                                    Sin disponibilidad en tiendas para este producto.
                                                </div>
                                            );
                                        }
                                                        const groups = groupByCity(tiendasVisibles).filter(
                                        // No mostrar "Otras tiendas" salvo que tenga una conectada con datos
                                        (g) => g.city !== "Otras tiendas" || g.stores.some((s) => s.conectada && (s.resultados?.length ?? 0) > 0),
                                    );
                                        return (
                                            <div className="product-detail-mont__avail">
                                                {groups.map((group) => {
                                                    const grupoSinConexion = group.stores.every(
                                                        (s) => !s.conectada,
                                                    );
                                                    const anyStock = group.stores.some(
                                                        (s) => s.conectada && s.resultados?.[0]?.stock_actual > 0,
                                                    );
                                                    const grupoAgotado = !grupoSinConexion && !anyStock;
                                                    return (
                                                        <details key={group.city} className="product-detail-mont__avail-group">
                                                            <summary className={`product-detail-mont__avail-group-title ${grupoSinConexion ? "sin-conexion" : anyStock ? "has-stock" : "no-stock"}`}>
                                                                <i className="fas fa-chevron-down product-detail-mont__avail-chevron" aria-hidden />
                                                                <i className="fas fa-home" aria-hidden />
                                                                {group.city}
                                                            </summary>
                                                            <ul className="product-detail-mont__avail-list">
                                                                {group.stores.map((tienda) => {
                                                                    const sinConexion = !tienda.conectada;
                                                                    const stock = tienda.resultados?.[0]?.stock_actual ?? 0;
                                                                    const agotado = tienda.conectada && stock <= 0;
                                                                    const enStock = !sinConexion && stock > 0;

                                                                    const normText = (t: string) =>
                                                                        (t || "")
                                                                            .toLowerCase()
                                                                            .normalize("NFD")
                                                                            .replace(/[\u0300-\u036f]/g, "")
                                                                            .replace(/\s+/g, "");
                                                                    const tiendaNombre = tienda.nombre.replace(/^Tienda\s+/i, "");
                                                                    // Elige la sucursal con el nombre más específico (más largo) que coincida,
                                                                    // para que p. ej. "Caracas La California Norte" le toque "CARACAS LA
                                                                    // CALIFORNIA" y no la genérica "CARACAS".
                                                                    const sucursalMatch = (sucursales || []).reduce<ISucursal | undefined>((acc, s) => {
                                                                        const sn = normText(s.name);
                                                                        const tn = normText(tiendaNombre);
                                                                        if (sn === "") return acc;
                                                                        const matches = sn === tn || sn.includes(tn) || tn.includes(sn);
                                                                        if (!matches) return acc;
                                                                        if (!acc) return s;
                                                                        return normText(acc.name).length >= sn.length ? acc : s;
                                                                    }, undefined);
                                                                    const whatsappNumber = sucursalMatch?.whatsapp || sucursalMatch?.phone || "";
                                                                    const whatsappDigits = whatsappNumber.replace(/\D/g, "");
                                                                    const whatsappLink = whatsappDigits ? `https://wa.me/${whatsappDigits}` : null;
                                                                    const mapQuery = sucursalMatch?.map || sucursalMatch?.address || "";
                                                                    const mapLink = mapQuery ? (mapQuery.startsWith("http") ? mapQuery : `https://www.google.com/maps?q=${encodeURIComponent(mapQuery)}`) : null;
                                                                    return (
                                                                        <li key={tienda.numero} className="product-detail-mont__avail-item">
                                                                            <details className="product-detail-mont__avail-store-detail">
                                                                                <summary className="product-detail-mont__avail-store">
                                                                                    <i className="fas fa-chevron-down product-detail-mont__avail-chevron" aria-hidden />
                                                                                    {tienda.storeName}
                                                                                    <span className={classNames("product-detail-mont__avail-stock", {
                                                                                        "product-detail-mont__avail-stock--ok": enStock,
                                                                                        "product-detail-mont__avail-stock--offline": sinConexion,
                                                                                        "product-detail-mont__avail-stock--no": agotado,
                                                                                    })}
                                                                                    >
                                                                                        {sinConexion ? "Sin conexión" : enStock ? ` ${stock} unid` : "Agotado"}
                                                                                    </span>
                                                                                </summary>
                                                                                <div className="product-detail-mont__avail-store-info">
                                                                                    <span>Sucursal: {tienda.nombre}</span>
                                                                                    <span>unid: {sinConexion ? "Sin conexión" : enStock ? `${stock}` : "Agotado"}</span>
                                                                                    <div className="product-detail-mont__avail-store-cta">
                                                                                        {whatsappLink ? (
                                                                                            <a
                                                                                                href={whatsappLink}
                                                                                                target="_blank"
                                                                                                rel="noopener noreferrer"
                                                                                                className="product-detail-mont__avail-wa"
                                                                                                aria-label="Consultar por WhatsApp"
                                                                                            >
                                                                                                <i className="fab fa-whatsapp" aria-hidden /><span> WhatsApp</span>
                                                                                            </a>
                                                                                        ) : null}
                                                                                        {mapLink ? (
                                                                                            <a
                                                                                                href={mapLink}
                                                                                                target="_blank"
                                                                                                rel="noopener noreferrer"
                                                                                                className="product-detail-mont__avail-map"
                                                                                                aria-label="Ver en el mapa"
                                                                                            >
                                                                                                <i className="fas fa-map-marker-alt" aria-hidden /><span> Ubicación</span>
                                                                                            </a>
                                                                                        ) : null}
                                                                                    </div>
                                                                                </div>
                                                                            </details>
                                                                        </li>
                                                                    );
                                                                })}
                                                            </ul>
                                                        </details>
                                                    );
                                                })}
                                            </div>
                                        );
                                    })()
                                ) : availabilityData ? (
                                    <div className="product-detail-mont__avail-error">Sin resultados de disponibilidad.</div>
                                ) : null}
                            </div>

                            {/* Línea separadora: distingue la consulta de disponibilidad del envío a todo el país */}
                            <div className="product-detail-mont__avail-divider" />

                                                        <div className="product-detail-mont__methods-block">
                                <div className="product-detail-mont__methods-label">
                                    <FormattedMessage id="LABEL_SHIPPING_METHODS" defaultMessage="Métodos de envío" />
                                </div>
                                <div className="product-detail-mont__ship-line">
                                    <i className="fas fa-truck product-detail-mont__icon-green" aria-hidden />
                                    <span className="product-detail-mont__text-green">
                                        <FormattedMessage id="TEXT_SHIP_NATIONWIDE" defaultMessage="Envío a todo el país" />
                                    </span>
                                </div>
                                {shippingMethods.length > 0 ? (
                                    <div className="product-detail-mont__payment-logos">
                                        {shippingMethods.map((method) =>
                                            method.image_url ? (
                                                <a
                                                    key={method.paymentID || method.name}
                                                    href={method.url || "#"}
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                    className="product-detail-mont__payment-logo"
                                                >
                                                    <img
                                                        src={method.image_url}
                                                        alt={method.name || ""}
                                                        onError={(e) => {
                                                            (e.target as HTMLImageElement).style.display = "none";
                                                        }}
                                                    />
                                                </a>
                                            ) : null,
                                        )}
                                    </div>
                                ) : null}
                            </div>
                            <div className="product-detail-mont__methods-block">
                                <div className="product-detail-mont__methods-label payment-methods-label">
                                    <FormattedMessage id="LABEL_PAYMENT_METHODS" defaultMessage="Métodos de pago" />
                                </div>
                                {paymentMethods.length > 0 ? (
                                    <div className="product-detail-mont__payment-logos">
                                        {paymentMethods.map((method) =>
                                            method.image_url ? (
                                                <a
                                                    key={`payment-${method.paymentID || method.name}`}
                                                    href={method.url || "#"}
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                    className="product-detail-mont__payment-logo"
                                                >
                                                    <img
                                                        src={method.image_url}
                                                        alt={method.name || ""}
                                                        onError={(e) => {
                                                            (e.target as HTMLImageElement).style.display = "none";
                                                        }}
                                                    />
                                                </a>
                                            ) : null,
                                        )}
                                    </div>
                                ) : null}
                            </div>
                            <div className="product-detail-mont__ship-line">
                                <i className="fas fa-shield-alt product-detail-mont__icon-green" aria-hidden />
                                <span className="product-detail-mont__text-green">
                                    <FormattedMessage id="TEXT_PROTECTED_PURCHASE" defaultMessage="Compra protegida" />
                                </span>
                            </div>
                            <p className="product-detail-mont__warranty mb-0 payment-methods-label">
                                <FormattedMessage
                                    id="TEXT_FACTORY_WARRANTY"
                                    defaultMessage="Garantía oficial de fábrica."
                                />
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            {/* <div className="product-detail-mont__footer-bar">
                <span className="product-detail-mont__footer-status">
                    <span
                        className={classNames("product-detail-mont__dot", {
                            "product-detail-mont__dot--ok": isAvailable,
                            "product-detail-mont__dot--no": !isAvailable,
                        })}
                    />
                    {isAvailable ? (
                        <FormattedMessage id="TEXT_PRODUCT_AVAILABLE" defaultMessage="Disponible" />
                    ) : (
                        <FormattedMessage id="TEXT_PRODUCT_UNAVAILABLE" defaultMessage="No Disponible" />
                    )}
                </span>
                {hasDiscount ? (
                    <span className="product-detail-mont__discount-pill">-{discountValue}% Descuento</span>
                ) : null}
            </div> */}

            <style jsx global>{`
                .product-detail-mont {
                    padding: 1.25rem 0 2rem;
                }
                .product-detail-mont__card {
                    background: #fff;
                    border-radius: 12px;
                    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
                    padding: 1.25rem 1.5rem 1.75rem;
                    max-width: 1200px;
                    margin: 0 auto;
                }
                .product-detail-mont__toolbar {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 1rem;
                    margin-bottom: 1.25rem;
                    flex-wrap: wrap;
                    border-bottom: 1px solid #eee;
                }
                .product-detail-mont__toolbar-title {
                    font-size: 30px;
                    margin: 0;
                    color: #212529;
                }
                .product-detail-mont__btn-back {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0.5rem 1rem;
                    background: #e31e24;
                    color: #fff !important;
                    font-weight: 700;
                    font-size: 0.8125rem;
                    letter-spacing: 0.04em;
                    border-radius: 4px;
                    text-decoration: none !important;
                    border: none;
                    text-transform: uppercase;
                }
                .product-detail-mont__btn-back:hover {
                    filter: brightness(0.92);
                    color: #fff !important;
                }
                .product-detail-mont__row {
                    align-items: flex-start;
                }
                .product-detail-mont__gallery {
                    display: flex;
                    gap: 1rem;
                    align-items: flex-start;
                }
                .product-detail-mont__thumbs {
                    display: flex;
                    flex-direction: column;
                    gap: 1.8rem;
                    max-height: 500px;
                    overflow-y: auto;
                    flex-shrink: 0;
                }
                .product-detail-mont__thumb {
                    width: 72px;
                    height: 72px;
                    padding: 0;
                    border: 2px solid #dee2e6;
                    border-radius: 8px;
                    overflow: hidden;
                    background: #f8f9fa;
                    cursor: pointer;
                }
                .product-detail-mont__thumb--active {
                    border-color: #2b7bcd;
                    box-shadow: 0 0 0 1px #2b7bcd;
                }
                .product-detail-mont__thumb .image,
                .product-detail-mont__thumb img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                .product-detail-mont__main-photo {
                    width: fit-content;
                    background: #f8f9fa;
                    border-radius: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 1px solid #e9ecef;
                    overflow: hidden;
                    position: relative;
                }
                .product-detail-mont__main-img {
                    width: auto;
                    max-width: 100%;
                    height: 500px;
                    max-height: 500px;
                    object-fit: cover;
                    object-position: center;
                    display: block;
                    transition: transform 0.25s ease;
                    will-change: transform;
                    user-select: none;          /* sin seleccion de imagen al arrastrar */
                    -webkit-user-drag: none;    /* sin arrastre nativo de imagen */
                }
                /* El gesto horizontal lo captura la foto (swipe), el vertical sigue siendo scroll */
                .product-detail-mont__main-photo {
                    touch-action: pan-y;
                }
                /* Contador 1/4 sobre la foto de la ficha: solo visible en telefono */
                .product-detail-mont__photo-counter {
                    display: none;
                }
                /* Lupa: al pasar el mouse la imagen se amplia desde donde apunta el cursor */
                .product-detail-mont__main-photo {
                    cursor: zoom-in;
                }
                .product-detail-mont__main-img--zoom {
                    transform: scale(2);
                }
                /* Lightbox: vista ampliada a pantalla casi completa con fondo oscuro */
                .product-detail-mont__lightbox {
                    position: fixed;
                    inset: 0;
                    z-index: 10000;
                    background: rgba(0, 0, 0, 0.88);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 2.5rem;
                    cursor: zoom-out;
                    animation: product-detail-mont__lightbox-fade 0.2s ease;
                }
                @keyframes product-detail-mont__lightbox-fade {
                    from { opacity: 0; }
                    to { opacity: 1; }
                }
                .product-detail-mont__lightbox-body {
                    display: flex;
                    align-items: center;
                    gap: 1rem;
                    max-width: 100%;
                    max-height: 100%;
                    cursor: default;
                }
                .product-detail-mont__lightbox-main {
                    position: relative;
                    width: 85vh;
                    height: 85vh;
                    max-width: 100%;
                    min-width: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    border-radius: 8px;
                }
                .product-detail-mont__lightbox-img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                    border-radius: 8px;
                    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
                    transition: transform 0.25s ease;
                    will-change: transform;
                }
                /* Zoom al pasar el mouse sobre la imagen ampliada */
                .product-detail-mont__lightbox-img--zoom {
                    transform: scale(2);
                }
                /* Contador 1/4 arriba de la imagen ampliada */
                .product-detail-mont__lightbox-counter {
                    position: absolute;
                    top: 0.75rem;
                    left: 50%;
                    transform: translateX(-50%);
                    z-index: 5;
                    background: rgba(0, 0, 0, 0.65);
                    color: #fff;
                    font-size: 1rem;
                    font-weight: 600;
                    padding: 0.3rem 0.9rem;
                    border-radius: 999px;
                    pointer-events: none;
                }
                /* Flechas verticales dentro de la imagen ampliada, lado derecho */
                .product-detail-mont__lightbox-arrows {
                    position: absolute;
                    right: 0.75rem;
                    top: 50%;
                    transform: translateY(-50%);
                    display: flex;
                    flex-direction: column;
                    gap: 0.5rem;
                    z-index: 5;
                }
                .product-detail-mont__lightbox-arrow {
                    width: 44px;
                    height: 44px;
                    border: none;
                    border-radius: 50%;
                    background: rgba(255, 255, 255, 0.85);
                    color: #212529;
                    font-size: 1rem;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
                    transition: background 0.2s ease, color 0.2s ease;
                }
                .product-detail-mont__lightbox-arrow:hover {
                    background: #2b7bcd;
                    color: #fff;
                }
                /* Miniaturas dentro del lightbox, al lado izquierdo de la imagen ampliada */
                .product-detail-mont__lightbox-thumbs {
                    display: flex;
                    flex-direction: column;
                    gap: 0.4rem;
                    max-height: 85vh;
                    overflow-y: auto;
                    flex-shrink: 0;
                    padding-right: 0.25rem;
                }
                .product-detail-mont__lightbox-thumb {
                    width: 110px;
                    height: 110px;
                    padding: 0;
                    border: 2px solid #dee2e6;
                    border-radius: 10px;
                    overflow: hidden;
                    background: #f8f9fa;
                    cursor: pointer;
                    flex-shrink: 0;
                    transition: border-color 0.15s ease, transform 0.15s ease;
                }
                .product-detail-mont__lightbox-thumb:hover {
                    transform: scale(1.05);
                }
                .product-detail-mont__lightbox-thumb--active {
                    border-color: #2b7bcd;
                    box-shadow: 0 0 0 1px #2b7bcd;
                }
                .product-detail-mont__lightbox-thumb img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                .product-detail-mont__lightbox-close {
                    position: absolute;
                    top: 1.25rem;
                    right: 1.5rem;
                    width: 44px;
                    height: 44px;
                    border: none;
                    border-radius: 50%;
                    background: rgba(255, 255, 255, 0.15);
                    color: #fff;
                    font-size: 1.25rem;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: background 0.2s ease;
                }
                .product-detail-mont__lightbox-close:hover {
                    background: rgba(255, 255, 255, 0.3);
                }
                .product-detail-mont__related-wrap {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    margin-top: 1.25rem;
                }
                /* Solo en PC: bajar más el carrusel de relacionados */
                @media (min-width: 993px) {
                    .product-detail-mont__related-wrap {
                        margin-top: 4rem !important;
                    }
                }
                /* Solo en telefono: carrusel de relacionados mas ancho */
                @media (max-width: 991px) {
                    .product-detail-mont__related-wrap {
                        margin-inline-start: -0.75rem;
                        margin-inline-end: -0.75rem;
                        width: calc(100% + 1.5rem);
                    }
                    .product-detail-mont__related-card {
                        margin: 0 3px;
                    }
                }
                .product-detail-mont__related-inner {
                    flex: 1;
                    min-width: 0;
                }
                .product-detail-mont__related-arrow {
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                    border: 1px solid #ced4da;
                    background: #ced4da;
                    color: #FFF;
                    flex-shrink: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                }
                .product-detail-mont__related-arrow:hover {
                    background: #f1f3f5;
                }
                .product-detail-mont__related-card {
                    position: relative;
                    display: block;
                    background: #fff;
                    border: 1px solid #e9ecef;
                    border-radius: 8px;
                    overflow: hidden;
                    text-decoration: none !important;
                    color: #212529 !important;
                    margin: 0 6px;
                    height: 100%;
                }
                .product-detail-mont__related-img-wrap {
                    height: 120px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #fafafa;
                }
                .product-detail-mont__related-img-wrap img {
                    max-width: 100%;
                    max-height: 100%;
                    object-fit: contain;
                }
                .product-detail-mont__related-name {
                    font-size: 0.75rem;
                    padding: 0.5rem 0.5rem 0.65rem;
                    line-height: 1.3;
                    min-height: 2.8rem;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
                .product-detail-mont__panel {
                    border: 2px solid #6ea8e8;
                    border-radius: 10px;
                    padding: 1.25rem 1.35rem;
                    background: #fff;
                }
                .product-detail-mont__panel--primary {
                    margin-bottom: 1rem;
                }
                .product-detail-mont__status {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    font-size: 1.25rem;
                    font-weight: 600;
                    margin-bottom: 0.75rem;
                }
                .product-detail-mont__dot {
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    display: inline-block;
                }
                .product-detail-mont__dot--ok {
                    background: #198754;
                }
                .product-detail-mont__dot--no {
                    background: #dc3545;
                }
                .product-detail-mont__title {
                    font-size: 1.15rem;
                    font-weight: 800;
                    line-height: 1.35;
                    margin: 0 0 1rem;
                    color: #111;
                }
                .product-detail-mont__prices {
                    margin-bottom: 1.1rem;
                }
                .product-detail-mont__price-usd {
                    font-size: 1.35rem;
                    font-weight: 800;
                    color: #111;
                }
                .product-detail-mont__price-bs {
                    font-size: 1rem;
                    color: #495057;
                    margin-top: 0.25rem;
                }
                .product-detail-mont__price-strike {
                    font-size: 0.85rem;
                    color: #868e96;
                    text-decoration: line-through;
                    margin-bottom: 0.15rem;
                }
                .product-detail-mont__specs {
                    margin: 0 0 1rem;
                }
                .product-detail-mont__spec-row {
                    display: flex;
                    gap: 0.5rem;
                    margin-bottom: 0.45rem;
                    font-size: 0.9rem;
                }
                .product-detail-mont__spec-row dt {
                    margin: 0;
                    font-weight: 700;
                    text-transform: uppercase;
                    color: #212529;
                }
                .product-detail-mont__spec-row dt::after {
                    content: ":";
                    margin-left: 1px;
                }
                .product-detail-mont__spec-row dd {
                    margin: 0;
                    flex: 1;
                }
                .product-detail-mont__options .product__form {
                    border: none !important;
                    padding-top: 0.5rem;
                }
                .product-detail-mont__cta .btn {
                    width: 100%;
                    border-radius: 8px;
                    font-weight: 700;
                    text-transform: capitalize;
                    letter-spacing: 0.03em;
                    padding: 0.75rem 1rem;
                    text-align: center !important;
                    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
                    transition: background 0.2s ease, filter 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
                }
                                .product-detail-mont__quote-btn-added {
                    text-transform: none;
                }
                .product-detail-mont__cta .btn:hover:not(.product-detail-mont__quote-btn--added) {
                    background: linear-gradient(135deg, #0056b3 0%, #001a3d 100%) !important;
                    color: #fff !important;
                    filter: brightness(1.05) scale(1.02);
                    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.3);
                }
                .product-detail-mont__cta .product-detail-mont__quote-btn--added {
                    background: #198754 !important;
                    color: #fff !important;
                    cursor: default;
                    transition: background 0.2s ease;
                }
                .product-detail-mont__cta .product-detail-mont__quote-btn--added:hover {
                    background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, #146c43 2%, #146c43 98%, rgba(0,0,0,0.5) 100%) !important;
                }
                .product-detail-mont__panel--secondary {
                    font-size: 0.9rem;
                }
                .product-detail-mont__ship-line {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    margin-bottom: 0.75rem;
                }
                .product-detail-mont__icon-green {
                    color: #198754;
                }
                .product-detail-mont__text-green {
                    color: #198754;
                    font-weight: 600;
                }
                .product-detail-mont__methods-block {
                    margin-bottom: 0.85rem;
                }
                .product-detail-mont__methods-label {
                    font-weight: 600;
                    margin-bottom: 0.35rem;
                }
                .product-detail-mont__avail-btn {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.5rem;
                    width: 100%;
                    justify-content: center;
                    padding: 0.55rem 0.9rem;
                    background: #198754;
                    color: #fff !important;
                    border: none;
                    border-radius: 8px;
                    font-weight: 600;
                    cursor: pointer;
                    transition: filter 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
                }
                .product-detail-mont__avail-btn:hover:not(:disabled) {
                    filter: brightness(0.93) scale(1.02);
                    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3);
                }
                .product-detail-mont__avail-btn:disabled {
                    opacity: 0.7;
                    cursor: not-allowed;
                }
                .product-detail-mont__avail-list {
                    list-style: none;
                    display: flex;
                    flex-direction: column;
                    gap: 0.45rem;
                    margin: 0.75rem 0 0;
                    padding: 0;
                }
                .product-detail-mont__avail {
                    margin-top: 0.75rem;
                    border: 1px solid transparent;
                    border-radius: 8px;
                    padding: 0.6rem;
                }
                .product-detail-mont__avail-group {
                    border: none;
                    border-bottom: 1px solid #e5e7eb;
                    border-radius: 8px;
                    overflow: hidden;
                    margin-bottom: 0.5rem;
                    background: transparent;
                    margin-right: 0.5rem;
                }
                .product-detail-mont__avail-group[open] {
                    border-bottom: none;
                }
                .product-detail-mont__avail-group-title {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0.5rem 0.75rem;
                    cursor: pointer;
                    font-weight: 500;
                    color: #212529;
                    list-style: none;
                    font-size: 1.1rem;
                    user-select: none;
                    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
                }
                .product-detail-mont__avail-group-title.has-stock,
                .product-detail-mont__avail-group-title.no-stock,
                .product-detail-mont__avail-group-title.sin-conexion {
                    color: #212529;
                }
                /* La casita (fa-home) SIEMPRE gris, haya inventario o no */
                .product-detail-mont__avail-group-title .fa-home {
                    color: #797979;
                }
                .product-detail-mont__avail-group-title:hover {
                    background-color: #eef1f5;
                    transform: scale(1.02);
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
                }
                .product-detail-mont__avail-group-title::-webkit-details-marker {
                    display: none;
                }
                .product-detail-mont__avail-chevron {
                    margin-right: 0.35rem;
                    font-size: 1rem;
                    transition: transform 0.2s ease;
                    color: #41414180;
                }
                .product-detail-mont__avail-group[open] > .product-detail-mont__avail-group-title .product-detail-mont__avail-chevron {
                    transform: rotate(180deg);
                }
                .product-detail-mont__avail-group-count {
                    margin-left: auto;
                    font-size: 0.8rem;
                    color: #888;
                    font-weight: 600;
                }
                .product-detail-mont__avail-store-detail {
                    background: transparent;
                    border: none;
                    border-bottom: 2px solid #d1d5db;
                    overflow: hidden;
                    padding-left: 0;
                    margin-bottom: 0.25rem;
                }
                .product-detail-mont__avail-store-detail[open] {
                    border-bottom: none;
                }
                .product-detail-mont__avail-store {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    gap: 0.1rem;
                    padding: 0.45rem 0.6rem 0.45rem 0;
                    cursor: pointer;
                    font-weight: 500;
                    color: #262626;
                    font-style: normal;
                    font-size: 0.9rem;
                    list-style: none;
                    transition: background-color 0.2s ease, transform 0.15s ease;
                }
                .product-detail-mont__avail-store:hover {
                    background-color: #f1f3f5;
                    transform: scale(1.01);
                }
                .product-detail-mont__avail-store::-webkit-details-marker {
                    display: none;
                }
                .product-detail-mont__avail-store .product-detail-mont__avail-chevron {
                    font-size: 0.7rem;
                    margin-right: 0.3rem;
                    margin-left: 0.3rem;
                    transition: transform 0.2s ease;
                    color: #007bff;
                }
                .product-detail-mont__avail-store-detail[open] > .product-detail-mont__avail-store .product-detail-mont__avail-chevron {
                    transform: rotate(180deg);
                }
                .product-detail-mont__avail-store-info {
                    display: flex;
                    flex-direction: column;
                    gap: 0.25rem;
                    padding: 0.3rem 0.6rem 0.6rem;
                    font-size: 0.85rem;
                    color: #495057;
                    border-top: 1px solid transparent;
                    border-bottom: 1px solid transparent;
                }
                .product-detail-mont__avail-store-detail[open] .product-detail-mont__avail-store-info {
                    border: 1px solid #e5e7eb80;
                    border-top: 1px solid #e5e7eb80;
                    border-bottom: 1px solid #e5e7eb80;
                    border-radius: 0 0 6px 6px;
                }
                .product-detail-mont__avail-store-note {
                    font-size: 0.8rem;
                    color: #6c757d;
                    font-style: italic;
                }
                .product-detail-mont__avail-stock {
                    font-weight: 600;
                    white-space: nowrap;
                    font-size: 0.85rem;
                    margin-left: auto;
                }
                .product-detail-mont__avail-stock--ok {
                    color: #495057;
                }
                .product-detail-mont__avail-stock--no {
                    color: #e31e24;
                }
                /* Tienda sin conexion: amarillo */
                .product-detail-mont__avail-stock--offline {
                    color: #b8860b;
                }
                .product-detail-mont__avail-store-detail[open] > .product-detail-mont__avail-store .product-detail-mont__avail-stock {
                    display: none !important;
                }
                /* Estado con todas las sucursales sin conexion: el titulo NO se pinta;
                   el amarillo se reserva para el texto "Sin conexión" de cada tienda */
                .product-detail-mont__avail-group-title.sin-conexion {
                    color: #212529;
                }


                 .product-detail-mont__avail-store-cta {
                    display: flex;
                    gap: 0.5rem;
                    margin-top: 0.5rem;
                    flex-wrap: wrap;
                }
                 .product-detail-mont__avail-wa,
                 .product-detail-mont__avail-map {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.35rem;
                    padding: 0.35rem 0.6rem;
                    border-radius: 4px;
                    font-size: 0.85rem;
                    font-weight: 600;
                    text-decoration: none;
                    border: none;
                    border-bottom: 1px solid #e5e7eb;
                    transition: background-color 0.2s ease, color 0.2s ease;
                }
                 .product-detail-mont__avail-wa {
                    color: #fff;
                    background-color: #25d366;
                    border-color: #25d366;
                }
                 .product-detail-mont__avail-wa:hover {
                    background-color: #1ebe5d;
                    border-color: #1ebe5d;
                }
                 .product-detail-mont__avail-map {
                    color: #0d6efd;
                    background-color: #fff;
                }
                 .product-detail-mont__avail-map:hover {
                    color: #0a58ca;
                    background-color: #f0f4ff;
                }
                .product-detail-mont__avail-error {
                    color: #e31e24;
                    font-size: 0.85rem;
                    margin-top: 0.5rem;
                }
                /* Línea separadora entre la consulta de disponibilidad y el envío a todo el país */
                .product-detail-mont__avail-divider {
                    border-top: 1px solid #e5e7eb;
                    margin: 2rem 0 2rem;
                }
                .payment-methods-label {
                    border-top: 1px solid #eee;
                    padding-top: 10px;
                }
                .product-detail-mont__payment-logos {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 10px;
                    align-items: center;
                }
                .product-detail-mont__payment-logo img {
                    max-height: 36px;
                    width: 40px !important;
                    object-fit: contain;
                }
                .product-detail-mont__warranty {
                    font-size: 0.85rem;
                    color: #495057;
                    margin-top: 0.5rem;
                }
                .product-detail-mont__footer-bar {
                    max-width: 1200px;
                    margin: 1rem auto 0;
                    display: flex;
                    align-items: center;
                    gap: 1rem;
                    flex-wrap: wrap;
                    padding: 0 0.25rem;
                }
                .product-detail-mont__footer-status {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.45rem;
                    font-weight: 600;
                    font-size: 0.95rem;
                }
                .product-detail-mont__discount-pill {
                    background: #e31e24;
                    color: #fff;
                    font-weight: 700;
                    font-size: 0.8rem;
                    padding: 0.35rem 0.85rem;
                    border-radius: 999px;
                }
                .bg-degree {
                    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
                }
                @media (max-width: 991px) {
                    /* En telefono: sin miniaturas dentro de la vista ampliada */
                    .product-detail-mont__lightbox-thumbs {
                        display: none;
                    }
                    .product-detail-mont__lightbox {
                        padding: 1rem;
                    }
                    /* Imagen cuadrada y flecha de cambio debajo (apunta a la izquierda) */
                    .product-detail-mont__lightbox-main {
                        width: 92vw;
                        height: auto;
                        flex-direction: column;
                        gap: 0.75rem;
                    }
                    .product-detail-mont__lightbox-img {
                        width: 92vw;
                        height: 92vw;
                    }
                    /* Flechas: ocultas en telefono, se cambia de imagen deslizando */
                    .product-detail-mont__lightbox-arrows {
                        display: none;
                    }
                    /* Sin zoom de mouse en telefono: el zoom es con los dedos (pinch) */
                    .product-detail-mont__lightbox-img--zoom {
                        transform: none;
                    }
                    .product-detail-mont__lightbox-main {
                        touch-action: pan-x pan-y pinch-zoom;
                    }
                    .product-detail-mont__gallery {
                        flex-direction: column;
                    }
                    .product-detail-mont__thumbs {
                        display: none; /* en telefono no se ven las miniaturas de la ficha */
                    }
                    /* En telefono sin zoom de mouse en la foto del producto */
                    .product-detail-mont__main-img--zoom {
                        transform: none;
                    }
                    /* Transicion suave al cambiar de imagen (efecto pasar pagina) */
                    @keyframes product-detail-mont__slide-right {
                        from { opacity: 0.2; transform: translateX(40%); }
                        to { opacity: 1; transform: translateX(0); }
                    }
                    @keyframes product-detail-mont__slide-left {
                        from { opacity: 0.2; transform: translateX(-40%); }
                        to { opacity: 1; transform: translateX(0); }
                    }
                    .product-detail-mont__main-img,
                    .product-detail-mont__lightbox-img {
                        animation: product-detail-mont__slide-right 0.35s ease backwards;
                    }
                    .product-detail-mont__slide-left {
                        animation-name: product-detail-mont__slide-left;
                    }
                    .product-detail-mont__main-photo {
                        cursor: default;
                    }
                    /* Contador 1/4 sobre la foto */
                    .product-detail-mont__photo-counter {
                        display: block;
                        position: absolute;
                        top: 0.6rem;
                        left: 50%;
                        transform: translateX(-50%);
                        z-index: 5;
                        background: rgba(0, 0, 0, 0.65);
                        color: #fff;
                        font-size: 0.9rem;
                        font-weight: 600;
                        padding: 0.25rem 0.8rem;
                        border-radius: 999px;
                        pointer-events: none;
                    }
                    .product-detail-mont__thumb {
                        flex-shrink: 0;
                    }
                    /* Foto principal en telefono: cuadrada a todo lo ancho, imagen y contenedor miden lo mismo */
                    .product-detail-mont__main-photo {
                        overflow: hidden;
                        width: 100%;
                        height: auto;
                        aspect-ratio: 1 / 1;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    .product-detail-mont__main-img {
                        width: 100% !important;
                        max-width: 100% !important;
                        height: 100% !important;
                        max-height: none !important;
                        object-fit: cover !important;
                        object-position: center;
                    }
                    .product-detail-mont__main-photo .image {
                        width: 100% !important;
                        max-width: 100% !important;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            `}</style>
            {lightboxOpen && (
                <div
                    className="product-detail-mont__lightbox"
                    onClick={() => setLightboxOpen(false)}
                    role="dialog"
                    aria-modal="true"
                    aria-label="Vista ampliada del producto"
                >
                    <button
                        type="button"
                        className="product-detail-mont__lightbox-close"
                        onClick={() => setLightboxOpen(false)}
                        aria-label="Cerrar"
                    >
                        <i className="fas fa-times" />
                    </button>
                    <div
                        className="product-detail-mont__lightbox-body"
                        onClick={(e) => e.stopPropagation()}
                    >
                        <div className="product-detail-mont__lightbox-thumbs" aria-label="Miniaturas">
                            {images.map((src, index) => (
                                <button
                                    key={index}
                                    type="button"
                                    className={classNames("product-detail-mont__lightbox-thumb", {
                                        "product-detail-mont__lightbox-thumb--active": index === activeIndex,
                                    })}
                                    onMouseEnter={() => setActiveIndex(index)}
                                    onClick={() => setActiveIndex(index)}
                                    aria-label={`Imagen ${index + 1}`}
                                >
                                    <AppImage src={src} alt="" />
                                </button>
                            ))}
                        </div>
                        <div
                            className="product-detail-mont__lightbox-main"
                            onMouseEnter={() => setZooming(true)}
                            onMouseLeave={() => setZooming(false)}
                            onMouseMove={handleZoomMove}
                            onTouchStart={handleLightboxTouchStart}
                            onTouchMove={handleLightboxTouchMove}
                            onTouchEnd={handleLightboxTouchEnd}
                            onPointerDown={handleLightboxPointerDown}
                            onPointerUp={handleLightboxPointerUp}
                        >
                            <div className="product-detail-mont__lightbox-counter">
                                {activeIndex + 1}/{images.length}
                            </div>
                            <AppImage
                                key={`lightbox-${activeIndex}`}
                                className={classNames(
                                    "product-detail-mont__lightbox-img",
                                    slideDir === 1 ? "product-detail-mont__slide-right" : "product-detail-mont__slide-left",
                                    {
                                        "product-detail-mont__lightbox-img--zoom": zooming,
                                    },
                                )}
                                style={{
                                    transformOrigin: zoomOrigin,
                                    transform: pinchScale > 1 ? `scale(${pinchScale})` : undefined,
                                }}
                                src={images[activeIndex]}
                                alt={product.name}
                                draggable={false}
                            />
                            <div className="product-detail-mont__lightbox-arrows">
                                <button
                                    type="button"
                                    className={classNames("product-detail-mont__lightbox-arrow", "product-detail-mont__lightbox-arrow--prev", {
                                        "product-detail-mont__lightbox-arrow--show": activeIndex > 0,
                                    })}
                                    onClick={() => goImage(-1)}
                                    aria-label="Imagen anterior"
                                >
                                    <i className="fas fa-chevron-up" />
                                </button>
                                <button
                                    type="button"
                                    className="product-detail-mont__lightbox-arrow"
                                    onClick={() => goImage(1)}
                                    aria-label="Imagen siguiente"
                                >
                                    <i className="fas fa-chevron-down" />
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}

export default React.memo(ProductDetailMonticarsLayout);