671 lines
25 KiB
TypeScript
671 lines
25 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|
import { Download, FileText, ExternalLink, X, Eye, BookOpen } from 'lucide-react'
|
|
import { useLang } from '@/context/LangContext'
|
|
import { FALLBACK_TECHNOGEN_REPORTS, type TechnogenReport } from '@/data/technogen'
|
|
|
|
const NAVY = '#032340'
|
|
const GOLD = '#CD9E53'
|
|
const EASE = [0.22, 1, 0.36, 1] as const
|
|
|
|
export default function TechnogenSection() {
|
|
const { lang } = useLang()
|
|
const isFa = lang === 'fa'
|
|
const [reports, setReports] = useState<TechnogenReport[]>(FALLBACK_TECHNOGEN_REPORTS)
|
|
const [selectedReport, setSelectedReport] = useState<TechnogenReport | null>(null)
|
|
|
|
useEffect(() => {
|
|
let unmounted = false
|
|
fetch('/api/technogen')
|
|
.then((res) => {
|
|
if (!res.ok) throw new Error('API error')
|
|
return res.json()
|
|
})
|
|
.then((data: TechnogenReport[]) => {
|
|
if (!unmounted && Array.isArray(data) && data.length > 0) {
|
|
setReports(data)
|
|
}
|
|
})
|
|
.catch(() => {})
|
|
return () => {
|
|
unmounted = true
|
|
}
|
|
}, [])
|
|
|
|
// Featured report (POSCO study) vs analytical notes
|
|
const featured = reports.find((r) => r.isFeatured) || reports[0]
|
|
const analyticalNotes = reports.filter((r) => r.id !== featured?.id)
|
|
|
|
const openPreview = (report: TechnogenReport) => {
|
|
setSelectedReport(report)
|
|
}
|
|
|
|
const closePreview = () => {
|
|
setSelectedReport(null)
|
|
}
|
|
|
|
return (
|
|
<section
|
|
id="technogen"
|
|
dir={isFa ? 'rtl' : 'ltr'}
|
|
style={{
|
|
background: 'var(--paper)',
|
|
borderTop: '1px solid var(--rule-thin)',
|
|
borderBottom: '1px solid var(--rule-thin)',
|
|
padding: '44px 0 52px',
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
<div className="max-w-7xl mx-auto px-12 max-md:px-4">
|
|
{/* ── Section Header with Gold Accent Line ── */}
|
|
<div style={{ marginBottom: 24 }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
|
<div style={{ width: 4, height: 28, background: GOLD, borderRadius: 2, flexShrink: 0 }} />
|
|
<h2
|
|
style={{
|
|
fontSize: 'clamp(20px, 2.2vw, 28px)',
|
|
fontWeight: 900,
|
|
color: NAVY,
|
|
margin: 0,
|
|
letterSpacing: isFa ? '-0.5px' : '-0.2px',
|
|
lineHeight: 1.3,
|
|
}}
|
|
>
|
|
{isFa ? 'تکنوژن؛ برنامه توسعهگر ملی فناوری' : 'Technogen: National Technology Developer Program'}
|
|
</h2>
|
|
</div>
|
|
<p
|
|
style={{
|
|
fontSize: 13,
|
|
color: 'rgba(3,35,64,0.65)',
|
|
margin: '6px 0 0',
|
|
paddingInlineStart: 16,
|
|
lineHeight: 1.6,
|
|
}}
|
|
>
|
|
{isFa
|
|
? 'گزارشهای تحلیلی و مطالعات تطبیقی یادگیری صنعتی، انتقال دانش و ساخت قابلیت فناورانه در زنجیره فولاد'
|
|
: 'Analytical notes and comparative studies on industrial learning, knowledge absorption, and technological capability building in steel.'}
|
|
</p>
|
|
</div>
|
|
|
|
{/* ── Bento Grid Layout (Unified Single Block) ── */}
|
|
<div
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(12, 1fr)',
|
|
gap: 16,
|
|
alignItems: 'stretch',
|
|
}}
|
|
className="max-lg:!grid-cols-1"
|
|
>
|
|
{/* ── Bento Card 1: Flagship POSCO Study (Spans 7 columns) ── */}
|
|
{featured && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 16 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, ease: EASE }}
|
|
style={{
|
|
gridColumn: 'span 7',
|
|
position: 'relative',
|
|
borderRadius: 18,
|
|
overflow: 'hidden',
|
|
background: `linear-gradient(135deg, ${NAVY} 0%, #062b4f 60%, #031e36 100%)`,
|
|
boxShadow: '0 12px 30px -10px rgba(3,35,64,0.25)',
|
|
border: '1px solid rgba(255,255,255,0.08)',
|
|
padding: '24px 28px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 24,
|
|
}}
|
|
className="max-lg:!col-span-1 max-md:!flex-col max-md:!p-5 max-md:!gap-4"
|
|
>
|
|
{/* Subtle background glow */}
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
top: '-30%',
|
|
right: '-20%',
|
|
width: '320px',
|
|
height: '320px',
|
|
borderRadius: '50%',
|
|
background: 'radial-gradient(circle, rgba(205,158,83,0.15) 0%, transparent 60%)',
|
|
pointerEvents: 'none',
|
|
}}
|
|
/>
|
|
|
|
{/* Cover Thumbnail */}
|
|
<div
|
|
style={{
|
|
flex: '0 0 160px',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
}}
|
|
className="max-md:!w-full"
|
|
>
|
|
<motion.div
|
|
whileHover={{ scale: 1.03, y: -3 }}
|
|
transition={{ duration: 0.25 }}
|
|
onClick={() => openPreview(featured)}
|
|
style={{
|
|
width: 150,
|
|
aspectRatio: '1 / 1.414',
|
|
borderRadius: 10,
|
|
overflow: 'hidden',
|
|
boxShadow: '0 14px 28px -6px rgba(0,0,0,0.5)',
|
|
border: '1px solid rgba(255,255,255,0.15)',
|
|
cursor: 'pointer',
|
|
background: NAVY,
|
|
}}
|
|
>
|
|
<img
|
|
src={featured.coverImage}
|
|
alt={isFa ? featured.titleFa : (featured.titleEn || featured.titleFa)}
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Info & Actions */}
|
|
<div
|
|
style={{
|
|
flex: '1 1 0',
|
|
color: '#fff',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
minWidth: 0,
|
|
}}
|
|
className="max-md:!text-center"
|
|
>
|
|
{/* Meta Pills */}
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
marginBottom: 10,
|
|
flexWrap: 'wrap',
|
|
}}
|
|
className="max-md:!justify-center"
|
|
>
|
|
<span
|
|
style={{
|
|
background: GOLD,
|
|
color: NAVY,
|
|
fontSize: 10,
|
|
fontWeight: 900,
|
|
padding: '3px 8px',
|
|
borderRadius: 4,
|
|
}}
|
|
>
|
|
{isFa ? 'مطالعه تطبیقی ویژه' : 'Flagship Study'}
|
|
</span>
|
|
{featured.code && (
|
|
<span
|
|
style={{
|
|
background: 'rgba(255,255,255,0.12)',
|
|
color: '#fff',
|
|
fontSize: 10,
|
|
fontWeight: 800,
|
|
padding: '3px 8px',
|
|
borderRadius: 4,
|
|
direction: 'ltr',
|
|
}}
|
|
>
|
|
{featured.code}
|
|
</span>
|
|
)}
|
|
<span style={{ fontSize: 11, color: 'rgba(255,255,255,0.65)', fontWeight: 600 }}>
|
|
{isFa ? (featured.pagesFa || '۳۰ صفحه') : (featured.pagesEn || '30 Pages')}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h3
|
|
style={{
|
|
fontSize: 'clamp(16px, 1.6vw, 20px)',
|
|
fontWeight: 900,
|
|
lineHeight: 1.4,
|
|
margin: '0 0 8px',
|
|
color: '#fff',
|
|
}}
|
|
>
|
|
{isFa ? featured.titleFa : (featured.titleEn || featured.titleFa)}
|
|
</h3>
|
|
|
|
{/* Subtitle / Excerpt */}
|
|
{featured.subtitleFa && (
|
|
<p
|
|
style={{
|
|
fontSize: 12,
|
|
lineHeight: 1.7,
|
|
color: 'rgba(255,255,255,0.75)',
|
|
margin: '0 0 16px',
|
|
display: '-webkit-box',
|
|
WebkitLineClamp: 2,
|
|
WebkitBoxOrient: 'vertical',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
{isFa ? featured.subtitleFa : (featured.subtitleEn || featured.subtitleFa)}
|
|
</p>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 10,
|
|
flexWrap: 'wrap',
|
|
}}
|
|
className="max-md:!justify-center"
|
|
>
|
|
{featured.fileUrl && (
|
|
<a
|
|
href={featured.fileUrl}
|
|
download
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
style={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: 6,
|
|
background: `linear-gradient(135deg, ${GOLD} 0%, #e0b469 100%)`,
|
|
color: NAVY,
|
|
fontSize: 12,
|
|
fontWeight: 900,
|
|
padding: '9px 16px',
|
|
borderRadius: 8,
|
|
textDecoration: 'none',
|
|
boxShadow: '0 6px 16px -4px rgba(205,158,83,0.4)',
|
|
transition: 'transform 0.15s',
|
|
}}
|
|
className="hover:!brightness-105 active:!scale-95"
|
|
>
|
|
<Download size={14} strokeWidth={2.5} />
|
|
<span>{isFa ? 'دانلود PDF کامل' : 'Download PDF'}</span>
|
|
</a>
|
|
)}
|
|
|
|
<button
|
|
onClick={() => openPreview(featured)}
|
|
style={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: 6,
|
|
background: 'rgba(255,255,255,0.08)',
|
|
border: '1px solid rgba(255,255,255,0.18)',
|
|
color: '#fff',
|
|
fontSize: 12,
|
|
fontWeight: 700,
|
|
padding: '9px 14px',
|
|
borderRadius: 8,
|
|
cursor: 'pointer',
|
|
transition: 'background 0.15s',
|
|
}}
|
|
className="hover:!bg-white/15"
|
|
>
|
|
<BookOpen size={14} />
|
|
<span>{isFa ? 'مشاهده آنلاین' : 'Read'}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* ── Bento Cards 2, 3, 4: Analytical Notes (Spans 5 columns) ── */}
|
|
<div
|
|
style={{
|
|
gridColumn: 'span 5',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 10,
|
|
justifyContent: 'space-between',
|
|
}}
|
|
className="max-lg:!col-span-1"
|
|
>
|
|
{analyticalNotes.map((note, idx) => (
|
|
<motion.div
|
|
key={note.id}
|
|
initial={{ opacity: 0, x: isFa ? -12 : 12 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.4, ease: EASE, delay: idx * 0.08 }}
|
|
whileHover={{ y: -2 }}
|
|
style={{
|
|
background: '#FFFFFF',
|
|
borderRadius: 14,
|
|
border: '1px solid rgba(3,35,64,0.08)',
|
|
boxShadow: '0 4px 14px -4px rgba(3,35,64,0.05)',
|
|
padding: '12px 14px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 14,
|
|
flex: '1 1 0',
|
|
}}
|
|
>
|
|
{/* Mini Cover Thumbnail */}
|
|
<div
|
|
onClick={() => openPreview(note)}
|
|
style={{
|
|
flex: '0 0 54px',
|
|
width: 54,
|
|
aspectRatio: '1 / 1.414',
|
|
borderRadius: 6,
|
|
overflow: 'hidden',
|
|
boxShadow: '0 4px 10px rgba(0,0,0,0.15)',
|
|
border: '1px solid rgba(3,35,64,0.1)',
|
|
background: NAVY,
|
|
cursor: 'pointer',
|
|
}}
|
|
>
|
|
<img
|
|
src={note.coverImage}
|
|
alt={isFa ? note.titleFa : (note.titleEn || note.titleFa)}
|
|
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div style={{ flex: '1 1 0', minWidth: 0 }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
|
|
{note.code && (
|
|
<span
|
|
style={{
|
|
background: 'rgba(3,35,64,0.06)',
|
|
color: NAVY,
|
|
fontSize: 9,
|
|
fontWeight: 800,
|
|
padding: '2px 6px',
|
|
borderRadius: 3,
|
|
direction: 'ltr',
|
|
}}
|
|
>
|
|
{note.code}
|
|
</span>
|
|
)}
|
|
<span
|
|
style={{
|
|
background: 'rgba(205,158,83,0.15)',
|
|
color: '#9c6f28',
|
|
fontSize: 9,
|
|
fontWeight: 800,
|
|
padding: '2px 6px',
|
|
borderRadius: 3,
|
|
}}
|
|
>
|
|
{isFa ? (note.tagFa || 'یادداشت تحلیلی') : (note.tagEn || 'Analytical Note')}
|
|
</span>
|
|
<span style={{ fontSize: 10, color: 'rgba(3,35,64,0.5)', fontWeight: 600, marginInlineStart: 'auto' }}>
|
|
{isFa ? (note.pagesFa || '۴ صفحه') : (note.pagesEn || '4 Pages')}
|
|
</span>
|
|
</div>
|
|
|
|
<h4
|
|
onClick={() => openPreview(note)}
|
|
style={{
|
|
fontSize: 13,
|
|
fontWeight: 800,
|
|
color: NAVY,
|
|
lineHeight: 1.4,
|
|
margin: '0 0 2px',
|
|
cursor: 'pointer',
|
|
whiteSpace: 'nowrap',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
}}
|
|
title={isFa ? note.titleFa : (note.titleEn || note.titleFa)}
|
|
>
|
|
{isFa ? note.titleFa : (note.titleEn || note.titleFa)}
|
|
</h4>
|
|
|
|
{note.subtitleFa && (
|
|
<p
|
|
style={{
|
|
fontSize: 11,
|
|
lineHeight: 1.5,
|
|
color: 'rgba(3,35,64,0.65)',
|
|
margin: 0,
|
|
whiteSpace: 'nowrap',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
}}
|
|
>
|
|
{isFa ? note.subtitleFa : (note.subtitleEn || note.subtitleFa)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Quick Action Buttons */}
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
|
|
{note.fileUrl && (
|
|
<a
|
|
href={note.fileUrl}
|
|
download
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
style={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: 8,
|
|
background: 'rgba(3,35,64,0.06)',
|
|
color: NAVY,
|
|
textDecoration: 'none',
|
|
transition: 'all 0.15s',
|
|
}}
|
|
className="hover:!bg-navy hover:!text-white"
|
|
title={isFa ? 'دانلود فایل PDF' : 'Download PDF'}
|
|
>
|
|
<Download size={14} />
|
|
</a>
|
|
)}
|
|
|
|
<button
|
|
onClick={() => openPreview(note)}
|
|
style={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: 8,
|
|
background: 'transparent',
|
|
border: '1px solid rgba(3,35,64,0.15)',
|
|
color: NAVY,
|
|
cursor: 'pointer',
|
|
transition: 'all 0.15s',
|
|
}}
|
|
className="hover:!border-navy"
|
|
title={isFa ? 'مشاهده آنلاین' : 'Preview'}
|
|
>
|
|
<Eye size={14} />
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Document Reader / Preview Modal ── */}
|
|
<AnimatePresence>
|
|
{selectedReport && (
|
|
<div
|
|
style={{
|
|
position: 'fixed',
|
|
inset: 0,
|
|
zIndex: 9999,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
padding: '24px 16px',
|
|
}}
|
|
>
|
|
{/* Backdrop */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
style={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
background: 'rgba(3, 20, 36, 0.85)',
|
|
backdropFilter: 'blur(8px)',
|
|
}}
|
|
onClick={closePreview}
|
|
/>
|
|
|
|
{/* Modal Window */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.95, y: 20 }}
|
|
transition={{ duration: 0.3, ease: EASE }}
|
|
style={{
|
|
position: 'relative',
|
|
width: '100%',
|
|
maxWidth: 1000,
|
|
height: '90vh',
|
|
background: '#FFFFFF',
|
|
borderRadius: 24,
|
|
boxShadow: '0 30px 90px rgba(0,0,0,0.5)',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
overflow: 'hidden',
|
|
zIndex: 1,
|
|
}}
|
|
>
|
|
{/* Modal Top Header */}
|
|
<div
|
|
style={{
|
|
padding: '16px 24px',
|
|
background: NAVY,
|
|
color: '#fff',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
gap: 16,
|
|
borderBottom: '1px solid rgba(255,255,255,0.1)',
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 0 }}>
|
|
<FileText size={20} color={GOLD} />
|
|
<div style={{ minWidth: 0 }}>
|
|
<div style={{ fontSize: 11, color: GOLD, fontWeight: 700 }}>
|
|
{selectedReport.code} · {isFa ? selectedReport.tagFa : (selectedReport.tagEn || selectedReport.tagFa)}
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: 15,
|
|
fontWeight: 900,
|
|
whiteSpace: 'nowrap',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
}}
|
|
>
|
|
{isFa ? selectedReport.titleFa : (selectedReport.titleEn || selectedReport.titleFa)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 }}>
|
|
{selectedReport.fileUrl && (
|
|
<a
|
|
href={selectedReport.fileUrl}
|
|
download
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
style={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: 6,
|
|
background: GOLD,
|
|
color: NAVY,
|
|
fontSize: 12,
|
|
fontWeight: 800,
|
|
padding: '6px 14px',
|
|
borderRadius: 8,
|
|
textDecoration: 'none',
|
|
}}
|
|
>
|
|
<Download size={14} />
|
|
<span>{isFa ? 'دانلود فایل' : 'Download'}</span>
|
|
</a>
|
|
)}
|
|
|
|
{selectedReport.fileUrl && (
|
|
<a
|
|
href={selectedReport.fileUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
style={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: 8,
|
|
background: 'rgba(255,255,255,0.1)',
|
|
color: '#fff',
|
|
textDecoration: 'none',
|
|
}}
|
|
title={isFa ? 'باز کردن در پنجره جدید' : 'Open in new tab'}
|
|
>
|
|
<ExternalLink size={15} />
|
|
</a>
|
|
)}
|
|
|
|
<button
|
|
onClick={closePreview}
|
|
style={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: 8,
|
|
background: 'rgba(255,255,255,0.1)',
|
|
border: 'none',
|
|
color: '#fff',
|
|
cursor: 'pointer',
|
|
}}
|
|
title={isFa ? 'بستن' : 'Close'}
|
|
>
|
|
<X size={18} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Modal Viewer Body */}
|
|
<div style={{ flex: '1 1 0', position: 'relative', background: '#e5e7eb' }}>
|
|
{selectedReport.fileUrl ? (
|
|
<iframe
|
|
src={`${selectedReport.fileUrl}#toolbar=1&navpanes=0`}
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
border: 'none',
|
|
}}
|
|
title={selectedReport.titleFa}
|
|
/>
|
|
) : (
|
|
<div style={{ display: 'grid', placeItems: 'center', height: '100%', color: '#6b7280' }}>
|
|
{isFa ? 'فایل PDF در دسترس نیست.' : 'PDF file not available.'}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
)}
|
|
</AnimatePresence>
|
|
</section>
|
|
)
|
|
}
|