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))
+  // Detect mobile screen (< 768px)
-  const currentReports = reports.slice(page * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE + ITEMS_PER_PAGE)
+  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,172 +267,216 @@ export default function TechnogenSection() {
           )}
         </div>
 
-        {/* ── 5-Card Row / Slider Strip (Clean Typography, Breathing Border Glow) ── */}
+        {/* ── Cards Row / Mobile Single Card View ── */}
-        <AnimatePresence mode="wait" custom={direction}>
+        <div
-          <motion.div
+          onTouchStart={handleTouchStart}
-            key={page}
+          onTouchEnd={handleTouchEnd}
-            initial={{ opacity: 0, x: isFa ? direction * -30 : direction * 30 }}
+          onMouseEnter={() => setIsPaused(true)}
-            animate={{ opacity: 1, x: 0 }}
+          onMouseLeave={() => setIsPaused(false)}
-            exit={{ opacity: 0, x: isFa ? direction * 30 : direction * -30 }}
+        >
-            transition={{ duration: 0.3, ease: EASE }}
+          <AnimatePresence mode="wait" custom={direction}>
-            style={{
+            <motion.div
-              display: 'grid',
+              key={page}
-              gridTemplateColumns: `repeat(${Math.min(5, Math.max(currentReports.length, 1))}, 1fr)`,
+              initial={{ opacity: 0, x: isFa ? direction * -30 : direction * 30 }}
-              gap: 14,
+              animate={{ opacity: 1, x: 0 }}
-              alignItems: 'stretch',
+              exit={{ opacity: 0, x: isFa ? direction * 30 : direction * -30 }}
-            }}
+              transition={{ duration: 0.35, ease: EASE }}
-            className="max-lg:!grid-cols-3 max-md:!grid-cols-2 max-sm:!grid-cols-1"
+              style={{
-          >
+                display: 'grid',
-            {currentReports.map((report, idx) => {
+                gridTemplateColumns: isMobile
-              const isSpecial = !!report.isFeatured
+                  ? '1fr'
-              return (
+                  : `repeat(${Math.min(5, Math.max(currentReports.length, 1))}, 1fr)`,
-                <div
+                gap: 14,
-                  key={report.id}
+                maxWidth: isMobile ? '380px' : 'none',
-                  className="technogen-card-glow"
+                margin: isMobile ? '0 auto' : '0',
-                  style={{
+                alignItems: 'stretch',
-                    position: 'relative',
+              }}
-                    display: 'flex',
+            >
-                    flexDirection: 'column',
+              {currentReports.map((report, idx) => {
-                    background: isSpecial
+                const isSpecial = !!report.isFeatured
-                      ? 'linear-gradient(135deg, rgba(205,158,83,0.14) 0%, rgba(3,35,64,0.5) 100%)'
+                return (
-                      : 'linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%)',
-                    borderRadius: 20,
-                    border: '1px solid rgba(205,158,83,0.3)',
-                    backdropFilter: 'blur(10px)',
-                    overflow: 'hidden',
-                    paddingBottom: 4,
-                    animationDelay: `${idx * 0.7}s`,
-                  }}
-                >
-                  {/* Top Cover Image */}
                   <div
-                    onClick={() => openPreview(report)}
+                    key={report.id}
+                    className="technogen-card-glow"
                     style={{
-                      width: '100%',
-                      aspectRatio: '1 / 1.15',
-                      overflow: 'hidden',
-                      background: NAVY,
                       position: 'relative',
-                      cursor: 'pointer',
-                    }}
-                  >
-                    <img
-                      src={report.coverImage}
-                      alt={isFa ? report.titleFa : (report.titleEn || report.titleFa)}
-                      style={{
-                        width: '100%',
-                        height: '100%',
-                        objectFit: 'cover',
-                        display: 'block',
-                        transition: 'transform 0.35s ease',
-                      }}
-                      className="hover:scale-105"
-                    />
-                  </div>
-
-                  {/* Card Content Body */}
-                  <div
-                    style={{
-                      padding: '16px 18px 14px',
                       display: 'flex',
                       flexDirection: 'column',
-                      flexGrow: 1,
+                      background: isSpecial
-                      textAlign: isFa ? 'right' : 'left',
+                        ? 'linear-gradient(135deg, rgba(205,158,83,0.14) 0%, rgba(3,35,64,0.5) 100%)'
+                        : 'linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%)',
+                      borderRadius: 20,
+                      border: '1px solid rgba(205,158,83,0.3)',
+                      backdropFilter: 'blur(10px)',
+                      overflow: 'hidden',
+                      paddingBottom: 4,
+                      animationDelay: `${idx * 0.7}s`,
                     }}
                   >
-                    <h3
+                    {/* Top Cover Image */}
+                    <div
                       onClick={() => openPreview(report)}
                       style={{
-                        fontSize: 15,
+                        width: '100%',
-                        fontWeight: 900,
+                        aspectRatio: '1 / 1.15',
-                        color: '#FFFFFF',
+                        overflow: 'hidden',
-                        lineHeight: 1.5,
+                        background: NAVY,
-                        margin: 0,
+                        position: 'relative',
                         cursor: 'pointer',
-                        minHeight: 48,
-                        display: 'flex',
-                        alignItems: 'center',
                       }}
-                      title={isFa ? report.titleFa : (report.titleEn || report.titleFa)}
                     >
-                      {isFa ? report.titleFa : (report.titleEn || report.titleFa)}
+                      <img
-                    </h3>
+                        src={report.coverImage}
+                        alt={isFa ? report.titleFa : (report.titleEn || report.titleFa)}
+                        style={{
+                          width: '100%',
+                          height: '100%',
+                          objectFit: 'cover',
+                          display: 'block',
+                          transition: 'transform 0.35s ease',
+                        }}
+                        className="hover:scale-105"
+                      />
+                    </div>
 
-                    {/* Bottom Action Buttons */}
+                    {/* Card Content Body */}
                     <div
                       style={{
-                        marginTop: 'auto',
+                        padding: '16px 18px 14px',
                         display: 'flex',
-                        alignItems: 'center',
+                        flexDirection: 'column',
-                        justifyContent: 'space-between',
+                        flexGrow: 1,
-                        gap: 8,
+                        textAlign: isFa ? 'right' : 'left',
-                        paddingTop: 14,
-                        borderTop: '1px solid rgba(255,255,255,0.08)',
                       }}
                     >
-                      {report.fileUrl && (
+                      <h3
-                        <a
+                        onClick={() => openPreview(report)}
-                          href={report.fileUrl}
+                        style={{
-                          download
+                          fontSize: 15,
-                          target="_blank"
+                          fontWeight: 900,
-                          rel="noopener noreferrer"
+                          color: '#FFFFFF',
+                          lineHeight: 1.5,
+                          margin: 0,
+                          cursor: 'pointer',
+                          minHeight: 48,
+                          display: 'flex',
+                          alignItems: 'center',
+                        }}
+                        title={isFa ? report.titleFa : (report.titleEn || report.titleFa)}
+                      >
+                        {isFa ? report.titleFa : (report.titleEn || report.titleFa)}
+                      </h3>
+
+                      {/* Bottom Action Buttons */}
+                      <div
+                        style={{
+                          marginTop: 'auto',
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'space-between',
+                          gap: 8,
+                          paddingTop: 14,
+                          borderTop: '1px solid rgba(255,255,255,0.08)',
+                        }}
+                      >
+                        {report.fileUrl && (
+                          <a
+                            href={report.fileUrl}
+                            download
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            style={{
+                              display: 'inline-flex',
+                              alignItems: 'center',
+                              gap: 5,
+                              color: GOLD,
+                              fontSize: 12,
+                              fontWeight: 800,
+                              textDecoration: 'none',
+                              transition: 'opacity 0.15s',
+                            }}
+                            className="hover:!opacity-80"
+                          >
+                            <Download size={14} />
+                            <span>{isFa ? 'دانلود PDF' : 'Download'}</span>
+                          </a>
+                        )}
+
+                        <button
+                          onClick={() => openPreview(report)}
                           style={{
                             display: 'inline-flex',
                             alignItems: 'center',
-                            gap: 5,
+                            gap: 4,
-                            color: GOLD,
+                            background: 'transparent',
-                            fontSize: 12,
+                            border: 'none',
-                            fontWeight: 800,
+                            color: 'rgba(255,255,255,0.7)',
-                            textDecoration: 'none',
+                            fontSize: 11,
-                            transition: 'opacity 0.15s',
+                            fontWeight: 700,
+                            cursor: 'pointer',
+                            padding: '2px 6px',
+                            borderRadius: 4,
                           }}
-                          className="hover:!opacity-80"
+                          className="hover:!text-white"
                         >
-                          <Download size={14} />
+                          <Eye size={13} />
-                          <span>{isFa ? 'دانلود PDF' : 'Download'}</span>
+                          <span>{isFa ? 'مشاهده' : 'View'}</span>
-                        </a>
+                        </button>
-                      )}
+                      </div>
-
-                      <button
-                        onClick={() => openPreview(report)}
-                        style={{
-                          display: 'inline-flex',
-                          alignItems: 'center',
-                          gap: 4,
-                          background: 'transparent',
-                          border: 'none',
-                          color: 'rgba(255,255,255,0.7)',
-                          fontSize: 11,
-                          fontWeight: 700,
-                          cursor: 'pointer',
-                          padding: '2px 6px',
-                          borderRadius: 4,
-                        }}
-                        className="hover:!text-white"
-                      >
-                        <Eye size={13} />
-                        <span>{isFa ? 'مشاهده' : 'View'}</span>
-                      </button>
                     </div>
-                  </div>
 
-                  {/* Bottom Gold Accent Bar */}
+                    {/* Bottom Gold Accent Bar */}
-                  <div
+                    <div
-                    style={{
+                      style={{
-                      position: 'absolute',
+                        position: 'absolute',
-                      bottom: 0,
+                        bottom: 0,
-                      left: 0,
+                        left: 0,
-                      width: '100%',
+                        width: '100%',
-                      height: 3,
+                        height: 3,
-                      backgroundColor: isSpecial ? GOLD : 'rgba(205,158,83,0.4)',
+                        backgroundColor: isSpecial ? GOLD : 'rgba(205,158,83,0.4)',
-                      borderRadius: '0 0 20px 20px',
+                        borderRadius: '0 0 20px 20px',
-                    }}
+                      }}
-                  />
+                    />
-                </div>
+                  </div>
-              )
+                )
-            })}
+              })}
-          </motion.div>
+            </motion.div>
-        </AnimatePresence>
+          </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 ── */}