253 lines
15 KiB
TypeScript
253 lines
15 KiB
TypeScript
import { Link } from 'react-router-dom'
|
||
import { useLang } from '@/context/LangContext'
|
||
|
||
/* ─── Radar data ─────────────────────────────────────── */
|
||
const SIGNALS = {
|
||
fa: [
|
||
{
|
||
tag: 'چین', level: 'critical', levelLabel: 'بحرانی',
|
||
title: 'صادرات فولاد چین به بالاترین رکورد ۸ ساله رسید',
|
||
desc: 'در بهمن ۱۴۰۳ صادرات فولاد چین به ۱۰.۷ میلیون تن رسید — بالاترین رقم از ۲۰۱۶ — که فشار قیمتی شدیدی بر بازارهای منطقهای از جمله ایران وارد کرد.',
|
||
date: 'بهمن ۱۴۰۳', img: 'https://images.unsplash.com/photo-1611273426858-450d8e3c9fce?w=800&q=80',
|
||
accentColor: '#7f1d1d', levelColor: '#7f1d1d',
|
||
},
|
||
{
|
||
tag: 'اروپا', level: 'high', levelLabel: 'بالا',
|
||
title: 'CBAM اروپا از فروردین ۱۴۰۴ اجرایی میشود',
|
||
desc: 'مکانیزم تعدیل مرزی کربن اتحادیه اروپا برای فولاد اجرایی شد. صادرکنندگان ایرانی باید الزامات جدید گزارشدهی کربن را رعایت کنند.',
|
||
date: 'دی ۱۴۰۳', img: 'https://images.unsplash.com/photo-1473341304170-971dccb5ac1e?w=800&q=80',
|
||
accentColor: '#dc2626', levelColor: '#dc2626',
|
||
},
|
||
{
|
||
tag: 'هند', level: 'medium', levelLabel: 'متوسط',
|
||
title: 'هند ظرفیت تولید فولاد خود را تا ۲۰۳۰ دو برابر میکند',
|
||
desc: 'با سرمایهگذاری ۱۴۲ میلیارد دلاری دولت هند، این کشور تا ۲۰۳۰ به ظرفیت ۳۰۰ میلیون تن میرسد و رقیب جدی ایران در بازارهای صادراتی میشود.',
|
||
date: 'آذر ۱۴۰۳', img: 'https://images.unsplash.com/photo-1566873535350-6586b0b7a1f2?w=800&q=80',
|
||
accentColor: '#b45309', levelColor: '#b45309',
|
||
},
|
||
],
|
||
en: [
|
||
{
|
||
tag: 'China', level: 'critical', levelLabel: 'Critical',
|
||
title: "China's Steel Exports Hit an 8-Year Record High",
|
||
desc: "In Feb 2025, China's steel exports reached 10.7 million tons — the highest since 2016 — putting severe price pressure on regional markets including Iran.",
|
||
date: 'Feb 2025', img: 'https://images.unsplash.com/photo-1611273426858-450d8e3c9fce?w=800&q=80',
|
||
accentColor: '#7f1d1d', levelColor: '#7f1d1d',
|
||
},
|
||
{
|
||
tag: 'Europe', level: 'high', levelLabel: 'High',
|
||
title: "Europe's CBAM Mechanism Takes Effect from Spring 2025",
|
||
desc: "The EU's Carbon Border Adjustment Mechanism for steel is now in force. Iranian exporters must comply with new carbon reporting requirements.",
|
||
date: 'Jan 2025', img: 'https://images.unsplash.com/photo-1473341304170-971dccb5ac1e?w=800&q=80',
|
||
accentColor: '#dc2626', levelColor: '#dc2626',
|
||
},
|
||
{
|
||
tag: 'India', level: 'medium', levelLabel: 'Medium',
|
||
title: 'India to Double Steel Production Capacity by 2030',
|
||
desc: 'With a $142 billion government investment, India targets 300 million tons capacity by 2030, becoming a serious competitor in Iran\'s export markets.',
|
||
date: 'Dec 2024', img: 'https://images.unsplash.com/photo-1566873535350-6586b0b7a1f2?w=800&q=80',
|
||
accentColor: '#b45309', levelColor: '#b45309',
|
||
},
|
||
],
|
||
}
|
||
|
||
/* ─── Tech data ──────────────────────────────────────── */
|
||
const TECHS = {
|
||
fa: [
|
||
{
|
||
num: '۰۱', tag: 'انرژی پاک',
|
||
title: 'فولاد هیدروژنی (DRI-H₂)',
|
||
desc: 'جایگزینی کک با هیدروژن سبز در کورههای احیای مستقیم؛ اولین کارخانه تجاری اروپایی در ۲۰۲۴ وارد مرحله تولید شد. ظرفیت تولید ۲.۵ میلیون تن در سال.',
|
||
img: 'https://images.unsplash.com/photo-1613665813446-82a78c468a1d?w=800&q=80',
|
||
horizon: '۲۰۲۷–۲۰۳۰', accentColor: '#0d6b3e',
|
||
},
|
||
{
|
||
num: '۰۲', tag: 'هوش مصنوعی',
|
||
title: 'دیجیتالسازی و AI در تولید فولاد',
|
||
desc: 'یادگیری ماشین در بهینهسازی فرآیند ذوب، کنترل کیفیت آنلاین و پیشبینی خرابی تجهیزات. کاهش ۱۵–۲۰٪ ضایعات و صرفهجویی ۸٪ در مصرف انرژی.',
|
||
img: 'https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=800&q=80',
|
||
horizon: '۲۰۲۵–۲۰۲۸', accentColor: '#1a4a7a',
|
||
},
|
||
{
|
||
num: '۰۳', tag: 'فناوری نوین',
|
||
title: 'الکترولیز اکسید مذاب (MOE)',
|
||
desc: 'تولید فولاد از طریق الکترولیز مستقیم اکسید آهن با برق تجدیدپذیر — بدون انتشار CO₂. MIT این فناوری را «انقلاب صنعتی بعدی» نامیده است.',
|
||
img: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=800&q=80',
|
||
horizon: '۲۰۳۰–۲۰۳۵', accentColor: '#6b21a8',
|
||
},
|
||
],
|
||
en: [
|
||
{
|
||
num: '01', tag: 'Clean Energy',
|
||
title: 'Hydrogen Steel (DRI-H₂)',
|
||
desc: "Replacing coke with green hydrogen in direct reduction furnaces; Europe's first commercial plant entered production in 2024 with 2.5 million ton annual capacity.",
|
||
img: 'https://images.unsplash.com/photo-1613665813446-82a78c468a1d?w=800&q=80',
|
||
horizon: '2027–2030', accentColor: '#0d6b3e',
|
||
},
|
||
{
|
||
num: '02', tag: 'Artificial Intelligence',
|
||
title: 'Digitalization & AI in Steel Production',
|
||
desc: 'Machine learning for smelting optimization, online quality control, and equipment failure prediction. Cuts waste by 15–20% and energy use by 8%.',
|
||
img: 'https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=800&q=80',
|
||
horizon: '2025–2028', accentColor: '#1a4a7a',
|
||
},
|
||
{
|
||
num: '03', tag: 'Emerging Tech',
|
||
title: 'Molten Oxide Electrolysis (MOE)',
|
||
desc: 'Producing steel by direct electrolysis of iron oxide using renewable electricity — zero CO₂ emissions. MIT has called it "the next industrial revolution".',
|
||
img: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=800&q=80',
|
||
horizon: '2030–2035', accentColor: '#6b21a8',
|
||
},
|
||
],
|
||
}
|
||
|
||
const T = {
|
||
fa: {
|
||
radarOverline: 'FUTURE RADAR', radarHeading: 'رادار آینده',
|
||
radarSub: 'سیگنالهای جهانی با اثر مستقیم بر صنعت فولاد ایران',
|
||
radarAll: 'همه سیگنالها ←',
|
||
techOverline: 'TECH FRONTIER', techHeading: 'مرز فناوری',
|
||
techSub: 'فناوریهای نوظهور و افق کاربرد آنها در صنعت فولاد',
|
||
techAll: 'همه فناوریها ←',
|
||
horizon: 'افق زمانی',
|
||
},
|
||
en: {
|
||
radarOverline: 'FUTURE RADAR', radarHeading: 'Future Radar',
|
||
radarSub: 'Global signals with direct impact on Iran\'s steel industry',
|
||
radarAll: 'All Signals →',
|
||
techOverline: 'TECH FRONTIER', techHeading: 'Tech Frontier',
|
||
techSub: 'Emerging technologies and their application horizon in the steel industry',
|
||
techAll: 'All Technologies →',
|
||
horizon: 'Horizon',
|
||
},
|
||
}
|
||
|
||
export default function RadarTechSection() {
|
||
const { lang } = useLang()
|
||
const t = T[lang]
|
||
const signals = SIGNALS[lang]
|
||
const techs = TECHS[lang]
|
||
|
||
return (
|
||
<section dir={lang === 'fa' ? 'rtl' : 'ltr'} style={{ background: 'var(--paper-2)' }}>
|
||
<div className="max-w-7xl mx-auto px-12 max-md:px-5">
|
||
|
||
{/* ══ رادار آینده ══ */}
|
||
<div style={{ paddingTop: 64, paddingBottom: 56 }}>
|
||
<div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 32, flexWrap: 'wrap', gap: 12 }}>
|
||
<div>
|
||
<div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: 'var(--ink-4)', marginBottom: 6 }}>{t.radarOverline}</div>
|
||
<h2 style={{ fontSize: 'clamp(22px,2.5vw,32px)', fontWeight: 900, color: 'var(--ink)', letterSpacing: '-0.5px', marginBottom: 6 }}>{t.radarHeading}</h2>
|
||
<p style={{ fontSize: 13, color: 'var(--ink-4)' }}>{t.radarSub}</p>
|
||
</div>
|
||
<Link to="/radar" style={{ fontSize: 12, fontWeight: 700, color: 'var(--red)', textDecoration: 'none', whiteSpace: 'nowrap' }}>{t.radarAll}</Link>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-3 max-md:grid-cols-1" style={{ gap: 16 }}>
|
||
{signals.map((s, i) => (
|
||
<div
|
||
key={i}
|
||
style={{
|
||
background: '#fff', overflow: 'hidden',
|
||
boxShadow: '0 2px 12px rgba(0,0,0,0.07)',
|
||
display: 'flex', flexDirection: 'column',
|
||
transition: 'transform 0.2s, box-shadow 0.2s', cursor: 'pointer',
|
||
}}
|
||
onMouseEnter={e => { (e.currentTarget as HTMLDivElement).style.transform = 'translateY(-4px)'; (e.currentTarget as HTMLDivElement).style.boxShadow = '0 10px 30px rgba(0,0,0,0.12)' }}
|
||
onMouseLeave={e => { (e.currentTarget as HTMLDivElement).style.transform = 'translateY(0)'; (e.currentTarget as HTMLDivElement).style.boxShadow = '0 2px 12px rgba(0,0,0,0.07)' }}
|
||
>
|
||
{/* Image */}
|
||
<div style={{ position: 'relative', height: 160, overflow: 'hidden' }}>
|
||
<img src={s.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform 0.4s' }}
|
||
onMouseEnter={e => (e.currentTarget.style.transform = 'scale(1.06)')}
|
||
onMouseLeave={e => (e.currentTarget.style.transform = 'scale(1)')}
|
||
/>
|
||
<div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 60%)' }} />
|
||
{/* Level badge */}
|
||
<div style={{
|
||
position: 'absolute', bottom: 12,
|
||
right: lang === 'fa' ? 12 : 'auto', left: lang === 'en' ? 12 : 'auto',
|
||
display: 'flex', gap: 6, alignItems: 'center',
|
||
}}>
|
||
<span style={{ background: s.levelColor, color: '#fff', fontSize: 9, fontWeight: 700, padding: '2px 8px', letterSpacing: '1px' }}>{s.levelLabel}</span>
|
||
<span style={{ background: 'rgba(0,0,0,0.6)', color: '#fff', fontSize: 9, fontWeight: 700, padding: '2px 8px' }}>{s.tag}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div style={{ padding: '20px', flex: 1, display: 'flex', flexDirection: 'column', gap: 10, borderTop: `3px solid ${s.accentColor}` }}>
|
||
<h3 style={{ fontSize: 14, fontWeight: 800, color: 'var(--ink)', lineHeight: 1.5 }}>{s.title}</h3>
|
||
<p style={{ fontSize: 12, color: 'var(--ink-4)', lineHeight: 1.75, flex: 1 }}>{s.desc}</p>
|
||
<div style={{ fontSize: 10, color: 'var(--ink-5)', fontWeight: 600 }}>{s.date}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* divider */}
|
||
<div style={{ height: 1, background: 'var(--rule-thin)' }} />
|
||
|
||
{/* ══ مرز فناوری ══ */}
|
||
<div style={{ paddingTop: 56, paddingBottom: 64 }}>
|
||
<div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 32, flexWrap: 'wrap', gap: 12 }}>
|
||
<div>
|
||
<div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: 'var(--ink-4)', marginBottom: 6 }}>{t.techOverline}</div>
|
||
<h2 style={{ fontSize: 'clamp(22px,2.5vw,32px)', fontWeight: 900, color: 'var(--ink)', letterSpacing: '-0.5px', marginBottom: 6 }}>{t.techHeading}</h2>
|
||
<p style={{ fontSize: 13, color: 'var(--ink-4)' }}>{t.techSub}</p>
|
||
</div>
|
||
<Link to="/technology" style={{ fontSize: 12, fontWeight: 700, color: 'var(--red)', textDecoration: 'none', whiteSpace: 'nowrap' }}>{t.techAll}</Link>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-3 max-md:grid-cols-1" style={{ gap: 16 }}>
|
||
{techs.map((tech, i) => (
|
||
<div
|
||
key={i}
|
||
style={{
|
||
background: '#fff', overflow: 'hidden',
|
||
boxShadow: '0 2px 12px rgba(0,0,0,0.07)',
|
||
display: 'flex', flexDirection: 'column',
|
||
transition: 'transform 0.2s, box-shadow 0.2s', cursor: 'pointer',
|
||
}}
|
||
onMouseEnter={e => { (e.currentTarget as HTMLDivElement).style.transform = 'translateY(-4px)'; (e.currentTarget as HTMLDivElement).style.boxShadow = '0 10px 30px rgba(0,0,0,0.12)' }}
|
||
onMouseLeave={e => { (e.currentTarget as HTMLDivElement).style.transform = 'translateY(0)'; (e.currentTarget as HTMLDivElement).style.boxShadow = '0 2px 12px rgba(0,0,0,0.07)' }}
|
||
>
|
||
{/* Image */}
|
||
<div style={{ position: 'relative', height: 160, overflow: 'hidden' }}>
|
||
<img src={tech.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform 0.4s' }}
|
||
onMouseEnter={e => (e.currentTarget.style.transform = 'scale(1.06)')}
|
||
onMouseLeave={e => (e.currentTarget.style.transform = 'scale(1)')}
|
||
/>
|
||
<div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)' }} />
|
||
<div style={{
|
||
position: 'absolute', bottom: 12,
|
||
right: lang === 'fa' ? 12 : 'auto', left: lang === 'en' ? 12 : 'auto',
|
||
}}>
|
||
<span style={{ background: tech.accentColor, color: '#fff', fontSize: 9, fontWeight: 700, padding: '2px 8px', letterSpacing: '1px', textTransform: 'uppercase' }}>{tech.tag}</span>
|
||
</div>
|
||
<div style={{
|
||
position: 'absolute', top: 12,
|
||
right: lang === 'fa' ? 12 : 'auto', left: lang === 'en' ? 12 : 'auto',
|
||
fontSize: 36, fontWeight: 900, color: 'rgba(255,255,255,0.25)', direction: 'ltr', lineHeight: 1,
|
||
}}>{tech.num}</div>
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div style={{ padding: '20px', flex: 1, display: 'flex', flexDirection: 'column', gap: 10, borderTop: `3px solid ${tech.accentColor}` }}>
|
||
<h3 style={{ fontSize: 14, fontWeight: 800, color: 'var(--ink)', lineHeight: 1.5 }}>{tech.title}</h3>
|
||
<p style={{ fontSize: 12, color: 'var(--ink-4)', lineHeight: 1.75, flex: 1 }}>{tech.desc}</p>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 'auto' }}>
|
||
<span style={{ fontSize: 9, fontWeight: 700, color: 'var(--ink-5)', letterSpacing: '1px', textTransform: 'uppercase' }}>{t.horizon}:</span>
|
||
<span style={{ fontSize: 11, fontWeight: 700, color: tech.accentColor }}>{tech.horizon}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|