import { useState } from 'react';
import { createPortal } from 'react-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { AnimatedRadialChart } from '@/components/ui/animated-radial-chart';
import { LiquidCard } from '@/components/ui/liquid-glass-card';
import GreenSteelTracker from './GreenSteelTracker';
import SteelPlantsGlobe from './SteelPlantsGlobe';

// converts ASCII digits in any string to Persian numerals
const faDigits = (s: string) => s.replace(/[0-9]/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[+d]);

// ─── CSS keyframes injected once ─────────────────────────────────────────────

const SCANNER_CSS = `
@keyframes scan {
  0%   { left: 0%; }
  100% { left: 100%; }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
`;

// ─── Data ────────────────────────────────────────────────────────────────────

type SignalDir = '↑' | '↓' | '→';

interface TrendRow {
  trend: string;
  signal: SignalDir;
  signalLabel: string;
  change: string;
  driver: string;
  importance: number;
  sparkData: number[]; // 5 values, normalised 0-100
  analysis: string;
  links: string[];
  history: string[];
}

const megaTrends: TrendRow[] = [
  {
    trend: 'هوش مصنوعی در فولادسازی',
    signal: '↑',
    signalLabel: 'صعودی',
    change: '+42٪ سرمایه‌گذاری',
    driver: 'اتوماسیون DRI و کنترل کیفی',
    importance: 94,
    sparkData: [55, 62, 71, 80, 94],
    analysis:
      'سرمایه‌گذاری جهانی در هوش مصنوعی فولادسازی از ۲۰۲۲ رشد شتابانی داشته. سیستم‌های بینایی ماشین در کنترل کیفی نورد، کاهش ضایعات ۱۵٪ را ثابت کرده‌اند.',
    links: ['worldsteel.org/AI-report', 'mckinsey.com/steel-AI-2025'],
    history: ['Q1 2025: +12٪', 'Q2 2025: +24٪', 'Q3 2025: +35٪', 'Q4 2025: +42٪'],
  },
  {
    trend: 'انرژی‌های تجدیدپذیر',
    signal: '↑',
    signalLabel: 'صعودی',
    change: '+28٪ ظرفیت',
    driver: 'هزینه برق EAF',
    importance: 88,
    sparkData: [48, 58, 67, 75, 88],
    analysis:
      'پیوند انرژی خورشیدی و بادی به EAF در اروپا و هند کاهش هزینه تولید فولاد را ممکن کرده. در ایران ظرفیت خورشیدی سه برابر شده.',
    links: ['iea.org/renewables-steel', 'irena.org/industry'],
    history: ['Q1 2025: +8٪', 'Q2 2025: +15٪', 'Q3 2025: +21٪', 'Q4 2025: +28٪'],
  },
  {
    trend: 'فولاد سبز (H₂-DRI)',
    signal: '↑',
    signalLabel: 'صعودی',
    change: '+65٪ پروژه جدید',
    driver: 'CBAM اروپا ژانویه ۲۰۲۶',
    importance: 91,
    sparkData: [30, 45, 60, 78, 91],
    analysis:
      'CBAM اروپا کربن‌زدایی را برای صادرکنندگان اجباری کرده. H2 Green Steel در سوئد اولین تولید تجاری را آغاز کرد. ایران فرصت ورود با گاز طبیعی دارد.',
    links: ['h2greensteel.com', 'ec.europa.eu/CBAM'],
    history: ['Q1 2025: +20٪', 'Q2 2025: +38٪', 'Q3 2025: +52٪', 'Q4 2025: +65٪'],
  },
  {
    trend: 'اقتصاد چرخشی',
    signal: '→',
    signalLabel: 'ثابت',
    change: '+8٪ بازیافت',
    driver: 'کمبود قراضه در آسیا',
    importance: 72,
    sparkData: [60, 63, 68, 70, 72],
    analysis:
      'رشد اقتصاد چرخشی محدود به عرضه قراضه شده. کمبود قراضه در آسیا قیمت را بالا نگه داشته. رصد بازارهای آفریقا برای منابع جدید توصیه می‌شود.',
    links: ['scrapmonitor.com', 'BIR-world-report-2025'],
    history: ['Q1 2025: +2٪', 'Q2 2025: +4٪', 'Q3 2025: +6٪', 'Q4 2025: +8٪'],
  },
  {
    trend: 'خودروهای الکتریکی',
    signal: '↑',
    signalLabel: 'صعودی',
    change: '+18٪ تقاضا EV',
    driver: 'AHSS و فولاد پیشرفته',
    importance: 76,
    sparkData: [42, 52, 61, 69, 76],
    analysis:
      'EV هر دستگاه به ۹۰۰ کیلو فولاد نیاز دارد. AHSS سبک‌تر و مقاوم‌تر تقاضای جدیدی برای فولاد پیشرفته ایجاد کرده که ایران می‌تواند وارد این بازار شود.',
    links: ['IEA-EV-Outlook-2025', 'worldautosteel.org'],
    history: ['Q1 2025: +5٪', 'Q2 2025: +10٪', 'Q3 2025: +14٪', 'Q4 2025: +18٪'],
  },
  {
    trend: 'ژئوپلیتیک عرضه',
    signal: '↓',
    signalLabel: 'نزولی',
    change: '۲۰۷ اقدام ضد‌دامپینگ',
    driver: 'صادرات ۱۱۷Mt چین',
    importance: 85,
    sparkData: [90, 88, 87, 86, 85],
    analysis:
      'صادرات بی‌سابقه چین فشار قیمتی را در تمام بازارها ایجاد کرده. اقدامات ضد‌دامپینگ در ۵۰ کشور فعال شده. ایران در موقعیت حساسی قرار دارد.',
    links: ['WTO-antidumping-monitor', 'steelorbis.com/china-exports'],
    history: ['Q1 2025: 150 اقدام', 'Q2 2025: 170', 'Q3 2025: 190', 'Q4 2025: 207'],
  },
];

interface GeoRow {
  flag: string;
  country: string;
  action: string;
  date: string;
  effect: string;
  policies: { policy: string; tariff: string; date: string; status: string }[];
}

const geoRows: GeoRow[] = [
  {
    flag: '🇺🇸',
    country: 'آمریکا',
    action: 'تعرفه ۵۰٪ Section 232',
    date: 'ژوئن ۲۰۲۵',
    effect: 'ممنوعیت صادرات رقبا',
    policies: [
      { policy: 'Section 232 — تعرفه فولاد', tariff: '۵۰٪', date: 'ژوئن ۲۰۲۵', status: 'فعال' },
      { policy: 'Section 301 — کالاهای چینی', tariff: '۲۵٪ تا ۱۰۰٪', date: '۲۰۱۸-ادامه', status: 'فعال' },
      { policy: 'Buy American Act', tariff: '-', date: '۲۰۲۱ اجرا', status: 'فعال' },
      { policy: 'IRA — تولید داخلی', tariff: 'یارانه', date: '۲۰۲۳', status: 'اجرا' },
    ],
  },
  {
    flag: '🇨🇳',
    country: 'چین',
    action: 'صادرات ۱۱۷ Mt (رکورد ۲۵ سال)',
    date: '۲۰۲۴',
    effect: 'فشار قیمتی جهانی',
    policies: [
      { policy: 'یارانه صادراتی فولاد', tariff: '۱۳٪ VAT برگشت', date: '۲۰۲۴', status: 'فعال' },
      { policy: 'هدف تولید ۱ میلیارد تن', tariff: '-', date: '۲۰۲۵', status: 'برنامه' },
      { policy: 'محدودیت واردات قراضه', tariff: '۵٪', date: '۲۰۲۳', status: 'فعال' },
      { policy: 'Belt & Road — صادرات', tariff: 'صفر', date: 'ادامه', status: 'فعال' },
    ],
  },
  {
    flag: '🇪🇺',
    country: 'اروپا',
    action: 'CBAM فعال (ژانویه ۲۰۲۶)',
    date: '۲۰۲۶',
    effect: 'کربن‌زدایی اجباری',
    policies: [
      { policy: 'CBAM — مکانیزم مرز کربن', tariff: 'بر اساس CO₂', date: 'ژانویه ۲۰۲۶', status: 'اجرا' },
      { policy: 'EU ETS — بازار کربن', tariff: '€۶۰-۸۰/tCO₂', date: 'ادامه', status: 'فعال' },
      { policy: 'سقف واردات فولاد', tariff: '۲۵٪', date: '۲۰۱۸-ادامه', status: 'فعال' },
      { policy: 'Green Deal صنعتی', tariff: 'یارانه', date: '۲۰۳۰ هدف', status: 'اجرا' },
    ],
  },
  {
    flag: '🇮🇳',
    country: 'هند',
    action: 'هدف ۳۰۰ Mt در ۲۰۳۰',
    date: '۲۰۲۵',
    effect: 'رقیب جدید در عرضه',
    policies: [
      { policy: 'تعرفه واردات فولاد', tariff: '۱۵٪', date: '۲۰۲۵', status: 'فعال' },
      { policy: 'National Steel Policy ۳۰۰Mt', tariff: '-', date: '۲۰۳۰ هدف', status: 'برنامه' },
      { policy: 'PLI — تولید پیشرفته', tariff: 'یارانه ۱۵٪', date: '۲۰۲۵', status: 'فعال' },
      { policy: 'ضد‌دامپینگ چین', tariff: '۱۲-۳۰٪', date: 'ژوئن ۲۰۲۵', status: 'فعال' },
    ],
  },
  {
    flag: '🇷🇺',
    country: 'روسیه',
    action: 'تحریم‌های صادراتی',
    date: '۲۰۲۴',
    effect: 'اختلال زنجیره قراضه',
    policies: [
      { policy: 'تحریم‌های G7 — فولاد', tariff: 'تحریم', date: '۲۰۲۲-ادامه', status: 'فعال' },
      { policy: 'صادرات به آسیا', tariff: 'تخفیف ۲۰٪', date: '۲۰۲۳', status: 'فعال' },
      { policy: 'محدودیت قراضه', tariff: '۵٪ صادرات', date: '۲۰۲۴', status: 'فعال' },
      { policy: 'همکاری ایران-روسیه', tariff: 'چانه‌زنی', date: '۲۰۲۵', status: 'مذاکره' },
    ],
  },
];

// ─── Tech Radar grid data ─────────────────────────────────────────────────────

type TechCategory = 'decarbonization' | 'digital' | 'process' | 'materials' | 'circular' | 'energy'
type TechHorizon = 'now' | 'pilot' | 'horizon'

interface Technology {
  id: string
  nameFa: string
  nameEn: string
  category: TechCategory
  readinessPct: number
  impactPct: number
  horizon: TechHorizon
  descFa: string
  caseStudyFa: string
  caseCompany: string
  sourceLabel: string
  sourceUrl: string
}

const TECH_CAT: Record<TechCategory, { fa: string; color: string }> = {
  decarbonization: { fa: 'کربن‌زدایی',  color: '#16a34a' },
  digital:         { fa: 'دیجیتال و AI', color: '#2563eb' },
  process:         { fa: 'فرایند نوین',  color: '#d97706' },
  materials:       { fa: 'مواد پیشرفته', color: '#7c3aed' },
  circular:        { fa: 'اقتصاد چرخشی', color: '#0891b2' },
  energy:          { fa: 'انرژی',        color: '#dc2626' },
}

const TECH_HORIZON: Record<TechHorizon, { fa: string; color: string }> = {
  now:     { fa: 'تجاری / قابل اجرا', color: '#16a34a' },
  pilot:   { fa: 'در حال پایلوت',     color: '#f59e0b' },
  horizon: { fa: 'افق دور',           color: '#6366f1' },
}

const technologies: Technology[] = [
  { id: 'h2-dri-hybrit', nameFa: 'آهن احیای مستقیم با هیدروژن — HYBRIT', nameEn: 'Hydrogen DRI (H2-DRI)', category: 'decarbonization', readinessPct: 55, impactPct: 95, horizon: 'pilot', descFa: 'جایگزینی کک و زغال‌سنگ در کوره احیای مستقیم با هیدروژن سبز؛ تنها محصول جانبی بخار آب است.', caseStudyFa: 'کنسرسیوم HYBRIT (SSAB، LKAB و Vattenfall) سوئد بیش از ۵٬۰۰۰ تن آهن با هیدروژن تولید کرد و فوریه ۲۰۲۵ ذخیره‌سازی بزرگ‌مقیاس هیدروژن بدون فسیل را اثبات کرد؛ کارخانه صنعتی ۱.۳۵ Mt/سال در Gällivare در دست برنامه‌ریزی است.', caseCompany: 'HYBRIT (SSAB / LKAB / Vattenfall)', sourceLabel: 'SSAB News', sourceUrl: 'https://www.ssab.com/en/news/2025/02/hybrit-largescale-storage-of-fossilfree-hydrogen-gas-successfully-proven' },
  { id: 'tkh2steel', nameFa: 'کارخانه DRI آماده هیدروژن — tkH2Steel', nameEn: 'Hydrogen-ready DRI (tkH2Steel)', category: 'decarbonization', readinessPct: 50, impactPct: 90, horizon: 'pilot', descFa: 'بازسازی واحد یکپارچه با نصب کارخانه DRI آماده هیدروژن و دو کوره ذوب برای حذف کک از مسیر تولید.', caseStudyFa: 'تیسن‌کروپ در دویسبورگ آلمان واحد DRI با ظرفیت ۲.۵ Mt/سال را با ~۲ میلیارد یورو بودجه دولتی می‌سازد؛ تکمیل تا ۲۰۲۷ و کاهش تا ۳.۵ Mt CO₂ در سال (پیمانکار: SMS group).', caseCompany: 'thyssenkrupp Steel', sourceLabel: 'thyssenkrupp', sourceUrl: 'https://www.thyssenkrupp.com/en/newsroom/press-releases/pressdetailpage/thyssenkrupp-steel-awards-a-contract-worth-billions-of-euros-to-sms-group-for-a-direct-reduction-plant--one-of-the-worlds-largest-industrial-decarbonization-projects-gets-underway-163184' },
  { id: 'green-h2-stegra', nameFa: 'فولاد سبز یکپارچه نوساز — Stegra', nameEn: 'Greenfield Green-H2 Steel Mill', category: 'decarbonization', readinessPct: 60, impactPct: 95, horizon: 'pilot', descFa: 'نخستین کارخانه فولاد سبز بزرگ‌مقیاس کاملاً نوساز با الکترولایزر داخلی و مسیر DRI+EAF با وعده تا ۹۵٪ کاهش انتشار.', caseStudyFa: 'Stegra در Boden سوئد با ۷۰۰ مگاوات الکترولایزر، ظرفیت ۲.۵ Mt/سال و تأمین مالی ~۶.۵ میلیارد یورو (شامل ۱.۴ میلیارد یورو ۲۰۲۵ به رهبری خانواده Wallenberg) برای تولید از ۲۰۲۶.', caseCompany: 'Stegra (H2 Green Steel)', sourceLabel: 'Canary Media', sourceUrl: 'https://www.canarymedia.com/articles/green-steel/stegra-funding-complete-mill' },
  { id: 'moe-boston-metal', nameFa: 'الکترولیز اکسید مذاب (MOE)', nameEn: 'Molten Oxide Electrolysis', category: 'decarbonization', readinessPct: 35, impactPct: 90, horizon: 'pilot', descFa: 'عبور جریان برق از حمام اکسید مذاب در ~۱۶۰۰°C با آندهای بی‌اثر؛ تولید آهن مایع و اکسیژن بدون CO₂، هیدروژن یا زغال.', caseStudyFa: 'Boston Metal در ماساچوست آمریکا مارس ۲۰۲۵ نخستین سلول صنعتی MOE چندآندی را راه‌اندازی کرد؛ مجموع سرمایه >۵۰۰ میلیون دلار (شامل دور ۷۵ میلیون دلاری با مشارکت Tata Steel)؛ کارخانه نمایشی ۲۰۲۶.', caseCompany: 'Boston Metal', sourceLabel: 'Boston Metal', sourceUrl: 'https://www.bostonmetal.com/news/boston-metal-celebrates-historic-commissioning-run-of-moe-green-steel-cell/' },
  { id: 'electra-electrowinning', nameFa: 'الکترولیز آهن دمای پایین (Electrowinning)', nameEn: 'Low-Temperature Iron Electrolysis', category: 'decarbonization', readinessPct: 30, impactPct: 85, horizon: 'pilot', descFa: 'پالایش الکتروشیمیایی سنگ‌آهن به آهن خالص در ~۶۰°C با برق تجدیدپذیر و سنگ‌های کم‌عیار؛ آهن حاصل به EAF استاندارد می‌رود.', caseStudyFa: 'استارتاپ Electra در کلرادو آمریکا کارخانه نمایشی تا ۵۰۰ تن آهن کم‌کربن در سال می‌سازد؛ ۲۰۲۵ مبلغ ۱۸۶ میلیون دلار جذب کرد و قرارداد خرید با Meta، Nucor و Toyota Tsusho امضا کرد.', caseCompany: 'Electra', sourceLabel: 'Canary Media', sourceUrl: 'https://www.canarymedia.com/articles/green-steel/electra-clean-iron-investment-electrowinning' },
  { id: 'hpsr-voestalpine', nameFa: 'احیای ذوبی پلاسمای هیدروژنی (HPSR)', nameEn: 'Hydrogen Plasma Smelting Reduction', category: 'process', readinessPct: 20, impactPct: 88, horizon: 'horizon', descFa: 'پلاسمای هیدروژنی هم‌زمان سنگ‌آهن را احیا و در یک مرحله EAF DC به فولاد خام ذوب می‌کند؛ تنها محصول جانبی بخار آب.', caseStudyFa: 'voestalpine در Donawitz اتریش از ۲۰۲۱ تنها فولادساز جهان است که روی پلاسمای هیدروژنی تحقیق می‌کند؛ پروژه SuSteel هدف ارتقا به ۲۰۰ کیلوگرم سنگ‌آهن در ساعت را دنبال می‌کند (نتایج فوریه ۲۰۲۵).', caseCompany: 'voestalpine SuSteel', sourceLabel: 'voestalpine', sourceUrl: 'https://www.voestalpine.com/group/en/media/press-releases/2022-04-27-voestalpine-researching-into-hydrogen-plasma-for-green-steel-production-in-an-international-showcase-project/' },
  { id: 'hyrex-posco', nameFa: 'احیای هیدروژنی بستر سیال (HyREX)', nameEn: 'Hydrogen Fluidized-Bed Reduction', category: 'process', readinessPct: 40, impactPct: 85, horizon: 'pilot', descFa: 'راکتورهای بستر سیال با نرمه سنگ‌آهن و هیدروژن، DRI تولید و سپس در کوره ذوب الکتریکی ذوب می‌کنند؛ برآمده از فرایند FINEX پوسکو.', caseStudyFa: 'POSCO در Pohang کره جنوبی کارخانه نمایشی HyREX با ظرفیت ۳۰۰٬۰۰۰ تن/سال را با Primetals طراحی می‌کند (هدف ۲۰۲۸) و اکتبر ۲۰۲۵ تفاهم‌نامه‌ای با BHP امضا کرد.', caseCompany: 'POSCO', sourceLabel: 'POSCO Newsroom', sourceUrl: 'https://newsroom.posco.com/en/from-ccus-to-hyrex-the-full-lineup-of-posco-groups-decarbonization-strategies-for-a-sustainable-steel-industry/' },
  { id: 'ccu-steelanol', nameFa: 'تبدیل گازهای فولاد به اتانول (CCU)', nameEn: 'Steel Off-gas to Ethanol', category: 'circular', readinessPct: 70, impactPct: 55, horizon: 'now', descFa: 'گازهای پرکربن کوره بلند به‌جای سوزانده‌شدن، با تخمیر زیستی (LanzaTech) به اتانول تبدیل می‌شوند.', caseStudyFa: 'کارخانه Steelanol آرسلورمیتال در Ghent بلژیک با LanzaTech و سرمایه ۲۰۰ میلیون یورو، ۸۰ میلیون لیتر اتانول در سال تولید و ~۱۲۵٬۰۰۰ تن CO₂ در سال کاهش می‌دهد (نخستین نمونه‌ها ژوئن ۲۰۲۳).', caseCompany: 'ArcelorMittal (Steelanol)', sourceLabel: 'LanzaTech', sourceUrl: 'https://lanzatech.com/worlds-leading-steel-company-arcelormittal-and-lanzatech-announce-first-ethanol-samples-from-commercial-flagship-carbon-capture-and-utilisation-facility-in-ghent-belgium/' },
  { id: 'hisarna-smelting', nameFa: 'احیای ذوبی بدون کک (HIsarna)', nameEn: 'HIsarna Smelting Reduction', category: 'process', readinessPct: 35, impactPct: 75, horizon: 'pilot', descFa: 'ذوب حمامی که نرمه سنگ و زغال را مستقیماً تزریق می‌کند و با حذف کک‌سازی و سینتر، جریان غلیظ CO₂ آماده ذخیره‌سازی تولید می‌کند.', caseStudyFa: 'کارخانه آزمایشی HIsarna شرکت Tata Steel در IJmuiden هلند (۲۰۱۰، یکپارچه ۲۰۱۸) روزانه ~۸ تن چدن مذاب تولید می‌کند.', caseCompany: 'Tata Steel', sourceLabel: 'Global Energy Monitor', sourceUrl: 'https://www.gem.wiki/HIsarna_process' },
  { id: 'igar-topgas', nameFa: 'بازچرخانی گاز بالای کوره با پلاسما (IGAR)', nameEn: 'Top Gas Recycling (IGAR)', category: 'decarbonization', readinessPct: 30, impactPct: 60, horizon: 'pilot', descFa: 'CO₂ گاز بالای کوره بلند جذب و با مشعل پلاسما به گاز سنتز احیاکننده تبدیل و دوباره تزریق می‌شود تا کربن فسیلی تازه کاهش یابد.', caseStudyFa: 'پروژه IGAR آرسلورمیتال در Dunkirk فرانسه با ~۲۰ میلیون یورو و حمایت ADEME فرانسه برای ساخت دموی مشعل پلاسما اجرا می‌شود.', caseCompany: 'ArcelorMittal (IGAR)', sourceLabel: 'Eurometal', sourceUrl: 'https://eurometal.net/arcelormittal-demonstrates-carbon-capture-technology-at-dunkirk/' },
  { id: 'biochar-pci', nameFa: 'تزریق زیست‌زغال (Bio-PCI)', nameEn: 'Biochar / Charcoal Injection', category: 'circular', readinessPct: 55, impactPct: 45, horizon: 'now', descFa: 'زیست‌زغال پودرشده جایگزین تجدیدپذیر زغال پودری در تویرهای کوره بلند؛ جایگزینی ۲۰ تا ۲۵٪ با پتانسیل کاهش تا ~۲۸٪ CO₂.', caseStudyFa: 'برزیل بزرگ‌ترین تولیدکننده زیست‌زغال چوبی جهان است و تولید تجاری چدن در کوره‌های کوچک مبتنی بر زغال چوب را اجرا می‌کند؛ برزیل، هند، چین و آمریکا بهترین موقعیت Bio-PCI را دارند.', caseCompany: 'صنعت چدن برزیل', sourceLabel: 'Fastmarkets', sourceUrl: 'https://www.fastmarkets.com/insights/brazil-at-steel-decarbonization-crossroads-charcoal-gas-short-term-options/' },
  { id: 'tecnored-green-pig-iron', nameFa: 'چدن سبز بدون کک با زیست‌توده (Tecnored)', nameEn: 'Coke-free Green Pig Iron', category: 'process', readinessPct: 45, impactPct: 70, horizon: 'pilot', descFa: 'آهن‌سازی بدون کک و سینتر با بریکت‌های خوداحیاشونده و زیست‌توده؛ ادعای تا ۱۰۰٪ کاهش CO₂ و ۱۰ تا ۱۵٪ هزینه کمتر.', caseStudyFa: 'Vale نخستین کارخانه تجاری Tecnored را در Marabá برزیل با ~۳۴۵ میلیون دلار و ظرفیت اولیه ۲۵۰٬۰۰۰ تن چدن سبز در سال (قابل گسترش به ۵۰۰٬۰۰۰ تن) می‌سازد.', caseCompany: 'Vale (Tecnored)', sourceLabel: 'Mining.com', sourceUrl: 'https://www.mining.com/vale-to-build-345-million-green-pig-iron-plant-in-brazil/' },
  { id: 'digital-twin', nameFa: 'دوقلوی دیجیتال فرایند زنده', nameEn: 'Live Process Digital Twin', category: 'digital', readinessPct: 85, impactPct: 70, horizon: 'now', descFa: 'مدل مجازی بلادرنگ از کوره یا خط تولید که با داده‌های زنده سنسورها فرایند را بهینه و ناهنجاری‌ها را پیش از وقوع شناسایی می‌کند.', caseStudyFa: 'آرسلورمیتال دوقلوی دیجیتال زنده روی کوره‌های بلند در ۴ سایت اجرا می‌کند و عمر باقی‌مانده نسوز را با دقت ۳ تا ۶ هفته پیش‌بینی می‌کند؛ POSCO DX نیز در پلتفرم PosFrame دوقلوی جرثقیل بی‌سرنشین به‌کار می‌برد.', caseCompany: 'ArcelorMittal / POSCO DX', sourceLabel: 'Oxmaint', sourceUrl: 'https://oxmaint.com/industries/steel-plant/arcelormittal-sentinel-platform-predictive-maintenance-steel-robots-equipment' },
  { id: 'ai-process-control', nameFa: 'کنترل فرایند با هوش مصنوعی', nameEn: 'AI / ML Process Control', category: 'digital', readinessPct: 80, impactPct: 65, horizon: 'now', descFa: 'مدل‌های یادگیری ماشین که جعبه سیاه کوره بلند را می‌گشایند، کیفیت آهن را پیش‌بینی و مصرف سوخت را از داده‌های بلادرنگ کاهش می‌دهند.', caseStudyFa: 'China Baowu و Huawei مدل AI کوره بلند را در پایگاه تولید Baosteel مستقر کردند که >۱۰ ماه کار کرد و منافع سالانه‌ای «ده‌ها میلیون یوان» از کاهش سوخت و پایداری کیفیت ایجاد کرد.', caseCompany: 'China Baowu / Huawei', sourceLabel: 'Huawei', sourceUrl: 'https://www.huawei.com/en/media-center/transform/23/15-Baowu' },
  { id: 'predictive-maintenance', nameFa: 'نگهداری پیش‌بینانه با هوش مصنوعی', nameEn: 'AI Predictive Maintenance', category: 'digital', readinessPct: 85, impactPct: 60, horizon: 'now', descFa: 'مدل‌های یادگیری ماشین که خرابی موتورها، عملگرهای هیدرولیک و تجهیزات را پیش از وقوع پیش‌بینی می‌کنند تا توقفات کاهش یابد.', caseStudyFa: 'پلتفرم Sentinel آرسلورمیتال خرابی موتورها را در کانادا، فرانسه و برزیل پیش‌بینی می‌کند؛ برنامه تحلیل پیشرفته Tata Steel در IJmuiden با >۲۶۰ الگوریتم AI نرخ موفقیت تولید بار اول را به >۹۰٪ رساند.', caseCompany: 'ArcelorMittal (Sentinel) / Tata Steel', sourceLabel: 'AI Expert Network', sourceUrl: 'https://aiexpert.network/case-study-tata-steels-ai-transformation/' },
  { id: 'cv-quality-inspection', nameFa: 'بازرسی کیفیت با بینایی ماشین', nameEn: 'Computer Vision Quality Inspection', category: 'digital', readinessPct: 80, impactPct: 55, horizon: 'now', descFa: 'دوربین‌های پرسرعت و یادگیری عمیق خراش، حفره و پوسته را روی ورق در حال حرکت با ۱۰ تا ۳۰ متر بر ثانیه شناسایی می‌کنند.', caseStudyFa: 'POSCO سامانه یادگیری عمیق را در ریخته‌گری‌های پیوسته پوهانگ (مارس ۲۰۱۸) مستقر کرد: صرفه‌جویی >۶۰۰ میلیون وون در سال و غربالگری ~۳۰٬۰۰۰ تن مواد معیوب از ۳۴۰٬۰۰۰ تن بازرسی‌شده.', caseCompany: 'POSCO', sourceLabel: 'POSCO Newsroom', sourceUrl: 'https://newsroom.posco.com/en/posco-the-lighthouse-factory-2/' },
  { id: 'autonomous-cranes', nameFa: 'جرثقیل‌های خودگردان و کارخانه بی‌سرنشین', nameEn: 'Autonomous Cranes / Dark Factory', category: 'digital', readinessPct: 75, impactPct: 60, horizon: 'now', descFa: 'جرثقیل‌های سقفی و AGVهای کاملاً خودگردان که بدون اپراتور کلاف‌ها را جابه‌جا و تولید بدون چراغ را ممکن می‌سازند.', caseStudyFa: 'Baosteel از ۲۰۱۹ تولید خودکار را در شانگهای آغاز کرد؛ در کارخانه ورق Xinyu رباتها شبانه‌روز در تاریکی ۷٬۰۰۰ تن کلاف جابه‌جا می‌کنند با ۱۲۰٪ افزایش تناژ در ساعت و >۹۰٪ کاهش ضایعات.', caseCompany: 'Baosteel (China Baowu)', sourceLabel: 'GMK Center', sourceUrl: 'https://gmk.center/en/posts/robots-near-the-blast-furnace-artificial-intelligence-in-steel-industry/' },
  { id: 'eaf-flat-products', nameFa: 'نوآوری کوره قوس الکتریکی برای محصولات تخت', nameEn: 'EAF for Flat Products', category: 'process', readinessPct: 80, impactPct: 75, horizon: 'now', descFa: 'EAF قراضه را با برق ذوب می‌کند و فزاینده محصولات تخت باکیفیت (ورق خودرو و ساختمان) را که پیش‌تر نیازمند واحد یکپارچه بود تولید می‌کند.', caseStudyFa: 'Nucor در Apple Grove ویرجینیای غربی آمریکا کارخانه ورق نوساز EAF تا ۳ Mt/سال با ~۴ میلیارد دلار می‌سازد (تکمیل تا پایان ۲۰۲۶)؛ این شرکت سالانه >۲۰ میلیون تن قراضه بازیافت می‌کند.', caseCompany: 'Nucor', sourceLabel: 'Manufacturing Dive', sourceUrl: 'https://www.manufacturingdive.com/news/nucor-record-investment-2-7b-steel-mill-in-apple-grove-west-virginia/697588/' },
  { id: 'xcarb-recycled-steel', nameFa: 'فولاد بازیافتی با برق تجدیدپذیر (XCarb)', nameEn: 'Renewable-Powered Recycled Steel', category: 'circular', readinessPct: 85, impactPct: 60, horizon: 'now', descFa: 'فولاد EAF با سهم بالای قراضه و برق ۱۰۰٪ تجدیدپذیر که به‌عنوان محصول کم‌کربن گواهی‌شده عرضه می‌شود.', caseStudyFa: 'فولاد XCarb آرسلورمیتال با حداقل ۷۵٪ قراضه و ۱۰۰٪ برق تجدیدپذیر، ردپای کربن را ~۷۰٪ و تا ~۳۰۰ کیلوگرم CO₂ بر تن کاهش می‌دهد؛ نمونه: تأمین ۴ هزار تن ورق سنگین برای یک مزرعه بادی.', caseCompany: 'ArcelorMittal (XCarb)', sourceLabel: 'ArcelorMittal', sourceUrl: 'https://corporate.arcelormittal.com/climate-action/xcarb/xcarb-recycled-and-renewably-produced' },
  { id: 'ssab-mini-mill', nameFa: 'مینی‌میل قراضه و آهن اسفنجی بدون فسیل', nameEn: 'Fossil-Free Sponge Iron + Scrap Mini-Mill', category: 'circular', readinessPct: 55, impactPct: 80, horizon: 'pilot', descFa: 'جایگزینی کوره بلند با مینی‌میل‌های EAF که با ترکیب قراضه و آهن اسفنجی بدون فسیل (H2-DRI) از فرایند HYBRIT تغذیه می‌شوند.', caseStudyFa: 'SSAB با ۴.۵ میلیارد یورو کارخانه برقی Luleå سوئد با ظرفیت ۲.۵ Mt/سال و دو EAF می‌سازد (راه‌اندازی پایان ۲۰۲۸)؛ نخستین فولاد بدون فسیل را ۲۰۲۵ به Volvo داد و تبدیل Luleå انتشار کل سوئد را ~۷٪ کم می‌کند.', caseCompany: 'SSAB', sourceLabel: 'Recycling Today', sourceUrl: 'https://www.recyclingtoday.com/news/ssab-steel-sweden-low-emissions-electric-furnaces-recycling/' },
  { id: 'slag-valorization', nameFa: 'ارزش‌آفرینی از سرباره فولاد', nameEn: 'Slag Valorization (low-carbon cement)', category: 'circular', readinessPct: 45, impactPct: 50, horizon: 'pilot', descFa: 'هدایت سرباره EAF و کوره اکسیژنی از دفن به مواد سیمانی مکمل که جایگزین کلینکر (پرکربن‌ترین جزء سیمان) می‌شوند.', caseStudyFa: 'Tata Steel IJmuiden و Ecocem تفاهم‌نامه‌ای برای توسعه نسل جدید سرباره‌ها به‌عنوان مواد سیمانی کم‌کربن در اروپا امضا کردند؛ برای مقیاس، آرسلورمیتال ۲۰۲۳ بیش از ۱۶ میلیون تن سرباره را در اروپا فرآوری کرد.', caseCompany: 'Tata Steel IJmuiden / Ecocem', sourceLabel: 'Ecocem', sourceUrl: 'https://www.ecocemglobal.com/en-ie/tata-steel-ijmuiden-and-ecocem-sign-mou-to-advance-the-use-of-next-generation-steelmaking-slags-for-low-carbon-cement-solutions/' },
  { id: 'urban-mining-ai-scrap', nameFa: 'استخراج شهری فولاد و دسته‌بندی قراضه با AI', nameEn: 'Urban Mining + AI Scrap Sorting', category: 'circular', readinessPct: 65, impactPct: 55, horizon: 'now', descFa: 'بازیابی نظام‌مند فولاد از محیط ساخته‌شده و خودروهای فرسوده همراه با بینایی AI که خلوص قراضه را درجه‌بندی می‌کند.', caseStudyFa: 'آرسلورمیتال از بینایی مبتنی بر AI برای تحلیل ناخالصی قراضه استفاده می‌کند؛ طبق Nucor بازیافت هر تن فولاد ۲٬۵۰۰ پوند سنگ‌آهن، ۱٬۴۰۰ پوند زغال و ۱۲۰ پوند سنگ‌آهک را حفظ می‌کند.', caseCompany: 'ArcelorMittal / Nucor', sourceLabel: 'ICCT', sourceUrl: 'https://theicct.org/wp-content/uploads/2025/03/ID-305-%E2%80%93-Recycled-steel_brief_final.pdf' },
  { id: 'ahss-automotive', nameFa: 'فولاد فوق‌مستحکم پیشرفته (AHSS)', nameEn: 'Advanced High Strength Steel', category: 'materials', readinessPct: 90, impactPct: 65, horizon: 'now', descFa: 'گریدهای ۵۹۰ تا >۱۱۸۰ مگاپاسکال که کاهش وزن بدنه با حفظ عملکرد تصادف را ممکن می‌کنند؛ در باتری‌پک و شاسی خودروی برقی به‌کار می‌روند.', caseStudyFa: 'آرسلورمیتال فوریه ۲۰۲۵ احداث واحدی در Calvert آلاباما (مشارکت AM/NS با Nippon Steel) برای تولید تا ۱۵۰٬۰۰۰ تن فولاد الکتریکی غیرجهت‌دار در سال برای موتورهای خودروی برقی را اعلام کرد.', caseCompany: 'ArcelorMittal / Nippon Steel', sourceLabel: 'ArcelorMittal', sourceUrl: 'https://corporate.arcelormittal.com/smarter-future/steel-thoughts-why-steel-is-the-material-of-choice-to-fuel-the-electric-vehicle-revolution' },
  { id: 'third-gen-ahss', nameFa: 'فولاد فوق‌مستحکم نسل سوم', nameEn: 'Third-Generation AHSS', category: 'materials', readinessPct: 75, impactPct: 60, horizon: 'now', descFa: 'جدیدترین رده AHSS که استحکام ~۹۸۰ تا ۱۱۸۰ مگاپاسکال را با شکل‌پذیری بالا ترکیب می‌کند و برای سازه‌های بدنه خودروی برقی طراحی شده.', caseStudyFa: 'گرید Fortiform 1180 آرسلورمیتال با استحکام ۱۱۸۰ مگاپاسکال و حداقل ۱۴٪ ازدیاد طول، ۸ تا ۱۲٪ کاهش وزن بدنه را ممکن می‌کند؛ Fortiform 980 GI اوایل ۲۰۲۳ با کاهش ~۱۵٪ ضخامت ستون B عرضه شد.', caseCompany: 'ArcelorMittal (Fortiform)', sourceLabel: 'ArcelorMittal Automotive', sourceUrl: 'https://automotive.arcelormittal.com/products/flat/third_gen_AHSS/fortiform' },
  { id: 'ev-battery-electrical-steel', nameFa: 'فولاد ویژه باتری و موتور خودروی برقی', nameEn: 'Steel for EV Batteries & Motors', category: 'materials', readinessPct: 80, impactPct: 65, horizon: 'now', descFa: 'محفظه و پک باتری از جنس AHSS به همراه فولاد الکتریکی غیرجهت‌دار برای موتورهای کششی خودروی برقی.', caseStudyFa: 'آرسلورمیتال کارخانه فولاد الکتریکی غیرجهت‌دار ۱۵۰٬۰۰۰ تن/سال در Calvert آلاباما (اعلام فوریه ۲۰۲۵) برای موتورهای خودروی برقی می‌سازد؛ محفظه‌های باتری AHSS برای بسته‌بندی فشرده‌تر طراحی شده‌اند.', caseCompany: 'ArcelorMittal', sourceLabel: 'ArcelorMittal Automotive', sourceUrl: 'https://automotive.arcelormittal.com/s-in_motion_solutions/battery_electric_vehicles' },
  { id: 'waste-heat-recovery', nameFa: 'بازیافت حرارت اتلافی در کارخانه فولاد', nameEn: 'Waste Heat Recovery', category: 'energy', readinessPct: 85, impactPct: 50, horizon: 'now', descFa: 'جذب حرارت اتلافی دما-متوسط و پایین از فرایندهای فولادسازی برای تولید برق، بخار یا گرمایش منطقه‌ای.', caseStudyFa: 'Tata Steel با ۲.۴ میلیون پوند در Port Talbot انگلستان حرارت اتلافی خط آنیلینگ پیوسته را بازیافت کرد: >۱ مگاوات برق و کاهش ~۶٬۰۰۰ تن CO₂ در سال.', caseCompany: 'Tata Steel', sourceLabel: 'EIN Presswire', sourceUrl: 'https://www.einpresswire.com/article/68073816/tata-steel-invests-2-4m-to-capture-and-recycle-energy-from-capl-line' },
  { id: 'renewable-ppa-steel', nameFa: 'انرژی تجدیدپذیر در فولادسازی', nameEn: 'Renewable Energy (Solar PPA + Battery)', category: 'energy', readinessPct: 80, impactPct: 60, horizon: 'now', descFa: 'تأمین برق EAF و DRI با خورشید و باد از طریق قراردادهای خرید برق (PPA) و ذخیره‌سازی باتری در محل.', caseStudyFa: 'Nucor قرارداد ۲۵۰ مگاواتی خورشیدی از Sebree Solar (NextEra، بهره‌برداری دسامبر ۲۰۲۵) امضا کرد؛ مسیر EAF این شرکت تنها ۰.۷۷ تن CO₂ بر تن فولاد منتشر می‌کند و باتری ۵۰ مگاوات/۲۰۰ مگاوات‌ساعت Tesla Megapack مستقر کرده.', caseCompany: 'Nucor / NextEra', sourceLabel: 'Nucor', sourceUrl: 'https://nucor.com/news-release/nucor-signs-agreement-with-nextera-energy-resources-to-support-solar-energy-development-in-kentucky-122763' },
  { id: 'sestao-dri-eaf', nameFa: 'نخستین کارخانه ورق نزدیک به صفر کربن', nameEn: 'Near-Zero-Carbon Flat Steel (DRI+EAF)', category: 'decarbonization', readinessPct: 50, impactPct: 85, horizon: 'pilot', descFa: 'تبدیل واحد یکپارچه به مسیر DRI+EAF برای تولید فولاد تخت در مقیاس کامل با انتشار نزدیک به صفر.', caseStudyFa: 'آرسلورمیتال در Sestao اسپانیا نخستین کارخانه فولاد تخت نزدیک به صفر کربن جهان در مقیاس کامل با ۱.۶ Mt/سال از طریق DRI+EAF را به‌عنوان بخشی از سرمایه ۱ میلیارد یورویی هدف‌گذاری کرده است.', caseCompany: 'ArcelorMittal Sestao', sourceLabel: 'ArcelorMittal', sourceUrl: 'https://corporate.arcelormittal.com/media/press-releases/arcelormittal-sestao-to-become-the-world-s-first-full-scale-zero-carbon-emissions-steel-plant' },
  { id: 'dmx-ccs-3d', nameFa: 'جذب و ذخیره کربن با حلال DMX (پروژه 3D)', nameEn: 'DMX Solvent Carbon Capture (3D)', category: 'decarbonization', readinessPct: 35, impactPct: 55, horizon: 'pilot', descFa: 'نمایش حلال آمینی DMX برای جذب کم‌هزینه CO₂ از گازهای خروجی فولادسازی جهت ذخیره‌سازی بعدی.', caseStudyFa: 'پروژه 3D آرسلورمیتال در Dunkirk فرانسه با ۱۹.۳ میلیون یورو (۱۴.۸ میلیون از اتحادیه اروپا) از ۲۰۲۰ ساخته شد و از ۲۰۲۱ روزانه ۰.۵ تن CO₂ در ساعت جذب می‌کند (شرکا: IFPEN، Axens، TotalEnergies).', caseCompany: 'ArcelorMittal (3D / Dunkirk)', sourceLabel: 'TotalEnergies', sourceUrl: 'https://totalenergies.com/media/news/press-releases/launch-innovative-european-3d-project-capture-and-storage-co2-industrial-scale' },
]

// ─── Sub-data ─────────────────────────────────────────────────────────────────

const universities = [
  { name: 'MIT', flag: '🇺🇸', focus: 'فناوری فولاد سبز' },
  { name: 'RWTH آاخن', flag: '🇩🇪', focus: 'متالورژی' },
  { name: 'کارنگی ملون', flag: '🇺🇸', focus: 'AI صنعتی' },
  { name: 'Tsinghua', flag: '🇨🇳', focus: 'فولاد کم‌کربن' },
];

const startups = [
  { name: 'Boston Metal', region: 'آمریکا', focus: 'EW electrolysis', raised: '$330M' },
  { name: 'H2 Green Steel', region: 'سوئد', focus: 'فولاد هیدروژنی', raised: '$1.5B' },
  { name: 'Electra Steel', region: 'کلرادو', focus: 'الکترولیز صنعتی', raised: '-' },
];

const publications = [
  { label: 'worldsteel.org/statistics', type: 'داده جهانی' },
  { label: 'IEA Iron and Steel', type: 'انرژی صنعتی' },
  { label: 'McKinsey Global Steel Playbook ۲۰۲۴', type: 'تحلیل استراتژیک' },
];

// ─── Helpers ─────────────────────────────────────────────────────────────────

function signalStyle(signal: string): React.CSSProperties {
  if (signal === '↑') return { color: '#16a34a', fontWeight: 700, fontFamily: 'Vazir, sans-serif' };
  if (signal === '↓') return { color: '#dc2626', fontWeight: 700, fontFamily: 'Vazir, sans-serif' };
  return { color: '#6b7280', fontWeight: 700, fontFamily: 'Vazir, sans-serif' };
}

function ImportanceBar({ value }: { value: number }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6, direction: 'ltr' }}>
      <div style={{ width: 60, height: 4, background: '#e2e6eb', borderRadius: 2, flexShrink: 0 }}>
        <div style={{ width: `${value}%`, height: '100%', background: '#1e40af', borderRadius: 2 }} />
      </div>
      <span style={{ fontSize: 10, fontFamily: 'Vazir, sans-serif', fontWeight: 600, color: '#475569' }}>{value.toLocaleString('fa-IR')}</span>
    </div>
  );
}

// ─── Sparkline SVG (5-point, 40x20) ──────────────────────────────────────────

function Sparkline({ data, signal }: { data: number[]; signal: string }) {
  const W = 48;
  const H = 20;
  const min = Math.min(...data);
  const max = Math.max(...data);
  const range = max - min || 1;
  const pts = data.map((v, i) => {
    const x = (i / (data.length - 1)) * W;
    const y = H - ((v - min) / range) * H;
    return `${x},${y}`;
  });
  const color = signal === '↑' ? '#16a34a' : signal === '↓' ? '#dc2626' : '#6b7280';
  return (
    <svg width={W} height={H} style={{ overflow: 'visible', display: 'block' }}>
      <polyline
        points={pts.join(' ')}
        fill="none"
        stroke={color}
        strokeWidth={1.5}
        strokeLinejoin="round"
        strokeLinecap="round"
      />
      {pts.map((pt, i) => {
        const [x, y] = pt.split(',').map(Number);
        return (
          <circle key={i} cx={x} cy={y} r={i === data.length - 1 ? 2.5 : 1.5} fill={color} />
        );
      })}
    </svg>
  );
}

// ─── Module wrapper ───────────────────────────────────────────────────────────

function Module({ label, children, showScanner }: { id?: string; label: string; children: React.ReactNode; showScanner?: boolean }) {
  return (
    <div style={{
      background: '#fff',
      border: '1px solid #e2e6eb',
      borderRadius: 8,
      marginBottom: 16,
      overflow: 'hidden',
    }}>
      <div style={{
        borderLeft: '3px solid #1e40af',
        padding: '12px 16px',
        background: '#f8fafc',
        borderBottom: '1px solid #e2e6eb',
        display: 'flex',
        alignItems: 'center',
        gap: 10,
        direction: 'rtl',
        position: 'relative',
      }}>
        <span style={{
          fontSize: 11,
          fontWeight: 700,
          letterSpacing: '1.5px',
          textTransform: 'uppercase' as const,
          color: '#1e40af',
        }}>
          {label}
        </span>

        {/* Scanner bar — only for Module 01 */}
        {showScanner && (
          <div style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            overflow: 'hidden',
            pointerEvents: 'none',
          }}>
            <div style={{
              position: 'absolute',
              top: 0,
              bottom: 0,
              width: 3,
              background: 'linear-gradient(90deg, transparent, #1e40af88, #1e40af, #1e40af88, transparent)',
              animation: 'scan 3s linear infinite',
            }} />
          </div>
        )}
      </div>
      <div>{children}</div>
    </div>
  );
}

// ─── Module 01: رادار آینده ──────────────────────────────────────────────────

type FilterTab = 'همه' | 'صعودی' | 'هشدار';

function MegaTrendsModule() {
  const [expandedRow, setExpandedRow] = useState<number | null>(null);
  const [activeFilter, setActiveFilter] = useState<FilterTab>('همه');

  const filtered = megaTrends.filter((row) => {
    if (activeFilter === 'همه') return true;
    if (activeFilter === 'صعودی') return row.signal === '↑';
    if (activeFilter === 'هشدار') return row.signal === '↓';
    return true;
  });

  const filterTabs: FilterTab[] = ['همه', 'صعودی', 'هشدار'];

  const upCount = megaTrends.filter((r) => r.signal === '↑').length;
  const downCount = megaTrends.filter((r) => r.signal === '↓').length;
  const avgImp = Math.round(megaTrends.reduce((s, r) => s + r.importance, 0) / megaTrends.length);

  return (
    <Module id="MOD-01" label="رادار آینده — مگاترندهای فولاد جهانی">
      {/* summary strip */}
      <div style={{ display: 'flex', gap: 10, padding: '12px 14px', direction: 'rtl', flexWrap: 'wrap', borderBottom: '1px solid #f1f5f9', background: '#fff' }}>
        <WStat i={0} label="مگاترند فعال" value={faNum(megaTrends.length)} color="#1e40af" />
        <WStat i={1} label="روند صعودی" value={faNum(upCount)} color="#16a34a" />
        <WStat i={2} label="هشدار نزولی" value={faNum(downCount)} color="#dc2626" />
        <WStat i={3} label="میانگین اهمیت" value={faNum(avgImp)} color="#CD9E53" />
      </div>

      {/* Filter pills */}
      <div style={{
        display: 'flex',
        gap: 6,
        padding: '10px 14px',
        borderBottom: '1px solid #f1f5f9',
        direction: 'rtl',
        background: '#fafbfc',
      }}>
        {filterTabs.map((tab) => (
          <button
            key={tab}
            onClick={() => setActiveFilter(tab)}
            style={{
              padding: '3px 12px',
              borderRadius: 20,
              border: '1px solid',
              borderColor: activeFilter === tab ? '#1e40af' : '#e2e6eb',
              background: activeFilter === tab ? '#1e40af' : '#fff',
              color: activeFilter === tab ? '#fff' : '#64748b',
              fontSize: 11,
              fontWeight: 600,
              cursor: 'pointer',
              transition: 'all 0.15s',
              fontFamily: 'Vazir, IRANSans, Tahoma, sans-serif',
            }}
          >
            {tab}
          </button>
        ))}
      </div>

      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr style={{ background: '#f1f5f9' }}>
            <th style={th()}>ترند</th>
            <th style={th()}>سیگنال</th>
            <th style={{ ...th(), direction: 'ltr', textAlign: 'right' }}>تغییر ۱۲ماهه</th>
            <th style={th()}>محرک اصلی</th>
            <th style={{ ...th(), textAlign: 'center' }}>اهمیت</th>
            <th style={{ ...th(), textAlign: 'center', direction: 'ltr' }}>روند</th>
          </tr>
        </thead>
        <tbody>
          {filtered.map((row, i) => {
            const origIdx = megaTrends.indexOf(row);
            const isExpanded = expandedRow === origIdx;
            return (
              <>
                <motion.tr
                  key={`row-${origIdx}`}
                  initial={{ opacity: 0 }}
                  whileInView={{ opacity: 1 }}
                  viewport={{ once: true, margin: '-30px' }}
                  transition={{ duration: 0.4, delay: i * 0.06 }}
                  onClick={() => setExpandedRow(isExpanded ? null : origIdx)}
                  style={{
                    background: isExpanded ? '#eff6ff' : '#fff',
                    cursor: 'pointer',
                    transition: 'background 0.1s',
                  }}
                >
                  <td style={{ ...td(), fontWeight: 600, color: '#0f172a' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <span style={{ fontSize: 10, color: '#94a3b8' }}>{isExpanded ? '▲' : '▼'}</span>
                      <span>{row.trend}</span>
                    </div>
                    <div style={{ fontSize: 10, fontWeight: 400, color: '#94a3b8', marginTop: 3, maxWidth: 230, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                      {faDigits(row.analysis)}
                    </div>
                  </td>
                  <td style={td()}>
                    <span style={signalStyle(row.signal)}>{row.signal} {row.signalLabel}</span>
                  </td>
                  <td style={{ ...td(), fontFamily: 'Vazir, sans-serif', fontWeight: 600, color: '#334155', direction: 'ltr', textAlign: 'right' }}>
                    {faDigits(row.change)}
                  </td>
                  <td style={{ ...td(), color: '#475569', fontSize: 11 }}>{faDigits(row.driver)}</td>
                  <td style={{ ...td(), textAlign: 'center' }}>
                    <ImportanceBar value={row.importance} />
                  </td>
                  <td style={{ ...td(), textAlign: 'center' }}>
                    <Sparkline data={row.sparkData} signal={row.signal} />
                  </td>
                </motion.tr>

                {/* Expanded detail row */}
                {isExpanded && (
                  <tr key={`expanded-${origIdx}`}>
                    <td colSpan={6} style={{
                      padding: '14px 20px',
                      background: '#f0f7ff',
                      borderBottom: '1px solid #bfdbfe',
                      direction: 'rtl',
                    }}>
                      <div style={{ display: 'flex', gap: 24, direction: 'rtl', flexWrap: 'wrap' }}>
                        {/* Analysis */}
                        <div style={{ flex: 2, minWidth: 200 }}>
                          <div style={{ fontSize: 10, fontWeight: 700, color: '#64748b', marginBottom: 6, letterSpacing: '0.5px' }}>
                            تحلیل
                          </div>
                          <p style={{ fontSize: 12, color: '#1e293b', lineHeight: 1.7, margin: 0 }}>
                            {faDigits(row.analysis)}
                          </p>
                        </div>

                        {/* Signal history */}
                        <div style={{ flex: 1, minWidth: 140 }}>
                          <div style={{ fontSize: 10, fontWeight: 700, color: '#64748b', marginBottom: 6, letterSpacing: '0.5px' }}>
                            تاریخچه سیگنال
                          </div>
                          {row.history.map((h, hi) => (
                            <div key={hi} style={{
                              fontSize: 11,
                              fontFamily: 'Vazir, sans-serif',
                              color: '#475569',
                              marginBottom: 3,
                              display: 'flex',
                              alignItems: 'center',
                              gap: 6,
                            }}>
                              <span style={{ color: '#94a3b8' }}>›</span>
                              {faDigits(h)}
                            </div>
                          ))}
                        </div>

                        {/* Related links */}
                        <div style={{ flex: 1, minWidth: 140 }}>
                          <div style={{ fontSize: 10, fontWeight: 700, color: '#64748b', marginBottom: 6, letterSpacing: '0.5px' }}>
                            منابع مرتبط
                          </div>
                          {row.links.map((link, li) => (
                            <div key={li} style={{
                              fontSize: 11,
                              color: '#1e40af',
                              fontFamily: 'Vazir, sans-serif',
                              marginBottom: 4,
                              wordBreak: 'break-all',
                            }}>
                              ↗ {link}
                            </div>
                          ))}
                        </div>
                      </div>
                    </td>
                  </tr>
                )}
              </>
            );
          })}
        </tbody>
      </table>
    </Module>
  );
}

// ─── Module 04: سیاست‌های کلان ──────────────────────────────────────────────

function GeopoliticsModule() {
  const [expandedCountry, setExpandedCountry] = useState<number | null>(null);

  const totalMeasures = geoRows.reduce((s, r) => s + r.policies.length, 0);
  const activeMeasures = geoRows.reduce((s, r) => s + r.policies.filter((p) => p.status === 'فعال').length, 0);

  const policyColor = (status: string) =>
    status === 'فعال' ? '#16a34a' : status === 'برنامه' ? '#ca8a04' : status === 'اجرا' ? '#2563eb' : '#94a3b8';

  return (
    <Module id="MOD-04" label="سیاست‌های کلان — ژئوپلیتیک عرضه جهانی">
      {/* summary strip */}
      <div style={{ display: 'flex', gap: 10, padding: '12px 14px', direction: 'rtl', flexWrap: 'wrap', borderBottom: '1px solid #f1f5f9', background: '#fff' }}>
        <WStat i={0} label="کشور پایش‌شده" value={faNum(geoRows.length)} color="#1e40af" />
        <WStat i={1} label="مجموع سیاست‌ها" value={faNum(totalMeasures)} color="#7c3aed" />
        <WStat i={2} label="سیاست فعال" value={faNum(activeMeasures)} color="#dc2626" />
      </div>

      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr style={{ background: '#f1f5f9' }}>
            <th style={th()}>کشور</th>
            <th style={th()}>اقدام کلیدی</th>
            <th style={th()}>تاریخ</th>
            <th style={th()}>اثر بر فولاد</th>
          </tr>
        </thead>
        <tbody>
          {geoRows.map((row, i) => {
            const isExpanded = expandedCountry === i;
            return (
              <>
                <motion.tr
                  key={`geo-${i}`}
                  initial={{ opacity: 0 }}
                  whileInView={{ opacity: 1 }}
                  viewport={{ once: true, margin: '-30px' }}
                  transition={{ duration: 0.4, delay: i * 0.06 }}
                  onClick={() => setExpandedCountry(isExpanded ? null : i)}
                  style={{
                    background: isExpanded ? '#eff6ff' : '#fff',
                    cursor: 'pointer',
                    transition: 'background 0.1s',
                  }}
                >
                  <td style={{ ...td(), fontWeight: 600, color: '#0f172a', whiteSpace: 'nowrap' as const }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <span>{row.flag}</span>
                      <span>{row.country}</span>
                      <span style={{ fontSize: 9, color: '#94a3b8' }}>{isExpanded ? '▲' : '▼'}</span>
                    </div>
                    {/* policy-status mini bar — visible at first glance */}
                    <div style={{ display: 'flex', alignItems: 'center', gap: 3, marginTop: 6 }}>
                      {row.policies.map((p, pi) => (
                        <span key={pi} title={`${p.policy} · ${p.status}`} style={{ width: 16, height: 5, borderRadius: 2, background: policyColor(p.status) }} />
                      ))}
                      <span style={{ fontSize: 9, color: '#94a3b8', marginRight: 4 }}>{faNum(row.policies.length)} سیاست</span>
                    </div>
                  </td>
                  <td style={{ ...td(), color: '#1e293b' }}>{faDigits(row.action)}</td>
                  <td style={{ ...td(), fontFamily: 'Vazir, sans-serif', fontWeight: 600, color: '#64748b', whiteSpace: 'nowrap' as const }}>{faDigits(row.date)}</td>
                  <td style={{ ...td(), color: '#475569', fontSize: 11 }}>{faDigits(row.effect)}</td>
                </motion.tr>

                {/* Country drilldown */}
                {isExpanded && (
                  <tr key={`geo-expanded-${i}`}>
                    <td colSpan={4} style={{
                      padding: '0',
                      background: '#f0f7ff',
                      borderBottom: '1px solid #bfdbfe',
                    }}>
                      <table style={{ width: '100%', borderCollapse: 'collapse', direction: 'rtl' }}>
                        <thead>
                          <tr style={{ background: '#dbeafe' }}>
                            <th style={{ ...th(), background: '#dbeafe', fontSize: 9 }}>سیاست</th>
                            <th style={{ ...th(), background: '#dbeafe', fontSize: 9 }}>نرخ تعرفه</th>
                            <th style={{ ...th(), background: '#dbeafe', fontSize: 9 }}>تاریخ</th>
                            <th style={{ ...th(), background: '#dbeafe', fontSize: 9 }}>وضعیت</th>
                          </tr>
                        </thead>
                        <tbody>
                          {row.policies.map((p, pi) => (
                            <tr key={pi} style={{ background: pi % 2 === 0 ? '#eff6ff' : '#f0f7ff' }}>
                              <td style={{ ...td(), fontSize: 11, fontWeight: 600 }}>{faDigits(p.policy)}</td>
                              <td style={{ ...td(), fontFamily: 'Vazir, sans-serif', fontSize: 11, color: '#1e40af', direction: 'ltr', textAlign: 'right' }}>{faDigits(p.tariff)}</td>
                              <td style={{ ...td(), fontFamily: 'Vazir, sans-serif', fontSize: 10, color: '#64748b' }}>{faDigits(p.date)}</td>
                              <td style={{ ...td(), fontSize: 10 }}>
                                <span style={{
                                  padding: '2px 8px',
                                  borderRadius: 10,
                                  background: p.status === 'فعال' ? '#dcfce7' : p.status === 'برنامه' ? '#fef9c3' : '#e0e7ff',
                                  color: p.status === 'فعال' ? '#166534' : p.status === 'برنامه' ? '#854d0e' : '#3730a3',
                                  fontWeight: 600,
                                }}>
                                  {p.status}
                                </span>
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </td>
                  </tr>
                )}
              </>
            );
          })}
        </tbody>
      </table>
    </Module>
  );
}

// ─── Module 05: رادار فناوری — Interactive 2-axis grid ──────────────────────

const faNum = (n: number) => n.toLocaleString('fa-IR')

const tchip = (on: boolean, color: string): React.CSSProperties => ({
  fontSize: 11, fontWeight: 700, padding: '4px 10px', borderRadius: 99, cursor: 'pointer',
  border: `1px solid ${on ? color : '#e2e8f0'}`, background: on ? color : '#fff',
  color: on ? '#fff' : '#64748b', fontFamily: 'inherit', whiteSpace: 'nowrap', transition: 'all 0.15s',
})

function WStat({ label, value, color, i = 0 }: { label: string; value: string; color: string; i?: number }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: -8, scale: 0.9 }}
      whileInView={{ opacity: 1, y: 0, scale: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 0.4, delay: i * 0.07, ease: [0.22, 1, 0.36, 1] }}
      style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', minWidth: 70, background: '#f8fafc', border: '1px solid #eef2f6', borderRadius: 10, padding: '7px 13px', boxShadow: '0 2px 6px rgba(3,35,64,0.04)' }}
    >
      <span style={{ fontSize: 17, fontWeight: 800, color, fontFamily: 'Vazir, sans-serif', lineHeight: 1 }}>{value}</span>
      <span style={{ fontSize: 9, color: '#94a3b8', marginTop: 3 }}>{label}</span>
    </motion.div>
  )
}

function TechCard({ t, i, active, onHover, onLeave, onOpen }: { t: Technology; i: number; active: boolean; onHover: () => void; onLeave: () => void; onOpen: () => void }) {
  const col = TECH_CAT[t.category].color
  const hz = TECH_HORIZON[t.horizon]
  return (
    <motion.div
      initial={{ opacity: 0, y: 16 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-30px' }}
      transition={{ duration: 0.4, delay: Math.min(i, 14) * 0.03, ease: [0.22, 1, 0.36, 1] }}
      onMouseEnter={onHover}
      onMouseLeave={onLeave}
      onClick={onOpen}
      style={{
        background: '#fff', border: '1px solid #e2e6eb', borderTop: `3px solid ${col}`, borderRadius: 10,
        padding: 14, direction: 'rtl', display: 'flex', flexDirection: 'column', gap: 8, cursor: 'pointer',
        boxShadow: active ? '0 12px 30px rgba(3,35,64,0.13)' : '0 2px 8px rgba(3,35,64,0.05)',
        transform: active ? 'translateY(-2px)' : 'none', transition: 'box-shadow 0.2s, transform 0.2s',
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
        <span style={{ fontSize: 9, fontWeight: 700, background: col, color: '#fff', padding: '2px 8px', borderRadius: 99 }}>{TECH_CAT[t.category].fa}</span>
        <span style={{ fontSize: 9, fontWeight: 700, color: hz.color, background: `${hz.color}18`, padding: '2px 8px', borderRadius: 99, display: 'flex', alignItems: 'center', gap: 4 }}>
          <span className="soft-blink" style={{ width: 5, height: 5, borderRadius: '50%', background: hz.color }} />{hz.fa}
        </span>
      </div>
      <div>
        <div style={{ fontWeight: 800, fontSize: 13, color: '#0f172a', lineHeight: 1.4 }}>{t.nameFa}</div>
        <div style={{ fontSize: 10, color: '#94a3b8', fontFamily: 'Vazir, sans-serif', direction: 'ltr', textAlign: 'right' }}>{t.nameEn}</div>
      </div>
      <p style={{ margin: 0, fontSize: 11, color: '#475569', lineHeight: 1.7 }}>{t.descFa}</p>

      {/* readiness + impact bars */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
        {[{ label: 'آمادگی فناوری', v: t.readinessPct, c: '#032340' }, { label: 'تأثیر بالقوه', v: t.impactPct, c: '#CD9E53' }].map((b) => (
          <div key={b.label} style={{ display: 'flex', alignItems: 'center', gap: 8, direction: 'rtl' }}>
            <span style={{ fontSize: 9, color: '#94a3b8', width: 64, flexShrink: 0 }}>{b.label}</span>
            <div style={{ flex: 1, height: 6, background: '#eef2f6', borderRadius: 99, overflow: 'hidden', direction: 'ltr' }}>
              <motion.div initial={{ width: 0 }} whileInView={{ width: `${b.v}%` }} viewport={{ once: true }} transition={{ duration: 0.8, delay: 0.2, ease: [0.22, 1, 0.36, 1] }} style={{ height: '100%', borderRadius: 99, background: b.c }} />
            </div>
            <span style={{ fontSize: 10, fontWeight: 700, color: '#475569', fontFamily: 'Vazir, sans-serif', width: 28, textAlign: 'left' }}>{faNum(b.v)}</span>
          </div>
        ))}
      </div>

      {/* case study */}
      <div style={{ background: '#f8fafc', border: '1px solid #eef2f6', borderRight: `3px solid ${col}`, borderRadius: 6, padding: '8px 10px' }}>
        <div style={{ fontSize: 9, fontWeight: 700, color: col, marginBottom: 3 }}>📌 کیس‌استادی · {t.caseCompany}</div>
        <div style={{ fontSize: 11, color: '#334155', lineHeight: 1.7 }}>{t.caseStudyFa}</div>
      </div>

      {/* clickable source */}
      <a href={t.sourceUrl} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}
        style={{ fontSize: 10, fontWeight: 700, color: '#1e40af', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 4, marginTop: 'auto' }}>
        🔗 منبع: {t.sourceLabel} <span style={{ direction: 'ltr' }}>↗</span>
      </a>
    </motion.div>
  )
}

function TechRadarModule() {
  const [catFilter, setCatFilter] = useState<TechCategory | 'all'>('all')
  const [hovered, setHovered] = useState<string | null>(null)
  const [modal, setModal] = useState<Technology | null>(null)
  const [showAllTech, setShowAllTech] = useState(false)
  const active = technologies.find((t) => t.id === hovered) ?? null

  const cats = Object.keys(TECH_CAT) as TechCategory[]
  const shown = technologies.filter((t) => catFilter === 'all' || t.category === catFilter)

  // scatter geometry — axes scaled to the actual data domain so dots fill the plot
  const W = 760, H = 340, PAD = 44
  const innerW = W - PAD * 2, innerH = H - PAD * 2
  const DOTPAD = 24
  const RX0 = 12, RX1 = 96   // readiness domain (data spans ~20–90)
  const IY0 = 38, IY1 = 100  // impact domain (data spans ~45–95)
  const RMID = (RX0 + RX1) / 2, IMID = (IY0 + IY1) / 2
  const dx = (r: number) => PAD + DOTPAD + ((r - RX0) / (RX1 - RX0)) * (innerW - 2 * DOTPAD)
  const dy = (im: number) => PAD + DOTPAD + ((IY1 - im) / (IY1 - IY0)) * (innerH - 2 * DOTPAD)
  const fx = (r: number) => PAD + ((r - RX0) / (RX1 - RX0)) * innerW
  const fy = (im: number) => PAD + ((IY1 - im) / (IY1 - IY0)) * innerH
  const splitX = fx(RMID), splitY = fy(IMID)

  return (
    <Module id="MOD-05" label="رادار فناوری — افق نوآوری">
      <div style={{ padding: 16, direction: 'rtl' }}>
        <div style={{ fontSize: 11, color: '#64748b', marginBottom: 10, lineHeight: 1.6 }}>
          {faNum(technologies.length)} فناوری روز صنعت فولاد · محور افقی = آمادگی فناوری · محور عمودی = تأثیر بالقوه · اندازه نقطه = شدت تأثیر · رنگ = دسته‌بندی
        </div>

        {/* category filters */}
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 12 }}>
          <button onClick={() => setCatFilter('all')} style={tchip(catFilter === 'all', '#032340')}>همه ({faNum(technologies.length)})</button>
          {cats.map((c) => (
            <button key={c} onClick={() => setCatFilter(c)} style={tchip(catFilter === c, TECH_CAT[c].color)}>
              {TECH_CAT[c].fa} ({faNum(technologies.filter((t) => t.category === c).length)})
            </button>
          ))}
        </div>

        {/* scatter */}
        <div style={{ position: 'relative', background: '#f8fafc', border: '1px solid #e2e6eb', borderRadius: 8 }}>
          <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: 'block', overflow: 'visible' }} onMouseLeave={() => setHovered(null)}>
            {/* quadrant zones (split at data-domain midpoints) */}
            <rect x={splitX} y={PAD} width={W - PAD - splitX} height={splitY - PAD} fill="#dcfce7" opacity={0.55} />
            <rect x={PAD} y={PAD} width={splitX - PAD} height={splitY - PAD} fill="#fef9c3" opacity={0.45} />
            <rect x={splitX} y={splitY} width={W - PAD - splitX} height={H - PAD - splitY} fill="#f1f5f9" opacity={0.6} />
            <rect x={PAD} y={splitY} width={splitX - PAD} height={H - PAD - splitY} fill="#f8fafc" opacity={0.6} />
            {/* split cross */}
            <line x1={splitX} y1={PAD} x2={splitX} y2={H - PAD} stroke="#cbd5e1" strokeDasharray="4 4" />
            <line x1={PAD} y1={splitY} x2={W - PAD} y2={splitY} stroke="#cbd5e1" strokeDasharray="4 4" />
            {/* axes */}
            <line x1={PAD} y1={H - PAD} x2={W - PAD} y2={H - PAD} stroke="#94a3b8" />
            <line x1={PAD} y1={PAD} x2={PAD} y2={H - PAD} stroke="#94a3b8" />
            <text x={W / 2} y={H - 8} textAnchor="middle" fontSize={11} fontWeight={700} fill="#475569" fontFamily="Vazir, sans-serif">آمادگی فناوری (بلوغ تجاری) →</text>
            <text x={14} y={H / 2} textAnchor="middle" fontSize={11} fontWeight={700} fill="#475569" transform={`rotate(-90 14 ${H / 2})`} fontFamily="Vazir, sans-serif">تأثیر بالقوه →</text>
            <text x={(splitX + W - PAD) / 2} y={PAD + 16} textAnchor="middle" fontSize={10} fontWeight={800} fill="#16a34a" opacity={0.6} fontFamily="Vazir, sans-serif">آماده و پرتأثیر</text>
            <text x={(PAD + splitX) / 2} y={PAD + 16} textAnchor="middle" fontSize={10} fontWeight={800} fill="#ca8a04" opacity={0.6} fontFamily="Vazir, sans-serif">شرط‌های آینده</text>

            {/* dots */}
            {shown.map((t, i) => {
              const col = TECH_CAT[t.category].color
              const isAct = active?.id === t.id
              const rad = 6 + (t.impactPct / 100) * 8
              const cx = dx(t.readinessPct), cy = dy(t.impactPct)
              return (
                <motion.g key={t.id}
                  initial={{ opacity: 0, scale: 0 }} animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.4, delay: i * 0.02, type: 'spring', stiffness: 220, damping: 16 }}
                  style={{ cursor: 'pointer' }}
                  onMouseEnter={() => setHovered(t.id)}
                  onClick={() => setModal(t)}
                >
                  <circle cx={cx} cy={cy} r={rad + 3} fill={col} opacity={0.14}>
                    <animate attributeName="r" values={`${rad + 1};${rad + 6};${rad + 1}`} dur="3.4s" repeatCount="indefinite" />
                    <animate attributeName="opacity" values="0.16;0.03;0.16" dur="3.4s" repeatCount="indefinite" />
                  </circle>
                  <circle cx={cx} cy={cy} r={isAct ? rad + 2 : rad} fill={col} fillOpacity={isAct ? 1 : 0.82} stroke="#fff" strokeWidth={isAct ? 3 : 1.5} style={{ transition: 'r 0.15s' }} />
                </motion.g>
              )
            })}
          </svg>

          {/* hover tooltip */}
          {active && (
            <div style={{ position: 'absolute', top: 12, right: 12, maxWidth: 280, background: '#0f172a', color: '#fff', borderRadius: 10, padding: '12px 14px', boxShadow: '0 14px 36px rgba(0,0,0,0.3)', direction: 'rtl', zIndex: 5, borderTop: `3px solid ${TECH_CAT[active.category].color}` }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6, flexWrap: 'wrap' }}>
                <span style={{ fontSize: 9, fontWeight: 700, background: TECH_CAT[active.category].color, padding: '2px 8px', borderRadius: 99 }}>{TECH_CAT[active.category].fa}</span>
                <span style={{ fontSize: 9, color: TECH_HORIZON[active.horizon].color, fontWeight: 700 }}>{TECH_HORIZON[active.horizon].fa}</span>
              </div>
              <div style={{ fontWeight: 800, fontSize: 13 }}>{active.nameFa}</div>
              <div style={{ fontSize: 9, color: '#94a3b8', fontFamily: 'Vazir, sans-serif', direction: 'ltr', textAlign: 'right', marginBottom: 6 }}>{active.nameEn}</div>
              <div style={{ display: 'flex', gap: 14, fontSize: 10, marginBottom: 6 }}>
                <span>آمادگی: <b style={{ color: '#CD9E53' }}>{faNum(active.readinessPct)}٪</b></span>
                <span>تأثیر: <b style={{ color: '#f87171' }}>{faNum(active.impactPct)}٪</b></span>
              </div>
              <div style={{ fontSize: 10, color: '#cbd5e1' }}>کیس‌استادی: {active.caseCompany}</div>
            </div>
          )}
        </div>

        {/* legend */}
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', margin: '10px 2px', fontSize: 10, color: '#64748b' }}>
          {cats.map((c) => (
            <span key={c} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
              <span style={{ width: 9, height: 9, borderRadius: '50%', background: TECH_CAT[c].color }} />{TECH_CAT[c].fa}
            </span>
          ))}
        </div>

        {/* technology card grid — first 6 shown, the rest behind a blur + "مشاهده بیشتر" */}
        <div style={{ position: 'relative', marginTop: 6 }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(290px, 1fr))', gap: 12 }}>
            {(showAllTech ? shown : shown.slice(0, 9)).map((t, i) => (
              <div key={t.id} style={!showAllTech && i >= 6 ? { filter: 'blur(4px)', opacity: 0.5, pointerEvents: 'none' } : undefined}>
                <TechCard t={t} i={i} active={active?.id === t.id} onHover={() => setHovered(t.id)} onLeave={() => setHovered(null)} onOpen={() => setModal(t)} />
              </div>
            ))}
          </div>
          {!showAllTech && shown.length > 6 && (
            <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 190, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', paddingBottom: 6, background: 'linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 60%, #fff 100%)', pointerEvents: 'none' }}>
              <button onClick={() => setShowAllTech(true)} style={{ pointerEvents: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6, background: '#032340', color: '#fff', border: 'none', borderRadius: 99, padding: '10px 24px', fontSize: 12, fontWeight: 800, cursor: 'pointer', fontFamily: 'Vazir, sans-serif', boxShadow: '0 8px 24px rgba(3,35,64,0.28)' }}>
                مشاهده بیشتر ({faNum(shown.length - 6)} مورد دیگر)
              </button>
            </div>
          )}
        </div>
      </div>

      {/* click-to-open popup */}
      {createPortal(
        <AnimatePresence>
          {modal && (
            <motion.div
              initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
              onClick={() => setModal(null)}
              style={{ position: 'fixed', inset: 0, background: 'rgba(3,35,64,0.55)', backdropFilter: 'blur(3px)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, direction: 'rtl', fontFamily: 'Vazir, sans-serif' }}
            >
              <motion.div
                initial={{ scale: 0.9, y: 24, opacity: 0 }} animate={{ scale: 1, y: 0, opacity: 1 }} exit={{ scale: 0.95, opacity: 0 }}
                transition={{ type: 'spring', stiffness: 260, damping: 24 }}
                onClick={(e) => e.stopPropagation()}
                style={{ background: '#fff', borderRadius: 16, maxWidth: 500, width: '100%', maxHeight: '86vh', overflowY: 'auto', borderTop: `5px solid ${TECH_CAT[modal.category].color}`, boxShadow: '0 30px 80px rgba(0,0,0,0.45)', padding: '22px 24px', position: 'relative' }}
              >
                <button onClick={() => setModal(null)} aria-label="بستن"
                  style={{ position: 'absolute', top: 14, left: 14, width: 30, height: 30, borderRadius: '50%', border: '1px solid #e2e8f0', background: '#f8fafc', color: '#64748b', cursor: 'pointer', fontSize: 16, lineHeight: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>×</button>

                <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', marginBottom: 10 }}>
                  <span style={{ fontSize: 10, fontWeight: 700, background: TECH_CAT[modal.category].color, color: '#fff', padding: '3px 10px', borderRadius: 99 }}>{TECH_CAT[modal.category].fa}</span>
                  <span style={{ fontSize: 10, fontWeight: 700, color: TECH_HORIZON[modal.horizon].color, background: `${TECH_HORIZON[modal.horizon].color}18`, padding: '3px 10px', borderRadius: 99 }}>{TECH_HORIZON[modal.horizon].fa}</span>
                </div>

                <div style={{ fontSize: 18, fontWeight: 800, color: '#0f172a', lineHeight: 1.4 }}>{modal.nameFa}</div>
                <div style={{ fontSize: 12, color: '#94a3b8', fontFamily: 'Vazir, sans-serif', direction: 'ltr', textAlign: 'right', marginBottom: 12 }}>{modal.nameEn}</div>

                <p style={{ margin: '0 0 14px', fontSize: 13, color: '#475569', lineHeight: 1.9 }}>{modal.descFa}</p>

                <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 14 }}>
                  {[{ label: 'آمادگی فناوری', v: modal.readinessPct, c: '#032340' }, { label: 'تأثیر بالقوه', v: modal.impactPct, c: '#CD9E53' }].map((b) => (
                    <div key={b.label} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ fontSize: 11, color: '#64748b', width: 80, flexShrink: 0 }}>{b.label}</span>
                      <div style={{ flex: 1, height: 8, background: '#eef2f6', borderRadius: 99, overflow: 'hidden', direction: 'ltr' }}>
                        <motion.div initial={{ width: 0 }} animate={{ width: `${b.v}%` }} transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }} style={{ height: '100%', borderRadius: 99, background: b.c }} />
                      </div>
                      <span style={{ fontSize: 12, fontWeight: 800, color: '#475569', width: 32, textAlign: 'left' }}>{faNum(b.v)}</span>
                    </div>
                  ))}
                </div>

                <div style={{ background: '#f8fafc', border: '1px solid #eef2f6', borderRight: `3px solid ${TECH_CAT[modal.category].color}`, borderRadius: 8, padding: '12px 14px', marginBottom: 16 }}>
                  <div style={{ fontSize: 10, fontWeight: 700, color: TECH_CAT[modal.category].color, marginBottom: 5 }}>📌 کیس‌استادی · {modal.caseCompany}</div>
                  <div style={{ fontSize: 12.5, color: '#334155', lineHeight: 1.9 }}>{modal.caseStudyFa}</div>
                </div>

                <a href={modal.sourceUrl} target="_blank" rel="noopener noreferrer"
                  style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 700, color: '#fff', background: '#1e40af', padding: '9px 16px', borderRadius: 8, textDecoration: 'none' }}>
                  🔗 مشاهده منبع: {modal.sourceLabel} <span style={{ direction: 'ltr' }}>↗</span>
                </a>
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>,
        document.body,
      )}
    </Module>
  )
}

// ─── Module 06: اکوسیستم نوآوری ─────────────────────────────────────────────

function EcosystemModule() {
  const [hoveredUni, setHoveredUni] = useState<number | null>(null);
  const [hoveredSt, setHoveredSt] = useState<number | null>(null);

  return (
    <Module id="MOD-06" label="اکوسیستم نوآوری — دانشگاه‌ها، استارتاپ‌ها، انتشارات">
      <div style={{ display: 'flex', direction: 'rtl' }}>

        {/* Universities */}
        <div style={{ flex: 1, borderLeft: '1px solid #e2e6eb' }}>
          <div style={{
            padding: '8px 14px',
            fontSize: 10,
            fontWeight: 700,
            color: '#64748b',
            letterSpacing: '1px',
            background: '#f8fafc',
            borderBottom: '1px solid #e2e6eb',
          }}>
            دانشگاه‌ها
          </div>
          {universities.map((u, i) => (
            <div
              key={i}
              onMouseEnter={() => setHoveredUni(i)}
              onMouseLeave={() => setHoveredUni(null)}
              style={{
                padding: '8px 14px',
                borderBottom: i < universities.length - 1 ? '1px solid #f1f5f9' : 'none',
                background: hoveredUni === i ? '#f8fafc' : '#fff',
                display: 'flex',
                alignItems: 'center',
                gap: 8,
                direction: 'rtl',
                transition: 'background 0.1s',
              }}
            >
              <span style={{ fontSize: 14 }}>{u.flag}</span>
              <div>
                <div style={{ fontSize: 12, fontWeight: 700, color: '#0f172a' }}>{u.name}</div>
                <div style={{ fontSize: 10, color: '#94a3b8' }}>{u.focus}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Startups */}
        <div style={{ flex: 1, borderLeft: '1px solid #e2e6eb' }}>
          <div style={{
            padding: '8px 14px',
            fontSize: 10,
            fontWeight: 700,
            color: '#64748b',
            letterSpacing: '1px',
            background: '#f8fafc',
            borderBottom: '1px solid #e2e6eb',
          }}>
            استارتاپ‌ها
          </div>
          {startups.map((s, i) => (
            <div
              key={i}
              onMouseEnter={() => setHoveredSt(i)}
              onMouseLeave={() => setHoveredSt(null)}
              style={{
                padding: '8px 14px',
                borderBottom: i < startups.length - 1 ? '1px solid #f1f5f9' : 'none',
                background: hoveredSt === i ? '#f8fafc' : '#fff',
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                direction: 'rtl',
                transition: 'background 0.1s',
              }}
            >
              <div>
                <div style={{ fontSize: 12, fontWeight: 700, color: '#0f172a' }}>{s.name}</div>
                <div style={{ fontSize: 10, color: '#94a3b8' }}>{s.region} — {s.focus}</div>
              </div>
              <span style={{
                fontFamily: 'Vazir, sans-serif',
                fontWeight: 700,
                fontSize: 11,
                color: '#16a34a',
                direction: 'ltr',
              }}>
                {s.raised}
              </span>
            </div>
          ))}
        </div>

        {/* Publications */}
        <div style={{ flex: 1 }}>
          <div style={{
            padding: '8px 14px',
            fontSize: 10,
            fontWeight: 700,
            color: '#64748b',
            letterSpacing: '1px',
            background: '#f8fafc',
            borderBottom: '1px solid #e2e6eb',
          }}>
            منابع و انتشارات
          </div>
          {publications.map((p, i) => (
            <div
              key={i}
              style={{
                padding: '10px 14px',
                borderBottom: i < publications.length - 1 ? '1px solid #f1f5f9' : 'none',
                direction: 'rtl',
              }}
            >
              <div style={{ fontSize: 10, fontWeight: 600, color: '#94a3b8', marginBottom: 3 }}>{p.type}</div>
              <div style={{
                fontSize: 11,
                color: '#1e40af',
                fontFamily: 'Vazir, sans-serif',
                wordBreak: 'break-all' as const,
              }}>
                {p.label}
              </div>
            </div>
          ))}
        </div>

      </div>
    </Module>
  );
}

// ─── Shared table styles ──────────────────────────────────────────────────────

function th(): React.CSSProperties {
  return {
    background: '#f1f5f9',
    fontSize: 10,
    fontWeight: 700,
    color: '#64748b',
    padding: '6px 12px',
    textAlign: 'right',
    fontFamily: 'Vazir, IRANSans, Tahoma, sans-serif',
    letterSpacing: '0.5px',
    borderBottom: '1px solid #e2e6eb',
    whiteSpace: 'nowrap',
  };
}

function td(): React.CSSProperties {
  return {
    fontSize: 12,
    padding: '8px 12px',
    borderBottom: '1px solid #f1f5f9',
    color: '#1e293b',
    textAlign: 'right',
    verticalAlign: 'middle',
  };
}

// ─── Root Component ──────────────────────────────────────────────────────────

export default function WorldSection() {
  return (
    <div style={{
      direction: 'rtl',
      fontFamily: 'Vazir, IRANSans, Tahoma, sans-serif',
      maxWidth: 1100,
      margin: '0 auto',
      padding: '24px 16px 40px',
    }}>

      {/* Inject keyframes */}
      <style>{SCANNER_CSS}</style>

      {/* Section masthead */}
      <div style={{
        display: 'flex',
        alignItems: 'baseline',
        justifyContent: 'space-between',
        marginBottom: 16,
        paddingBottom: 10,
        borderBottom: '2px solid #1e40af',
        direction: 'rtl',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{
            fontSize: 18,
            fontWeight: 800,
            color: '#0f172a',
            letterSpacing: '-0.02em',
          }}>
            دیدن جهان
          </span>
          <span style={{
            fontSize: 11,
            color: '#94a3b8',
            fontFamily: 'Vazir, sans-serif',
            letterSpacing: '0.5px',
          }}>
            GLOBAL STEEL INTELLIGENCE
          </span>

          {/* Live indicator */}
          <span style={{
            display: 'flex',
            alignItems: 'center',
            gap: 4,
            fontSize: 10,
            color: '#16a34a',
            fontFamily: 'Vazir, sans-serif',
            fontWeight: 600,
            border: '1px solid #bbf7d0',
            background: '#f0fdf4',
            padding: '2px 8px',
            borderRadius: 20,
          }}>
            <span style={{ animation: 'blink 1.2s ease-in-out infinite', fontSize: 8 }}>●</span>
            داده‌ها به‌روز
          </span>
        </div>

        <div style={{
          fontSize: 10,
          fontFamily: 'Vazir, sans-serif',
          color: '#94a3b8',
          letterSpacing: '0.5px',
        }}>
          بروزرسانی: ۳۰ خرداد ۱۴۰۵ &nbsp;|&nbsp; Q2 2026
        </div>
      </div>

      {/* Global market pulse — AnimatedRadialChart gauges */}
      <motion.div
        className="grid grid-cols-2 lg:grid-cols-4 gap-8 mb-8"
        initial={{ opacity: 0, y: 24 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: '-60px' }}
        transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
      >
        {[
          { label: 'حمایت‌گرایی تجاری', value: 68, sub: '۲۰۷ اقدام ضددامپینگ فعال', dur: 1.6 },
          { label: 'پوشش CBAM اروپا',   value: 45, sub: 'اجرا از ژانویه ۲۰۲۶',      dur: 1.8 },
          { label: 'پذیرش فولاد سبز',   value: 12, sub: 'هدف ۳۰٪ تا ۲۰۳۰',          dur: 2.0 },
          { label: 'ظرفیت مازاد چین',   value: 82, sub: '۱۱۷ Mt صادرات ۲۰۲۴',       dur: 2.2 },
        ].map((item, i) => (
          <motion.div
            key={item.label}
            initial={{ opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.4, delay: i * 0.08, ease: [0.22, 1, 0.36, 1] }}
            style={{
              background: '#fff',
              border: '1px solid #e2e8f0',
              borderTop: '3px solid #032340',
              borderRadius: 12,
              padding: '18px 12px',
              boxShadow: '0 8px 24px rgba(3,35,64,0.10), 0 2px 6px rgba(3,35,64,0.06)',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
            }}
          >
            <div style={{ fontSize: 9, fontWeight: 700, color: '#032340', letterSpacing: '1.5px', textTransform: 'uppercase' as const, textAlign: 'center' as const }}>{item.label}</div>
            <AnimatedRadialChart value={item.value} size={150} duration={item.dur} showLabels={false} />
            <div style={{ fontSize: 10, color: '#CD9E53', fontWeight: 600, textAlign: 'center' as const }}>{item.sub}</div>
          </motion.div>
        ))}
      </motion.div>

      {/* LiquidCard highlighting top risk signal */}
      <motion.div
        initial={{ opacity: 0, y: 16 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: '-60px' }}
        transition={{ duration: 0.45, delay: 0.35, ease: [0.22, 1, 0.36, 1] }}
        className="mb-5"
      >
        <LiquidCard className="p-4">
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, direction: 'rtl' }}>
            <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#ef4444', flexShrink: 0, boxShadow: '0 0 0 3px #fee2e2' }} />
            <div>
              <div style={{ fontSize: 11, fontWeight: 700, color: '#032340' }}>هشدار بحرانی — ریسک تعرفه‌ای</div>
              <div style={{ fontSize: 11, color: '#475569', marginTop: 2 }}>تعرفه Section 232 آمریکا ۵۰٪ · CBAM اروپا از ژانویه ۲۰۲۶ اجرایی می‌شود · بازارهای هدف صادراتی فولاد مبارکه تحت فشار</div>
            </div>
            <div style={{ marginRight: 'auto', fontSize: 10, color: '#CD9E53', fontWeight: 700, whiteSpace: 'nowrap' as const, flexShrink: 0 }}>Q2 2026</div>
          </div>
        </LiquidCard>
      </motion.div>

      <SteelPlantsGlobe />
      <MegaTrendsModule />
      <GeopoliticsModule />
      <TechRadarModule />
      <EcosystemModule />
      <GreenSteelTracker />
    </div>
  );
}
