331 lines
14 KiB
TypeScript
331 lines
14 KiB
TypeScript
import { Link } from 'react-router-dom'
|
||
import { Carousel, Card } from '@/components/ui/apple-cards-carousel'
|
||
import type { CardData } from '@/components/ui/apple-cards-carousel'
|
||
import { reports } from '@/data/reports'
|
||
import type { Report } from '@/data/reports'
|
||
|
||
/* ─── Per-report images (industrial, steel-relevant) ─ */
|
||
const reportImage: Record<string, string> = {
|
||
'iran-steel-global-trade-scenarios-1404':
|
||
'/news/photo-1578662996442-48f60103fc96.jpg',
|
||
'steel-energy-consumption-efficiency-1403':
|
||
'/news/photo-1473341304170-971dccb5ac1e.jpg',
|
||
'global-steel-market-q3-1403':
|
||
'/news/photo-1504328345606-18bbc8c9d7d1.jpg',
|
||
'iran-steel-export-sanctions-impact-1403':
|
||
'/news/photo-1494412519320-aa613dfb7738.jpg',
|
||
'flash-iron-ore-price-surge-1403':
|
||
'/news/photo-1611974789855-9c2a0a7236a3.jpg',
|
||
'domestic-production-dri-outlook-1403':
|
||
'/news/photo-1567789884554-0b844b597180.jpg',
|
||
'esg-carbon-emissions-steel-iran-1403':
|
||
'/news/photo-1466611653911-95081537e5b7.jpg',
|
||
'policy-steel-pricing-reform-1403':
|
||
'/news/photo-1551288049-bebda4e38f71.jpg',
|
||
'flash-china-steel-overcapacity-1403':
|
||
'/news/photo-1570168007204-dfb528c6958f.jpg',
|
||
}
|
||
|
||
const fallbackImage =
|
||
'/news/photo-1558618666-fcd25c85cd64.jpg'
|
||
|
||
const typeLabel: Record<string, string> = {
|
||
quarterly: 'گزارش فصلی',
|
||
flash: 'گزارش فوری',
|
||
risk: 'گزارش ریسک',
|
||
free: 'رایگان',
|
||
special: 'گزارش ویژه',
|
||
}
|
||
|
||
const typeColor: Record<string, string> = {
|
||
flash: 'var(--red)',
|
||
risk: '#92400e',
|
||
free: '#166534',
|
||
quarterly: 'var(--ink-4)',
|
||
special: 'var(--ink)',
|
||
}
|
||
|
||
/* ─── Key findings per category (mock but plausible) ─ */
|
||
const keyFindings: Record<string, string[]> = {
|
||
'بازار جهانی': [
|
||
'کاهش ۱۲٪ تقاضای چین در نیمه دوم ۲۰۲۴ فشار قیمتی جهانی ایجاد کرده',
|
||
'هند با رشد ۱۸٪ ظرفیت تولید، رقیب اصلی ایران در بازارهای منطقه شده',
|
||
'پیشبینی بازگشت تقاضا در Q2 2025 با ریکاوری بخش ساختمان آمریکا',
|
||
],
|
||
'انرژی و ESG': [
|
||
'شکاف مصرف انرژی واحدهای ایرانی ۲۵٪ بیشتر از میانگین جهانی است',
|
||
'اجرای CBAM از ۲۰۲۶ میتواند ۱۵٪ رقابتپذیری صادرات را کاهش دهد',
|
||
'مسیر هیدروژن سبز برای ایران تا ۱۴۱۰ اقتصادی نخواهد بود',
|
||
],
|
||
'صادرات': [
|
||
'عراق، افغانستان و پاکستان ۶۵٪ صادرات فولاد ایران را تشکیل میدهند',
|
||
'مسیرهای جایگزین آفریقای شرقی پتانسیل ۲ میلیون تن اضافی دارد',
|
||
'تحریمهای جدید ۳ مسیر اصلی پرداخت را مسدود کرده است',
|
||
],
|
||
'تولید داخلی': [
|
||
'ایران با ۳۰ میلیون تن DRI رتبه اول جهانی را حفظ کرده است',
|
||
'کمبود گاز زمستانی میتواند تا ۲۰٪ ظرفیت تولید را کاهش دهد',
|
||
'۸ پروژه در دست احداث تا ۱۴۰۵ به ظرفیت میرسند',
|
||
],
|
||
'سیاستگذاری': [
|
||
'قیمتگذاری دستوری هزینه ۱.۲ میلیارد دلار در سال به صنعت تحمیل میکند',
|
||
'تجربه ترکیه نشان میدهد آزادسازی تدریجی قیمت بهترین مسیر است',
|
||
'اصلاح تعرفههای سنگآهن میتواند ۸٪ به حاشیه سود اضافه کند',
|
||
],
|
||
'ریسک و بحران': [
|
||
'احتمال تشدید تحریمها در ۶ ماه آینده ۶۵٪ برآورد میشود',
|
||
'ریسک کمبود ارز برای واردات مواد اولیه در سطح بالا قرار دارد',
|
||
'شکست مذاکرات هستهای میتواند ۳۰٪ صادرات را تحت تأثیر قرار دهد',
|
||
],
|
||
}
|
||
|
||
/* ─── Report contents (TOC-style) ───────────────────── */
|
||
const reportContents: Record<string, string[]> = {
|
||
quarterly: ['مروری بر بازار فصل', 'تحلیل قیمتها و حجم معاملات', 'رویدادهای کلیدی', 'پیشبینی فصل آینده', 'دادههای خام ضمیمه'],
|
||
flash: ['خلاصه اجرایی', 'رویداد و محرک', 'تأثیر بر بازار داخلی', 'توصیههای فوری'],
|
||
risk: ['ارزیابی ریسک', 'تحلیل سناریو', 'احتمالسنجی', 'راهکارهای پوشش ریسک', 'پیوست داده'],
|
||
free: ['خلاصه یافتهها', 'روششناسی', 'مقایسه بینالمللی', 'توصیههای سیاستی'],
|
||
special: ['تحلیل جامع', 'سناریوسازی کمی', 'مقایسه تطبیقی', 'توصیههای راهبردی', 'مدل Excel پیوست'],
|
||
}
|
||
|
||
/* ─── Expanded card body ─────────────────────────────── */
|
||
function ReportCardContent({ report }: { report: Report }) {
|
||
const findings = keyFindings[report.category] ?? []
|
||
const contents = reportContents[report.type] ?? []
|
||
|
||
return (
|
||
<div style={{ direction: 'rtl', fontFamily: 'Vazir, sans-serif' }}>
|
||
|
||
{/* Tags */}
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 20 }}>
|
||
{report.tags.map(tag => (
|
||
<span key={tag} style={{
|
||
fontSize: 10, fontWeight: 600,
|
||
padding: '3px 10px', borderRadius: 999,
|
||
background: '#f1f5f9', color: '#475569',
|
||
}}>
|
||
{tag}
|
||
</span>
|
||
))}
|
||
</div>
|
||
|
||
{/* Summary */}
|
||
<p style={{
|
||
fontSize: 14, lineHeight: 1.9, fontWeight: 300,
|
||
color: '#374151', marginBottom: 24,
|
||
paddingBottom: 24, borderBottom: '1px solid #f1f5f9',
|
||
}}>
|
||
{report.summary}
|
||
</p>
|
||
|
||
{/* Key findings */}
|
||
{findings.length > 0 && (
|
||
<div style={{ marginBottom: 24 }}>
|
||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: '#9b1c1c', marginBottom: 12 }}>
|
||
یافتههای کلیدی
|
||
</div>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||
{findings.map((f, i) => (
|
||
<div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
|
||
<div style={{ width: 5, height: 5, borderRadius: '50%', background: '#9b1c1c', flexShrink: 0, marginTop: 6 }} />
|
||
<span style={{ fontSize: 13, lineHeight: 1.7, color: '#374151', fontWeight: 300 }}>{f}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Report contents */}
|
||
{contents.length > 0 && (
|
||
<div style={{ marginBottom: 24, padding: '16px 20px', background: '#f8fafc', borderRadius: 12 }}>
|
||
<div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: '#64748b', marginBottom: 10 }}>
|
||
محتوای این گزارش
|
||
</div>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||
{contents.map((item, i) => (
|
||
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||
<span style={{ fontSize: 10, color: '#94a3b8', fontWeight: 700, minWidth: 18 }}>
|
||
{(i + 1).toLocaleString('fa-IR')}
|
||
</span>
|
||
<span style={{ fontSize: 12, color: '#475569', lineHeight: 1.5 }}>{item}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Meta grid */}
|
||
<div className="mq-stack" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 20 }}>
|
||
{[
|
||
{ label: 'نویسنده', value: report.author },
|
||
{ label: 'صفحات', value: `${report.pages} صفحه` },
|
||
{ label: 'تاریخ انتشار', value: report.publishDate },
|
||
].map(item => (
|
||
<div key={item.label} style={{ background: '#f8fafc', borderRadius: 10, padding: '10px 14px', textAlign: 'center' }}>
|
||
<div style={{ fontSize: 9, color: '#94a3b8', marginBottom: 4, fontWeight: 700, letterSpacing: '1px', textTransform: 'uppercase' }}>
|
||
{item.label}
|
||
</div>
|
||
<div style={{ fontSize: 12, fontWeight: 700, color: '#1e293b' }}>{item.value}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Author */}
|
||
<div style={{
|
||
display: 'flex', alignItems: 'center', gap: 12,
|
||
padding: '14px 18px', background: '#f8fafc', borderRadius: 12, marginBottom: 20,
|
||
}}>
|
||
<div style={{
|
||
width: 40, height: 40, background: '#1a1712', color: '#f4efe7',
|
||
borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
fontSize: 16, fontWeight: 900, flexShrink: 0,
|
||
}}>
|
||
{report.authorInitial}
|
||
</div>
|
||
<div>
|
||
<div style={{ fontSize: 13, fontWeight: 700, color: '#1e293b' }}>{report.author}</div>
|
||
<div style={{ fontSize: 11, color: '#64748b' }}>{report.authorRole}</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* CTA */}
|
||
<div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
|
||
{report.isFree ? (
|
||
<Link to={`/reports/${report.id}`} style={{
|
||
background: '#166534', color: 'white',
|
||
padding: '13px 28px', fontSize: 13, fontWeight: 700,
|
||
fontFamily: 'Vazir, sans-serif', borderRadius: 999,
|
||
textDecoration: 'none', display: 'inline-block',
|
||
}}>
|
||
دانلود رایگان
|
||
</Link>
|
||
) : (
|
||
<>
|
||
<button style={{
|
||
background: '#1a1712', color: '#f4efe7', border: 'none',
|
||
padding: '13px 28px', fontSize: 13, fontWeight: 700,
|
||
fontFamily: 'Vazir, sans-serif', cursor: 'pointer', borderRadius: 999,
|
||
}}>
|
||
خرید — {report.price.toLocaleString('fa-IR')} تومان
|
||
</button>
|
||
<Link to={`/reports/${report.id}`} style={{
|
||
color: '#9b1c1c', fontSize: 12, fontWeight: 700, textDecoration: 'none',
|
||
}}>
|
||
مشاهده جزئیات ←
|
||
</Link>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
/* ─── Section ────────────────────────────────────────── */
|
||
export default function ReportsCarouselSection() {
|
||
const carouselReports = reports.filter(r => !r.featured)
|
||
|
||
const cards: CardData[] = carouselReports.map(report => ({
|
||
src: reportImage[report.id] ?? fallbackImage,
|
||
title: report.title,
|
||
category: typeLabel[report.type] ?? report.type,
|
||
summary: report.summary,
|
||
author: report.author,
|
||
date: report.publishDate,
|
||
pages: report.pages,
|
||
content: <ReportCardContent report={report} />,
|
||
}))
|
||
|
||
const cardElements = cards.map((card, index) => (
|
||
<Card key={card.src + index} card={card} index={index} layout />
|
||
))
|
||
|
||
return (
|
||
<section style={{ background: 'var(--paper-2)', paddingBottom: 96 }}>
|
||
{/* ── Editorial header ── */}
|
||
<div className="max-w-7xl mx-auto px-12 pt-24 max-md:px-5 max-md:pt-16">
|
||
<div
|
||
style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: '1fr auto',
|
||
alignItems: 'end',
|
||
gap: 32,
|
||
paddingBottom: 28,
|
||
borderBottom: '1px solid var(--rule-thin)',
|
||
marginBottom: 32,
|
||
}}
|
||
className="mq-stack max-md:grid-cols-1 max-md:gap-4"
|
||
>
|
||
<div>
|
||
<div style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 12,
|
||
marginBottom: 18,
|
||
}}>
|
||
<div style={{ width: 32, height: 2, background: 'var(--red)' }} />
|
||
<span style={{
|
||
fontSize: 11,
|
||
fontWeight: 700,
|
||
letterSpacing: '3px',
|
||
textTransform: 'uppercase',
|
||
color: 'var(--ink-4)',
|
||
}}>
|
||
آرشیو پژوهش · ۱۴۰۳
|
||
</span>
|
||
</div>
|
||
<h2 style={{
|
||
fontSize: 'clamp(28px, 3.6vw, 48px)',
|
||
fontWeight: 900,
|
||
letterSpacing: '-1.2px',
|
||
color: 'var(--ink)',
|
||
lineHeight: 1.1,
|
||
marginBottom: 12,
|
||
}}>
|
||
تحلیلهای اخیر
|
||
</h2>
|
||
<p style={{
|
||
fontSize: 14,
|
||
lineHeight: 1.7,
|
||
color: 'var(--ink-4)',
|
||
maxWidth: 560,
|
||
}}>
|
||
مجموعهای از گزارشهای راهبردی، تحلیلهای فصلی و توصیههای سیاستی
|
||
منتشرشده در ماههای اخیر.
|
||
</p>
|
||
</div>
|
||
|
||
<Link
|
||
to="/archive"
|
||
style={{
|
||
fontSize: 11,
|
||
fontWeight: 700,
|
||
letterSpacing: '1.5px',
|
||
textTransform: 'uppercase',
|
||
color: 'var(--red)',
|
||
textDecoration: 'none',
|
||
whiteSpace: 'nowrap',
|
||
paddingBottom: 4,
|
||
}}
|
||
>
|
||
همه گزارشها ←
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Legend row */}
|
||
<div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
|
||
{Object.entries(typeLabel).map(([key, label]) => (
|
||
<div key={key} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||
<div style={{ width: 7, height: 7, borderRadius: '50%', background: typeColor[key] }} />
|
||
<span style={{ fontSize: 11, color: 'var(--ink-4)', fontWeight: 600 }}>{label}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="max-w-7xl mx-auto w-full px-12 max-md:px-5 mt-10">
|
||
<Carousel items={cardElements} />
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|