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; }
}
@media (max-width: 920px) {
  .export-room-grid { grid-template-columns: 1fr !important; }
  .export-room-detail-grid,
  .export-room-evidence-grid { grid-template-columns: 1fr !important; }
  .export-room-market-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  .export-room-market-list { grid-template-columns: 1fr !important; }
  .mega-trends-table { display: none; }
  .mega-trends-mobile {
    display: grid !important;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
  }
  .mega-trends-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    padding: 12px !important;
  }
  .mega-trends-summary .world-stat {
    width: 100%;
    min-width: 0 !important;
    box-sizing: border-box;
    padding: 9px 7px !important;
  }
  .mega-trends-filters {
    justify-content: center !important;
    padding: 12px !important;
  }
  .mega-trends-filters button {
    min-width: 74px;
    padding: 6px 12px !important;
  }
  .world-masthead {
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
  }
  .world-masthead-primary {
    width: 100%;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  .world-masthead-title { font-size: 18px !important; }
  .world-masthead-en { display: none !important; }
  .world-masthead-live { padding: 4px 9px !important; }
  .world-masthead-updated {
    width: 100%;
    align-self: auto;
    font-size: 10px !important;
    line-height: 1.5;
    text-align: right;
  }
}
`;

// ─── 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[];
}

type ExportMarketTone = 'enter' | 'defend' | 'watch' | 'avoid';

interface ExportMarket {
  id: string;
  market: string;
  region: string;
  productFocus: string;
  logisticsHint: string;
}

interface DynamicExportSignal {
  marketId: string;
  score: number;
  risk: number;
  tone: ExportMarketTone;
  decision: string;
  pricePressure: string;
  evidence: string;
  action: string;
  fitDrivers: { label: string; value: number; color: string }[];
  reports: { label: string; url: string; insight: string }[];
  updatedAt: string;
  articleCount: number;
}

const exportMarkets: ExportMarket[] = [
  {
    id: 'iraq',
    market: 'عراق',
    region: 'بازار همسایه، پروژه‌محور',
    productFocus: 'HRC، ورق گالوانیزه، ورق رنگی',
    logisticsHint: 'بازار زمینی نزدیک؛ خبرهای TIR، بندر ام‌قصر و پروژه‌های عمرانی در امتیاز اثر می‌گذارند.',
  },
  {
    id: 'cis',
    market: 'آسیای مرکزی',
    region: 'کریدور زمینی، کمبود ورق تخت',
    productFocus: 'HRC، CRC، ورق پوشش‌دار',
    logisticsHint: 'مسیر زمینی شمال ایران و وابستگی وارداتی بازارهای کوچک‌تر در امتیاز اثر می‌گذارد.',
  },
  {
    id: 'gcc',
    market: 'امارات و GCC',
    region: 'پروژه، لجستیک دریایی، کیفیت مهم',
    productFocus: 'ورق پوشش‌دار، گالوانیزه، HRC با گرید مشخص',
    logisticsHint: 'مسیر دریایی کوتاه است، اما فشار قیمت چین/هند/ترکیه و هزینه حمل در امتیاز اثر دارد.',
  },
  {
    id: 'turkey',
    market: 'ترکیه',
    region: 'رقیب صنعتی نزدیک',
    productFocus: 'اسلب و HRC فقط در شکاف عرضه',
    logisticsHint: 'بازار نزدیک است، اما تولید داخلی و صادرات فعال ترکیه ریسک رقابت را بالا می‌برد.',
  },
  {
    id: 'india',
    market: 'هند',
    region: 'رشد سریع، اما رقیب ظرفیت‌ساز',
    productFocus: 'گرید خاص، همکاری صنعتی، نه صادرات حجمی',
    logisticsHint: 'رشد تقاضا مثبت است، اما ظرفیت‌سازی داخلی هند می‌تواند صادرات commodity را سخت کند.',
  },
  {
    id: 'eu',
    market: 'اروپا',
    region: 'کیفیت بالا، مانع کربن و تحریم',
    productFocus: 'گرید با داده CO₂ قابل راستی‌آزمایی',
    logisticsHint: 'کیفیت مهم است، اما CBAM، سهمیه واردات، تحریم و traceability تعیین‌کننده‌اند.',
  },
];

const exportDecisionMethod = [
  { label: 'تناسب محصول فولاد مبارکه', weight: 30, note: 'HRC، CRC، گالوانیزه، رنگی و اسلب با نیاز بازار مقصد تطبیق داده شده است.' },
  { label: 'دسترسی و هزینه لجستیک', weight: 20, note: 'فاصله زمینی/دریایی، مسیرهای فعال و ریسک حمل بررسی شده است.' },
  { label: 'فشار رقابت و قیمت', weight: 20, note: 'اثر صادرات چین، ظرفیت ترکیه/هند و ورود فولاد ارزان به بازارهای جایگزین لحاظ شده است.' },
  { label: 'ریسک مقررات و پرداخت', weight: 20, note: 'تعرفه، CBAM، سهمیه واردات، تحریم، ریسک وصول و ثبات مقررات وارد امتیاز شده است.' },
  { label: 'رشد تقاضای واقعی', weight: 10, note: 'پروژه‌های زیرساختی، ساخت‌وساز، تقاضای صنعتی و روند مصرف فولاد سنجیده شده است.' },
];

const staticExportSignals: Record<string, DynamicExportSignal> = {
  iraq: {
    marketId: 'iraq',
    score: 84,
    risk: 55,
    tone: 'enter',
    decision: 'ورود فعال، قرارداد کوتاه‌مدت و کنترل‌شده',
    pricePressure: 'متوسط؛ فشار صادرات چین و ترکیه وجود دارد، اما مزیت فاصله و مسیر زمینی ایران بخشی از فشار قیمت را جبران می‌کند.',
    evidence:
      'عراق برای فولاد مبارکه بازار نزدیک و پروژه‌محور است. فعال‌شدن TIR در عراق از ۲۰۲۵ مزیت مسیر زمینی را بهتر می‌کند. از طرف دیگر، طبق داده‌های OECD و روند صادرات چین، بازارهای خاورمیانه زیر فشار فولاد ارزان‌تر قرار گرفته‌اند؛ بنابراین ورود فعال باید با قرارداد کوتاه‌مدت، مشتری معتبر و قیمت‌گذاری روزانه انجام شود.',
    action: 'تمرکز روی HRC، گالوانیزه و ورق رنگی برای مشتری‌های مصرف‌کننده مستقیم؛ فروش حجمی باز بدون کنترل اعتبار پیشنهاد نمی‌شود.',
    fitDrivers: [
      { label: 'نزدیکی لجستیک', value: 92, color: '#22c55e' },
      { label: 'تناسب محصول', value: 84, color: '#1a6bcf' },
      { label: 'ریسک پرداخت/قیمت', value: 58, color: '#CD9E53' },
    ],
    reports: [
      {
        label: 'IRU: TIR goes live in Iraq, 2025',
        url: 'https://www.iru.org/news-resources/newsroom/tir-goes-live-iraq-breakthrough-middle-east-trade-and-development',
        insight: 'TIR از آوریل ۲۰۲۵ در عراق فعال شده و برای تجارت زمینی منطقه‌ای سیگنال مثبت لجستیکی است.',
      },
      {
        label: 'Mobarakeh Steel product portfolio',
        url: 'https://www.msc.ir/',
        insight: 'سبد ورق گرم، سرد، گالوانیزه و رنگی با نیاز بازار پروژه‌ای عراق همخوان است.',
      },
      {
        label: 'OECD Steel Outlook 2026',
        url: 'https://www.oecd.org/industry/steel/',
        insight: 'ظرفیت مازاد و صادرات بالای چین فشار قیمت را به بازارهای منطقه‌ای منتقل می‌کند.',
      },
    ],
    updatedAt: '2026-07-13T00:00:00+03:30',
    articleCount: 3,
  },
  cis: {
    marketId: 'cis',
    score: 78,
    risk: 57,
    tone: 'enter',
    decision: 'ورود انتخابی، شبکه توزیع سبک',
    pricePressure: 'متوسط؛ رقابت روسیه و چین جدی است، اما کمبود نسبی ورق تخت در بازارهای کوچک‌تر فرصت ایجاد می‌کند.',
    evidence:
      'آسیای مرکزی برای ورق تخت، بازار وارداتی و کریدوری است. مزیت فولاد مبارکه، سبد flat products و دسترسی زمینی از شمال ایران است. ریسک از سمت روسیه، چین و نوسان مسیرهای ترانزیتی می‌آید؛ بنابراین استراتژی مناسب، موجودی سبک و فروش بر پایه قیمت HRC منطقه‌ای است.',
    action: 'ایجاد نماینده/انبار سبک منطقه‌ای؛ تمرکز روی HRC، CRC و پوشش‌دار، نه فروش spot پراکنده.',
    fitDrivers: [
      { label: 'تناسب ورق تخت', value: 88, color: '#22c55e' },
      { label: 'مزیت مسیر', value: 76, color: '#1a6bcf' },
      { label: 'ریسک رقبا', value: 61, color: '#CD9E53' },
    ],
    reports: [
      {
        label: 'Mobarakeh Steel products',
        url: 'https://www.msc.ir/',
        insight: 'تمرکز فولاد مبارکه روی ورق تخت برای بازارهای وارداتی منطقه مناسب است.',
      },
      {
        label: 'worldsteel annual production data',
        url: 'https://worldsteel.org/steel-topics/statistics/annual-production-steel-data/',
        insight: 'کشورهای کوچک‌تر منطقه نسبت به چین، روسیه، ترکیه و ایران ظرفیت فولادسازی محدودتری دارند.',
      },
      {
        label: 'OECD Steel Outlook 2026',
        url: 'https://www.oecd.org/industry/steel/',
        insight: 'ظرفیت مازاد جهانی، قیمت‌گذاری در بازارهای وارداتی را حساس‌تر کرده است.',
      },
    ],
    updatedAt: '2026-07-13T00:00:00+03:30',
    articleCount: 3,
  },
  gcc: {
    marketId: 'gcc',
    score: 76,
    risk: 64,
    tone: 'defend',
    decision: 'ورود پریمیوم، نه جنگ قیمت',
    pricePressure: 'بالا؛ چین، هند و ترکیه در بازار خلیج فارس فشار قیمت می‌آورند، پس فروش commodity ریسک دارد.',
    evidence:
      'GCC بازار پروژه، انرژی، ساخت‌وساز و زیرساخت است و برای ورق پوشش‌دار و گرید قابل اتکا جذاب می‌ماند. اما تعرفه‌های آمریکا و اروپا باعث انحراف جریان فولاد به بازارهای جایگزین می‌شود. بنابراین فولاد مبارکه باید روی بسته محصولی، کیفیت و تحویل قابل اتکا رقابت کند، نه ارزان‌ترین قیمت.',
    action: 'پیشنهاد بسته HRC + گالوانیزه + ورق رنگی برای پروژه‌های مشخص؛ قرارداد با clause تعدیل قیمت.',
    fitDrivers: [
      { label: 'تقاضای پروژه', value: 83, color: '#22c55e' },
      { label: 'تناسب پوشش‌دار', value: 80, color: '#1a6bcf' },
      { label: 'فشار قیمت', value: 72, color: '#ef4444' },
    ],
    reports: [
      {
        label: 'AP: EU steel quota 18.3 Mt and 50% tariff',
        url: 'https://apnews.com/article/fe0c6ff0063a1679a2ed36b0f06da96a',
        insight: 'سخت‌تر شدن اروپا می‌تواند فولاد صادراتی را به بازارهای جایگزین مثل GCC منحرف کند.',
      },
      {
        label: 'OECD Steel Outlook 2026',
        url: 'https://www.oecd.org/industry/steel/',
        insight: 'صادرات بالای چین و overcapacity جهانی فشار قیمت منطقه‌ای ایجاد می‌کند.',
      },
      {
        label: 'Mobarakeh Steel coated products',
        url: 'https://www.msc.ir/',
        insight: 'گالوانیزه و ورق رنگی برای پروژه‌های ساختمانی و صنعتی GCC fit بالاتری از فروش خام HRC دارد.',
      },
    ],
    updatedAt: '2026-07-13T00:00:00+03:30',
    articleCount: 3,
  },
  turkey: {
    marketId: 'turkey',
    score: 61,
    risk: 70,
    tone: 'watch',
    decision: 'فروش فرصت‌محور، نه بازار حجمی',
    pricePressure: 'بالا؛ ترکیه خودش تولیدکننده و صادرکننده بزرگ است و فقط در شکاف عرضه یا گرید خاص فرصت می‌دهد.',
    evidence:
      'ترکیه در ۲۰۲۵ حدود ۳۸.۱ میلیون تن فولاد خام تولید کرده، در حالی که ایران حدود ۳۱.۸ میلیون تن تولید داشته است. نزدیکی جغرافیایی مزیت است، اما رقابت داخلی ترکیه و صادرات فعال این کشور ریسک را بالا می‌برد. بنابراین ترکیه نباید مقصد حجمی فولاد مبارکه باشد.',
    action: 'فروش فقط در زمان spread مثبت منطقه‌ای، کمبود مقطعی یا سفارش گرید مشخص؛ پایش هفتگی قیمت HRC ترکیه لازم است.',
    fitDrivers: [
      { label: 'نزدیکی بازار', value: 76, color: '#1a6bcf' },
      { label: 'رقابت داخلی', value: 82, color: '#ef4444' },
      { label: 'فرصت spot', value: 55, color: '#CD9E53' },
    ],
    reports: [
      {
        label: 'worldsteel annual production data, 2025',
        url: 'https://worldsteel.org/steel-topics/statistics/annual-production-steel-data/',
        insight: 'ترکیه ۳۸.۱ Mt و ایران ۳۱.۸ Mt فولاد خام در ۲۰۲۵ تولید کرده‌اند.',
      },
      {
        label: 'OECD Steel Outlook 2026',
        url: 'https://www.oecd.org/industry/steel/',
        insight: 'رقابت صادراتی در بازارهای جایگزین به‌خاطر overcapacity جهانی شدیدتر شده است.',
      },
      {
        label: 'Mobarakeh Steel flat products',
        url: 'https://www.msc.ir/',
        insight: 'اسلب و HRC برای ترکیه فقط در شکاف عرضه یا گرید/شرایط خاص منطقی است.',
      },
    ],
    updatedAt: '2026-07-13T00:00:00+03:30',
    articleCount: 3,
  },
  india: {
    marketId: 'india',
    score: 58,
    risk: 74,
    tone: 'watch',
    decision: 'رصد و همکاری انتخابی',
    pricePressure: 'بالا؛ رشد تقاضای هند مثبت است، اما رشد ظرفیت داخلی و زغال‌محور بودن بخشی از توسعه، رقابت صادراتی را سخت می‌کند.',
    evidence:
      'هند در ۲۰۲۵ حدود ۱۶۴.۹ میلیون تن فولاد خام تولید کرده، ۱۰.۴٪ بالاتر از ۲۰۲۴. worldsteel برای ۲۰۲۶ رشد تقاضای هند را حدود ۹٪ پیش‌بینی کرده است. این رشد فرصت صنعتی ایجاد می‌کند، اما هند هم‌زمان رقیب بزرگ ظرفیت‌ساز آسیاست؛ پس صادرات commodity به هند برای فولاد مبارکه اولویت ندارد.',
    action: 'رصد مشتری‌های گرید خاص، خودرویی یا صنعتی؛ عدم ورود به رقابت حجمی HRC مگر با حاشیه سود روشن.',
    fitDrivers: [
      { label: 'رشد تقاضا', value: 90, color: '#22c55e' },
      { label: 'رشد ظرفیت داخلی', value: 86, color: '#ef4444' },
      { label: 'fit صادراتی مبارکه', value: 50, color: '#CD9E53' },
    ],
    reports: [
      {
        label: 'Times of India / worldsteel provisional 2025',
        url: 'https://timesofindia.indiatimes.com/city/kolkata/indias-crude-steel-output-grows-10/articleshow/127499102.cms',
        insight: 'تولید فولاد خام هند در ۲۰۲۵ به ۱۶۴.۹ Mt رسید و تقاضای ۲۰۲۶ حدود ۹٪ رشد پیش‌بینی شده است.',
      },
      {
        label: 'Global Energy Monitor steel tracker',
        url: 'https://globalenergymonitor.org/projects/global-steel-plant-tracker/',
        insight: 'رشد ظرفیت فولاد هند، فرصت تقاضا را با ریسک رقابت عرضه همراه می‌کند.',
      },
      {
        label: 'Mobarakeh Steel product portfolio',
        url: 'https://www.msc.ir/',
        insight: 'برای هند، گرید خاص یا همکاری صنعتی منطقی‌تر از فروش commodity است.',
      },
    ],
    updatedAt: '2026-07-13T00:00:00+03:30',
    articleCount: 3,
  },
  eu: {
    marketId: 'eu',
    score: 43,
    risk: 91,
    tone: 'avoid',
    decision: 'احتیاط؛ فقط مسیر غیرمستقیم با داده کربن',
    pricePressure: 'قیمت پریمیوم ممکن است، اما مانع قانونی بسیار بالا است: CBAM، سهمیه واردات، تعرفه و traceability.',
    evidence:
      'اروپا از ۱ ژانویه ۲۰۲۶ وارد فاز قطعی CBAM شده و واردکننده‌های فولاد باید الزامات گزارش و گواهی کربن را رعایت کنند. هم‌زمان اتحادیه اروپا سهمیه بدون تعرفه فولاد را به ۱۸.۳ میلیون تن کاهش داده و بالاتر از آن تعرفه ۵۰٪ پیشنهاد/اعمال کرده است. برای فولاد مبارکه، بدون بسته داده CO₂ قابل‌راستی‌آزمایی و مسیر compliance، اروپا مقصد مستقیم پرریسک است.',
    action: 'ساخت بسته carbon data، محاسبه CO₂ محصول، و فروش غیرمستقیم فقط با خریدار دارای مسیر compliance.',
    fitDrivers: [
      { label: 'قیمت پریمیوم', value: 70, color: '#1a6bcf' },
      { label: 'ریسک CBAM/تعرفه', value: 92, color: '#ef4444' },
      { label: 'آمادگی داده CO₂', value: 42, color: '#CD9E53' },
    ],
    reports: [
      {
        label: 'European Commission: CBAM',
        url: 'https://taxation-customs.ec.europa.eu/carbon-border-adjustment-mechanism_en',
        insight: 'CBAM از ۱ ژانویه ۲۰۲۶ وارد دوره قطعی شده و گزارش/گواهی کربن برای واردات فولاد تعیین‌کننده است.',
      },
      {
        label: 'AP: EU steel quota 18.3 Mt and 50% tariff',
        url: 'https://apnews.com/article/fe0c6ff0063a1679a2ed36b0f06da96a',
        insight: 'اتحادیه اروپا سهمیه بدون تعرفه را به ۱۸.۳ Mt کاهش داده و تعرفه بالاتر از سهمیه را ۵۰٪ قرار داده است.',
      },
      {
        label: 'Guardian: EU steel measures from July 2026',
        url: 'https://www.theguardian.com/business/2026/apr/14/uk-steel-exports-eu-risk-tariffs-quotas',
        insight: 'از ژوئیه ۲۰۲۶ سخت‌گیری واردات فولاد اروپا، تجارت فولاد منطقه‌ای را محدودتر می‌کند.',
      },
    ],
    updatedAt: '2026-07-13T00:00:00+03:30',
    articleCount: 3,
  },
};

const globalMarketPulse = [
  {
    label: 'فشار مازاد ظرفیت',
    value: 40,
    stat: '۷۴۵ Mt ظرفیت مازاد تا ۲۰۲۸',
    gaugeLabel: 'معادل حدود ۴۰٪ تولید جهانی ۲۰۲۵',
    source: 'OECD Steel Outlook 2026',
    meaning: 'بازار جهانی فولاد بیش از تقاضای واقعی ظرفیت دارد؛ یعنی رقابت قیمتی و دامپینگ صادراتی شدیدتر می‌شود.',
    impact: 'برای ایران: حاشیه سود صادرات کم می‌شود و فروش در بازارهای منطقه‌ای نیاز به مزیت قیمت/کیفیت دقیق‌تر دارد.',
    dur: 1.6,
  },
  {
    label: 'CBAM اروپا',
    value: 50,
    stat: 'بیش از ۵۰٪ انتشار بخش‌های ETS',
    gaugeLabel: 'پوشش انتشار در فاز کامل CBAM',
    source: 'European Commission, 2026',
    meaning: 'واردکننده‌های اروپایی آهن و فولاد باید کربن نهفته کالا را گزارش کنند و گواهی CBAM بخرند.',
    impact: 'برای ایران: صادرات مستقیم یا غیرمستقیم به زنجیره اروپا بدون داده معتبر CO₂ پرریسک‌تر و گران‌تر می‌شود.',
    dur: 1.8,
  },
  {
    label: 'قفل زغال‌سنگ',
    value: 84,
    stat: '۸۴٪ طرح‌های جدید هند کوره بلند',
    gaugeLabel: 'سهم کوره بلند در ظرفیت جدید هند',
    source: 'Global Energy Monitor / AP, 2025',
    meaning: 'بخش بزرگی از ظرفیت جدید فولاد آسیا هنوز زغال‌محور است؛ گذار به فولاد کم‌کربن کندتر از هدف‌های اقلیمی پیش می‌رود.',
    impact: 'برای ایران: مسیر DRI گازی مزیت نسبی دارد، اما باید با برق پاک و گزارش کربن پشتیبانی شود.',
    dur: 2.0,
  },
  {
    label: 'حمایت‌گرایی تجاری',
    value: 50,
    stat: 'آمریکا ۵۰٪ تعرفه؛ اروپا سهمیه ۱۸٫۳ Mt',
    gaugeLabel: 'تعرفه Section 232 آمریکا',
    source: 'AP / U.S. Section 232 / EU proposal',
    meaning: 'آمریکا تعرفه فولاد و آلومینیوم را به ۵۰٪ رسانده و اروپا هم رژیم سخت‌گیرانه‌تری برای واردات فولاد پیشنهاد کرده است.',
    impact: 'برای ایران: جریان تجارت منحرف می‌شود؛ فولاد چین، هند و ترکیه فشار بیشتری روی بازارهای خاورمیانه می‌آورد.',
    dur: 2.2,
  },
];

const megaTrends: TrendRow[] = [
  {
    trend: 'مازاد عرضه و صادرات چین',
    signal: '↓',
    signalLabel: 'هشدار',
    change: 'صادرات ۲۰۲۵: ۱۳۱ Mt',
    driver: 'رکود ساخت‌وساز چین و فشار ظرفیت',
    importance: 94,
    sparkData: [1019, 1005, 961, 120, 131],
    analysis:
      'تولید فولاد خام چین در ۲۰۲۵ به حدود ۹۶۰.۸ میلیون تن کاهش یافته، اما صادرات فولاد این کشور به حدود ۱۳۱ میلیون تن رسیده است. افت تقاضای داخلی چین به بازارهای صادراتی منتقل شده و فشار قیمتی روی خاورمیانه، آسیای میانه و شمال آفریقا بیشتر می‌شود.',
    links: ['OECD Steel Outlook 2026', 'worldsteel crude steel production 2025', 'AP/Economic Times coverage'],
    history: ['تولید چین ۲۰۲۳: ۱۰۲۸.۹ Mt', 'تولید چین ۲۰۲۴: ۱۰۰۵.۱ Mt', 'تولید چین ۲۰۲۵: ۹۶۰.۸ Mt', 'صادرات چین ۲۰۲۵: حدود ۱۳۱ Mt'],
  },
  {
    trend: 'CBAM و قیمت کربن اروپا',
    signal: '↑',
    signalLabel: 'صعودی',
    change: 'فعال از ۱ ژانویه ۲۰۲۶',
    driver: 'اظهارنامه کربن و خرید گواهی CBAM',
    importance: 91,
    sparkData: [0, 25, 50, 75, 100],
    analysis:
      'CBAM از ۱ ژانویه ۲۰۲۶ وارد دوره قطعی شده است. واردکنندگان اروپایی کالاهای فولادی بالای آستانه ۵۰ تن باید مجوز CBAM بگیرند، انتشار نهفته را اعلام کنند و از ۲۰۲۷ گواهی متناظر تسلیم کنند. برای فولادساز ایرانی، داده قابل‌راستی‌آزمایی CO₂ و مسیر کاهش کربن به شرط ورود به زنجیره اروپا تبدیل می‌شود.',
    links: ['European Commission CBAM', 'DG TAXUD CBAM guidance 2026'],
    history: ['اکتبر ۲۰۲۳: شروع دوره انتقالی', '۱ ژانویه ۲۰۲۶: شروع دوره قطعی', '۳۰ سپتامبر ۲۰۲۷: نخستین اظهارنامه سالانه'],
  },
  {
    trend: 'رشد فولاد هند',
    signal: '↑',
    signalLabel: 'صعودی',
    change: 'تولید ۲۰۲۵: ۱۶۴.۹ Mt',
    driver: 'زیرساخت، ساختمان و تقاضای داخلی هند',
    importance: 88,
    sparkData: [125, 141, 149, 165, 179],
    analysis:
      'هند در ۲۰۲۵ حدود ۱۶۴.۹ میلیون تن فولاد خام تولید کرده، حدود ۱۰.۴٪ بیشتر از ۲۰۲۴. برآوردهای Short Range Outlook برای ۲۰۲۶ نیز رشد تقاضای هند را حدود ۹٪ نشان می‌دهد. نتیجه برای ایران: هند هم بازار مصرف بزرگ است، هم رقیب ظرفیت‌ساز در آسیا.',
    links: ['worldsteel provisional 2025 data', 'worldsteel Short Range Outlook', 'Times of India steel output coverage'],
    history: ['۲۰۲۲: ۱۲۵.۳ Mt', '۲۰۲۳: ۱۴۰.۸ Mt', '۲۰۲۴: ۱۴۹.۴ Mt', '۲۰۲۵: ۱۶۴.۹ Mt', 'تقاضای ۲۰۲۶: حدود +۹٪'],
  },
  {
    trend: 'گذار کند به EAF و فولاد کم‌کربن',
    signal: '→',
    signalLabel: 'ثابت',
    change: 'EAF جهانی: حدود ۳۴٪',
    driver: 'قراضه، برق پاک و آهن اسفنجی کم‌کربن',
    importance: 76,
    sparkData: [30, 31, 32, 34, 37],
    analysis:
      'مسیر کوره قوس الکتریکی در جهان رشد کرده، اما طبق پوشش Global Energy Monitor هنوز حدود ۳۴٪ ظرفیت/تولید جهانی را تشکیل می‌دهد؛ هدف سناریوهای اقلیمی برای ۲۰۳۰ نزدیک ۳۷٪ است. مزیت ایران در DRI گازی زمانی قابل دفاع می‌ماند که برق پاک، بهره‌وری انرژی و گزارش کربن هم اضافه شود.',
    links: ['Global Energy Monitor steel decarbonisation 2025/2026', 'IEA iron and steel pathway'],
    history: ['۲۰۲۴/۲۰۲۵: EAF حدود ۳۴٪', 'هدف مسیر اقلیمی ۲۰۳۰: حدود ۳۷٪', 'ریسک اصلی: کمبود قراضه باکیفیت و برق ارزان پاک'],
  },
  {
    trend: 'قفل زغال‌سنگ در توسعه آسیا',
    signal: '↓',
    signalLabel: 'هشدار',
    change: 'هند: ۸۴٪ طرح‌ها کوره بلند',
    driver: 'ظرفیت جدید زغال‌محور در هند',
    importance: 85,
    sparkData: [60, 70, 80, 84, 84],
    analysis:
      'گزارش Global Energy Monitor نشان می‌دهد هند با برنامه افزایش ظرفیت از حدود ۲۰۰ به بیش از ۳۳۰ میلیون تن تا ۲۰۳۰، بخش عمده توسعه آهن‌سازی را زغال‌محور پیش می‌برد؛ در برخی پوشش‌ها ۸۴٪ آهن‌سازی اولیه طرح‌های جدید بر پایه کوره بلند ذکر شده است. این روند هم ریسک اقلیمی دارد، هم احتمال رقابت قیمتی با فولاد پرکربن را بالا می‌برد.',
    links: ['Global Energy Monitor', 'AP India steel expansion report', 'Financial Times GEM coverage'],
    history: ['ظرفیت فعلی هند: حدود ۲۰۰ Mt', 'هدف ۲۰۳۰: بیش از ۳۳۰ Mt', 'سهم کوره بلند در طرح‌های جدید: حدود ۸۴٪'],
  },
  {
    trend: 'دیوارهای تجاری فولاد',
    signal: '↓',
    signalLabel: 'هشدار',
    change: 'آمریکا: ۵۰٪ تعرفه',
    driver: 'Section 232 و پیشنهاد سهمیه فولاد اروپا',
    importance: 83,
    sparkData: [25, 25, 50, 50, 50],
    analysis:
      'آمریکا در ژوئن ۲۰۲۵ تعرفه فولاد و آلومینیوم را به ۵۰٪ رساند. اتحادیه اروپا نیز پیشنهاد کرده سهمیه بدون تعرفه فولاد به ۱۸.۳ میلیون تن کاهش یابد و بالاتر از آن تعرفه ۵۰٪ اعمال شود. این سیاست‌ها تجارت را منحرف می‌کند و فولاد ارزان‌تر چین، هند و ترکیه را به بازارهای جایگزین از جمله خاورمیانه هل می‌دهد.',
    links: ['U.S. Section 232 steel tariff coverage', 'AP EU steel quota proposal', 'European Commission steel safeguards'],
    history: ['مارس ۲۰۲۵: تعرفه آمریکا ۲۵٪', 'ژوئن ۲۰۲۵: تعرفه آمریکا ۵۰٪', 'پیشنهاد اروپا: سهمیه ۱۸.۳ Mt و تعرفه ۵۰٪ بالاتر از سهمیه'],
  },
];

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 className="mega-trends-summary" 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 className="mega-trends-filters" 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 className="mega-trends-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>

      <div className="mega-trends-mobile" style={{ display: 'none' }}>
        {filtered.map((row) => {
          const origIdx = megaTrends.indexOf(row)
          const isExpanded = expandedRow === origIdx
          return (
            <article
              key={`mobile-${origIdx}`}
              onClick={() => setExpandedRow(isExpanded ? null : origIdx)}
              style={{
                background: isExpanded ? '#eff6ff' : '#fff',
                border: `1px solid ${isExpanded ? '#bfdbfe' : '#e2e8f0'}`,
                borderRadius: 12,
                padding: 12,
                cursor: 'pointer',
              }}
            >
              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 10 }}>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 900, color: '#0f172a', lineHeight: 1.7 }}>{row.trend}</div>
                  <div style={{ marginTop: 5 }}><span style={signalStyle(row.signal)}>{row.signal} {row.signalLabel}</span></div>
                </div>
                <span style={{ color: '#94a3b8', fontSize: 12, flexShrink: 0 }}>{isExpanded ? '▲' : '▼'}</span>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 12 }}>
                <div style={{ background: '#f8fafc', borderRadius: 8, padding: 8, minWidth: 0 }}>
                  <div style={{ fontSize: 9, color: '#94a3b8', marginBottom: 3 }}>تغییر ۱۲ماهه</div>
                  <div style={{ fontSize: 11, fontWeight: 800, color: '#334155', lineHeight: 1.6, overflowWrap: 'anywhere' }}>{faDigits(row.change)}</div>
                </div>
                <div style={{ background: '#f8fafc', borderRadius: 8, padding: 8, minWidth: 0 }}>
                  <div style={{ fontSize: 9, color: '#94a3b8', marginBottom: 3 }}>محرک اصلی</div>
                  <div style={{ fontSize: 11, fontWeight: 700, color: '#475569', lineHeight: 1.6 }}>{faDigits(row.driver)}</div>
                </div>
              </div>

              <div style={{ marginTop: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: '#64748b', marginBottom: 5 }}>
                  <span>اهمیت</span><span style={{ fontWeight: 900, color: '#032340' }}>{faNum(row.importance)}</span>
                </div>
                <ImportanceBar value={row.importance} />
              </div>

              {isExpanded && (
                <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid #bfdbfe' }}>
                  <p style={{ fontSize: 12, color: '#334155', lineHeight: 1.9, margin: 0 }}>{faDigits(row.analysis)}</p>
                  <div style={{ display: 'grid', gap: 4, marginTop: 10 }}>
                    {row.history.map((history) => (
                      <span key={history} style={{ fontSize: 10, color: '#64748b', lineHeight: 1.7 }}>‹ {faDigits(history)}</span>
                    ))}
                  </div>
                </div>
              )}
            </article>
          )
        })}
      </div>
    </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
      className="world-stat"
      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 ExportDecisionRoom() {
  const [selectedId, setSelectedId] = useState(exportMarkets[0].id);
  const signals = staticExportSignals;
  const selected = exportMarkets.find((market) => market.id === selectedId) ?? exportMarkets[0];
  const selectedSignal = signals[selected.id];
  const signalList = Object.values(signals);
  const enterCount = signalList.filter((signal) => signal.tone === 'enter').length;
  const avgScore = Math.round(signalList.reduce((sum, signal) => sum + signal.score, 0) / signalList.length);
  const highRiskCount = signalList.filter((signal) => signal.risk >= 70).length;

  const toneStyle: Record<ExportMarketTone, { bg: string; fg: string; border: string; dot: string; label: string }> = {
    enter: { bg: '#ecfdf5', fg: '#047857', border: '#a7f3d0', dot: '#22c55e', label: 'ورود' },
    defend: { bg: '#eff6ff', fg: '#1d4ed8', border: '#bfdbfe', dot: '#1a6bcf', label: 'دفاع' },
    watch: { bg: '#fffbeb', fg: '#92400e', border: '#fde68a', dot: '#CD9E53', label: 'رصد' },
    avoid: { bg: '#fef2f2', fg: '#b91c1c', border: '#fecaca', dot: '#ef4444', label: 'احتیاط' },
  };

  const selectedTone = toneStyle[selectedSignal?.tone ?? 'watch'];
  const displayScore = selectedSignal ? faDigits(String(selectedSignal.score)) : 'N/A';
  const displayRisk = selectedSignal ? faDigits(String(selectedSignal.risk)) : 'N/A';

  return (
    <Module label="اتاق تصمیم صادرات فولاد مبارکه" showScanner>
      <motion.div
        initial={{ opacity: 0, y: 18 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: '-80px' }}
        transition={{ duration: 0.45, ease: [0.22, 1, 0.36, 1] }}
        style={{
          borderRadius: 16,
          overflow: 'hidden',
          border: '1px solid rgba(3,35,64,0.14)',
          background: '#071827',
          color: '#f8fafc',
          boxShadow: '0 14px 32px rgba(3,35,64,0.14)',
        }}
      >
        <div style={{
          position: 'relative',
          padding: 20,
          background:
            'radial-gradient(circle at 12% 18%, rgba(0,174,239,0.24), transparent 26%), radial-gradient(circle at 88% 8%, rgba(205,158,83,0.22), transparent 24%), linear-gradient(135deg, #071827 0%, #0b2a43 48%, #04101d 100%)',
        }}>
          <div style={{
            position: 'absolute',
            inset: 0,
            backgroundImage: 'linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px)',
            backgroundSize: '28px 28px',
            opacity: 0.5,
            pointerEvents: 'none',
          }} />

          <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', gap: 18, alignItems: 'flex-start', flexWrap: 'wrap' }}>
            <div style={{ maxWidth: 620 }}>
              <div style={{ fontSize: 11, color: '#93c5fd', fontWeight: 800, marginBottom: 8 }}>
                تصمیم بازار، نه نمایش خبر
              </div>
              <h3 style={{ color: '#fff', fontSize: 22, fontWeight: 900, lineHeight: 1.45, margin: 0 }}>
                کدام بازار برای سبد ورق فولاد مبارکه ارزش ورود دارد؟
              </h3>
              <p style={{ color: '#cbd5e1', fontSize: 12, lineHeight: 1.9, margin: '8px 0 0' }}>
                این نسخه برای شبکه داخلی، snapshot منبع‌دار دارد: هر امتیاز با گزارش مشخص، عدد واقعی و لینک منبع نمایش داده می‌شود.
              </p>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 10 }}>
                <span style={{
                  color: '#bbf7d0',
                  background: 'rgba(34,197,94,0.14)',
                  border: '1px solid rgba(187,247,208,0.35)',
                  borderRadius: 999,
                  padding: '5px 9px',
                  fontSize: 10,
                  fontWeight: 800,
                }}>
                  Snapshot تأییدشده: {faDigits(String(signalList.length))} بازار
                </span>
                <span style={{ color: '#cbd5e1', border: '1px solid rgba(255,255,255,0.14)', borderRadius: 999, padding: '5px 9px', fontSize: 10 }}>
                  آخرین بازبینی: ۲۳ تیر ۱۴۰۵، ۱۳ ژوئیه ۲۰۲۶
                </span>
              </div>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 8 }}>
                {exportDecisionMethod.map((method) => (
                  <span
                    key={method.label}
                    title={method.note}
                    style={{
                      color: '#e2e8f0',
                      background: 'rgba(255,255,255,0.07)',
                      border: '1px solid rgba(255,255,255,0.12)',
                      borderRadius: 999,
                      padding: '4px 8px',
                      fontSize: 9,
                      lineHeight: 1.4,
                    }}
                  >
                    {method.label}: {faDigits(String(method.weight))}٪
                  </span>
                ))}
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(86px, 1fr))', gap: 8, minWidth: 290 }}>
              {[
                { label: 'بازار قابل ورود', value: signalList.length ? faDigits(String(enterCount)) : '...', color: '#22c55e' },
                { label: 'میانگین جذابیت', value: avgScore === null ? '...' : faDigits(String(avgScore)), color: '#93c5fd' },
                { label: 'ریسک بالا', value: signalList.length ? faDigits(String(highRiskCount)) : '...', color: '#fca5a5' },
              ].map((item) => (
                <div
                  key={item.label}
                  style={{
                    background: 'rgba(255,255,255,0.08)',
                    border: '1px solid rgba(255,255,255,0.14)',
                    borderRadius: 12,
                    padding: '10px 12px',
                    backdropFilter: 'blur(8px)',
                  }}
                >
                  <div style={{ color: item.color, fontSize: 22, fontWeight: 900, lineHeight: 1 }}>{item.value}</div>
                  <div style={{ color: '#cbd5e1', fontSize: 10, marginTop: 6 }}>{item.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="export-room-grid" style={{
          display: 'grid',
          gridTemplateColumns: '300px minmax(0, 1fr)',
          gap: 0,
          background: '#f8fafc',
          color: '#0f172a',
        }}>
          <div style={{
            padding: 16,
            borderLeft: '1px solid #e2e8f0',
            background: 'linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%)',
          }}>
            <div style={{ fontSize: 11, fontWeight: 900, color: '#032340', marginBottom: 10 }}>
              انتخاب بازار هدف
            </div>
            <div className="export-room-market-list" style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 8 }}>
              {exportMarkets.map((market) => {
                const active = market.id === selected.id;
                const marketSignal = signals[market.id];
                const tone = toneStyle[marketSignal?.tone ?? 'watch'];

                return (
                  <button
                    key={market.id}
                    type="button"
                    onClick={() => setSelectedId(market.id)}
                    style={{
                      textAlign: 'right',
                      cursor: 'pointer',
                      border: active ? `1px solid ${tone.dot}` : '1px solid #e2e8f0',
                      background: active ? tone.bg : '#fff',
                      borderRadius: 12,
                      padding: '11px 12px',
                      transition: 'border-color 180ms ease, background 180ms ease, transform 180ms ease',
                      boxShadow: active ? `0 0 0 3px ${tone.border}` : 'none',
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ width: 8, height: 8, borderRadius: '50%', background: tone.dot, flexShrink: 0 }} />
                      <span style={{ fontSize: 13, fontWeight: 900, color: '#032340' }}>{market.market}</span>
                      <span style={{ marginRight: 'auto', fontSize: 10, color: tone.fg, fontWeight: 800 }}>
                        {marketSignal ? faDigits(String(marketSignal.score)) : 'N/A'}
                      </span>
                    </div>
                    <div style={{ fontSize: 10, color: '#64748b', marginTop: 5, lineHeight: 1.6 }}>
                      {market.region}
                    </div>
                  </button>
                );
              })}
            </div>
          </div>

          <div style={{ padding: 18 }}>
            <AnimatePresence mode="wait">
              <motion.div
                key={selected.id}
                initial={{ opacity: 0, y: 8 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -8 }}
                transition={{ duration: 0.2, ease: [0.22, 1, 0.36, 1] }}
              >
                <div className="export-room-detail-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.2fr) minmax(260px, 0.8fr)', gap: 16 }}>
                  <div style={{
                    borderRadius: 14,
                    border: '1px solid #dbe5ef',
                    background: '#fff',
                    padding: 16,
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', marginBottom: 14 }}>
                      <span style={{
                        display: 'inline-flex',
                        alignItems: 'center',
                        gap: 6,
                        border: `1px solid ${selectedTone.border}`,
                        background: selectedTone.bg,
                        color: selectedTone.fg,
                        borderRadius: 999,
                        padding: '5px 10px',
                        fontSize: 11,
                        fontWeight: 900,
                      }}>
                        <span style={{ width: 7, height: 7, borderRadius: '50%', background: selectedTone.dot }} />
                        {selectedSignal ? selectedTone.label : 'بدون داده'}
                      </span>
                      <div style={{ fontSize: 20, fontWeight: 900, color: '#032340' }}>{selected.market}</div>
                      <div style={{ color: '#64748b', fontSize: 11 }}>{selected.region}</div>
                    </div>

                    <div style={{
                      display: 'grid',
                      gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
                      gap: 10,
                      marginBottom: 16,
                    }}>
                      <div style={{ background: '#f8fafc', borderRadius: 12, padding: 12, border: '1px solid #e2e8f0' }}>
                        <div style={{ color: '#64748b', fontSize: 10, marginBottom: 6 }}>جذابیت بازار</div>
                        <div style={{ color: '#032340', fontSize: 26, fontWeight: 900 }}>{displayScore}</div>
                      </div>
                      <div style={{ background: '#f8fafc', borderRadius: 12, padding: 12, border: '1px solid #e2e8f0' }}>
                        <div style={{ color: '#64748b', fontSize: 10, marginBottom: 6 }}>ریسک اجرایی</div>
                        <div style={{ color: (selectedSignal?.risk ?? 0) >= 70 ? '#b91c1c' : '#92400e', fontSize: 26, fontWeight: 900 }}>{displayRisk}</div>
                      </div>
                      <div style={{ background: '#f8fafc', borderRadius: 12, padding: 12, border: '1px solid #e2e8f0' }}>
                        <div style={{ color: '#64748b', fontSize: 10, marginBottom: 6 }}>تصمیم</div>
                        <div style={{ color: '#032340', fontSize: 13, fontWeight: 900, lineHeight: 1.7 }}>
                          {selectedSignal?.decision ?? 'داده کافی نیست'}
                        </div>
                      </div>
                    </div>

                    <div style={{ display: 'grid', gap: 9 }}>
                      {(selectedSignal?.fitDrivers ?? []).map((driver) => (
                        <div key={driver.label}>
                          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: '#475569', marginBottom: 5 }}>
                            <span>{driver.label}</span>
                            <span style={{ fontWeight: 900, color: '#032340' }}>{faDigits(String(driver.value))}</span>
                          </div>
                          <div style={{ height: 7, borderRadius: 999, background: '#e2e8f0', overflow: 'hidden' }}>
                            <div style={{ width: `${driver.value}%`, height: '100%', background: driver.color, borderRadius: 999 }} />
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>

                  <div style={{
                    borderRadius: 14,
                    background: 'linear-gradient(180deg, #032340 0%, #071827 100%)',
                    color: '#fff',
                    padding: 16,
                    border: '1px solid rgba(3,35,64,0.16)',
                  }}>
                    <div style={{ fontSize: 11, color: '#93c5fd', fontWeight: 900, marginBottom: 8 }}>نسخه عملیاتی</div>
                    <div style={{ fontSize: 15, fontWeight: 900, lineHeight: 1.65, marginBottom: 12 }}>
                      {selected.productFocus}
                    </div>
                    <div style={{ display: 'grid', gap: 10 }}>
                      <div style={{ background: 'rgba(255,255,255,0.08)', borderRadius: 10, padding: 10 }}>
                        <div style={{ fontSize: 10, color: '#cbd5e1', marginBottom: 5 }}>فشار قیمت</div>
                        <div style={{ fontSize: 12, lineHeight: 1.75 }}>{selectedSignal?.pricePressure ?? 'پس از دریافت خبرها محاسبه می‌شود.'}</div>
                      </div>
                      <div style={{ background: 'rgba(255,255,255,0.08)', borderRadius: 10, padding: 10 }}>
                        <div style={{ fontSize: 10, color: '#cbd5e1', marginBottom: 5 }}>حمل و مسیر</div>
                        <div style={{ fontSize: 12, lineHeight: 1.75 }}>{selected.logisticsHint}</div>
                      </div>
                    </div>
                  </div>
                </div>

                <div className="export-room-evidence-grid" style={{
                  display: 'grid',
                  gridTemplateColumns: 'minmax(0, 1.25fr) minmax(240px, 0.75fr)',
                  gap: 12,
                  marginTop: 14,
                }}>
                  <div style={{
                    background: '#fff',
                    border: '1px solid #e2e8f0',
                    borderRadius: 14,
                    padding: 14,
                  }}>
                    <div style={{ fontSize: 11, fontWeight: 900, color: '#032340', marginBottom: 6 }}>
                      چرا این تصمیم؟
                    </div>
                    <div style={{ fontSize: 12, color: '#334155', lineHeight: 1.9 }}>
                      {selectedSignal?.evidence ?? 'برای این بازار snapshot منبع‌دار ثبت نشده است.'}
                    </div>
                  </div>
                  <div style={{
                    background: selectedTone.bg,
                    border: `1px solid ${selectedTone.border}`,
                    borderRadius: 14,
                    padding: 14,
                  }}>
                    <div style={{ fontSize: 11, fontWeight: 900, color: selectedTone.fg, marginBottom: 6 }}>
                      اقدام پیشنهادی
                    </div>
                    <div style={{ fontSize: 12, color: '#0f172a', lineHeight: 1.85, fontWeight: 700 }}>
                      {selectedSignal?.action ?? 'پس از دریافت داده زنده پیشنهاد ساخته می‌شود.'}
                    </div>
                  </div>
                </div>

                <div style={{
                  marginTop: 14,
                  background: '#fff',
                  border: '1px solid #e2e8f0',
                  borderRadius: 14,
                  padding: 14,
                }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, alignItems: 'center', marginBottom: 10, flexWrap: 'wrap' }}>
                    <div style={{ fontSize: 11, fontWeight: 900, color: '#032340' }}>خبرها و گزارش‌هایی که امتیاز از آن ساخته شد</div>
                    <div style={{ fontSize: 10, color: '#64748b' }}>
                      {selectedSignal ? `تعداد خبر: ${faDigits(String(selectedSignal.articleCount))}` : 'در انتظار داده'}
                    </div>
                  </div>
                  <div style={{ display: 'grid', gap: 8 }}>
                    {(selectedSignal?.reports ?? []).length > 0 ? selectedSignal!.reports.map((report) => (
                      <a
                        key={`${report.url}-${report.label}`}
                        href={report.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        style={{
                          display: 'block',
                          textDecoration: 'none',
                          border: '1px solid #e2e8f0',
                          borderRadius: 10,
                          padding: '9px 10px',
                          background: '#f8fafc',
                        }}
                      >
                        <div style={{ fontSize: 11, fontWeight: 800, color: '#1e40af', lineHeight: 1.7 }}>{report.label}</div>
                        <div style={{ fontSize: 10, color: '#64748b', marginTop: 4 }}>{report.insight}</div>
                      </a>
                    )) : (
                      <div style={{ fontSize: 11, color: '#64748b', lineHeight: 1.8 }}>
                        برای این بازار منبع قابل استفاده ثبت نشده است.
                      </div>
                    )}
                  </div>
                </div>

                <div style={{
                  marginTop: 12,
                  display: 'flex',
                  alignItems: 'center',
                  gap: 8,
                  color: '#64748b',
                  fontSize: 10,
                  lineHeight: 1.7,
                  flexWrap: 'wrap',
                }}>
                  <span style={{ color: '#032340', fontWeight: 900 }}>منبع مدل:</span>
                  <span>گزارش‌های رسمی/خبری معتبر + وزن‌دهی داخلی قابل مشاهده</span>
                  <span style={{ color: '#94a3b8' }}>
                    {selectedSignal ? `آخرین بازبینی: ${faDigits(new Date(selectedSignal.updatedAt).toLocaleDateString('fa-IR'))}` : 'بازبینی نشده'}
                  </span>
                </div>
              </motion.div>
            </AnimatePresence>
          </div>
        </div>
      </motion.div>
    </Module>
  );
}

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',
      }} className="world-masthead">
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }} className="world-masthead-primary">
          <span style={{
            fontSize: 18,
            fontWeight: 800,
            color: '#0f172a',
            letterSpacing: '-0.02em',
          }} className="world-masthead-title">
            دیدن جهان
          </span>
          <span style={{
            fontSize: 11,
            color: '#94a3b8',
            fontFamily: 'Vazir, sans-serif',
            letterSpacing: '0.5px',
          }} className="world-masthead-en">
            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,
          }} className="world-masthead-live">
            <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',
        }} className="world-masthead-updated">
          بروزرسانی: ۲۰ تیر ۱۴۰۵ &nbsp;|&nbsp; ۱۱ ژوئیه ۲۰۲۶
        </div>
      </div>

      {/* Global market pulse — sourced risk cards */}
      <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] }}
      >
        {globalMarketPulse.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: 'linear-gradient(180deg, #ffffff 0%, #f8fafc 100%)',
              border: '1px solid #dbe5ef',
              borderTop: '3px solid #1a6bcf',
              borderRadius: 12,
              padding: '18px 14px 16px',
              boxShadow: '0 8px 24px rgba(3,35,64,0.08), 0 2px 6px rgba(3,35,64,0.05)',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'stretch',
              gap: 10,
              minHeight: 330,
              direction: 'rtl',
            }}
          >
            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8 }}>
              <div>
                <div style={{ fontSize: 12, fontWeight: 900, color: '#032340', lineHeight: 1.5 }}>{item.label}</div>
                <div style={{ fontSize: 10, color: '#64748b', marginTop: 3 }}>{item.gaugeLabel}</div>
              </div>
            </div>

            <div style={{ alignSelf: 'center', marginTop: -4, marginBottom: -4 }}>
              <AnimatedRadialChart value={item.value} size={118} duration={item.dur} showLabels={false} />
            </div>

            <div style={{
              fontSize: 12,
              color: '#CD9E53',
              fontWeight: 900,
              textAlign: 'center' as const,
              lineHeight: 1.7,
              minHeight: 42,
            }}>
              {item.stat}
            </div>

            <div style={{ fontSize: 11, color: '#334155', lineHeight: 1.85 }}>
              {item.meaning}
            </div>

            <div style={{
              fontSize: 10,
              color: '#0f172a',
              lineHeight: 1.75,
              background: '#f1f5f9',
              borderRadius: 10,
              padding: '9px 10px',
              marginTop: 'auto',
            }}>
              {item.impact}
            </div>

            <div style={{
              fontSize: 9,
              color: '#64748b',
              borderTop: '1px solid #e2e8f0',
              paddingTop: 8,
              marginTop: 2,
            }}>
              منبع: {item.source}
            </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>

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