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>
  )
}