import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { FinancialScoreCards } from '@/components/ui/financial-score-cards';
import { Vo2MaxCard } from '@/components/ui/progress';
import { BorderBeam } from '@/components/ui/border-beam';
import { BarChart2, Layers, AlertTriangle } from 'lucide-react';

const NAVY = '#1e293b';
const ACCENT = '#b45309';

// ─── CSS injection ─────────────────────────────────────────────────────────────
const injectedCss = `
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes ticker {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
`;
if (typeof document !== 'undefined' && !document.getElementById('industry-css')) {
  const tag = document.createElement('style');
  tag.id = 'industry-css';
  tag.textContent = injectedCss;
  document.head.appendChild(tag);
}

// ─── Sparkline data ────────────────────────────────────────────────────────────
const sparkData: Record<string, number[]> = {
  'HRC (آمریکا)':    [950, 920, 900, 875, 862],
  'سنگ آهن ۶۲٪ Fe': [114, 108, 103,  98, 101],
  'قراضه HMS':       [365, 370, 378, 382, 385],
  'زغال کُک':        [238, 220, 205, 195, 200],
};

function Spark({ data, color }: { data: number[]; color: string }) {
  const min = Math.min(...data);
  const max = Math.max(...data);
  const r = max - min || 1;
  const pts = data
    .map((v, i) =>
      `${((i / (data.length - 1)) * 80).toFixed(0)},${(28 - ((v - min) / r) * 24 - 2).toFixed(0)}`
    )
    .join(' ');
  const lastPt = pts.split(' ').at(-1)!.split(',');
  return (
    <svg width={80} height={28}>
      <polyline points={pts} fill="none" stroke={color} strokeWidth={1.8} strokeLinecap="round" />
      <circle cx={+lastPt[0]} cy={+lastPt[1]} r={3} fill={color} />
    </svg>
  );
}

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

interface PriceRow {
  product: string;
  price: string;
  daily: string | null;
  monthly: string | null;
  yearly: string | null;
  source: string;
  upD?: boolean;
  upM?: boolean;
  upY?: boolean;
  weekLow: number;
  weekHigh: number;
  current: number;
  note: string;
}

const prices: PriceRow[] = [
  {
    product: 'HRC (آمریکا)', price: '$862/t',
    daily: null, monthly: '+12٪', yearly: '+8٪',
    source: 'Platts', upM: true, upY: true,
    weekLow: 780, weekHigh: 970, current: 862,
    note: 'تقاضای ساختمانی آمریکا قوی؛ تعرفه ۲۵٪ از واردات حمایت می‌کند',
  },
  {
    product: 'HRC (چین)', price: '$517/t',
    daily: '-0.4٪', monthly: '-6٪', yearly: '-14٪',
    source: 'MySteel', upD: false, upM: false, upY: false,
    weekLow: 490, weekHigh: 620, current: 517,
    note: 'اضافه‌عرضه داخلی؛ صادرات رکورد ۱۱۷Mt فشار نزولی دارد',
  },
  {
    product: 'سنگ آهن ۶۲٪ Fe', price: '$101.1/t',
    daily: '-0.1٪', monthly: '-8.3٪', yearly: '+6.7٪',
    source: 'SGX', upD: false, upM: false, upY: true,
    weekLow: 92, weekHigh: 140, current: 101,
    note: 'کاهش تولید چدن در چین؛ بازیابی تقاضا هند',
  },
  {
    product: 'قراضه HMS', price: '$385/t',
    daily: null, monthly: '-5٪', yearly: '+12.6٪',
    source: 'Metaloop', upM: false, upY: true,
    weekLow: 340, weekHigh: 410, current: 385,
    note: 'تقاضای EAF اروپا و ترکیه؛ محدودیت صادرات آمریکا',
  },
  {
    product: 'زغال کُک', price: '$200/t',
    daily: null, monthly: null, yearly: null,
    source: 'IEA',
    weekLow: 175, weekHigh: 260, current: 200,
    note: 'ذخایر استرالیا کافی؛ تقاضای آسیا تثبیت شده',
  },
  {
    product: 'نفت خام (Brent)', price: '$80/bbl',
    daily: null, monthly: null, yearly: null,
    source: 'ICE',
    weekLow: 70, weekHigh: 95, current: 80,
    note: 'تاثیر غیرمستقیم از طریق هزینه انرژی و حمل‌ونقل',
  },
];

const marketContext = [
  { label: 'تولید جهانی ۲۰۲۴', value: '۱,۸۸۲ Mt', note: 'کاهش ۱.۱٪', up: false },
  { label: 'سهم چین از تولید جهانی', value: '۵۳.۴٪', note: '۱,۰۰۵ Mt', up: null },
  { label: 'صادرات چین ۲۰۲۴', value: '۱۱۷ Mt', note: 'رکورد ۲۵ ساله، +25.1٪', up: true },
];

// Ticker items derived from prices
const tickerItems = prices.map(p => ({
  label: p.product,
  price: p.price,
  change: p.monthly ?? p.yearly ?? null,
  up: p.upM ?? p.upY ?? null,
}));

interface Competitor {
  name: string
  nameFa: string
  flag: string
  country: string
  region: 'China' | 'Europe' | 'Asia' | 'MENA' | 'Americas'
  rank: number
  outputMt: number
  growthPct: number
  revenueBn: number | null
  capacityMt: number | null
  utilizationPct: number
  techMix: { bfBof: number; eafDri: number }
  decarbonFa: string
  recentMoveFa: string
  newsFa: string
  keyProjectsFa: string[]
  isUs: boolean
}

const globalContext = {
  worldProductionMt2024: 1882.6,
  worldGrowthPct: -0.9,
  chinaSharePct: 53.4,
  chinaExportsMt: 110.7,
}

const REGION_COLOR: Record<Competitor['region'], string> = {
  China: '#dc2626', Europe: '#2563eb', Asia: '#7c3aed', MENA: '#CD9E53', Americas: '#0891b2',
}

const competitors: Competitor[] = [
  { name: 'Foulad Mobarakeh', nameFa: 'فولاد مبارکه', flag: '🇮🇷', country: 'ایران', region: 'MENA', rank: 44, outputMt: 10.19, growthPct: 0.8, revenueBn: null, capacityMt: 11.5, utilizationPct: 88, techMix: { bfBof: 0, eafDri: 100 }, decarbonFa: 'مسیر کاملاً سبزتر نسبت به همتایان زغال‌سنگی: ۱۰۰٪ قوس الکتریکی با احیای مستقیم گازی (میدرکس)؛ بزرگ‌ترین مجتمع آهن اسفنجی (DRI) جهان.', recentMoveFa: 'تثبیت جایگاه به‌عنوان بزرگ‌ترین فولادساز خاورمیانه و تولید بیش از ۵۰٪ فولاد ایران؛ توسعه واحدهای هرمزگان و سبا.', newsFa: 'حملات هوایی اسرائیل در خرداد ۱۴۰۴ تأسیسات فولادی ایران از جمله مبارکه را هدف قرار داد (GMK Center / New Lines)', keyProjectsFa: ['بزرگ‌ترین مجتمع احیای مستقیم (DRI) جهان در اصفهان با ۸ واحد و ظرفیت بیش از ۸.۲ میلیون تن', 'فولاد هرمزگان (۱.۵ میلیون تن EAF) و فولاد سبا (۱.۶ میلیون تن EAF) برای رشد ظرفیت گروه'], isUs: true },
  { name: 'China Baowu', nameFa: 'گروه فولاد بائووو', flag: '🇨🇳', country: 'چین', region: 'China', rank: 1, outputMt: 130.09, growthPct: 0, revenueBn: 152, capacityMt: null, utilizationPct: 85, techMix: { bfBof: 95, eafDri: 5 }, decarbonFa: 'هدف کاهش ۳۰٪ کربن به‌ازای هر تن فولاد خام تا ۲۰۳۵ (مبنای ۲۰۲۰) و خنثایی کربنی تا ۲۰۵۰؛ همچنان غالباً کوره بلند.', recentMoveFa: 'حفظ رتبه اول جهان در ۲۰۲۴ با ۱۳۰.۰۹ میلیون تن در میانه تجمیع صنعت فولاد چین.', newsFa: 'بائووو با تولید نزدیک به دو برابر آرسلورمیتال در صدر جهان باقی ماند (worldsteel / Mysteel)', keyProjectsFa: ['برنامه خنثایی کربنی تا ۲۰۵۰ و کاهش ۳۰٪ شدت کربن تا ۲۰۳۵', 'نقش پیشرو در تجمیع و ادغام صنعت فولاد دولتی چین'], isUs: false },
  { name: 'ArcelorMittal', nameFa: 'آرسلورمیتال', flag: '🇱🇺', country: 'لوکزامبورگ', region: 'Europe', rank: 2, outputMt: 57.9, growthPct: -5.1, revenueBn: 62.4, capacityMt: null, utilizationPct: 75, techMix: { bfBof: 75, eafDri: 25 }, decarbonFa: 'تعهد به خنثایی کربن تا ۲۰۵۰؛ سهم قوس الکتریکی حدود ۲۵٪ (از ۱۹٪ در ۲۰۱۸)؛ شدت کربن ۱.۷۵ تن در برابر میانگین صنعت ۱.۹۲.', recentMoveFa: 'در ژوئن ۲۰۲۵ پروژه‌های احیای مستقیم با هیدروژن در دو سایت آلمان را متوقف کرد با استناد به عدم صرفه هیدروژن سبز.', newsFa: 'آرسلورمیتال چند پروژه فولاد سبز اروپا را در انتظار بازنگری CBAM متوقف کرد (Recycling Today)', keyProjectsFa: ['ساخت کوره قوس الکتریکی ۱.۱ میلیون تنی در خیخون اسپانیا', 'طرح کارخانه صفر کربن سستائو با احیای مستقیم هیدروژن سبز (به تعویق افتاده)'], isUs: false },
  { name: 'Ansteel Group', nameFa: 'گروه آنگانگ (آنستیل)', flag: '🇨🇳', country: 'چین', region: 'China', rank: 3, outputMt: 55.89, growthPct: -1, revenueBn: null, capacityMt: null, utilizationPct: 84, techMix: { bfBof: 95, eafDri: 5 }, decarbonFa: 'غالباً کوره بلند یکپارچه زغال‌سنگی؛ دولتی و در مسیر کلی کاهش کربن صنعت فولاد چین.', recentMoveFa: 'حفظ جایگاه سومین فولادساز بزرگ جهان به‌عنوان شرکت دولتی چین.', newsFa: 'آنستیل سومین تولیدکننده بزرگ جهان در فهرست worldsteel ۲۰۲۴ (GMK Center)', keyProjectsFa: ['تثبیت ظرفیت کوره بلند یکپارچه دولتی', 'همراهی با اهداف کاهش کربن صنعت فولاد چین'], isUs: false },
  { name: 'Nippon Steel', nameFa: 'نیپون استیل', flag: '🇯🇵', country: 'ژاپن', region: 'Asia', rank: 4, outputMt: 43.64, growthPct: -2.1, revenueBn: 58, capacityMt: null, utilizationPct: 80, techMix: { bfBof: 90, eafDri: 10 }, decarbonFa: 'هدف خنثایی کربن تا ۲۰۵۰؛ سرمایه‌گذاری حدود ۶ میلیارد دلار در کوره‌های قوس الکتریکی با حمایت قانون GX ژاپن؛ غالباً کوره بلند.', recentMoveFa: 'تکمیل خرید ۱۴.۹ میلیارد دلاری US Steel در ۱۸ ژوئن ۲۰۲۵ با سهم طلایی دولت آمریکا.', newsFa: 'نیپون استیل US Steel را با ۱۴.۹ میلیارد دلار تصاحب کرد (Al Jazeera / AIST)', keyProjectsFa: ['خرید ۱۴.۹ میلیارد دلاری US Steel و تعهد ۱۱ میلیارد دلار سرمایه‌گذاری تا ۲۰۲۸', 'سرمایه‌گذاری ۶ میلیارد دلاری در کوره‌های قوس الکتریکی برای کاهش کربن'], isUs: false },
  { name: 'HBIS Group', nameFa: 'گروه اچ‌بی‌آی‌اس', flag: '🇨🇳', country: 'چین', region: 'China', rank: 5, outputMt: 42.28, growthPct: -1, revenueBn: null, capacityMt: null, utilizationPct: 83, techMix: { bfBof: 93, eafDri: 7 }, decarbonFa: 'غالباً کوره بلند یکپارچه؛ دولتی؛ آزمایش‌های احیای مستقیم با هیدروژن در راستای کاهش کربن صنعت چین.', recentMoveFa: 'حفظ جایگاه پنجمین فولادساز بزرگ جهان.', newsFa: 'اچ‌بی‌آی‌اس پنجمین تولیدکننده بزرگ جهان با ۴۲.۲۸ میلیون تن (worldsteel / GMK)', keyProjectsFa: ['توسعه فناوری احیای مستقیم با هیدروژن', 'تثبیت ظرفیت کوره بلند دولتی'], isUs: false },
  { name: 'POSCO Holdings', nameFa: 'پوسکو', flag: '🇰🇷', country: 'کره جنوبی', region: 'Asia', rank: 7, outputMt: 37.97, growthPct: -1.1, revenueBn: 51.4, capacityMt: null, utilizationPct: 82, techMix: { bfBof: 90, eafDri: 10 }, decarbonFa: 'غالباً کوره بلند؛ بازسازی کوره بلند تولید ۲۰۲۴ را کاهش داد؛ توسعه مواد باتری/لیتیوم از طریق POSCO Future M.', recentMoveFa: 'کاهش تولید ۲۰۲۴ به دلیل بازسازی کوره بلند و بازآرایی گروه؛ گسترش در مواد باتری.', newsFa: 'پوسکو در ۲۰۲۴ تولید را ۱.۱٪ کاهش داد و سود خالص ۳۶٪ افت کرد (GMK Center)', keyProjectsFa: ['بازسازی کوره بلند و بازآرایی ساختار گروه', 'گسترش مواد باتری و لیتیوم از طریق POSCO Future M'], isUs: false },
  { name: 'Tata Steel', nameFa: 'گروه تاتا استیل', flag: '🇮🇳', country: 'هند', region: 'Asia', rank: 10, outputMt: 31.02, growthPct: 3.28, revenueBn: 26, capacityMt: null, utilizationPct: 85, techMix: { bfBof: 85, eafDri: 15 }, decarbonFa: 'کوره بلند در هند؛ گذار بریتانیا به کوره قوس الکتریکی ۳.۲ میلیون تنی پس از تعطیلی کوره‌های بلند پورت تالبوت.', recentMoveFa: 'تعطیلی کوره‌های بلند پورت تالبوت و ساخت کوره قوس الکتریکی ۱.۲۵ میلیارد پوندی با حمایت دولت بریتانیا.', newsFa: 'تاتا استیل هند رکورد تولید فولاد خام را با ۴٪ رشد ثبت کرد (Tata Steel)', keyProjectsFa: ['ساخت کوره قوس الکتریکی ۳.۲ میلیون تنی در پورت تالبوت بریتانیا', 'رشد رکوردی تولید فولاد خام در هند به حدود ۲۰.۸ میلیون تن'], isUs: false },
  { name: 'JSW Steel', nameFa: 'جی‌اس‌دبلیو استیل', flag: '🇮🇳', country: 'هند', region: 'Asia', rank: 11, outputMt: 26.95, growthPct: 9, revenueBn: null, capacityMt: 35.7, utilizationPct: 86, techMix: { bfBof: 80, eafDri: 20 }, decarbonFa: 'غالباً کوره بلند با مقداری قوس الکتریکی/احیای مستقیم؛ در حال گسترش ظرفیت با تمرکز بر رشد.', recentMoveFa: 'گسترش ظرفیت به سمت ۳۵.۷ میلیون تن شامل واحد JVML ۱.۷ میلیون تنی در حال راه‌اندازی.', newsFa: 'جی‌اس‌دبلیو رکورد تولید فولاد خام FY2023-24 با ۹٪ رشد را ثبت کرد (Coal Trader)', keyProjectsFa: ['گسترش ظرفیت گروه به حدود ۳۵.۷ میلیون تن در سال', 'راه‌اندازی واحد JVML با ظرفیت ۱.۷ میلیون تن'], isUs: false },
  { name: 'Nucor', nameFa: 'نیوکور', flag: '🇺🇸', country: 'ایالات متحده', region: 'Americas', rank: 12, outputMt: 20.66, growthPct: -2, revenueBn: 30.73, capacityMt: null, utilizationPct: 78, techMix: { bfBof: 0, eafDri: 100 }, decarbonFa: '۱۰۰٪ قوس الکتریکی مبتنی بر قراضه؛ بزرگ‌ترین تولیدکننده EAF آمریکا با کمترین شدت کربن میان غول‌ها.', recentMoveFa: 'حفظ مدل مینی‌میل قراضه‌محور؛ فروش خالص ۳۰.۷۳ میلیارد دلار در ۲۰۲۴ با افت ۱۱٪ سالانه.', newsFa: 'نیوکور فروش خالص ۳۰.۷۳ میلیارد دلاری ۲۰۲۴ با کاهش ۱۱٪ را گزارش کرد (Nucor)', keyProjectsFa: ['حفظ ناوگان مینی‌میل ۱۰۰٪ قوس الکتریکی قراضه‌محور', 'بهره‌برداری از کمترین شدت کربن میان تولیدکنندگان بزرگ'], isUs: false },
  { name: 'Khouzestan Steel', nameFa: 'فولاد خوزستان', flag: '🇮🇷', country: 'ایران', region: 'MENA', rank: 53, outputMt: 4.2, growthPct: 1, revenueBn: null, capacityMt: 3.8, utilizationPct: 80, techMix: { bfBof: 0, eafDri: 100 }, decarbonFa: 'مسیر کاملاً قوس الکتریکی/احیای مستقیم گازی بدون کوره بلند؛ متمرکز بر بیلت صادراتی.', recentMoveFa: 'دومین تولیدکننده بزرگ ایران و صادرکننده بیلت به بیش از ۱۰ کشور.', newsFa: 'فولاد خوزستان دومین تولیدکننده بزرگ ایران با حدود ۴.۲ میلیون تن (شرکت / ویکی‌پدیا)', keyProjectsFa: ['صادرات بیلت به بیش از ۱۰ کشور', 'ظرفیت حدود ۳.۸ میلیون تن محصولات فولادی با مسیر EAF/DRI'], isUs: false },
  { name: 'Esfahan Steel (Zob Ahan)', nameFa: 'ذوب آهن اصفهان', flag: '🇮🇷', country: 'ایران', region: 'MENA', rank: 60, outputMt: 3, growthPct: 0.5, revenueBn: null, capacityMt: 4, utilizationPct: 75, techMix: { bfBof: 100, eafDri: 0 }, decarbonFa: 'تنها تولیدکننده بزرگ مبتنی بر کوره بلند ایران؛ استثنای تاریخی در برابر غلبه قوس الکتریکی کشور.', recentMoveFa: 'تمرکز بر محصولات طویل و ورق نوردی به‌عنوان اصلی‌ترین تولیدکننده کوره بلند ایران.', newsFa: 'ذوب آهن اصفهان اصلی‌ترین تولیدکننده کوره‌بلندی ایران با ظرفیت حدود ۴ میلیون تن (Global Energy Monitor)', keyProjectsFa: ['تولید محصولات طویل و ورق نوردی با مسیر کوره بلند', 'حفظ جایگاه به‌عنوان استثنای کوره‌بلندی در صنعت EAF‌محور ایران'], isUs: false },
  { name: 'Erdemir', nameFa: 'اردمیر ترکیه', flag: '🇹🇷', country: 'ترکیه', region: 'MENA', rank: 48, outputMt: 8.5, growthPct: 19, revenueBn: null, capacityMt: null, utilizationPct: 62, techMix: { bfBof: 100, eafDri: 0 }, decarbonFa: 'کوره بلند یکپارچه (فولاد تخت)؛ سرمایه‌گذاری بیش از ۱ میلیارد دلار در ۲۰۲۴ برای تحول زیست‌محیطی تولید.', recentMoveFa: 'رشد ۱۹٪ تولید ۲۰۲۴ و برنامه سرمایه‌گذاری ۱.۱ میلیارد دلاری برای تحول زیست‌محیطی.', newsFa: 'اردمیر تولید فولاد خام را در ۲۰۲۴ تا ۱۹٪ افزایش داد (GMK Center)', keyProjectsFa: ['سرمایه‌گذاری بیش از ۱ میلیارد دلار برای تحول زیست‌محیطی تولید', 'رشد تولید کارخانه‌های ارگلی و اسکندرون'], isUs: false },
  { name: 'Tosyalı Holding', nameFa: 'گروه توسیالی', flag: '🇹🇷', country: 'ترکیه', region: 'MENA', rank: 46, outputMt: 9.12, growthPct: 54.3, revenueBn: null, capacityMt: 15, utilizationPct: 70, techMix: { bfBof: 20, eafDri: 80 }, decarbonFa: 'تمرکز شدید بر احیای مستقیم گازی (میدرکس) و قوس الکتریکی؛ بزرگ‌ترین ظرفیت DRI اروپا و شمال آفریقا.', recentMoveFa: 'رشد ۵۴.۳٪ تولید و یکی از سه فولادساز پررشد جهان؛ توسعه ۲.۵ میلیارد دلاری الجزایر و طرح ۵ میلیارد دلاری عربستان.', newsFa: 'توسیالی با رشد ۵۴٪ به رتبه ۴۶ جهان صعود کرد و ظرفیت را به ۱۵ میلیون تن رساند (GMK Center)', keyProjectsFa: ['توسعه ۲.۵ میلیارد دلاری الجزایر با هدف ظرفیت ۹.۵ میلیون تن', 'طرح کارخانه ۵ میلیارد دلاری عربستان و پروژه سنگ‌آهن آنگولا'], isUs: false },
  { name: 'EMSTEEL', nameFa: 'امارات استیل (امستیل)', flag: '🇦🇪', country: 'امارات', region: 'MENA', rank: 65, outputMt: 3.5, growthPct: 2, revenueBn: 2.27, capacityMt: null, utilizationPct: 80, techMix: { bfBof: 0, eafDri: 100 }, decarbonFa: 'مسیر احیای مستقیم گازی و قوس الکتریکی بدون کوره بلند؛ از پیشروان فولاد کم‌کربن خاورمیانه.', recentMoveFa: 'درآمد ۲.۲۷ میلیارد دلاری در ۲۰۲۴؛ رشد ۸۱٪ سود EBITDA فصل چهارم با تقاضای ساخت‌وساز امارات.', newsFa: 'امستیل درآمد ۸.۳ میلیارد درهمی (۲.۲۷ میلیارد دلار) برای ۲۰۲۴ ثبت کرد (EMSTEEL)', keyProjectsFa: ['بخش فولاد با درآمد ۷.۶ میلیارد درهم و EBITDA ۶۸۰ میلیون درهم', 'رشد ۸۱٪ EBITDA فصلی بر پایه تقاضای میلگرد و ساخت‌وساز امارات'], isUs: false },
  { name: 'Ezz Steel', nameFa: 'عز استیل مصر', flag: '🇪🇬', country: 'مصر', region: 'MENA', rank: 62, outputMt: 6.4, growthPct: 5, revenueBn: null, capacityMt: null, utilizationPct: 80, techMix: { bfBof: 0, eafDri: 100 }, decarbonFa: 'ترکیبی از احیای مستقیم گازی و قوس الکتریکی (سوئز/عین سخنه) به‌علاوه واحدهای میلگرد؛ بدون کوره بلند.', recentMoveFa: 'رکورد تولید ۶.۴ میلیون تنی و بزرگ‌ترین فولادساز جهان عرب و آفریقا؛ صعود به رتبه ۶۲ جهان.', newsFa: 'عز استیل با ۶.۴ میلیون تن بزرگ‌ترین فولادساز جهان عرب و آفریقا شد (Arab Iron and Steel Union)', keyProjectsFa: ['واحدهای احیای مستقیم گازی و قوس الکتریکی در سوئز و عین سخنه', 'رشد ۳۷٪ تولید میلگرد مصر در نیمه نخست ۲۰۲۴'], isUs: false },
];

// official domains → used to fetch each company's own logo
const COMPANY_DOMAIN: Record<string, string> = {
  'Foulad Mobarakeh': 'msc.ir',
  'China Baowu': 'baowugroup.com',
  'ArcelorMittal': 'arcelormittal.com',
  'Ansteel Group': 'ansteel.cn',
  'Nippon Steel': 'nipponsteel.com',
  'HBIS Group': 'hbisco.com',
  'POSCO Holdings': 'posco.co.kr',
  'Tata Steel': 'tatasteel.com',
  'JSW Steel': 'jsw.in',
  'Nucor': 'nucor.com',
  'Khouzestan Steel': 'ksc.ir',
  'Esfahan Steel (Zob Ahan)': 'esfahansteel.ir',
  'Erdemir': 'erdemir.com.tr',
  'Tosyalı Holding': 'tosyaliholding.com.tr',
  'EMSTEEL': 'emsteel.ae',
  'Ezz Steel': 'ezzsteel.com',
};

// real company logo with graceful fallback: Clearbit → Google favicon → flag emoji
function CompanyLogo({ name, flag, size = 34 }: { name: string; flag: string; size?: number }) {
  const domain = COMPANY_DOMAIN[name];
  const [stage, setStage] = useState(0);
  if (!domain || stage >= 2) {
    return <span style={{ fontSize: size * 0.6, lineHeight: 1, width: size, textAlign: 'center', flexShrink: 0 }}>{flag}</span>;
  }
  const src = stage === 0 ? `https://www.google.com/s2/favicons?domain=${domain}&sz=128` : `https://${domain}/favicon.ico`;
  return (
    <img
      src={src}
      alt={name}
      width={size}
      height={size}
      loading="lazy"
      onError={() => setStage((s) => s + 1)}
      style={{ width: size, height: size, borderRadius: 8, objectFit: 'contain', background: '#fff', border: '1px solid #e8edf2', padding: 3, flexShrink: 0, boxShadow: '0 1px 4px rgba(3,35,64,0.10)' }}
    />
  );
}

type RiskCategory = 'trade' | 'energy' | 'market' | 'geopolitical' | 'environmental' | 'technology' | 'financial' | 'supply'

interface Risk {
  id: string
  nameFa: string
  category: RiskCategory
  descFa: string
  probabilityPct: number
  impactPct: number
  impactLabelFa: 'کم' | 'متوسط' | 'بالا' | 'بحرانی'
  horizonFa: 'کوتاه‌مدت' | 'میان‌مدت' | 'بلندمدت'
  trend: 'rising' | 'stable' | 'falling'
  mitigationFa: string
  sourceFa: string
}

const RISK_CAT: Record<RiskCategory, { fa: string; color: string }> = {
  trade:         { fa: 'تجاری',      color: '#dc2626' },
  energy:        { fa: 'انرژی',      color: '#ea580c' },
  market:        { fa: 'بازار',      color: '#d97706' },
  geopolitical:  { fa: 'ژئوپلیتیک',  color: '#7c3aed' },
  environmental: { fa: 'محیط‌زیست',  color: '#0891b2' },
  technology:    { fa: 'فناوری',     color: '#2563eb' },
  financial:     { fa: 'مالی',       color: '#059669' },
  supply:        { fa: 'زنجیره',     color: '#64748b' },
}

const TREND_FA: Record<Risk['trend'], { fa: string; icon: string; color: string }> = {
  rising:  { fa: 'صعودی', icon: '▲', color: '#dc2626' },
  stable:  { fa: 'ثابت',  icon: '▬', color: '#64748b' },
  falling: { fa: 'نزولی', icon: '▼', color: '#16a34a' },
}

const risks: Risk[] = [
  { id: 'cbam-financial-phase', nameFa: 'ورود CBAM اروپا به فاز پرداخت مالی', category: 'trade', descFa: 'از ۱ ژانویه ۲۰۲۶ سازوکار تعدیل مرزی کربن اتحادیه اروپا وارد فاز الزام مالی شد و قیمت گواهی CBAM برای فصل اول ۲۰۲۶ معادل ۷۵.۳۶ یورو به ازای هر تن CO₂ تعیین گردید.', probabilityPct: 100, impactPct: 85, impactLabelFa: 'بحرانی', horizonFa: 'کوتاه‌مدت', trend: 'rising', mitigationFa: 'تمرکز بر بازارهای غیراروپایی (خلیج فارس، آسیا) و کاهش شدت کربن فولاد DRI', sourceFa: 'EUROMETAL؛ Fastmarkets؛ Akin LLP' },
  { id: 'us-section-232-50', nameFa: 'دو برابر شدن تعرفه فولاد آمریکا (بخش ۲۳۲) به ۵۰٪', category: 'trade', descFa: 'تعرفه بخش ۲۳۲ آمریکا بر فولاد از ۴ ژوئن ۲۰۲۵ از ۲۵٪ به ۵۰٪ افزایش یافت و تمام معافیت‌های کشوری حذف شد.', probabilityPct: 100, impactPct: 70, impactLabelFa: 'بالا', horizonFa: 'کوتاه‌مدت', trend: 'rising', mitigationFa: 'پایش انحراف جریان‌های جهانی فولاد و تنوع‌بخشی به محصولات با ارزش افزوده', sourceFa: 'کاخ سفید؛ White & Case LLP' },
  { id: 'antidumping-surge', nameFa: 'موج بی‌سابقه اقدامات ضددامپینگ جهانی', category: 'trade', descFa: 'در بازه ژانویه تا سپتامبر ۲۰۲۴ تعداد ۶۷ اقدام دفاع تجاری فولادی آغاز شد که بیشترین رقم از بحران مازاد ظرفیت ۲۰۱۵-۱۶ است.', probabilityPct: 80, impactPct: 60, impactLabelFa: 'بالا', horizonFa: 'میان‌مدت', trend: 'rising', mitigationFa: 'تنوع‌بخشی مقاصد صادراتی و اجتناب از فروش با تخفیف شدید که هدف ضددامپینگ است', sourceFa: 'OECD؛ کمیسیون اروپا DG Trade' },
  { id: 'eu-safeguard-cut', nameFa: 'کاهش ۴۷٪ سهمیه حفاظتی فولاد اروپا', category: 'trade', descFa: 'اتحادیه اروپا سهمیه بدون تعرفه را به ۱۸.۳ میلیون تن در سال (کاهش ۴۷٪ نسبت به ۲۰۲۴) کاهش داد و عوارض خارج از سهمیه را از ۲۵٪ به ۵۰٪ دو برابر کرد.', probabilityPct: 85, impactPct: 75, impactLabelFa: 'بالا', horizonFa: 'میان‌مدت', trend: 'rising', mitigationFa: 'کاهش وابستگی به بازار اروپا و توسعه قراردادهای منطقه‌ای پایدار', sourceFa: 'شورای اتحادیه اروپا؛ Foley Hoag' },
  { id: 'india-safeguard', nameFa: 'عوارض حفاظتی و ضددامپینگ هند', category: 'trade', descFa: 'هند از ۲۱ آوریل ۲۰۲۵ عوارض حفاظتی ۱۲ درصدی بر فولاد تخت وضع کرد که موج فولاد چینی منحرف‌شده را به بازارهای خاورمیانه سرازیر می‌کند.', probabilityPct: 70, impactPct: 45, impactLabelFa: 'متوسط', horizonFa: 'میان‌مدت', trend: 'stable', mitigationFa: 'پایش رقابت قیمتی فولاد منحرف‌شده در بازارهای مشترک خلیج فارس', sourceFa: 'GMK Center؛ DGTR هند' },
  { id: 'gas-winter-cuts', nameFa: 'کمبود گاز و قطعی زمستانی تولید DRI', category: 'energy', descFa: 'دولت در زمستان ۲۰۲۴ گاز صنعت فولاد را حدود ۵۰٪ کاهش داد و تولید فولاد خام ایران در فصل سوم ۲۰۲۴ به ۴.۷ میلیون تن (افت ۴۵٪) رسید.', probabilityPct: 95, impactPct: 85, impactLabelFa: 'بحرانی', horizonFa: 'کوتاه‌مدت', trend: 'rising', mitigationFa: 'سرمایه‌گذاری در نیروگاه خودتأمین و بهینه‌سازی مصرف انرژی DRI', sourceFa: 'Iran International؛ worldsteel؛ gmk.center' },
  { id: 'power-summer-rationing', nameFa: 'کمبود برق و سهمیه‌بندی تابستانی', category: 'energy', descFa: 'کسری برق ایران به حدود ۲۵٬۰۰۰ مگاوات رسید و واحدهای فولادی به جای ۵۵۰۰ مگاوات تنها ۲۴۰۰ تا ۳۸۰۰ مگاوات دریافت کردند که شیفت‌های شب را متوقف کرد.', probabilityPct: 95, impactPct: 80, impactLabelFa: 'بحرانی', horizonFa: 'کوتاه‌مدت', trend: 'rising', mitigationFa: 'تأمین برق پایدار، مدیریت بار و قراردادهای تأمین خارج از شبکه', sourceFa: 'Iran International؛ FDD؛ IranWire' },
  { id: 'china-export-flood', nameFa: 'سیل صادرات و مازاد ظرفیت فولاد چین', category: 'market', descFa: 'صادرات فولاد چین در ۲۰۲۵ به رکورد ۱۳۱ میلیون تن رسید و مازاد ظرفیت جهانی ۶۴۰ میلیون تن شد که قیمت‌ها را در بازارهای مشترک با ایران فشرده می‌کند.', probabilityPct: 95, impactPct: 80, impactLabelFa: 'بحرانی', horizonFa: 'میان‌مدت', trend: 'rising', mitigationFa: 'تمایز محصول، کاهش هزینه تولید و تثبیت بازارهای منطقه‌ای وفادار', sourceFa: 'OECD؛ EUROMETAL؛ Euronews' },
  { id: 'hrc-price-decline', nameFa: 'افت قیمت کلاف گرم (HRC)', category: 'market', descFa: 'قیمت کلاف گرم آمریکا تا اواسط اوت ۲۰۲۵ به حدود ۸۷۵ دلار بر تن افت کرد و در فصل سوم ۲۰۲۵ به کف نزدیک ۸۵۱ دلار رسید.', probabilityPct: 75, impactPct: 55, impactLabelFa: 'متوسط', horizonFa: 'کوتاه‌مدت', trend: 'falling', mitigationFa: 'پوشش ریسک قیمت در قراردادها و کاهش بهای تمام‌شده هر تن', sourceFa: 'Steel Market Update؛ Trading Economics؛ J.P. Morgan' },
  { id: 'china-property-crisis', nameFa: 'بحران تقاضای ساخت‌وساز چین', category: 'market', descFa: 'فروش املاک چین در ۲۰۲۵ به کمتر از ۹ تریلیون یوان (نصف ۱۸.۲ تریلیون یوان سال ۲۰۲۱) رسید و سهم ساخت‌وساز از مصرف فولاد به زیر ۵۰٪ افت کرد.', probabilityPct: 90, impactPct: 70, impactLabelFa: 'بالا', horizonFa: 'میان‌مدت', trend: 'rising', mitigationFa: 'کاهش وابستگی غیرمستقیم به چرخه تقاضای چین و تنوع بازار صادراتی', sourceFa: 'S&P Global via CNBC؛ Atlantic Council؛ TIME' },
  { id: 'ofac-sanctions', nameFa: 'تحریم‌های OFAC بر فولاد مبارکه', category: 'geopolitical', descFa: 'فولاد مبارکه و شرکت‌های وابسته در فهرست تحریم OFAC قرار دارند؛ تحریم‌ها پیش‌تر صادرات ایران را از ۹ میلیون تن (۲۰۲۰) به ۴.۲ میلیون تن (۲۰۲۱) کاهش داد.', probabilityPct: 100, impactPct: 80, impactLabelFa: 'بحرانی', horizonFa: 'بلندمدت', trend: 'stable', mitigationFa: 'تنوع کانال‌های فروش و واسطه‌های مجاز و تمرکز بر بازارهای غیرغربی', sourceFa: 'US Treasury OFAC؛ SteelOrbis' },
  { id: 'eu-snapback-sanctions', nameFa: 'بازگشت تحریم‌های فلزات اتحادیه اروپا (اسنپ‌بک)', category: 'geopolitical', descFa: 'اتحادیه اروپا از ۳۰ سپتامبر ۲۰۲۵ ممنوعیت کامل تجارت فولاد و فلزات ایران را بازگرداند؛ علی‌رغم رشد ۵.۱ درصدی تولید، صادرات ۲۰.۹٪ افت کرد و به ۹.۸ میلیون تن رسید.', probabilityPct: 100, impactPct: 75, impactLabelFa: 'بالا', horizonFa: 'میان‌مدت', trend: 'rising', mitigationFa: 'جایگزینی بازار اروپا با مقاصد آسیایی و منطقه‌ای', sourceFa: 'gmk.center؛ sgbtrade.com' },
  { id: 'war-damage-mobarakeh', nameFa: 'خسارت جنگی به تأسیسات فولاد مبارکه', category: 'geopolitical', descFa: 'در ۲۰۲۶ حملات به پست برق، خط فولاد آلیاژی و نیروگاه‌های ۹۱۴ و ۲۵۰ مگاواتی مبارکه آسیب زد و ظرفیت عملیاتی به حدود ۶۰٪ محدود شد.', probabilityPct: 60, impactPct: 90, impactLabelFa: 'بحرانی', horizonFa: 'کوتاه‌مدت', trend: 'rising', mitigationFa: 'تقویت پدافند تأسیسات حیاتی و افزونگی شبکه برق درون‌سازمانی', sourceFa: 'Roic News؛ Steel Market Update (CRU)؛ Tehran Times' },
  { id: 'water-scarcity', nameFa: 'بحران کم‌آبی و خشکسالی اصفهان', category: 'environmental', descFa: 'ایران در وضعیت کم‌آبی مطلق (حدود ۸۵۰ متر مکعب سرانه) با بدترین خشکسالی ۵۰ سال اخیر است و زیان بخش فولاد از قطع آب و انرژی در ۲۰۲۴ از ۸.۵ میلیارد دلار فراتر رفت.', probabilityPct: 85, impactPct: 85, impactLabelFa: 'بحرانی', horizonFa: 'میان‌مدت', trend: 'rising', mitigationFa: 'بازچرخانی آب، فناوری خشک‌سازی و انتقال پساب تصفیه‌شده', sourceFa: 'Stimson Center؛ Carnegie Endowment؛ Carbon Brief' },
  { id: 'ets-carbon-cost', nameFa: 'افزایش قیمت کربن EU ETS', category: 'environmental', descFa: 'قیمت کربن EU ETS در ۱۵ دسامبر ۲۰۲۵ به ۸۳.۷۹ یورو بر تن (رشد ۳۰٪ سالانه) رسید و پیش‌بینی می‌شود در ۲۰۲۷ از ۱۰۰ یورو عبور کند.', probabilityPct: 80, impactPct: 65, impactLabelFa: 'بالا', horizonFa: 'میان‌مدت', trend: 'rising', mitigationFa: 'کاهش شدت کربن و مستندسازی انتشار برای کاهش بار CBAM', sourceFa: 'CarbonCredits.com؛ S&P Global Sustainable1' },
  { id: 'green-steel-disruption', nameFa: 'اختلال گذار به فولاد سبز و دارایی‌های راکد', category: 'technology', descFa: 'گذار به فولاد هیدروژنی متوقف شده (تنها ۲ پروژه فولاد سبز در ۲۰۲۵ در برابر ۱۵ پروژه در ۲۰۲۱) و تنها ۲.۷ میلیون تن ظرفیت کم‌کربن جهانی تصمیم نهایی سرمایه‌گذاری دارد.', probabilityPct: 55, impactPct: 60, impactLabelFa: 'بالا', horizonFa: 'بلندمدت', trend: 'rising', mitigationFa: 'بهره‌گیری از مزیت DRI گازی و سرمایه‌گذاری تدریجی در هیدروژن سبز', sourceFa: 'ESG Today؛ GMK Center؛ Industry Transition' },
  { id: 'rial-devaluation', nameFa: 'سقوط ارزش ریال و نوسان ارزی', category: 'financial', descFa: 'ریال در ۲۰۲۴ حدود ۳۷٪ ارزش از دست داد و از ۴۳۰ هزار (۲۰۲۲) به حدود ۱.۴۷ میلیون ریال بر دلار در ابتدای ژانویه ۲۰۲۶ رسید؛ تورم به ۴۲.۲٪ افزایش یافت.', probabilityPct: 90, impactPct: 65, impactLabelFa: 'بالا', horizonFa: 'کوتاه‌مدت', trend: 'rising', mitigationFa: 'مدیریت ریسک ارزی، قراردادهای ارزی و کنترل هزینه واردات نهاده', sourceFa: 'Iran International؛ PBS؛ specialeurasia.com' },
  { id: 'financing-capital-flight', nameFa: 'محدودیت تأمین مالی و فرار سرمایه', category: 'financial', descFa: 'فرار سرمایه ایران در ۲۰۲۴ حدود ۲۰ میلیارد دلار برآورد شد و قطع دسترسی بانکی ناشی از تحریم، تأمین مالی پروژه‌ها و واردات ماشین‌آلات را دشوار کرده است.', probabilityPct: 75, impactPct: 55, impactLabelFa: 'متوسط', horizonFa: 'میان‌مدت', trend: 'rising', mitigationFa: 'استفاده از تأمین مالی داخلی، بازار سرمایه و شرکای منطقه‌ای', sourceFa: 'specialeurasia.com؛ Iran International' },
  { id: 'iron-ore-price-signal', nameFa: 'افت قیمت سنگ‌آهن به‌عنوان نشانه تقاضا', category: 'supply', descFa: 'بانک جهانی متوسط قیمت سنگ‌آهن را ۹۵ دلار در ۲۰۲۵ و ۸۸ دلار در ۲۰۲۶ پیش‌بینی کرده و معدن سیماندو گینه حدود ۱۲۰ میلیون تن عرضه کم‌هزینه اضافه می‌کند.', probabilityPct: 70, impactPct: 40, impactLabelFa: 'متوسط', horizonFa: 'میان‌مدت', trend: 'falling', mitigationFa: 'بهره‌برداری از کاهش هزینه نهاده و پایش سیگنال ضعف تقاضای پایین‌دستی', sourceFa: 'World Bank Blogs؛ GMK Center؛ Discovery Alert' },
  { id: 'scrap-tightness', nameFa: 'تنگنای عرضه قراضه فولاد', category: 'supply', descFa: 'با گسترش کوره‌های قوس الکتریکی، تنها واحد Port Talbot انگلستان از ۲۰۲۷ به حدود ۲ میلیون تن قراضه بیشتر در سال نیاز دارد (رشد ۷۰٪) در حالی که بیش از ۸۰٪ قراضه انگلستان صادر می‌شود.', probabilityPct: 50, impactPct: 45, impactLabelFa: 'متوسط', horizonFa: 'بلندمدت', trend: 'rising', mitigationFa: 'تأمین پایدار قراضه داخلی و تکیه بر مزیت DRI/آهن اسفنجی', sourceFa: 'UK Steel via SteelOrbis؛ Fact.MR' },
  { id: 'coking-coal-volatility', nameFa: 'نوسان قیمت زغال‌سنگ کک‌شو', category: 'supply', descFa: 'میانگین قیمت زغال‌سنگ کک‌شو در ۲۰۲۵ به حدود ۱۸۹.۷ دلار بر تن رسید (افت ۲۱.۴٪ نسبت به ۲۴۱.۴ دلار سال ۲۰۲۴) که نشانه ضعف تقاضای زنجیره فولاد است.', probabilityPct: 65, impactPct: 35, impactLabelFa: 'متوسط', horizonFa: 'میان‌مدت', trend: 'falling', mitigationFa: 'پایش بازار نهاده و بهره‌گیری از کاهش هزینه برای واحدهای ادغامی', sourceFa: 'BMI via GMK Center؛ IEA Coal Mid-Year 2025' },
  { id: 'export-market-concentration', nameFa: 'تمرکز بازار صادراتی و وابستگی به خلیج فارس', category: 'market', descFa: 'کشورهای عربی بیش از ۶۰٪ سبد صادرات فولاد ایران را تشکیل می‌دهند و سهم امارات (بزرگ‌ترین واردکننده) در ۲۰۲۴ از ۲۵٪ به ۳۵٪ افزایش یافت که ریسک تمرکز را بالا می‌برد.', probabilityPct: 75, impactPct: 55, impactLabelFa: 'متوسط', horizonFa: 'میان‌مدت', trend: 'rising', mitigationFa: 'تنوع‌بخشی مقاصد صادراتی و کاهش اتکا به یک یا دو خریدار', sourceFa: 'sgbtrade.com؛ gmk.center' },
  { id: 'global-overcapacity-2028', nameFa: 'تشدید مازاد ظرفیت ساختاری جهانی تا ۲۰۲۸', category: 'market', descFa: 'مازاد ظرفیت جهانی فولاد از ۶۰۲ میلیون تن (۲۰۲۴) به ۶۴۰ میلیون تن (۲۰۲۵) رسید و تا ۲۰۲۸ به ۷۴۵ میلیون تن پیش‌بینی می‌شود؛ نرخ بهره‌برداری به زیر ۷۴٪ افت می‌کند.', probabilityPct: 85, impactPct: 70, impactLabelFa: 'بالا', horizonFa: 'بلندمدت', trend: 'rising', mitigationFa: 'کاهش بهای تمام‌شده، تمایز محصول و تثبیت سهم بازار منطقه‌ای', sourceFa: 'OECD Steel Outlook 2026؛ EUROFER؛ SteelOrbis' },
]

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

function ChangeCell({ val, up }: { val: string | null | undefined; up?: boolean | null }) {
  if (val == null) {
    return <span style={{ color: '#94a3b8', fontFamily: "Vazir, sans-serif" }}>—</span>;
  }
  const color = up === true ? '#16a34a' : up === false ? '#dc2626' : '#64748b';
  const arrow = up === true ? '▲' : up === false ? '▼' : '';
  return (
    <span style={{ color, fontFamily: "Vazir, sans-serif", fontWeight: 600 }}>
      {arrow}{faDigits(val)}
    </span>
  );
}

// ─── Module 02 — قیمت‌های جهانی فولاد ────────────────────────────────────────

function PricesModule() {
  const [hoveredRow, setHoveredRow] = useState<number | null>(null);
  const [expandedPrice, setExpandedPrice] = useState<Set<string>>(new Set());
  const [timestamp, setTimestamp] = useState<string>(() => {
    const now = new Date();
    return faDigits(`${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`);
  });

  // Live timestamp — updates every minute
  useEffect(() => {
    const tick = () => {
      const now = new Date();
      setTimestamp(`${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`);
    };
    const id = setInterval(tick, 60_000);
    return () => clearInterval(id);
  }, []);

  // auto-open every price row when the table scrolls into view (staggered)
  const revealRows = () => {
    prices.forEach((row, i) => {
      window.setTimeout(() => setExpandedPrice((prev) => (prev.has(row.product) ? prev : new Set(prev).add(row.product))), 350 + i * 160);
    });
  };

  const thStyle: React.CSSProperties = {
    padding: '8px 12px',
    fontSize: 10,
    fontWeight: 700,
    letterSpacing: '1.5px',
    textTransform: 'uppercase',
    color: '#94a3b8',
    textAlign: 'right',
    borderBottom: '1px solid #334155',
    whiteSpace: 'nowrap',
  };

  return (
    <div style={{ border: '1px solid #e2e6eb', marginBottom: 20 }}>
      {/* Header bar with live timestamp */}
      <div style={{
        background: NAVY,
        padding: '10px 14px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        direction: 'rtl',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ color: '#fff', fontWeight: 700, fontSize: 14 }}>قیمت‌های جهانی فولاد</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, direction: 'ltr' }}>
          <span style={{ color: '#94a3b8', fontSize: 11, fontFamily: "Vazir, sans-serif" }}>
            آخرین به‌روزرسانی: {timestamp}
          </span>
          <span style={{ color: '#22c55e', fontSize: 14, animation: 'livePulse 2s ease-in-out infinite' }}>●</span>
          <span style={{ color: '#64748b', fontSize: 11, fontFamily: "Vazir, sans-serif" }}>
            زنده · ۲۰ ژوئن ۲۰۲۵
          </span>
        </div>
      </div>

      {/* Market ticker */}
      <div style={{
        background: '#0f172a',
        overflow: 'hidden',
        height: 30,
        display: 'flex',
        alignItems: 'center',
        position: 'relative',
      }}>
        <div style={{
          display: 'flex',
          gap: 40,
          whiteSpace: 'nowrap',
          animation: 'ticker 30s linear infinite',
          direction: 'ltr',
        }}>
          {[...tickerItems, ...tickerItems].map((item, i) => {
            const color = item.up === true ? '#22c55e' : item.up === false ? '#ef4444' : '#94a3b8';
            return (
              <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <span style={{ color: '#64748b', fontSize: 11 }}>{item.label}</span>
                <span style={{ color: '#e2e8f0', fontSize: 11, fontFamily: "Vazir, sans-serif", fontWeight: 700 }}>
                  {faDigits(item.price)}
                </span>
                {item.change && (
                  <span style={{ color, fontSize: 10, fontFamily: "Vazir, sans-serif" }}>
                    {item.up === true ? '▲' : item.up === false ? '▼' : ''}{faDigits(item.change)}
                  </span>
                )}
                <span style={{ color: '#1e293b' }}>|</span>
              </span>
            );
          })}
        </div>
      </div>

      {/* Price table */}
      <motion.div style={{ overflowX: 'auto' }} viewport={{ once: true, margin: '-40px' }} onViewportEnter={revealRows}>
        <table style={{ width: '100%', borderCollapse: 'collapse', direction: 'rtl' }}>
          <thead>
            <tr style={{ background: '#f8fafc' }}>
              <th style={{ ...thStyle, fontWeight: 700, color: '#475569' }}>محصول</th>
              <th style={{ ...thStyle, textAlign: 'left' }}>قیمت</th>
              <th style={thStyle}>روزانه</th>
              <th style={thStyle}>ماهانه</th>
              <th style={thStyle}>سالانه</th>
              <th style={{ ...thStyle, color: '#64748b' }}>منبع</th>
            </tr>
          </thead>
          <tbody>
            {prices.map((row, i) => {
              const isExpanded = expandedPrice.has(row.product);
              const spark = sparkData[row.product];
              const sparkColor = (row.upY ?? row.upM) === false ? '#ef4444' : '#16a34a';
              const rangePercent = ((row.current - row.weekLow) / (row.weekHigh - row.weekLow || 1)) * 100;

              return (
                <>
                  <tr
                    key={row.product}
                    onMouseEnter={() => setHoveredRow(i)}
                    onMouseLeave={() => setHoveredRow(null)}
                    onClick={() => setExpandedPrice((prev) => { const n = new Set(prev); if (n.has(row.product)) n.delete(row.product); else n.add(row.product); return n; })}
                    style={{
                      background: isExpanded
                        ? '#eff6ff'
                        : hoveredRow === i
                        ? '#eff6ff'
                        : i % 2 === 0 ? '#fff' : '#fafafa',
                      borderBottom: isExpanded ? 'none' : '1px solid #e2e6eb',
                      cursor: 'pointer',
                      transition: 'background 0.1s',
                    }}
                  >
                    <td style={{ padding: '9px 12px', fontSize: 13, fontWeight: 600, color: NAVY, whiteSpace: 'nowrap' }}>
                      <span style={{ marginLeft: 4, color: '#94a3b8', fontSize: 10 }}>{isExpanded ? '▾' : '▸'}</span>
                      {row.product}
                    </td>
                    <td style={{
                      padding: '9px 12px',
                      fontFamily: "Vazir, sans-serif",
                      fontWeight: 700,
                      fontSize: 14,
                      color: NAVY,
                      textAlign: 'left',
                      whiteSpace: 'nowrap',
                    }}>
                      {faDigits(row.price)}
                    </td>
                    <td style={{ padding: '9px 12px', textAlign: 'center' }}>
                      <ChangeCell val={row.daily} up={row.upD} />
                    </td>
                    <td style={{ padding: '9px 12px', textAlign: 'center' }}>
                      <ChangeCell val={row.monthly} up={row.upM} />
                    </td>
                    <td style={{ padding: '9px 12px', textAlign: 'center' }}>
                      <ChangeCell val={row.yearly} up={row.upY} />
                    </td>
                    <td style={{
                      padding: '9px 12px',
                      fontSize: 11,
                      color: '#94a3b8',
                      fontFamily: "Vazir, sans-serif",
                      textAlign: 'center',
                    }}>
                      {row.source}
                    </td>
                  </tr>

                  {/* Expanded detail row */}
                  {isExpanded && (
                    <tr key={`${row.product}-expanded`}>
                      <td
                        colSpan={6}
                        style={{
                          background: '#f0f9ff',
                          borderBottom: '1px solid #e2e6eb',
                          padding: '12px 16px',
                        }}
                      >
                        <motion.div initial={{ opacity: 0, filter: 'blur(8px)', y: -4 }} animate={{ opacity: 1, filter: 'blur(0px)', y: 0 }} transition={{ duration: 0.9, ease: [0.22, 1, 0.36, 1] }} style={{ display: 'flex', alignItems: 'center', gap: 24, direction: 'ltr', flexWrap: 'wrap' }}>
                          {/* Sparkline */}
                          {spark && (
                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
                              <Spark data={spark} color={sparkColor} />
                              <span style={{ fontSize: 9, color: '#94a3b8', fontFamily: "Vazir, sans-serif" }}>
                روند ۵ نقطه‌ای
                              </span>
                            </div>
                          )}

                          {/* 52-week range bar */}
                          <div style={{ flex: 1, minWidth: 140 }}>
                            <div style={{ fontSize: 10, color: '#64748b', marginBottom: 4, fontWeight: 600 }}>
                              محدوده ۵۲ هفته
                            </div>
                            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                              <span style={{ fontSize: 10, color: '#94a3b8', fontFamily: "Vazir, sans-serif", minWidth: 30 }}>
                                {faN(row.weekLow)}
                              </span>
                              <div style={{ flex: 1, height: 6, background: '#e2e6eb', borderRadius: 3, position: 'relative' }}>
                                <div style={{
                                  position: 'absolute',
                                  left: `${rangePercent}%`,
                                  top: -2,
                                  width: 10,
                                  height: 10,
                                  background: sparkColor,
                                  borderRadius: '50%',
                                  transform: 'translateX(-50%)',
                                }} />
                              </div>
                              <span style={{ fontSize: 10, color: '#94a3b8', fontFamily: "Vazir, sans-serif", minWidth: 30 }}>
                                {faN(row.weekHigh)}
                              </span>
                            </div>
                          </div>

                          {/* Context note */}
                          <div style={{ flex: 2, minWidth: 180 }}>
                            <div style={{ fontSize: 10, color: '#64748b', marginBottom: 3, fontWeight: 600 }}>یادداشت بازار</div>
                            <div style={{ fontSize: 12, color: NAVY, lineHeight: 1.5, direction: 'rtl', textAlign: 'right' }}>
                              {faDigits(row.note)}
                            </div>
                          </div>
                        </motion.div>
                      </td>
                    </tr>
                  )}
                </>
              );
            })}
          </tbody>
        </table>
      </motion.div>

      {/* Market context rows */}
      <div style={{ background: '#f8fafc', borderTop: '1px solid #e2e6eb', display: 'flex', direction: 'rtl' }}>
        {marketContext.map((ctx, i) => (
          <div
            key={ctx.label}
            style={{ flex: 1, padding: '10px 14px', borderLeft: i < marketContext.length - 1 ? '1px solid #e2e6eb' : 'none' }}
          >
            <div style={{ fontSize: 10, color: '#94a3b8', marginBottom: 3, fontWeight: 600, letterSpacing: '0.5px' }}>
              {ctx.label}
            </div>
            <div style={{ fontFamily: "Vazir, sans-serif", fontWeight: 700, fontSize: 15, color: NAVY, marginBottom: 2 }}>
              {ctx.value}
            </div>
            <div style={{
              fontSize: 11,
              color: ctx.up === true ? '#16a34a' : ctx.up === false ? '#dc2626' : '#64748b',
              fontWeight: 600,
            }}>
              {ctx.up === true ? '▲ ' : ctx.up === false ? '▼ ' : ''}{ctx.note}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Shared helpers for رصد رقبا + ماتریس ریسک ──────────────────────────────────

const faN = (n: number) => n.toLocaleString('fa-IR')
const faDigits = (s: string) => s.replace(/[0-9]/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[+d])

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

function HeaderStat({ label, value, sub }: { label: string; value: string; sub?: string }) {
  return (
    <div style={{ textAlign: 'center' }}>
      <div style={{ fontSize: 13, fontWeight: 800, color: '#fff', fontFamily: 'Vazir, sans-serif' }}>
        {value}{sub && <span style={{ color: '#f87171', fontSize: 10, marginRight: 3 }}>{sub}</span>}
      </div>
      <div style={{ fontSize: 9, color: '#94a3b8' }}>{label}</div>
    </div>
  )
}

function DrillBox({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div style={{ background: '#fff', border: '1px solid #e2e6eb', borderRadius: 8, padding: 12 }}>
      <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: 1, color: '#94a3b8', marginBottom: 8 }}>{title}</div>
      {children}
    </div>
  )
}

// ─── Module 03 — رصد رقبا ─────────────────────────────────────────────────────

type CompSortKey = 'rank' | 'outputMt' | 'growthPct' | 'utilizationPct'
type RegionFilter = 'all' | Competitor['region']

function CompetitorsModule() {
  const [region, setRegion] = useState<RegionFilter>('all')
  const [sort, setSort] = useState<{ key: CompSortKey; dir: 'asc' | 'desc' }>({ key: 'outputMt', dir: 'desc' })
  const [expanded, setExpanded] = useState<Set<string>>(new Set())
  // auto-fetched latest news (scripts/fetch-competitor-news.mjs writes public/competitor-news.json daily at 16:00)
  const [news, setNews] = useState<Record<string, { newsFa: string; source: string; link: string; date: string }>>({})

  useEffect(() => {
    let alive = true
    fetch('/competitor-news.json')
      .then((r) => (r.ok ? r.json() : null))
      .then((d) => { if (alive && d?.items) setNews(d.items) })
      .catch(() => {})
    return () => { alive = false }
  }, [])

  const filtered = competitors.filter((c) => region === 'all' || c.region === region)
  const sorted = [...filtered].sort((a, b) => {
    const cmp = a[sort.key] - b[sort.key]
    return sort.dir === 'asc' ? cmp : -cmp
  })
  const maxOutput = Math.max(...sorted.map((c) => c.outputMt), 1)

  const regionChips: { key: RegionFilter; label: string; color: string }[] = [
    { key: 'all', label: 'همه', color: '#032340' },
    { key: 'China', label: 'چین', color: REGION_COLOR.China },
    { key: 'Asia', label: 'آسیا', color: REGION_COLOR.Asia },
    { key: 'Europe', label: 'اروپا', color: REGION_COLOR.Europe },
    { key: 'MENA', label: 'خاورمیانه', color: REGION_COLOR.MENA },
    { key: 'Americas', label: 'آمریکا', color: REGION_COLOR.Americas },
  ]
  const sortChips: { key: CompSortKey; label: string }[] = [
    { key: 'outputMt', label: 'تولید' },
    { key: 'growthPct', label: 'رشد' },
    { key: 'utilizationPct', label: 'بهره‌وری' },
    { key: 'rank', label: 'رتبه جهانی' },
  ]
  const setSortKey = (key: CompSortKey) =>
    setSort((p) => (p.key === key ? { key, dir: p.dir === 'asc' ? 'desc' : 'asc' } : { key, dir: key === 'rank' ? 'asc' : 'desc' }))

  return (
    <div style={{ border: '1px solid #e2e6eb', borderRadius: 12, overflow: 'hidden', background: '#fff' }}>
      {/* header */}
      <div style={{ background: NAVY, padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 10, direction: 'rtl', flexWrap: 'wrap' }}>
        <span style={{ color: '#fff', fontWeight: 800, fontSize: 15 }}>رصد رقبا</span>
        <span style={{ color: '#64748b', fontSize: 11 }}>Competitive Intelligence · ۲۰۲۴</span>
        <div style={{ marginRight: 'auto', display: 'flex', gap: 18, direction: 'rtl', flexWrap: 'wrap' }}>
          <HeaderStat label="تولید جهانی" value={`${faN(globalContext.worldProductionMt2024)} Mt`} sub={`${faN(globalContext.worldGrowthPct)}٪`} />
          <HeaderStat label="سهم چین" value={`${faN(globalContext.chinaSharePct)}٪`} />
          <HeaderStat label="صادرات چین" value={`${faN(globalContext.chinaExportsMt)} Mt`} />
        </div>
      </div>

      {/* controls */}
      <div style={{ padding: '10px 16px', borderBottom: '1px solid #e2e6eb', display: 'flex', gap: 16, direction: 'rtl', flexWrap: 'wrap', alignItems: 'center', background: '#f8fafc' }}>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
          <span style={{ fontSize: 10, color: '#94a3b8', fontWeight: 700 }}>منطقه:</span>
          {regionChips.map((r) => (
            <button key={r.key} onClick={() => setRegion(r.key)} style={chipStyle(region === r.key, r.color)}>{r.label}</button>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginRight: 'auto', flexWrap: 'wrap' }}>
          <span style={{ fontSize: 10, color: '#94a3b8', fontWeight: 700 }}>مرتب‌سازی:</span>
          {sortChips.map((s) => (
            <button key={s.key} onClick={() => setSortKey(s.key)} style={chipStyle(sort.key === s.key, '#CD9E53')}>
              {s.label}{sort.key === s.key ? (sort.dir === 'asc' ? ' ▲' : ' ▼') : ''}
            </button>
          ))}
        </div>
      </div>

      {/* column hints */}
      <div style={{ padding: '7px 16px', display: 'flex', gap: 12, direction: 'rtl', fontSize: 9, fontWeight: 700, letterSpacing: 0.5, color: '#94a3b8', borderBottom: '1px solid #eef2f6', alignItems: 'center' }}>
        <span style={{ width: 26, textAlign: 'center' }}>#</span>
        <span style={{ flex: '0 0 172px' }}>شرکت</span>
        <span style={{ flex: 1 }}>تولید فولاد خام ۲۰۲۴ (Mt)</span>
        <span style={{ flex: '0 0 64px', textAlign: 'center' }}>رشد</span>
        <span style={{ flex: '0 0 86px', textAlign: 'center' }}>مسیر تولید</span>
        <span style={{ flex: '0 0 56px', textAlign: 'center' }}>بهره‌وری</span>
        <span style={{ width: 14 }} />
      </div>

      {/* rows */}
      <motion.div layout style={{ direction: 'rtl' }}>
        <AnimatePresence mode="popLayout">
          {sorted.map((c, i) => {
            const isOpen = expanded.has(c.name)
            const ov = news[c.name]
            const barW = (c.outputMt / maxOutput) * 100
            return (
              <motion.div
                key={c.name}
                layout
                initial={{ opacity: 0, y: 12 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, scale: 0.97 }}
                transition={{ duration: 0.35, delay: i * 0.025, ease: [0.22, 1, 0.36, 1] }}
                viewport={{ once: true, margin: '-30px' }}
                onViewportEnter={() => { window.setTimeout(() => setExpanded((prev) => { if (prev.has(c.name)) return prev; const n = new Set(prev); n.add(c.name); return n }), 450 + i * 120) }}
                onClick={() => setExpanded((prev) => { const n = new Set(prev); if (n.has(c.name)) n.delete(c.name); else n.add(c.name); return n })}
                style={{
                  cursor: 'pointer',
                  position: 'relative',
                  overflow: c.isUs ? 'hidden' : undefined,
                  background: c.isUs ? 'linear-gradient(90deg, #fdf6e9, #fff)' : isOpen ? '#f0f9ff' : '#fff',
                  borderBottom: '1px solid #eef2f6',
                  borderRight: c.isUs ? '3px solid #CD9E53' : '3px solid transparent',
                }}
              >
                {c.isUs && <BorderBeam duration={7} size={120} borderWidth={2} colorFrom="#CD9E53" colorTo="#032340" />}
                <div style={{ padding: '11px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
                  <span style={{ width: 26, textAlign: 'center', fontFamily: 'Vazir, sans-serif', fontWeight: 800, fontSize: 12, color: c.isUs ? '#CD9E53' : '#94a3b8' }}>{faN(c.rank)}</span>
                  <div style={{ flex: '0 0 172px', display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
                    <CompanyLogo name={c.name} flag={c.flag} size={36} />
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontWeight: 800, fontSize: 15, color: NAVY, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', letterSpacing: '-0.2px', lineHeight: 1.25 }}>
                        {c.nameFa}{c.isUs && <span className="breathe" style={{ display: 'inline-block', marginRight: 6, fontSize: 9, background: '#CD9E53', color: '#fff', padding: '1px 6px', borderRadius: 99 }}>ما</span>}
                      </div>
                      <div style={{ fontSize: 10, color: '#94a3b8', display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ fontSize: 11 }}>{c.flag}</span>{c.country}</div>
                    </div>
                  </div>
                  <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8, direction: 'ltr' }}>
                    <div style={{ flex: 1, height: 10, borderRadius: 99, background: '#eef2f6', overflow: 'hidden' }}>
                      <motion.div initial={{ width: 0 }} animate={{ width: `${barW}%` }} transition={{ duration: 0.8, delay: 0.1 + i * 0.025, ease: [0.22, 1, 0.36, 1] }}
                        style={{ height: '100%', borderRadius: 99, background: c.isUs ? 'linear-gradient(90deg,#CD9E53,#b8893d)' : `linear-gradient(90deg, ${REGION_COLOR[c.region]}, ${REGION_COLOR[c.region]}bb)` }} />
                    </div>
                    <span style={{ fontFamily: 'Vazir, sans-serif', fontWeight: 800, fontSize: 13, color: NAVY, minWidth: 50, textAlign: 'left' }}>{faN(c.outputMt)}</span>
                  </div>
                  <span style={{ flex: '0 0 64px', textAlign: 'center', fontFamily: 'Vazir, sans-serif', fontWeight: 700, fontSize: 12, color: c.growthPct > 0 ? '#16a34a' : c.growthPct < 0 ? '#dc2626' : '#64748b' }}>
                    {c.growthPct > 0 ? '▲ ' : c.growthPct < 0 ? '▼ ' : ''}{faN(Math.abs(c.growthPct))}٪
                  </span>
                  <div style={{ flex: '0 0 86px' }}>
                    <div style={{ height: 8, borderRadius: 99, overflow: 'hidden', display: 'flex', direction: 'ltr', border: '1px solid #e2e8f0' }}>
                      <div style={{ width: `${c.techMix.eafDri}%`, background: '#CD9E53' }} />
                      <div style={{ width: `${c.techMix.bfBof}%`, background: '#475569' }} />
                    </div>
                    <div style={{ fontSize: 8, color: '#94a3b8', textAlign: 'center', marginTop: 2 }}>{faN(c.techMix.eafDri)}٪ کم‌کربن</div>
                  </div>
                  <span style={{ flex: '0 0 56px', textAlign: 'center', fontFamily: 'Vazir, sans-serif', fontWeight: 700, fontSize: 12, color: '#475569' }}>{faN(c.utilizationPct)}٪</span>
                  <span style={{ width: 14, color: '#cbd5e1', fontSize: 11 }}>{isOpen ? '▲' : '▼'}</span>
                </div>

                <AnimatePresence initial={false}>
                  {isOpen && (
                    <motion.div key="d" initial={{ height: 0, opacity: 0, filter: 'blur(10px)' }} animate={{ height: 'auto', opacity: 1, filter: 'blur(0px)' }} exit={{ height: 0, opacity: 0, filter: 'blur(10px)' }} transition={{ duration: 1.2, ease: [0.22, 1, 0.36, 1] }} style={{ overflow: 'hidden' }}>
                      <div style={{ padding: '0 16px 16px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))', gap: 12 }}>
                        <DrillBox title="درآمد / ظرفیت ۲۰۲۴">
                          <span style={{ fontSize: 20, fontWeight: 800, color: NAVY, fontFamily: 'Vazir, sans-serif' }}>{c.revenueBn != null ? `$${faN(c.revenueBn)}B` : '—'}</span>
                          {c.capacityMt != null && <div style={{ fontSize: 11, color: '#64748b', marginTop: 4 }}>ظرفیت اسمی: {faN(c.capacityMt)} میلیون تن</div>}
                          <div style={{ fontSize: 11, color: '#64748b', marginTop: 4 }}>رتبه جهانی: #{faN(c.rank)}</div>
                        </DrillBox>
                        <DrillBox title="کربن‌زدایی / فناوری">
                          <p style={{ margin: 0, fontSize: 11, color: '#334155', lineHeight: 1.7 }}>{c.decarbonFa}</p>
                        </DrillBox>
                        <DrillBox title="پروژه‌های کلیدی">
                          <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 5 }}>
                            {c.keyProjectsFa.map((p, pi) => (
                              <li key={pi} style={{ fontSize: 11, color: NAVY, display: 'flex', gap: 5, lineHeight: 1.5 }}><span style={{ color: ACCENT, flexShrink: 0 }}>◆</span>{p}</li>
                            ))}
                          </ul>
                        </DrillBox>
                        <DrillBox title="آخرین خبر و اقدام">
                          <div style={{ fontSize: 11, color: '#334155', lineHeight: 1.6, borderRight: `3px solid ${ACCENT}`, paddingRight: 8 }}>{ov?.newsFa || c.newsFa}</div>
                          <div style={{ fontSize: 11, color: '#475569', marginTop: 8, lineHeight: 1.6 }}>{c.recentMoveFa}</div>
                          {ov && ov.link && (
                            <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 3 }}>
                              <a href={ov.link} target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 10, fontWeight: 700, color: ACCENT, textDecoration: 'none' }}>
                                منبع: {ov.source || '—'} ↗
                              </a>
                              {ov.date && <span style={{ fontSize: 11, fontWeight: 700, color: '#475569' }}>تاریخ: {ov.date}</span>}
                            </div>
                          )}
                        </DrillBox>
                      </div>
                    </motion.div>
                  )}
                </AnimatePresence>
              </motion.div>
            )
          })}
        </AnimatePresence>
      </motion.div>

      {/* legend */}
      <div style={{ padding: '8px 16px', borderTop: '1px solid #eef2f6', display: 'flex', gap: 16, direction: 'rtl', fontSize: 10, color: '#64748b', flexWrap: 'wrap', alignItems: 'center', background: '#f8fafc' }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 12, height: 8, background: '#CD9E53', borderRadius: 2 }} /> مسیر EAF/DRI (کم‌کربن)</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><span style={{ width: 12, height: 8, background: '#475569', borderRadius: 2 }} /> مسیر BF-BOF (کوره بلند)</span>
        <span style={{ marginRight: 'auto' }}>برای جزئیات کامل روی هر ردیف کلیک کنید</span>
      </div>
    </div>
  )
}

// ─── Module 07 — هشدارهای زودهنگام (Risk Matrix) ─────────────────────────────

function RisksModule() {
  const [hovered, setHovered] = useState<Risk | null>(null)
  const [pinned, setPinned] = useState<Risk | null>(null)
  const [catFilter, setCatFilter] = useState<RiskCategory | 'all'>('all')
  const active = pinned ?? hovered

  const W = 720, H = 440, PAD = 46
  const innerW = W - PAD * 2, innerH = H - PAD * 2
  // frame coords (zones, grid, axes, labels)
  const px = (p: number) => PAD + (p / 100) * innerW
  const py = (im: number) => PAD + ((100 - im) / 100) * innerH
  // dot coords — inset by DOTPAD so circles never spill outside the frame
  const DOTPAD = 24
  const dx = (p: number) => PAD + DOTPAD + (p / 100) * (innerW - 2 * DOTPAD)
  const dy = (im: number) => PAD + DOTPAD + ((100 - im) / 100) * (innerH - 2 * DOTPAD)

  const cats = Object.keys(RISK_CAT) as RiskCategory[]
  const shown = risks.filter((r) => catFilter === 'all' || r.category === catFilter)
  const topRisks = [...risks].sort((a, b) => b.probabilityPct * b.impactPct - a.probabilityPct * a.impactPct).slice(0, 8)
  const criticalCount = risks.filter((r) => r.impactPct >= 80).length

  return (
    <div style={{ border: '1px solid #e2e6eb', borderRadius: 12, overflow: 'hidden', background: '#fff' }}>
      {/* header */}
      <div style={{ background: NAVY, padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 10, direction: 'rtl', flexWrap: 'wrap' }}>
        <span style={{ color: '#fff', fontWeight: 800, fontSize: 15 }}>ماتریس ریسک و هشدار زودهنگام</span>
        <span style={{ color: '#64748b', fontSize: 11 }}>{faN(risks.length)} ریسک پایش‌شده · ۲۰۲۵</span>
        <span style={{ marginRight: 'auto', display: 'flex', alignItems: 'center', gap: 5, fontSize: 11, color: '#f87171', fontWeight: 700 }}>
          <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#f87171' }} className="animate-pulse" />
          {faN(criticalCount)} ریسک بحرانی
        </span>
      </div>

      {/* category filters */}
      <div style={{ padding: '10px 16px', borderBottom: '1px solid #e2e6eb', background: '#f8fafc', display: 'flex', gap: 6, direction: 'rtl', flexWrap: 'wrap' }}>
        <button onClick={() => setCatFilter('all')} style={chipStyle(catFilter === 'all', '#032340')}>همه ({faN(risks.length)})</button>
        {cats.map((c) => (
          <button key={c} onClick={() => setCatFilter(c)} style={chipStyle(catFilter === c, RISK_CAT[c].color)}>
            {RISK_CAT[c].fa} ({faN(risks.filter((r) => r.category === c).length)})
          </button>
        ))}
      </div>

      <div className="risk-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.7fr) minmax(0,1fr)' }}>
        {/* scatter */}
        <div style={{ padding: '8px 16px 16px', position: 'relative', borderLeft: '1px solid #eef2f6' }}>
          <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: 'block', overflow: 'visible' }} onMouseLeave={() => setHovered(null)}>
            {/* quadrant zones */}
            <rect x={px(50)} y={py(100)} width={innerW / 2} height={innerH / 2} fill="#fee2e2" opacity={0.7} />
            <rect x={PAD} y={py(100)} width={innerW / 2} height={innerH / 2} fill="#fef3c7" opacity={0.5} />
            <rect x={px(50)} y={py(50)} width={innerW / 2} height={innerH / 2} fill="#fef9c3" opacity={0.45} />
            <rect x={PAD} y={py(50)} width={innerW / 2} height={innerH / 2} fill="#dcfce7" opacity={0.5} />
            {/* gridlines */}
            {[25, 50, 75].map((v) => (
              <g key={v}>
                <line x1={px(v)} y1={PAD} x2={px(v)} y2={H - PAD} stroke="#e2e8f0" strokeDasharray="3 3" />
                <line x1={PAD} y1={py(v)} x2={W - PAD} y2={py(v)} stroke="#e2e8f0" strokeDasharray="3 3" />
              </g>
            ))}
            {/* 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 - 10} textAnchor="middle" fontSize={12} fontWeight={700} fill="#475569" fontFamily="Vazir, sans-serif">← احتمال وقوع</text>
            <text x={14} y={H / 2} textAnchor="middle" fontSize={12} fontWeight={700} fill="#475569" transform={`rotate(-90 14 ${H / 2})`} fontFamily="Vazir, sans-serif">← شدت اثر</text>
            <text x={px(76)} y={py(96)} textAnchor="middle" fontSize={11} fontWeight={800} fill="#dc2626" opacity={0.55} fontFamily="Vazir, sans-serif">بحرانی — اقدام فوری</text>
            <text x={px(24)} y={py(12)} textAnchor="middle" fontSize={11} fontWeight={800} fill="#16a34a" opacity={0.55} fontFamily="Vazir, sans-serif">کم‌اهمیت — پایش</text>

            {/* dots */}
            {shown.map((r, i) => {
              const col = RISK_CAT[r.category].color
              const isAct = active?.id === r.id
              const rad = 5 + (r.impactPct / 100) * 8
              const cx = dx(r.probabilityPct), cy = dy(r.impactPct)
              return (
                <motion.g
                  key={r.id}
                  initial={{ opacity: 0, scale: 0 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.4, delay: i * 0.022, type: 'spring', stiffness: 220, damping: 16 }}
                  style={{ cursor: 'pointer' }}
                  onMouseEnter={() => setHovered(r)}
                  onClick={() => setPinned(pinned?.id === r.id ? null : r)}
                >
                  {/* breathing halo: critical risks pulse, others breathe gently */}
                  <circle cx={cx} cy={cy} r={rad + 4} fill={col} opacity={r.impactPct >= 80 ? 0.18 : 0.1}>
                    <animate attributeName="r" values={`${rad + 1};${rad + (r.impactPct >= 80 ? 9 : 5)};${rad + 1}`} dur={`${r.impactPct >= 80 ? 2.4 : 3.6}s`} repeatCount="indefinite" />
                    <animate attributeName="opacity" values={`${r.impactPct >= 80 ? 0.22 : 0.12};0.03;${r.impactPct >= 80 ? 0.22 : 0.12}`} dur={`${r.impactPct >= 80 ? 2.4 : 3.6}s`} 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/pin tooltip */}
          {active && (
            <div style={{ position: 'absolute', top: 14, left: 14, maxWidth: 290, background: NAVY, color: '#fff', borderRadius: 10, padding: '12px 14px', boxShadow: '0 14px 36px rgba(0,0,0,0.28)', direction: 'rtl', zIndex: 5, borderTop: `3px solid ${RISK_CAT[active.category].color}` }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6, flexWrap: 'wrap' }}>
                <span style={{ fontSize: 9, fontWeight: 700, background: RISK_CAT[active.category].color, padding: '2px 8px', borderRadius: 99 }}>{RISK_CAT[active.category].fa}</span>
                <span style={{ fontSize: 9, color: TREND_FA[active.trend].color, fontWeight: 700 }}>{TREND_FA[active.trend].icon} {TREND_FA[active.trend].fa}</span>
                <span style={{ fontSize: 9, color: '#94a3b8' }}>{active.horizonFa}</span>
              </div>
              <div style={{ fontWeight: 800, fontSize: 13, marginBottom: 6 }}>{active.nameFa}</div>
              <p style={{ margin: 0, fontSize: 11, color: 'rgba(255,255,255,0.85)', lineHeight: 1.7 }}>{active.descFa}</p>
              <div style={{ display: 'flex', gap: 14, margin: '8px 0', fontSize: 10 }}>
                <span>احتمال: <b style={{ color: '#CD9E53' }}>{faN(active.probabilityPct)}٪</b></span>
                <span>شدت: <b style={{ color: '#f87171' }}>{active.impactLabelFa} ({faN(active.impactPct)})</b></span>
              </div>
              <div style={{ fontSize: 10, color: '#86efac', lineHeight: 1.6 }}>🛡 {active.mitigationFa}</div>
              <div style={{ fontSize: 9, color: '#64748b', marginTop: 6 }}>منبع: {active.sourceFa}</div>
            </div>
          )}
        </div>

        {/* top risks list */}
        <div style={{ padding: 16, direction: 'rtl' }}>
          <div style={{ fontSize: 12, fontWeight: 800, color: NAVY }}>بحرانی‌ترین ریسک‌ها</div>
          <div style={{ fontSize: 9, color: '#94a3b8', marginTop: 2, marginBottom: 10, lineHeight: 1.5 }}>
            عدد روی هر کارت = <b style={{ color: '#475569' }}>امتیاز ریسک</b> (۰ تا ۱۰۰) = احتمال × شدت اثر
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {topRisks.map((r, i) => {
              const score = Math.round((r.probabilityPct * r.impactPct) / 100)
              return (
                <motion.div
                  key={r.id}
                  initial={{ opacity: 0, x: 20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: i * 0.05 }}
                  onMouseEnter={() => setHovered(r)}
                  onMouseLeave={() => setHovered(null)}
                  onClick={() => setPinned(pinned?.id === r.id ? null : r)}
                  style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', borderRadius: 8, cursor: 'pointer', background: active?.id === r.id ? '#f0f9ff' : '#f8fafc', border: '1px solid #eef2f6' }}
                >
                  <div className={score >= 80 ? 'breathe' : undefined}
                    style={{ width: 40, height: 40, borderRadius: 9, background: RISK_CAT[r.category].color, color: '#fff', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <span style={{ fontFamily: 'Vazir, sans-serif', fontWeight: 800, fontSize: 14, lineHeight: 1 }}>{faN(score)}</span>
                    <span style={{ fontSize: 6.5, opacity: 0.85, marginTop: 1 }}>امتیاز</span>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12, fontWeight: 700, color: NAVY, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.nameFa}</div>
                    <div style={{ fontSize: 9, color: '#94a3b8' }}>{RISK_CAT[r.category].fa} · {r.horizonFa}</div>
                  </div>
                  <span style={{ fontSize: 12, color: TREND_FA[r.trend].color }}>{TREND_FA[r.trend].icon}</span>
                </motion.div>
              )
            })}
          </div>
        </div>
      </div>
    </div>
  )
}

// ─── Featured panels: global production landscape ───────────────────────────────

const PRODUCERS = [
  { flag: '🇨🇳', name: 'چین',        mt: 1005, hi: false },
  { flag: '🇮🇳', name: 'هند',         mt: 149,  hi: false },
  { flag: '🇯🇵', name: 'ژاپن',        mt: 84,   hi: false },
  { flag: '🇺🇸', name: 'آمریکا',      mt: 79,   hi: false },
  { flag: '🇷🇺', name: 'روسیه',       mt: 71,   hi: false },
  { flag: '🇰🇷', name: 'کره جنوبی',   mt: 63,   hi: false },
  { flag: '🇹🇷', name: 'ترکیه',       mt: 37,   hi: false },
  { flag: '🇮🇷', name: 'ایران',       mt: 31,   hi: true  },
];

function TopProducersPanel() {
  const max = Math.max(...PRODUCERS.map((p) => p.mt));
  return (
    <motion.div
      initial={{ opacity: 0, x: -24 }}
      whileInView={{ opacity: 1, x: 0 }}
      viewport={{ once: true, margin: '-50px' }}
      transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
      style={{
        background: '#fff', border: '1px solid #e2e8f0', borderTop: '3px solid #032340',
        borderRadius: 12, padding: '20px 22px',
        boxShadow: '0 8px 24px rgba(3,35,64,0.10), 0 2px 6px rgba(3,35,64,0.06)',
      }}
    >
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 16 }}>
        <div style={{ fontSize: 14, fontWeight: 800, color: '#032340' }}>تولیدکنندگان برتر فولاد جهان</div>
        <div style={{ fontSize: 10, color: '#94a3b8', fontFamily: 'Vazir, sans-serif' }}>فولاد خام · ۲۰۲۴ · Mt</div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
        {PRODUCERS.map((p, i) => (
          <div key={p.name} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ fontSize: 16, width: 22, textAlign: 'center' as const }}>{p.flag}</span>
            <span style={{ fontSize: 12, fontWeight: p.hi ? 800 : 600, color: p.hi ? '#CD9E53' : '#1e293b', width: 72 }}>{p.name}</span>
            <div style={{ flex: 1, height: 8, borderRadius: 4, background: '#eef2f6', overflow: 'hidden', direction: 'ltr' }}>
              <motion.div
                initial={{ width: 0 }}
                animate={{ width: `${(p.mt / max) * 100}%` }}
                transition={{ duration: 1, delay: 0.2 + i * 0.08, ease: [0.22, 1, 0.36, 1] }}
                style={{ height: '100%', borderRadius: 4, background: p.hi ? 'linear-gradient(90deg,#CD9E53,#b8893d)' : 'linear-gradient(90deg,#032340,#0a3f63)' }}
              />
            </div>
            <span style={{ fontSize: 12, fontWeight: 700, color: p.hi ? '#CD9E53' : '#475569', width: 50, textAlign: 'left' as const, fontFamily: 'Vazir, sans-serif' }}>
              {p.mt.toLocaleString('fa-IR')}
            </span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 14, paddingTop: 12, borderTop: '1px solid #f1f5f9', fontSize: 11, color: '#64748b' }}>
        ایران رتبه <span style={{ color: '#CD9E53', fontWeight: 800 }}>دهم</span> جهان · بزرگ‌ترین تولیدکننده DRI دنیا
      </div>
    </motion.div>
  );
}

const TECH_MIX = [
  { label: 'کوره بلند (BF-BOF)', pct: 71, color: '#032340' },
  { label: 'قوس الکتریک (EAF)',  pct: 28, color: '#CD9E53' },
  { label: 'سایر روش‌ها',        pct: 1,  color: '#cbd5e1' },
];

function TechMixPanel() {
  const R = 60, C = 2 * Math.PI * R;
  let acc = 0;
  return (
    <motion.div
      initial={{ opacity: 0, x: 24 }}
      whileInView={{ opacity: 1, x: 0 }}
      viewport={{ once: true, margin: '-50px' }}
      transition={{ duration: 0.5, delay: 0.1, ease: [0.22, 1, 0.36, 1] }}
      style={{
        background: '#fff', border: '1px solid #e2e8f0', borderTop: '3px solid #032340',
        borderRadius: 12, padding: '20px 22px',
        display: 'flex', flexDirection: 'column',
        boxShadow: '0 8px 24px rgba(3,35,64,0.10), 0 2px 6px rgba(3,35,64,0.06)',
      }}
    >
      <div style={{ fontSize: 14, fontWeight: 800, color: '#032340', marginBottom: 2 }}>ترکیب فناوری فولادسازی</div>
      <div style={{ fontSize: 10, color: '#94a3b8', marginBottom: 14 }}>سهم روش‌های تولید فولاد خام جهان</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 20, direction: 'ltr' }}>
        <motion.svg
          width={150} height={150} viewBox="0 0 150 150"
          initial={{ opacity: 0, scale: 0.82, rotate: -25 }}
          animate={{ opacity: 1, scale: 1, rotate: 0 }}
          transition={{ duration: 0.7, delay: 0.25, ease: [0.22, 1, 0.36, 1] }}
        >
          <circle cx={75} cy={75} r={R} fill="none" stroke="#eef2f6" strokeWidth={16} />
          {TECH_MIX.map((s) => {
            const dash = (s.pct / 100) * C;
            const el = (
              <circle
                key={s.label}
                cx={75} cy={75} r={R} fill="none" stroke={s.color} strokeWidth={16}
                strokeDasharray={`${dash} ${C - dash}`} strokeDashoffset={-acc}
                transform="rotate(-90 75 75)" strokeLinecap="butt"
              />
            );
            acc += dash;
            return el;
          })}
          <text x={75} y={71} textAnchor="middle" fontSize={22} fontWeight={800} fill="#032340" fontFamily="Vazir, sans-serif">۷۱٪</text>
          <text x={75} y={88} textAnchor="middle" fontSize={9} fill="#94a3b8">کوره بلند</text>
        </motion.svg>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 11, direction: 'rtl' }}>
          {TECH_MIX.map((s) => (
            <div key={s.label} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 10, height: 10, borderRadius: 3, background: s.color, flexShrink: 0 }} />
              <span style={{ fontSize: 11, color: '#475569', flex: 1 }}>{s.label}</span>
              <span style={{ fontSize: 13, fontWeight: 800, color: '#032340', fontFamily: 'Vazir, sans-serif' }}>{s.pct.toLocaleString('fa-IR')}٪</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{ marginTop: 16, paddingTop: 12, borderTop: '1px solid #f1f5f9', fontSize: 11, color: '#64748b', lineHeight: 1.7 }}>
        فولاد مبارکه با فناوری <span style={{ color: '#CD9E53', fontWeight: 800 }}>DRI-EAF</span> — کم‌کربن‌تر از کوره بلند سنتی
      </div>
    </motion.div>
  );
}

// ─── Root export ──────────────────────────────────────────────────────────────

export default function IndustrySection() {
  const steelScores = [
    {
      title: 'قدرت بازار',
      description: 'شاخص ترکیبی قیمت HRC، حجم معاملات و سنتیمنت. بالاتر = فرصت قیمت‌گذاری بهتر برای فولاد مبارکه.',
      initialScore: 67,
    },
    {
      title: 'ریسک زنجیره تامین',
      description: 'ریسک تامین سنگ‌آهن ($۱۰۱/t)، زغال‌کک ($۲۰۰/t) و قطعات یدکی. عدد بالا = ریسک پایین‌تر.',
      initialScore: 45,
    },
    {
      title: 'مومنتوم صادراتی',
      description: 'رشد صادرات ۳ ماهه، نفوذ به بازارهای هدف عراق/هند، و سرعت عقد قرارداد جدید.',
      initialScore: 31,
    },
  ];

  return (
    <section dir="rtl" style={{ padding: '32px 0', fontFamily: "'Vazir', 'Segoe UI', sans-serif" }}>
      {/* Section header */}
      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        marginBottom: 16, direction: 'rtl',
        borderBottom: `2px solid ${ACCENT}`, paddingBottom: 10,
      }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
          <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: ACCENT }}>
            INDUSTRY INTELLIGENCE
          </span>
          <span style={{ fontSize: 18, fontWeight: 800, color: NAVY }}>پایش صنعت جهانی فولاد</span>
        </div>
        <span style={{ fontFamily: "Vazir, sans-serif", fontSize: 11, color: '#94a3b8' }}>
          ۱۴۰۴/۰۳/۳۰ · World Steel Association · Platts · MySteel
        </span>
      </div>

      {/* Featured: global production landscape */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8 items-stretch">
        <TopProducersPanel />
        <TechMixPanel />
      </div>

      {/* Market Intelligence Scores */}
      <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase' as const, color: ACCENT, marginBottom: 10 }}>
        امتیازهای هوشمندی بازار
      </div>
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: '-50px' }}
        transition={{ duration: 0.5, delay: 0.15, ease: [0.22, 1, 0.36, 1] }}
        className="mb-5"
      >
        <FinancialScoreCards data={steelScores} />
      </motion.div>

      {/* Module 02 — full width prices table */}
      <PricesModule />

      {/* Key market metric cards */}
      <motion.div
        className="grid grid-cols-1 md:grid-cols-3 gap-8 my-8"
        initial={{ opacity: 0, y: 24 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: '-50px' }}
        transition={{ duration: 0.5, delay: 0.1, ease: [0.22, 1, 0.36, 1] }}
      >
        <Vo2MaxCard
          title="HRC Premium (US vs CN)"
          value={67} status="فرصت" progress={67}
          icon={<BarChart2 size={20} />}
          description={<>قیمت آمریکا $۸۶۲ vs چین $۵۱۷ — فاصله <span style={{ fontWeight: 700, color: '#CD9E53' }}>$۳۴۵/t</span> پریمیوم بازارهای غیرچینی</>}
        />
        <Vo2MaxCard
          title="نسبت کیفیت DRI"
          value={94} status="عالی" progress={94}
          icon={<Layers size={20} />}
          description={<>محتوای آهن فلزی <span style={{ fontWeight: 700, color: '#CD9E53' }}>۹۴٪+</span> — مزیت رقابتی vs کانورتر BF/BOF</>}
        />
        <Vo2MaxCard
          title="شاخص ریسک بازار"
          value={72} status="هشدار" progress={72}
          icon={<AlertTriangle size={20} />}
          description={<>تعرفه‌های حمایتی در <span style={{ fontWeight: 700, color: '#CD9E53' }}>۶۲ کشور</span> — بازار هدف محدود می‌شود</>}
        />
      </motion.div>

      {/* Module 03 — رصد رقبا (full width) */}
      <motion.div
        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] }}
        style={{ marginBottom: 24 }}
      >
        <CompetitorsModule />
      </motion.div>

      {/* Module 07 — ماتریس ریسک (full width) */}
      <motion.div
        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] }}
      >
        <RisksModule />
      </motion.div>
    </section>
  );
}
