import { motion } from 'framer-motion'
import { useLang } from '@/context/LangContext'

const SIGNALS = {
  fa: [
    { tag: 'چین',      title: 'صادرات فولاد چین به بالاترین رکورد ۸ ساله رسید',          date: 'بهمن ۱۴۰۳', level: 'critical' },
    { tag: 'اروپا',    title: 'CBAM اروپا از فروردین ۱۴۰۴ اجرایی می‌شود',                date: 'دی ۱۴۰۳',   level: 'high'     },
    { tag: 'هند',      title: 'هند ظرفیت تولید فولاد خود را تا ۲۰۳۰ دو برابر می‌کند',   date: 'آذر ۱۴۰۳',  level: 'medium'   },
    { tag: 'سنگ‌آهن',  title: 'قیمت سنگ‌آهن دالیان ۱۸٪ جهش کرد',                        date: 'بهمن ۱۴۰۳', level: 'high'     },
    { tag: 'انرژی',    title: 'هزینه برق صنایع فولاد ۳۲٪ افزایش یافت',                   date: 'دی ۱۴۰۳',   level: 'high'     },
    { tag: 'فناوری',   title: 'اولین کارخانه فولاد هیدروژنی اروپا وارد مرحله تولید شد',  date: 'آذر ۱۴۰۳',  level: 'medium'   },
  ],
  en: [
    { tag: 'China',      title: "China's Steel Exports Hit an 8-Year Record High",           date: 'Feb 2025', level: 'critical' },
    { tag: 'Europe',     title: "Europe's CBAM Mechanism Takes Effect from Spring 2025",     date: 'Jan 2025', level: 'high'     },
    { tag: 'India',      title: 'India to Double Steel Production Capacity by 2030',         date: 'Dec 2024', level: 'medium'   },
    { tag: 'Iron Ore',   title: 'Dalian Iron Ore Price Surges 18%',                          date: 'Feb 2025', level: 'high'     },
    { tag: 'Energy',     title: 'Steel Industry Electricity Costs Rise 32%',                 date: 'Jan 2025', level: 'high'     },
    { tag: 'Technology', title: "Europe's First Hydrogen Steel Plant Enters Production",     date: 'Dec 2024', level: 'medium'   },
  ],
}

const LEVEL_COLOR: Record<string, string> = {
  critical: '#7f1d1d',
  high:     'var(--red)',
  medium:   '#b45309',
}

const LEVEL_LABEL = {
  fa: { critical: 'بحرانی', high: 'بالا', medium: 'متوسط' },
  en: { critical: 'Critical', high: 'High', medium: 'Medium' },
}

const T = {
  fa: { overline: 'FUTURE RADAR', heading: 'رادار آینده', sub: 'رصد سیگنال‌های جهانی و منطقه‌ای با اثر مستقیم بر صنعت فولاد ایران' },
  en: { overline: 'FUTURE RADAR', heading: 'Future Radar', sub: 'Monitoring global and regional signals with direct impact on Iran\'s steel industry' },
}

export default function Radar() {
  const { lang } = useLang()
  const t = T[lang]
  const signals = SIGNALS[lang]
  const levelLabel = LEVEL_LABEL[lang]

  return (
    <div dir={lang === 'fa' ? 'rtl' : 'ltr'} style={{ background: 'var(--paper)', minHeight: '80vh' }}>
      <div style={{ borderBottom: '3px solid var(--ink)' }}>
        <div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 40 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
            <div style={{ width: 36, height: 2, background: 'var(--red)' }} />
            <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: 'var(--ink-4)' }}>{t.overline}</span>
          </div>
          <h1 style={{ fontSize: 'clamp(28px,4vw,52px)', fontWeight: 900, letterSpacing: '-1.5px', color: 'var(--ink)', marginBottom: 12 }}>{t.heading}</h1>
          <p style={{ fontSize: 15, color: 'var(--ink-3)', lineHeight: 1.7, maxWidth: 560 }}>{t.sub}</p>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 64 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 1, background: 'var(--rule-thin)' }}>
          {signals.map((s, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 12 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.4, delay: i * 0.06 }}
              style={{ background: 'var(--paper)', padding: '28px 24px', position: 'relative' }}
            >
              <div style={{ position: 'absolute', top: 0, right: 0, left: 0, height: 3, background: LEVEL_COLOR[s.level] }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
                <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '1.5px', background: 'var(--ink)', color: 'var(--paper)', padding: '3px 8px' }}>{s.tag}</span>
                <span style={{ fontSize: 9, fontWeight: 700, color: LEVEL_COLOR[s.level], letterSpacing: '1px' }}>{levelLabel[s.level as keyof typeof levelLabel]}</span>
              </div>
              <h3 style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink)', lineHeight: 1.55, marginBottom: 16 }}>{s.title}</h3>
              <div style={{ fontSize: 10, color: 'var(--ink-5)', fontWeight: 600 }}>{s.date}</div>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  )
}