feat: show 1 post with auto-slider, touch swipe and dots on mobile view

frontend/src/pages/Home/sections/TechnogenSection.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import { Download, FileText, ExternalLink, X, Eye, ChevronLeft, ChevronRight } from 'lucide-react'
 import { useLang } from '@/context/LangContext'
@@ -7,7 +7,6 @@ import { FALLBACK_TECHNOGEN_REPORTS, type TechnogenReport } from '@/data/technog
 const NAVY = '#032340'
 const GOLD = '#CD9E53'
 const EASE = [0.22, 1, 0.36, 1] as const
-const ITEMS_PER_PAGE = 5
 
 const faNum = (n: number | string) => String(n).replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[+d])
 
@@ -18,6 +17,9 @@ export default function TechnogenSection() {
   const [selectedReport, setSelectedReport] = useState<TechnogenReport | null>(null)
   const [page, setPage] = useState(0)
   const [direction, setDirection] = useState(0)
+  const [isMobile, setIsMobile] = useState(false)
+  const [isPaused, setIsPaused] = useState(false)
+  const touchStartX = useRef<number | null>(null)
 
   useEffect(() => {
     let unmounted = false
@@ -37,8 +39,36 @@ export default function TechnogenSection() {
     }
   }, [])
 
-  const totalPages = Math.max(1, Math.ceil(reports.length / ITEMS_PER_PAGE))
-  const currentReports = reports.slice(page * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE + ITEMS_PER_PAGE)
+  // Detect mobile screen (< 768px)
+  useEffect(() => {
+    const checkMobile = () => {
+      const mobile = window.innerWidth < 768
+      setIsMobile(mobile)
+    }
+    checkMobile()
+    window.addEventListener('resize', checkMobile)
+    return () => window.removeEventListener('resize', checkMobile)
+  }, [])
+
+  const itemsPerPage = isMobile ? 1 : 5
+  const totalPages = Math.max(1, Math.ceil(reports.length / itemsPerPage))
+
+  // Reset page if out of bounds on resize
+  useEffect(() => {
+    setPage((p) => Math.min(p, totalPages - 1))
+  }, [totalPages])
+
+  // Auto-slide on mobile every 4.5 seconds
+  useEffect(() => {
+    if (!isMobile || isPaused || selectedReport || totalPages <= 1) return
+    const interval = setInterval(() => {
+      setDirection(1)
+      setPage((p) => (p + 1) % totalPages)
+    }, 4500)
+    return () => clearInterval(interval)
+  }, [isMobile, isPaused, selectedReport, totalPages])
+
+  const currentReports = reports.slice(page * itemsPerPage, page * itemsPerPage + itemsPerPage)
 
   const goNext = () => {
     setDirection(1)
@@ -50,6 +80,27 @@ export default function TechnogenSection() {
     setPage((p) => (p - 1 + totalPages) % totalPages)
   }
 
+  const handleTouchStart = (e: React.TouchEvent) => {
+    touchStartX.current = e.touches[0].clientX
+    setIsPaused(true)
+  }
+
+  const handleTouchEnd = (e: React.TouchEvent) => {
+    setIsPaused(false)
+    if (touchStartX.current === null) return
+    const diff = touchStartX.current - e.changedTouches[0].clientX
+    if (Math.abs(diff) > 40) {
+      if (isFa) {
+        if (diff > 0) goNext()
+        else goPrev()
+      } else {
+        if (diff > 0) goPrev()
+        else goNext()
+      }
+    }
+    touchStartX.current = null
+  }
+
   const openPreview = (report: TechnogenReport) => {
     setSelectedReport(report)
   }
@@ -166,7 +217,7 @@ export default function TechnogenSection() {
             </p>
           </div>
 
-          {/* Slider controls (visible if more than 5 reports) */}
+          {/* Slider controls (visible on desktop if >5 or always on mobile if >1) */}
           {totalPages > 1 && (
             <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
               <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', fontWeight: 600 }}>
@@ -216,21 +267,30 @@ export default function TechnogenSection() {
           )}
         </div>
 
-        {/* ── 5-Card Row / Slider Strip (Clean Typography, Breathing Border Glow) ── */}
+        {/* ── Cards Row / Mobile Single Card View ── */}
+        <div
+          onTouchStart={handleTouchStart}
+          onTouchEnd={handleTouchEnd}
+          onMouseEnter={() => setIsPaused(true)}
+          onMouseLeave={() => setIsPaused(false)}
+        >
           <AnimatePresence mode="wait" custom={direction}>
             <motion.div
               key={page}
               initial={{ opacity: 0, x: isFa ? direction * -30 : direction * 30 }}
               animate={{ opacity: 1, x: 0 }}
               exit={{ opacity: 0, x: isFa ? direction * 30 : direction * -30 }}
-            transition={{ duration: 0.3, ease: EASE }}
+              transition={{ duration: 0.35, ease: EASE }}
               style={{
                 display: 'grid',
-              gridTemplateColumns: `repeat(${Math.min(5, Math.max(currentReports.length, 1))}, 1fr)`,
+                gridTemplateColumns: isMobile
+                  ? '1fr'
+                  : `repeat(${Math.min(5, Math.max(currentReports.length, 1))}, 1fr)`,
                 gap: 14,
+                maxWidth: isMobile ? '380px' : 'none',
+                margin: isMobile ? '0 auto' : '0',
                 alignItems: 'stretch',
               }}
-            className="max-lg:!grid-cols-3 max-md:!grid-cols-2 max-sm:!grid-cols-1"
             >
               {currentReports.map((report, idx) => {
                 const isSpecial = !!report.isFeatured
@@ -382,6 +442,41 @@ export default function TechnogenSection() {
               })}
             </motion.div>
           </AnimatePresence>
+
+          {/* Mobile Dot Indicators */}
+          {isMobile && reports.length > 1 && (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 6,
+                marginTop: 18,
+              }}
+            >
+              {reports.map((_, idx) => (
+                <button
+                  key={idx}
+                  onClick={() => {
+                    setDirection(idx > page ? 1 : -1)
+                    setPage(idx)
+                  }}
+                  style={{
+                    width: page === idx ? 20 : 6,
+                    height: 6,
+                    borderRadius: 3,
+                    background: page === idx ? GOLD : 'rgba(255,255,255,0.25)',
+                    border: 'none',
+                    padding: 0,
+                    cursor: 'pointer',
+                    transition: 'all 0.25s ease',
+                  }}
+                  title={`Go to report ${idx + 1}`}
+                />
+              ))}
+            </div>
+          )}
+        </div>
       </div>
 
       {/* ── Document Reader / Preview Modal ── */}