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

/* ─── Regulatory / ESG signals ─────────────────────────── */
const SIGNALS = {
  fa: [
    { tag: 'اروپا',       title: 'CBAM اروپا: مالیات کربن بر واردات فولاد از فروردین ۱۴۰۴ اجرایی شد',                    date: 'فروردین ۱۴۰۴', level: 'critical' },
    { tag: 'ایران',       title: 'الزام گزارش‌دهی ESG برای شرکت‌های فولادی پذیرفته‌شده در بورس اوراق بهادار',               date: 'اسفند ۱۴۰۳',  level: 'high'     },
    { tag: 'جهانی',       title: 'سازمان بین‌المللی فولاد (WSA) هدف کاهش ۳۰٪ کربن تا ۲۰۳۰ را تصویب کرد',                  date: 'بهمن ۱۴۰۳',  level: 'high'     },
    { tag: 'آب',          title: 'بحران آب در خوزستان: محدودیت‌های جدید برای فولادسازی در فصل گرما',                        date: 'دی ۱۴۰۳',    level: 'critical' },
    { tag: 'انرژی',       title: 'سهمیه برق صنایع بزرگ فولادی ۱۵٪ کاهش یافت — فشار بر تولید در تابستان',                   date: 'آذر ۱۴۰۳',   level: 'high'     },
    { tag: 'هند',         title: 'هند استاندارد انتشار CO₂ فولادسازی را به ۱.۹ تن/تن تعیین کرد',                            date: 'آبان ۱۴۰۳',  level: 'medium'   },
    { tag: 'چین',         title: 'پکن اجرای ETS (بازار کربن) را به صنعت فولاد تعمیم داد',                                   date: 'مهر ۱۴۰۳',   level: 'high'     },
    { tag: 'ژاپن',        title: 'Nippon Steel تعهد خنثی‌سازی کربن ۲۰۵۰ را با برنامه اجرایی ۸ مرحله‌ای منتشر کرد',          date: 'شهریور ۱۴۰۳', level: 'medium'  },
    { tag: 'سرمایه‌گذاری', title: 'صندوق‌های بزرگ سرمایه‌گذاری جهانی: خروج از فولادسازان بدون برنامه تغییر اقلیم تا ۲۰۲۶', date: 'مرداد ۱۴۰۳',  level: 'high'    },
    { tag: 'امارات',      title: 'امارات صندوق ۵ میلیارد دلاری برای فولاد سبز منطقه MENA راه‌اندازی کرد',                   date: 'تیر ۱۴۰۳',   level: 'medium'   },
    { tag: 'آمریکا',      title: 'IRA آمریکا: یارانه ۳ میلیارد دلاری برای فولاد کم‌کربن — فشار رقابتی بر تولیدکنندگان',    date: 'خرداد ۱۴۰۳',  level: 'high'    },
    { tag: 'ISO',         title: 'استاندارد ISO 14064 برای سنجش کربن زنجیره فولاد اجباری می‌شود',                            date: 'اردیبهشت ۱۴۰۳', level: 'medium' },
  ],
  en: [
    { tag: 'Europe',      title: "EU CBAM: Carbon tax on steel imports took effect Spring 2025",                              date: 'Apr 2025',  level: 'critical' },
    { tag: 'Iran',        title: 'ESG reporting mandatory for steel companies listed on Tehran Stock Exchange',                date: 'Mar 2025',  level: 'high'     },
    { tag: 'Global',      title: 'World Steel Association (WSA) approves 30% carbon reduction target by 2030',                date: 'Feb 2025',  level: 'high'     },
    { tag: 'Water',       title: 'Khuzestan water crisis: new restrictions on steelmaking during summer months',              date: 'Jan 2025',  level: 'critical' },
    { tag: 'Energy',      title: "Heavy steel industry electricity quota cut 15% — summer production under pressure",         date: 'Dec 2024',  level: 'high'     },
    { tag: 'India',       title: 'India sets CO₂ emission standard for steelmaking at 1.9 t/t',                              date: 'Nov 2024',  level: 'medium'   },
    { tag: 'China',       title: 'Beijing extends ETS (carbon market) to cover the steel industry',                          date: 'Oct 2024',  level: 'high'     },
    { tag: 'Japan',       title: 'Nippon Steel publishes 8-phase 2050 carbon neutrality roadmap',                            date: 'Sep 2024',  level: 'medium'   },
    { tag: 'Investment',  title: 'Global funds: divesting from steelmakers without climate transition plans by 2026',         date: 'Aug 2024',  level: 'high'     },
    { tag: 'UAE',         title: 'UAE launches $5B green steel fund for the MENA region',                                    date: 'Jul 2024',  level: 'medium'   },
    { tag: 'USA',         title: "US IRA: $3B subsidy for low-carbon steel — competitive pressure on global producers",       date: 'Jun 2024',  level: 'high'     },
    { tag: 'ISO',         title: 'ISO 14064 carbon measurement standard becomes mandatory for steel supply chains',           date: 'May 2024',  level: 'medium'   },
  ],
}

/* ─── Green initiatives / roadmap items ────────────────── */
const INITIATIVES = {
  fa: [
    { num: '۰۱', tag: 'کربن‌زدایی',    title: 'کاهش شدت کربن از ۱.۸ به ۱.۲ تن CO₂ / تن فولاد',       summary: 'هدف‌گذاری برای ارتقای راندمان انرژی کوره‌های EAF و بهینه‌سازی mix شارژ — قابل دستیابی بدون سرمایه‌گذاری کلان در فناوری جدید' },
    { num: '۰۲', tag: 'انرژی تجدیدپذیر', title: 'تأمین ۴۰٪ برق از منابع تجدیدپذیر تا ۱۴۰۶',           summary: 'نصب ۸۰۰ مگاوات پنل خورشیدی در سایت‌های کارخانه‌های بزرگ — کاهش وابستگی به شبکه برق ناپایدار و صرفه‌جویی سالانه ۴۵۰ میلیون دلار' },
    { num: '۰۳', tag: 'بازیافت',        title: 'افزایش نرخ بازیافت ضایعات داخلی از ۲۲٪ به ۳۵٪',        summary: 'جمع‌آوری سازمان‌یافته ضایعات فولادی از صنایع پایین‌دست — کاهش نیاز به سنگ‌آهن خام و صرفه‌جویی ارزی معادل ۷۰۰ میلیون دلار در سال' },
    { num: '۰۴', tag: 'آب',            title: 'چرخش آب صنعتی — کاهش مصرف از ۶ به ۳.۵ مترمکعب/تن',     summary: 'استقرار سیستم‌های closed-loop cooling در ۱۲ کارخانه بزرگ — پاسخ به بحران آب و رعایت استانداردهای محیط‌زیستی جدید' },
    { num: '۰۵', tag: 'گواهینامه',      title: 'اخذ گواهینامه ResponsibleSteel برای صادرات به اروپا',   summary: 'تطابق با ۱۲ معیار اجتماعی و زیست‌محیطی استاندارد ResponsibleSteel — شرط لازم برای ورود به زنجیره تأمین خودروسازی اروپا' },
    { num: '۰۶', tag: 'CO₂',           title: 'برنامه CCS در کارخانه‌های DRI — ذخیره ۲ میلیون تن CO₂',  summary: 'همکاری با شرکای اروپایی برای استقرار فناوری Carbon Capture در کارخانه‌های احیای مستقیم — جذب تأمین‌مالی سبز بین‌المللی' },
    { num: '۰۷', tag: 'زنجیره تأمین',  title: 'ردیابی کربن در کل زنجیره: از معدن تا محصول نهایی',       summary: 'استقرار سیستم digital product passport — ثبت شدت کربن هر محموله از سنگ‌آهن تا نورد نهایی، قابل ارائه به مشتریان صادراتی' },
    { num: '۰۸', tag: 'هیدروژن',       title: 'پایلوت DRI-H₂ در مجتمع فولاد خوزستان — ۵۰۰ هزار تن/سال', summary: 'همکاری با شرکای آلمانی برای آزمایش احیا با هیدروژن — گام اول بومی‌سازی فناوری پیش از توسعه در مقیاس صنعتی تا ۱۴۱۰' },
    { num: '۰۹', tag: 'سرباره',        title: 'استفاده ۱۰۰٪ از سرباره کوره در صنایع ساختمانی',           summary: 'بازاریابی سرباره به‌عنوان جایگزین سیمان پرتلند — کاهش هزینه دفع پسماند و ایجاد جریان درآمدی ۱۲۰ میلیون دلار در سال' },
    { num: '۱۰', tag: 'اجتماعی',       title: 'برنامه آموزش و ارتقای مهارت ۱۵٪ نیروی کار برای انتقال سبز', summary: 'سرمایه‌گذاری ۸۰ میلیون دلار در آموزش فناوری‌های سبز — پیشگیری از بیکاری ناشی از تحول صنعتی و رعایت معیار S در ESG' },
  ],
  en: [
    { num: '01', tag: 'Decarbonization', title: 'Reduce carbon intensity from 1.8 to 1.2 t CO₂/t steel',       summary: 'Targeting EAF energy efficiency upgrades and charge mix optimization — achievable without massive capital investment in new technology' },
    { num: '02', tag: 'Renewables',      title: 'Source 40% of electricity from renewables by 2027',              summary: 'Install 800 MW of solar panels at major plant sites — reduce dependence on unstable grid and save $450M annually' },
    { num: '03', tag: 'Recycling',       title: 'Increase domestic scrap recycling rate from 22% to 35%',         summary: 'Organized collection of steel scrap from downstream industries — reduce iron ore dependency and save $700M in foreign exchange annually' },
    { num: '04', tag: 'Water',           title: 'Industrial water recycling — cut usage from 6 to 3.5 m³/t',      summary: 'Deploy closed-loop cooling systems at 12 major plants — respond to water crisis and meet new environmental standards' },
    { num: '05', tag: 'Certification',   title: 'ResponsibleSteel certification for European export',              summary: 'Compliance with 12 social and environmental criteria of ResponsibleSteel — prerequisite for entry into European automotive supply chains' },
    { num: '06', tag: 'CO₂',            title: 'CCS program at DRI plants — store 2 million tons of CO₂',        summary: 'Collaborate with European partners to deploy Carbon Capture at direct reduction plants — attract international green financing' },
    { num: '07', tag: 'Supply Chain',    title: 'Carbon tracking across full chain: from mine to finished product', summary: 'Deploy digital product passport — record carbon intensity of each shipment from iron ore to final rolling, presentable to export customers' },
    { num: '08', tag: 'Hydrogen',        title: 'DRI-H₂ pilot at Khuzestan Steel — 500k t/year',                  summary: 'Partnership with German firms to test hydrogen-based reduction — first step toward localizing technology before industrial-scale rollout by 2031' },
    { num: '09', tag: 'Slag',           title: '100% utilization of furnace slag in construction industry',        summary: 'Market slag as a Portland cement substitute — reduce waste disposal cost and create $120M annual revenue stream' },
    { num: '10', tag: 'Social',          title: 'Train 15% of workforce for green transition roles',               summary: 'Invest $80M in green technology training — prevent unemployment from industrial transition and fulfill the S criterion in ESG' },
  ],
}

/* ─── KPI strip ─────────────────────────────────────────── */
const KPIS = {
  fa: [
    { value: '۱.۷۸', unit: 'تن CO₂ / تن فولاد', label: 'شدت کربن میانگین صنعت', delta: '-۶٪ نسبت به ۱۴۰۲' },
    { value: '۲۲٪',  unit: '',                    label: 'نرخ بازیافت ضایعات داخلی', delta: 'هدف ۳۵٪ تا ۱۴۰۶' },
    { value: '۴.۸',  unit: 'مترمکعب / تن',        label: 'مصرف آب صنعتی',           delta: '-۱۲٪ در سال' },
    { value: '۱۲٪',  unit: '',                    label: 'سهم برق تجدیدپذیر',        delta: 'هدف ۴۰٪ تا ۱۴۰۶' },
    { value: '۳',    unit: 'کارخانه',              label: 'دارای گواهینامه ISO 50001', delta: 'در حال افزایش' },
  ],
  en: [
    { value: '1.78', unit: 't CO₂ / t steel', label: 'Industry average carbon intensity', delta: '-6% vs 2023' },
    { value: '22%',  unit: '',                 label: 'Domestic scrap recycling rate',      delta: 'Target 35% by 2027' },
    { value: '4.8',  unit: 'm³ / t',           label: 'Industrial water consumption',       delta: '-12% per year' },
    { value: '12%',  unit: '',                 label: 'Renewable electricity share',         delta: 'Target 40% by 2027' },
    { value: '3',    unit: 'plants',           label: 'ISO 50001 certified facilities',      delta: 'Expanding' },
  ],
}

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:    'SUSTAINABILITY & GREEN STEEL',
    heading:     'پایداری و فولاد سبز',
    sub:         'رصد الزامات ESG، مقررات کربنی جهانی و نقشه‌راه گذار سبز صنعت فولاد ایران',
    kpiHeading:  'شاخص‌های کلیدی پایداری صنعت فولاد ایران',
    sigHeading:  'رویدادها و مقررات ESG',
    initHeading: 'نقشه‌راه گذار سبز — اقدامات اولویت‌دار',
  },
  en: {
    overline:    'SUSTAINABILITY & GREEN STEEL',
    heading:     'Sustainability & Green Steel',
    sub:         'Monitoring ESG requirements, global carbon regulations, and Iran\'s steel industry green transition roadmap',
    kpiHeading:  'Key Sustainability KPIs — Iran Steel Industry',
    sigHeading:  'ESG Events & Regulations',
    initHeading: 'Green Transition Roadmap — Priority Actions',
  },
}

export default function Sustainability() {
  const { lang } = useLang()
  const t = T[lang]
  const signals = SIGNALS[lang]
  const initiatives = INITIATIVES[lang]
  const kpis = KPIS[lang]
  const levelLabel = LEVEL_LABEL[lang]

  return (
    <div dir={lang === 'fa' ? 'rtl' : 'ltr'} style={{ background: 'var(--paper)', minHeight: '80vh' }}>

      {/* ── Hero ── */}
      <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>

      {/* ── KPI Strip ── */}
      <div style={{ borderBottom: '1px solid var(--rule-thin)', background: 'var(--paper-2)' }}>
        <div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 36, paddingBottom: 36 }}>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px', color: 'var(--ink-4)', marginBottom: 20, textTransform: 'uppercase' }}>{t.kpiHeading}</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 24 }}>
            {kpis.map((k, i) => (
              <motion.div key={i} initial={{ opacity: 0, y: 8 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.07 }}>
                <div style={{ fontSize: 'clamp(26px,3vw,38px)', fontWeight: 900, letterSpacing: '-1px', color: 'var(--ink)', lineHeight: 1 }}>
                  {k.value}<span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-3)', marginRight: 4, marginLeft: 4 }}>{k.unit}</span>
                </div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 6, lineHeight: 1.5 }}>{k.label}</div>
                <div style={{ fontSize: 10, color: 'var(--red)', fontWeight: 700, marginTop: 4 }}>{k.delta}</div>
              </motion.div>
            ))}
          </div>
        </div>
      </div>

      {/* ── ESG Signals ── */}
      <div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
          <div style={{ width: 36, height: 2, background: 'var(--red)' }} />
          <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: 'var(--ink-4)' }}>{t.sigHeading}</span>
        </div>
        <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.05 }}
              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>

      {/* ── Roadmap Initiatives ── */}
      <div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 64 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
          <div style={{ width: 36, height: 2, background: 'var(--red)' }} />
          <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: 'var(--ink-4)' }}>{t.initHeading}</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 1, background: 'var(--rule-thin)' }}>
          {initiatives.map((item, 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.05 }}
              style={{ background: 'var(--paper)', padding: '28px 24px', position: 'relative' }}
            >
              <div style={{ position: 'absolute', top: 0, right: 0, left: 0, height: 3, background: '#166534' }} />
              <div style={{ fontSize: 48, fontWeight: 900, letterSpacing: '-3px', color: 'rgba(26,23,18,0.06)', lineHeight: 1, marginBottom: 10, direction: 'ltr' }}>{item.num}</div>
              <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '1.5px', color: '#166534', marginBottom: 10, textTransform: 'uppercase' }}>{item.tag}</div>
              <h3 style={{ fontSize: 15, fontWeight: 800, color: 'var(--ink)', lineHeight: 1.45, marginBottom: 12 }}>{item.title}</h3>
              <p style={{ fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.7 }}>{item.summary}</p>
            </motion.div>
          ))}
        </div>
      </div>

    </div>
  )
}