import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { AnimatedRadialChart } from '@/components/ui/animated-radial-chart';
import { Vo2MaxCard } from '@/components/ui/progress';
import { Activity, Zap, Target } from 'lucide-react';
import { BorderBeam } from '@/components/ui/border-beam';

const EASE = [0.22, 1, 0.36, 1] as const;

const NAVY = '#0f172a';
const ACCENT = '#1e3a5f';

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

interface Milestone {
  label: string;
  done: boolean;
}

interface Strategy {
  id: string;
  name: string;
  weight: string;
  progress: number;
  status: string;
  owner: string;
  nextReview: string;
  blocker: string | null;
  milestones: Milestone[];
}

const strategies: Strategy[] = [
  {
    id: 'S1', name: 'افزایش ظرفیت به ۱۴ Mt', weight: 'بالا', progress: 55, status: 'on-track', owner: 'معاونت تولید',
    nextReview: '۱۴۰۴/۰۵/۱۰', blocker: null,
    milestones: [
      { label: 'ارزیابی ظرفیت موجود خطوط DRI', done: true },
      { label: 'سفارش تجهیزات خط سوم EAF', done: true },
      { label: 'نصب و راه‌اندازی تا پایان سال', done: false },
    ],
  },
  {
    id: 'S2', name: 'کربن‌زدایی و پایداری', weight: 'حیاتی', progress: 38, status: 'at-risk', owner: 'واحد HSE',
    nextReview: '۱۴۰۴/۰۴/۲۵', blocker: 'تامین مالی پروژه هیدروژن تاخیر دارد — سهمیه گاز محدود است',
    milestones: [
      { label: 'ممیزی کربن تمام واحدها', done: true },
      { label: 'انتخاب فناوری جایگزین (H₂ vs CCS)', done: false },
      { label: 'پیاده‌سازی آزمایشی در ناحیه ۱', done: false },
    ],
  },
  {
    id: 'S3', name: 'دیجیتال‌سازی (MES/ERP)', weight: 'بالا', progress: 72, status: 'on-track', owner: 'IT',
    nextReview: '۱۴۰۴/۰۵/۰۱', blocker: null,
    milestones: [
      { label: 'استقرار سیستم MES در کوره‌ها', done: true },
      { label: 'آموزش ۱۲۰۰ پرسنل عملیاتی', done: true },
      { label: 'یکپارچه‌سازی ERP ماژول مالی', done: false },
    ],
  },
  {
    id: 'S4', name: 'توسعه بازار صادراتی', weight: 'متوسط', progress: 31, status: 'delayed', owner: 'بازرگانی',
    nextReview: '۱۴۰۴/۰۴/۱۸', blocker: 'تعرفه Section 232 آمریکا ۵۰٪ — بازار اروپا نیاز به گواهی EPD دارد',
    milestones: [
      { label: 'شناسایی ۵ بازار هدف جدید', done: true },
      { label: 'مذاکره با شرکای عراق و هند', done: false },
      { label: 'عقد قرارداد صادراتی بلند‌مدت', done: false },
    ],
  },
  {
    id: 'S5', name: 'زنجیره تامین مقاوم', weight: 'بالا', progress: 68, status: 'on-track', owner: 'خرید',
    nextReview: '۱۴۰۴/۰۵/۱۵', blocker: null,
    milestones: [
      { label: 'ارزیابی و امتیازدهی تامین‌کنندگان', done: true },
      { label: 'ایجاد ذخایر استراتژیک ۴۵ روزه', done: true },
      { label: 'تنوع‌بخشی منابع سنگ‌آهن (گل‌گهر + چادرملو)', done: false },
    ],
  },
  {
    id: 'S6', name: 'نوآوری محصول', weight: 'متوسط', progress: 45, status: 'on-track', owner: 'تحقیق',
    nextReview: '۱۴۰۴/۰۵/۰۵', blocker: null,
    milestones: [
      { label: 'تحقیقات بازار فولاد پیشرفته (HSS)', done: true },
      { label: 'توسعه نمونه اولیه ورق مقاوم', done: true },
      { label: 'آزمون بازار با ۳ مشتری پایلوت', done: false },
    ],
  },
];

interface BudgetLine { label: string; planned: number; actual: number; }
interface WeekMilestone { week: string; label: string; done: boolean; }
interface RiskItem { label: string; severity: 'high' | 'medium' | 'low'; }

interface Project {
  name: string;
  budget: string;
  progress: number;
  deadline: string;
  status: string;
  budgetBreakdown: BudgetLine[];
  weekMilestones: WeekMilestone[];
  risks: RiskItem[];
}

const projects: Project[] = [
  {
    name: 'نیروگاه خورشیدی ۱۰۰MW', budget: '۸٬۵۰۰ Mrial', progress: 75, deadline: 'پایان ۱۴۰۴', status: 'on-track',
    budgetBreakdown: [
      { label: 'تجهیزات پنل', planned: 5000, actual: 4800 },
      { label: 'نصب و اجرا', planned: 2200, actual: 2500 },
      { label: 'زیرساخت شبکه', planned: 1300, actual: 1200 },
    ],
    weekMilestones: [
      { week: 'هفته ۱', label: 'نصب ردیف A (۴۰٪)', done: true },
      { week: 'هفته ۲', label: 'نصب ردیف B (۷۵٪)', done: true },
      { week: 'هفته ۳', label: 'تست اتصال به شبکه', done: false },
      { week: 'هفته ۴', label: 'راه‌اندازی رسمی', done: false },
    ],
    risks: [
      { label: 'تاخیر در تحویل پنل از چین', severity: 'medium' },
      { label: 'نوسانات نرخ ارز', severity: 'low' },
    ],
  },
  {
    name: 'خط نورد گرم جدید', budget: '۲۲٬۰۰۰ Mrial', progress: 62, deadline: 'میانه ۱۴۰۴', status: 'on-track',
    budgetBreakdown: [
      { label: 'ماشین‌آلات اصلی (SMS Group)', planned: 14000, actual: 14500 },
      { label: 'نصب مکانیکی', planned: 5000, actual: 4800 },
      { label: 'سیستم کنترل و اتوماسیون', planned: 3000, actual: 3100 },
    ],
    weekMilestones: [
      { week: 'هفته ۱', label: 'پی‌ریزی و فونداسیون', done: true },
      { week: 'هفته ۲', label: 'نصب سازه اصلی', done: true },
      { week: 'هفته ۳', label: 'نصب ماشین‌آلات رول', done: false },
      { week: 'هفته ۴', label: 'تست بار و کالیبراسیون', done: false },
    ],
    risks: [
      { label: 'قطعات یدکی SMS وارداتی با تاخیر', severity: 'high' },
    ],
  },
  {
    name: 'کارخانه هوشمند (SMART)', budget: '۱۵٬۰۰۰ Mrial', progress: 81, deadline: 'تداوم', status: 'on-track',
    budgetBreakdown: [
      { label: 'سنسورهای IoT و SCADA', planned: 6000, actual: 5800 },
      { label: 'پلتفرم نرم‌افزاری Analytics', planned: 5500, actual: 5600 },
      { label: 'آموزش و تغییر فرهنگ', planned: 3500, actual: 3100 },
    ],
    weekMilestones: [
      { week: 'هفته ۱', label: 'استقرار ۲۰۰۰ سنسور کوره', done: true },
      { week: 'هفته ۲', label: 'اتصال به پلتفرم cloud', done: true },
      { week: 'هفته ۳', label: 'داشبورد real-time آنالیتیکس', done: true },
      { week: 'هفته ۴', label: 'بهینه‌سازی الگوریتم predictive', done: false },
    ],
    risks: [],
  },
  {
    name: 'نیروگاه بادی ۵۰MW', budget: '۵٬۲۰۰ Mrial', progress: 40, deadline: 'پایان ۱۴۰۵', status: 'at-risk',
    budgetBreakdown: [
      { label: 'توربین‌های بادی (GE)', planned: 3200, actual: 3000 },
      { label: 'اتصال به شبکه برق', planned: 1200, actual: 1150 },
      { label: 'مجوزها و مطالعات محیطی', planned: 800, actual: 1100 },
    ],
    weekMilestones: [
      { week: 'هفته ۱', label: 'اتمام مطالعات بادسنجی', done: true },
      { week: 'هفته ۲', label: 'انتخاب نهایی تامین‌کننده', done: false },
      { week: 'هفته ۳', label: 'عقد قرارداد توربین', done: false },
      { week: 'هفته ۴', label: 'شروع عملیات اجرایی', done: false },
    ],
    risks: [
      { label: 'اخذ مجوز محیط‌زیست — بیش از ۶ ماه', severity: 'high' },
      { label: 'نوسان قیمت توربین (تعرفه واردات)', severity: 'medium' },
    ],
  },
  {
    name: 'سیستم بازیافت آب', budget: '۳٬۸۰۰ Mrial', progress: 28, deadline: 'ابتدای ۱۴۰۵', status: 'delayed',
    budgetBreakdown: [
      { label: 'مشاوره فنی و طراحی', planned: 1000, actual: 1300 },
      { label: 'تجهیزات تصفیه', planned: 2000, actual: 1800 },
      { label: 'نصب و لوله‌کشی', planned: 800, actual: 400 },
    ],
    weekMilestones: [
      { week: 'هفته ۱', label: 'ممیزی مصرف آب واحدها', done: true },
      { week: 'هفته ۲', label: 'انتخاب راهکار تصفیه', done: false },
      { week: 'هفته ۳', label: 'نصب تجهیزات فاز ۱', done: false },
      { week: 'هفته ۴', label: 'گزارش اول عملکرد', done: false },
    ],
    risks: [
      { label: 'تامین مالی ناقص — کمبود ۱۵٪ بودجه', severity: 'high' },
      { label: 'کمبود متخصص تصفیه آب صنعتی', severity: 'medium' },
    ],
  },
];

interface KPI {
  label: string;
  actual: string;
  target: string;
  deviation: string;
  deviationNum: number;
  trend: string;
  trendGood: boolean | null;
  note?: string;
  actualNum: number;
  targetNum: number;
  unit: string;
}

const kpis: KPI[] = [
  { label: 'تولید آهن اسفنجی (DRI)', actual: '۸.۶۳ Mt', target: '۹.۲ Mt',  deviation: '۶.۲-٪', deviationNum: -6.2, trend: '▼', trendGood: false, actualNum: 8.63, targetNum: 9.2,  unit: 'Mt' },
  { label: 'تولید تختال',            actual: '۸.۸۵ Mt', target: '۹.۵ Mt',  deviation: '۶.۸-٪', deviationNum: -6.8, trend: '→', trendGood: null,  actualNum: 8.85, targetNum: 9.5,  unit: 'Mt' },
  { label: 'تولید کویل گرم',         actual: '۶.۶۵ Mt', target: '۷.۱ Mt',  deviation: '۶.۳-٪', deviationNum: -6.3, trend: '▼', trendGood: false, actualNum: 6.65, targetNum: 7.1,  unit: 'Mt' },
  { label: 'مصرف گاز طبیعی',         actual: '۵.۸ Bm³', target: '۵.۵ Bm³', deviation: '۵.۵-٪', deviationNum: -5.5, trend: '▲', trendGood: false, note: 'بد', actualNum: 5.8, targetNum: 5.5, unit: 'Bm³' },
  { label: 'شدت انرژی',              actual: '۸.۲ GJ/t', target: '۷.۸ GJ/t', deviation: '+۵٪', deviationNum: +5, trend: '▲', trendGood: false, note: 'بد', actualNum: 8.2, targetNum: 7.8, unit: 'GJ/t' },
  { label: 'نرخ بهره‌برداری',         actual: '۸۴٪',     target: '۹۰٪',    deviation: '۶-٪',   deviationNum: -6,   trend: '→', trendGood: null,  actualNum: 84, targetNum: 90,   unit: '٪' },
  { label: 'صادرات',                 actual: '۱.۲ Mt',  target: '۲.۰ Mt',  deviation: '۴۰-٪',  deviationNum: -40,  trend: '▼', trendGood: false, actualNum: 1.2, targetNum: 2.0,  unit: 'Mt' },
];

interface Source {
  name: string;
  lastFetch: string;
  online: boolean;
}

const sources: Source[] = [
  { name: 'World Steel Association', lastFetch: 'دیروز',       online: true  },
  { name: 'IEA Iron & Steel Report', lastFetch: '۳ روز پیش',  online: true  },
  { name: 'McKinsey Global Steel',   lastFetch: '۱ هفته پیش', online: false },
  { name: 'Fastmarkets Steel',       lastFetch: 'امروز',       online: true  },
  { name: 'BCG Green Steel Report',  lastFetch: '۲ هفته پیش', online: false },
];

type FeedCategory = 'همه' | 'هشدار' | 'بازار' | 'سیاست' | 'فناوری' | 'رقیب';
const FEED_CATEGORIES: FeedCategory[] = ['همه', 'هشدار', 'بازار', 'سیاست', 'فناوری', 'رقیب'];

interface FeedItem {
  cat: Exclude<FeedCategory, 'همه'>;
  text: string;
  source: string;
  time: string;
}

const feedItems: FeedItem[] = [
  { cat: 'هشدار', text: 'صادرات فولاد چین ۱۱۷Mt در ۲۰۲۴ — رکورد ۲۵ ساله', source: 'worldsteel', time: '۲ ساعت پیش' },
  { cat: 'بازار',  text: 'قیمت سنگ‌آهن ۶۲٪ به $۱۰۱ رسید — کاهش ۸.۳٪ در ماه',  source: 'SGX',        time: 'دیروز' },
  { cat: 'سیاست', text: 'تعرفه Section 232 آمریکا به ۵۰٪ افزایش یافت (ژوئن ۲۰۲۵)', source: 'USTR',    time: '۳ روز پیش' },
  { cat: 'فناوری', text: 'Boston Metal برای فولادسازی الکتروشیمیایی $۲۶۲M سرمایه جذب کرد', source: 'Bloomberg', time: '۱ هفته پیش' },
  { cat: 'رقیب',  text: 'Nippon Steel خرید US Steel به ارزش $۱۴.۱B را تکمیل کرد', source: 'FT',       time: '۲ هفته پیش' },
];

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

function statusDot(status: string): { color: string; label: string } {
  switch (status) {
    case 'on-track': return { color: '#22c55e', label: 'در جریان' };
    case 'at-risk':  return { color: '#f59e0b', label: 'در خطر'   };
    case 'delayed':  return { color: '#ef4444', label: 'تاخیر'    };
    default:         return { color: '#94a3b8', label: status      };
  }
}

function weightColor(weight: string): { bg: string; text: string } {
  switch (weight) {
    case 'حیاتی': return { bg: '#fee2e2', text: '#991b1b' };
    case 'بالا':  return { bg: '#eff6ff', text: '#1d4ed8' };
    default:      return { bg: '#f1f5f9', text: '#475569' };
  }
}

function severityColor(s: 'high' | 'medium' | 'low'): string {
  return s === 'high' ? '#ef4444' : s === 'medium' ? '#f59e0b' : '#22c55e';
}

const catBorderColor: Record<Exclude<FeedCategory, 'همه'>, string> = {
  هشدار: '#ef4444',
  بازار:  '#3b82f6',
  سیاست: '#7c3aed',
  فناوری: '#059669',
  رقیب:  '#f59e0b',
};

const catBg: Record<Exclude<FeedCategory, 'همه'>, string> = {
  هشدار: '#fff5f5',
  بازار:  '#eff6ff',
  سیاست: '#f5f3ff',
  فناوری: '#f0fdf4',
  رقیب:  '#fffbeb',
};

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

const LABEL: React.CSSProperties = {
  fontSize: 10,
  fontWeight: 700,
  letterSpacing: '2px',
  color: '#475569',
  textTransform: 'uppercase' as const,
  marginBottom: 16,
};

const TABLE: React.CSSProperties = { borderCollapse: 'collapse', width: '100%' };

const TH: React.CSSProperties = {
  fontSize: 10,
  fontWeight: 700,
  letterSpacing: '1.5px',
  color: '#64748b',
  textTransform: 'uppercase' as const,
  padding: '8px 10px',
  borderBottom: '1px solid #e2e8f0',
  textAlign: 'right' as const,
  whiteSpace: 'nowrap' as const,
  background: '#f8fafc',
};

function TD(extra: React.CSSProperties = {}): React.CSSProperties {
  return {
    padding: '9px 10px',
    fontSize: 12,
    color: '#1e293b',
    verticalAlign: 'middle' as const,
    borderBottom: '1px solid #f1f5f9',
    textAlign: 'right' as const,
    ...extra,
  };
}

// ─── Source row with status dot + fetch button ────────────────────────────────

function SourceRow({ src }: { src: Source }) {
  const [fetching, setFetching] = useState(false);
  const [updated, setUpdated] = useState(false);
  const [hovered, setHovered] = useState(false);

  function handleFetch(e: React.MouseEvent) {
    e.stopPropagation();
    if (fetching) return;
    setFetching(true);
    setUpdated(false);
    setTimeout(() => { setFetching(false); setUpdated(true); }, 1500);
  }

  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        padding: '9px 10px',
        borderBottom: '1px solid #f1f5f9',
        background: hovered ? '#f8fafc' : 'transparent',
        cursor: 'default',
        transition: 'background 0.12s',
        display: 'flex',
        alignItems: 'center',
        gap: 8,
      }}
    >
      {/* Connection dot */}
      <div style={{
        width: 8, height: 8, borderRadius: '50%', flexShrink: 0,
        background: src.online ? '#22c55e' : '#cbd5e1',
        boxShadow: src.online ? '0 0 0 3px #dcfce7' : 'none',
        transition: 'background 0.3s',
      }} />

      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: '#1e293b', lineHeight: 1.35, direction: 'ltr', textAlign: 'right', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
          {src.name}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 2 }}>
          <span style={{ fontSize: 10, color: '#94a3b8' }}>آخرین دریافت</span>
          <span style={{ fontSize: 10, color: updated ? '#059669' : '#475569', fontFamily: 'monospace', transition: 'color 0.2s' }}>
            {updated ? 'به‌روز شد ✓' : src.lastFetch}
          </span>
        </div>
      </div>

      <button
        onClick={handleFetch}
        disabled={fetching}
        style={{
          flexShrink: 0,
          background: fetching ? '#e2e8f0' : (hovered ? ACCENT : '#fff'),
          border: `1px solid ${fetching ? '#e2e8f0' : ACCENT}`,
          borderRadius: 6, padding: '4px 9px',
          fontSize: 10, fontWeight: 700,
          color: fetching ? '#94a3b8' : (hovered ? '#fff' : ACCENT),
          cursor: fetching ? 'wait' : 'pointer',
          transition: 'background 0.15s',
          display: 'flex', alignItems: 'center', gap: 3,
        }}
      >
        {fetching ? (
          <svg width={11} height={11} viewBox="0 0 24 24" style={{ animation: 'spin 1s linear infinite', display: 'block' }}>
            <circle cx={12} cy={12} r={9} fill="none" stroke="#94a3b8" strokeWidth={3} strokeDasharray="28 57" strokeLinecap="round" />
          </svg>
        ) : <span style={{ fontSize: 11 }}>↻</span>}
        {!fetching && 'دریافت'}
      </button>
    </div>
  );
}

// ─── Module 08 ────────────────────────────────────────────────────────────────

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

function StatPill({ label, value, color }: { label: string; value: string; color: string }) {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.85 }}
      whileInView={{ opacity: 1, scale: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}
      style={{
        background: '#fff', border: '1px solid #e2e8f0', borderRadius: 12,
        padding: '9px 16px', display: 'flex', flexDirection: 'column', alignItems: 'center',
        minWidth: 78, boxShadow: '0 4px 12px rgba(3,35,64,0.06)',
      }}
    >
      <span style={{ fontSize: 20, fontWeight: 800, color, fontFamily: 'Vazir, sans-serif', lineHeight: 1 }}>{value}</span>
      <span style={{ fontSize: 9, color: '#94a3b8', marginTop: 4 }}>{label}</span>
    </motion.div>
  );
}

function ProgressRing({ pct, size = 58 }: { pct: number; size?: number }) {
  const r = size / 2 - 5;
  const c = 2 * Math.PI * r;
  const cx = size / 2;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ flexShrink: 0 }}>
      <circle cx={cx} cy={cx} r={r} fill="none" stroke="#eef2f6" strokeWidth={6} />
      <motion.circle
        cx={cx} cy={cx} r={r} fill="none" stroke="#032340" strokeWidth={6} strokeLinecap="round"
        transform={`rotate(-90 ${cx} ${cx})`} strokeDasharray={c}
        initial={{ strokeDashoffset: c }}
        whileInView={{ strokeDashoffset: c * (1 - pct / 100) }}
        viewport={{ once: true }}
        transition={{ duration: 1.1, delay: 0.25, ease: [0.22, 1, 0.36, 1] }}
      />
      <text x={cx} y={cx + 4} textAnchor="middle" fontSize={size * 0.24} fontWeight={800} fill="#032340" fontFamily="Vazir, sans-serif">{faNum(pct)}٪</text>
    </svg>
  );
}

const cardBase = (open: boolean): React.CSSProperties => ({
  position: 'relative',
  overflow: 'hidden',
  background: '#fff', borderRadius: 14, cursor: 'pointer',
  boxShadow: open ? '0 16px 36px rgba(3,35,64,0.15)' : '0 6px 18px rgba(3,35,64,0.07)',
  padding: 18, transition: 'box-shadow 0.2s',
});

const statusPill = (dot: { color: string; label: string }): React.ReactElement => (
  <span style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 10, fontWeight: 700, color: dot.color, background: `${dot.color}14`, padding: '4px 10px', borderRadius: 99, whiteSpace: 'nowrap' as const }}>
    <span style={{ width: 6, height: 6, borderRadius: '50%', background: dot.color }} />{dot.label}
  </span>
);

const EXP = { initial: { height: 0, opacity: 0, filter: 'blur(10px)' }, animate: { height: 'auto' as const, opacity: 1, filter: 'blur(0px)' }, exit: { height: 0, opacity: 0, filter: 'blur(10px)' }, transition: { duration: 1.5, ease: [0.22, 1, 0.36, 1] as const } };

function StrategyCard({ s, index }: { s: Strategy; index: number }) {
  const [open, setOpen] = useState(false);
  const dot = statusDot(s.status);
  const wc = weightColor(s.weight);
  const doneCount = s.milestones.filter((m) => m.done).length;
  return (
    <motion.div
      initial={{ opacity: 0, y: 26 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-40px' }}
      transition={{ duration: 0.45, delay: index * 0.06, ease: [0.22, 1, 0.36, 1] }}
      whileHover={{ y: -4 }}
      onViewportEnter={() => { window.setTimeout(() => setOpen(true), 650 + index * 200) }}
      onClick={() => setOpen((o) => !o)}
      style={cardBase(open)}
    >
      <BorderBeam duration={10} size={75} borderWidth={1.5} colorFrom="#CD9E53" colorTo="#032340" />
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontSize: 11, fontWeight: 800, color: '#fff', background: '#032340', width: 30, height: 30, borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'monospace' }}>{s.id}</span>
          <span style={{ fontSize: 10, fontWeight: 700, background: wc.bg, color: wc.text, padding: '3px 9px', borderRadius: 99 }}>{s.weight}</span>
        </div>
        {statusPill(dot)}
      </div>

      <div style={{ fontSize: 14, fontWeight: 800, color: '#032340', marginBottom: 14, minHeight: 40, lineHeight: 1.4 }}>{s.name}</div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <ProgressRing pct={s.progress} />
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 10, color: '#94a3b8' }}>مسئول</div>
          <div style={{ fontSize: 12, fontWeight: 700, color: '#334155', marginBottom: 6 }}>{s.owner}</div>
          <div style={{ fontSize: 10, color: '#94a3b8' }}>{faNum(doneCount)} از {faNum(s.milestones.length)} نقطه کلیدی</div>
        </div>
        <span style={{ color: '#cbd5e1', fontSize: 12 }}>{open ? '▲' : '▼'}</span>
      </div>

      <AnimatePresence initial={false}>
        {open && (
          <motion.div key="exp" {...EXP} style={{ overflow: 'hidden' }}>
            <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px dashed #e2e8f0' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
                <span className="soft-blink" style={{ width: 8, height: 8, borderRadius: '50%', background: '#22c55e', boxShadow: '0 0 6px #22c55e' }} />
                <span style={{ fontSize: 10, fontWeight: 800, color: '#16a34a', letterSpacing: '0.5px' }}>پایش زنده</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
                {s.milestones.map((m, mi) => (
                  <div key={mi} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <div className={m.done ? undefined : 'soft-blink'} style={{ width: 16, height: 16, borderRadius: '50%', flexShrink: 0, background: m.done ? '#22c55e' : '#e2e8f0', border: `2px solid ${m.done ? '#16a34a' : '#cbd5e1'}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      {m.done && (<svg width={8} height={8} viewBox="0 0 8 8"><polyline points="1,4 3,6 7,2" fill="none" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>)}
                    </div>
                    <span style={{ fontSize: 12, color: m.done ? '#374151' : '#94a3b8' }}>{m.label}</span>
                  </div>
                ))}
              </div>
              <div style={{ fontSize: 11, color: '#94a3b8', marginTop: 10 }}>بازبینی بعدی: <span style={{ color: '#032340', fontWeight: 700, fontFamily: 'monospace' }}>{s.nextReview}</span></div>
              {s.blocker && (
                <div style={{ marginTop: 8, padding: '8px 12px', borderRadius: 8, background: '#fef2f2', border: '1px solid #fecaca', fontSize: 11, color: '#991b1b', display: 'flex', gap: 6, alignItems: 'flex-start' }}>
                  <span className="soft-blink" style={{ flexShrink: 0, fontWeight: 700 }}>⚠ مانع:</span><span>{s.blocker}</span>
                </div>
              )}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  );
}

function ProjectCard({ p, index }: { p: Project; index: number }) {
  const [open, setOpen] = useState(false);
  const dot = statusDot(p.status);
  const maxBudget = Math.max(...p.budgetBreakdown.flatMap((b) => [b.planned, b.actual]));
  const totalPlanned = p.budgetBreakdown.reduce((a, b) => a + b.planned, 0);
  const totalActual = p.budgetBreakdown.reduce((a, b) => a + b.actual, 0);
  return (
    <motion.div
      initial={{ opacity: 0, y: 26 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-40px' }}
      transition={{ duration: 0.45, delay: index * 0.06, ease: [0.22, 1, 0.36, 1] }}
      whileHover={{ y: -4 }}
      onViewportEnter={() => { window.setTimeout(() => setOpen(true), 650 + index * 200) }}
      onClick={() => setOpen((o) => !o)}
      style={cardBase(open)}
    >
      <BorderBeam duration={10} size={75} borderWidth={1.5} colorFrom="#CD9E53" colorTo="#032340" />
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 10, marginBottom: 12 }}>
        <div style={{ fontSize: 14, fontWeight: 800, color: '#032340', lineHeight: 1.4 }}>{p.name}</div>
        <div style={{ flexShrink: 0 }}>{statusPill(dot)}</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10, fontSize: 11 }}>
        <span style={{ color: '#64748b' }}>بودجه: <span style={{ fontWeight: 700, color: '#334155', fontFamily: 'monospace' }}>{p.budget}</span></span>
        <span style={{ color: '#64748b' }}>مهلت: <span style={{ fontWeight: 700, color: '#334155' }}>{p.deadline}</span></span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, direction: 'ltr' }}>
        <div style={{ flex: 1, height: 8, borderRadius: 99, background: '#eef2f6', overflow: 'hidden' }}>
          <motion.div initial={{ width: 0 }} whileInView={{ width: `${p.progress}%` }} viewport={{ once: true }} transition={{ duration: 1, delay: 0.2, ease: [0.22, 1, 0.36, 1] }} style={{ height: '100%', borderRadius: 99, background: '#032340' }} />
        </div>
        <span style={{ fontSize: 12, fontWeight: 800, color: '#032340', fontFamily: 'Vazir, sans-serif', minWidth: 34, textAlign: 'left' as const }}>{faNum(p.progress)}٪</span>
        <span style={{ color: '#cbd5e1', fontSize: 12 }}>{open ? '▲' : '▼'}</span>
      </div>

      <AnimatePresence initial={false}>
        {open && (
          <motion.div key="exp" {...EXP} style={{ overflow: 'hidden' }}>
            <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px dashed #e2e8f0' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
                <span className="soft-blink" style={{ width: 8, height: 8, borderRadius: '50%', background: '#CD9E53', boxShadow: '0 0 6px #CD9E53' }} />
                <span style={{ fontSize: 10, fontWeight: 800, color: '#b07d2e', letterSpacing: '0.5px' }}>به‌روزرسانی زنده</span>
              </div>
              <div style={{ fontSize: 10, fontWeight: 700, color: '#475569', letterSpacing: '1px', marginBottom: 8 }}>بودجه (م.ریال) — واقعی / برنامه</div>
              {p.budgetBreakdown.map((b, bi) => (
                <div key={bi} style={{ marginBottom: 8 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: '#64748b', marginBottom: 3 }}>
                    <span>{b.label}</span>
                    <span style={{ fontFamily: 'monospace', color: b.actual > b.planned ? '#dc2626' : '#059669', fontWeight: 700 }}>{faNum(b.actual)} / {faNum(b.planned)}</span>
                  </div>
                  <div style={{ height: 6, background: '#eef2f6', borderRadius: 99, overflow: 'hidden' }}>
                    <motion.div initial={{ width: 0 }} animate={{ width: `${(b.actual / maxBudget) * 100}%` }} transition={{ duration: 0.7, delay: 0.1 + bi * 0.05 }} style={{ height: '100%', borderRadius: 99, background: b.actual > b.planned ? '#dc2626' : '#032340' }} />
                  </div>
                </div>
              ))}
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, fontWeight: 800, color: '#032340', borderTop: '1px solid #f1f5f9', paddingTop: 6, marginTop: 4 }}>
                <span>جمع کل</span>
                <span style={{ fontFamily: 'monospace', color: totalActual > totalPlanned ? '#dc2626' : '#059669' }}>{faNum(totalActual)} / {faNum(totalPlanned)}</span>
              </div>

              <div style={{ fontSize: 10, fontWeight: 700, color: '#475569', letterSpacing: '1px', margin: '14px 0 8px' }}>نقشه راه ۴ هفته</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {p.weekMilestones.map((wm, wi) => (
                  <div key={wi} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span className={wm.done ? undefined : 'soft-blink'} style={{ fontSize: 9, fontWeight: 700, color: wm.done ? '#fff' : '#64748b', background: wm.done ? '#22c55e' : '#e2e8f0', padding: '2px 7px', borderRadius: 99, minWidth: 44, textAlign: 'center' as const, fontFamily: 'monospace', flexShrink: 0 }}>{wm.week}</span>
                    <span style={{ fontSize: 11, color: wm.done ? '#374151' : '#94a3b8', textDecoration: wm.done ? 'line-through' : 'none' }}>{wm.label}</span>
                  </div>
                ))}
              </div>

              {p.risks.length > 0 && (
                <>
                  <div style={{ fontSize: 10, fontWeight: 700, color: '#475569', letterSpacing: '1px', margin: '14px 0 8px' }}>ریسک‌ها</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
                    {p.risks.map((risk, ri) => (
                      <div key={ri} style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '5px 9px', borderRadius: 6, background: risk.severity === 'high' ? '#fef2f2' : risk.severity === 'medium' ? '#fffbeb' : '#f0fdf4', border: `1px solid ${severityColor(risk.severity)}33` }}>
                        <div className={risk.severity === 'high' ? 'soft-blink' : undefined} style={{ width: 7, height: 7, borderRadius: '50%', background: severityColor(risk.severity), flexShrink: 0 }} />
                        <span style={{ fontSize: 11, color: '#374151' }}>{risk.label}</span>
                      </div>
                    ))}
                  </div>
                </>
              )}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  );
}

function Module08() {
  const counts = {
    onTrack: strategies.filter((s) => s.status === 'on-track').length,
    atRisk: strategies.filter((s) => s.status === 'at-risk').length,
    delayed: strategies.filter((s) => s.status === 'delayed').length,
  };
  const avg = Math.round(strategies.reduce((a, s) => a + s.progress, 0) / strategies.length);

  return (
    <div style={{
      background: '#fff',
      border: '1px solid #e2e8f0',
      borderTop: `3px solid ${ACCENT}`,
      padding: '20px 22px',
      direction: 'rtl',
    }}>
      {/* Header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 20 }}>
        <div>
          <div style={{ fontSize: 16, fontWeight: 700, color: NAVY }}>
            وضعیت استراتژی‌ها
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' as const }}>
          <StatPill label="میانگین پیشرفت" value={`${faNum(avg)}٪`} color="#032340" />
          <StatPill label="در جریان" value={faNum(counts.onTrack)} color="#22c55e" />
          <StatPill label="در خطر" value={faNum(counts.atRisk)} color="#f59e0b" />
          <StatPill label="تاخیر" value={faNum(counts.delayed)} color="#ef4444" />
        </div>
      </div>

      {/* Strategy table — rows are clickable to expand */}
      <div style={LABEL}>استراتژی‌های کلان ۶ گانه</div>
      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
        {strategies.map((s, i) => <StrategyCard key={s.id} s={s} index={i} />)}
      </div>

      {/* Projects table — rows clickable to expand */}
      <div style={{ marginTop: 28 }}>
        <div style={LABEL}>پروژه‌های سرمایه‌گذاری کلیدی</div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
          {projects.map((p, i) => <ProjectCard key={i} p={p} index={i} />)}
        </div>
      </div>
    </div>
  );
}

// ─── Module 09 ────────────────────────────────────────────────────────────────

function Module09() {
  const [hovRow, setHovRow] = useState<number | null>(null);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    const t = setTimeout(() => setMounted(true), 60);
    return () => clearTimeout(t);
  }, []);

  const chartMax = Math.max(...kpis.map(k => Math.max(k.actualNum, k.targetNum))) * 1.15;
  const BAR_MAX_W = 260;
  const ROW_H = 50;

  return (
    <div style={{
      background: '#fff',
      border: '1px solid #e2e8f0',
      borderTop: `3px solid ${ACCENT}`,
      padding: '20px 22px',
      direction: 'rtl',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 20 }}>
        <div>
          <div style={{ fontSize: 16, fontWeight: 700, color: NAVY }}>
            شاخص‌های عملکرد کلان
          </div>
        </div>
        <div style={{ fontSize: 10, color: '#94a3b8', fontFamily: 'monospace' }}>
          واقعی ۱۴۰۲ vs هدف ۱۴۰۳
        </div>
      </div>

      {/* Company header strip */}
      <div style={{
        display: 'flex', gap: 24, padding: '10px 14px', marginBottom: 16,
        background: NAVY, borderRadius: 4, direction: 'ltr', flexWrap: 'wrap',
      }}>
        {[
          { label: 'DRI CAPACITY', value: '8.2 Mt/yr' },
          { label: 'EAF CAPACITY', value: '7.4 Mt/yr' },
          { label: 'TOTAL CAPACITY', value: '10.3 Mt/yr' },
          { label: 'TECHNOLOGY', value: 'DR-EAF (NG)' },
          { label: 'RANK', value: '#1 DRI WORLD' },
        ].map((item) => (
          <div key={item.label} style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            <span style={{ fontSize: 9, fontWeight: 700, color: '#64748b', letterSpacing: '1.5px', fontFamily: 'monospace' }}>{item.label}</span>
            <span style={{ fontSize: 12, fontWeight: 700, color: '#e2e8f0', fontFamily: 'monospace' }}>{item.value}</span>
          </div>
        ))}
      </div>

      {/* KPI Table */}
      <table style={TABLE}>
        <thead>
          <tr>
            <th style={TH}>شاخص</th>
            <th style={{ ...TH, textAlign: 'center' as const, width: 90 }}>واقعی ۱۴۰۲</th>
            <th style={{ ...TH, textAlign: 'center' as const, width: 90 }}>هدف ۱۴۰۳</th>
            <th style={{ ...TH, textAlign: 'center' as const, width: 80 }}>انحراف</th>
            <th style={{ ...TH, textAlign: 'center' as const, width: 50 }}>روند</th>
          </tr>
        </thead>
        <tbody>
          {kpis.map((k, i) => {
            const isHov = hovRow === i;
            const trendColor = k.trendGood === null ? '#94a3b8' : k.trendGood ? '#059669' : '#dc2626';
            const isInverse = k.note === 'بد';
            const devColor = isInverse
              ? (k.deviationNum < 0 ? '#059669' : '#dc2626')
              : (k.deviationNum < 0 ? '#dc2626' : '#059669');
            return (
              <tr
                key={i}
                onMouseEnter={() => setHovRow(i)}
                onMouseLeave={() => setHovRow(null)}
                style={{ background: isHov ? '#f8fafc' : (i % 2 === 0 ? '#fff' : '#fafafa'), cursor: 'default' }}
              >
                <td style={TD({ fontWeight: 600 })}>
                  {k.label}
                  {k.note && <span style={{ fontSize: 10, color: '#dc2626', marginRight: 6, fontWeight: 700 }}>({k.note})</span>}
                </td>
                <td style={TD({ textAlign: 'center', fontFamily: 'monospace', fontWeight: 700, color: NAVY })}>{k.actual}</td>
                <td style={TD({ textAlign: 'center', fontFamily: 'monospace', fontSize: 11, color: '#64748b' })}>{k.target}</td>
                <td style={TD({ textAlign: 'center', fontFamily: 'monospace', fontWeight: 700, color: devColor })}>{k.deviation}</td>
                <td style={{ ...TD({ textAlign: 'center', fontSize: 15, fontWeight: 700 }), color: trendColor }}>{k.trend}</td>
              </tr>
            );
          })}
        </tbody>
      </table>

      {/* KPI Variance Chart */}
      <div style={{ marginTop: 24 }}>
        <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '2px', color: '#475569', textTransform: 'uppercase', marginBottom: 12, display: 'flex', alignItems: 'center', gap: 16 }}>
          نمودار واقعی در برابر هدف
          <span style={{ display: 'flex', gap: 12, fontSize: 10, fontWeight: 600, letterSpacing: 0 }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
              <span style={{ width: 12, height: 7, background: '#1e40af', display: 'inline-block', borderRadius: 2, opacity: 0.7 }} /> هدف
            </span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
              <span style={{ width: 12, height: 7, background: '#059669', display: 'inline-block', borderRadius: 2, opacity: 0.85 }} /> واقعی
            </span>
          </span>
        </div>

        <svg
          width="100%"
          viewBox={`0 0 560 ${kpis.length * ROW_H + 10}`}
          style={{ display: 'block', direction: 'ltr', overflow: 'visible' }}
        >
          {kpis.map((k, i) => {
            const LABEL_COL_W = 160;
            const y = i * ROW_H + 6;
            const targetW = mounted ? (k.targetNum / chartMax) * BAR_MAX_W : 0;
            const actualW = mounted ? (k.actualNum / chartMax) * BAR_MAX_W : 0;
            const isInverse = k.note === 'بد';
            // For inverse KPIs (gas, energy intensity): over-target is bad
            const actualGood = isInverse ? k.actualNum <= k.targetNum : k.actualNum >= k.targetNum;
            const actualFill = actualGood ? '#059669' : '#dc2626';

            return (
              <g key={i}>
                <text
                  x={LABEL_COL_W - 8}
                  y={y + 11}
                  textAnchor="end"
                  fontSize={10.5}
                  fill="#475569"
                  fontFamily="'Vazir', 'Inter', 'Segoe UI', Tahoma, sans-serif"
                >
                  {k.label}
                </text>
                {/* Target bar */}
                <rect
                  x={LABEL_COL_W}
                  y={y}
                  width={targetW}
                  height={9}
                  rx={4}
                  fill="#1e40af"
                  opacity={0.7}
                  style={{ transition: 'width 0.9s cubic-bezier(0.4,0,0.2,1)' }}
                />
                <text x={LABEL_COL_W + (mounted ? targetW : 0) + 5} y={y + 9} fontSize={9} fill="#1e40af" fontWeight={600} opacity={0.8}>
                  {k.target}
                </text>
                {/* Actual bar */}
                <rect
                  x={LABEL_COL_W}
                  y={y + 14}
                  width={actualW}
                  height={9}
                  rx={4}
                  fill={actualFill}
                  opacity={0.85}
                  style={{ transition: 'width 0.9s cubic-bezier(0.4,0,0.2,1)' }}
                />
                <text x={LABEL_COL_W + (mounted ? actualW : 0) + 5} y={y + 23} fontSize={9} fill={actualFill} fontWeight={600}>
                  {k.actual}
                </text>
              </g>
            );
          })}
        </svg>
      </div>

      {/* Footer note */}
      <div style={{
        marginTop: 12, fontSize: 10, color: '#94a3b8', direction: 'rtl',
        borderTop: '1px solid #f1f5f9', paddingTop: 10,
        display: 'flex', gap: 16, flexWrap: 'wrap',
      }}>
        <span>● چالش اصلی: سهمیه‌بندی گاز در زمستان — کاهش ۳۰٪ تولید DRI</span>
        <span>● درآمد ۱۴۰۲: ~۱۸۰ هزار میلیارد ریال (~$۴۶۰M)</span>
        <span>● فناوری: DRI طبیعی → EAF (بدون کک)</span>
      </div>
    </div>
  );
}

// ─── Module 10 ────────────────────────────────────────────────────────────────

function Module10() {
  const [hovFeed, setHovFeed] = useState<number | null>(null);
  const [activeCategory, setActiveCategory] = useState<FeedCategory>('همه');

  const visibleFeed = activeCategory === 'همه'
    ? feedItems
    : feedItems.filter(f => f.cat === activeCategory);

  return (
    <div style={{
      background: '#fff',
      border: '1px solid #e2e8f0',
      borderTop: `3px solid ${ACCENT}`,
      padding: '20px 22px',
      direction: 'rtl',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 20 }}>
        <div>
          <div style={{ fontSize: 16, fontWeight: 700, color: NAVY }}>
            جریان دانش روز
          </div>
        </div>
        <div style={{ fontSize: 10, color: '#94a3b8', fontFamily: 'monospace' }}>
          Daily Intelligence Feed
        </div>
      </div>

      <div style={{ display: 'flex', gap: 20, alignItems: 'flex-start' }}>

        {/* Sources panel — each row has status dot + fetch button */}
        <div style={{ width: 248, flexShrink: 0 }}>
          <div style={LABEL}>منابع اطلاعاتی</div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {sources.map((src, i) => (
              <SourceRow key={i} src={src} />
            ))}
          </div>
        </div>

        {/* Divider */}
        <div style={{ width: 1, background: '#e2e8f0', alignSelf: 'stretch', flexShrink: 0 }} />

        {/* Feed */}
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={LABEL}>آخرین اطلاعات تحلیلی</div>

          {/* Category filter chips */}
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 14, direction: 'rtl' }}>
            {FEED_CATEGORIES.map(cat => {
              const isActive = activeCategory === cat;
              const borderCol = cat !== 'همه' ? catBorderColor[cat as Exclude<FeedCategory, 'همه'>] : ACCENT;
              return (
                <button
                  key={cat}
                  onClick={() => setActiveCategory(cat)}
                  style={{
                    padding: '4px 12px',
                    borderRadius: 2,
                    border: `1.5px solid ${isActive ? borderCol : '#e2e8f0'}`,
                    background: isActive ? borderCol : '#fafafa',
                    color: isActive ? '#fff' : '#475569',
                    fontSize: 10, fontWeight: 700,
                    letterSpacing: '0.5px',
                    cursor: 'pointer',
                    transition: 'all 0.15s',
                  }}
                >
                  {cat}
                </button>
              );
            })}
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {visibleFeed.length === 0 && (
              <div style={{ padding: '20px 0', textAlign: 'center', color: '#94a3b8', fontSize: 12 }}>
                موردی در این دسته یافت نشد
              </div>
            )}
            {visibleFeed.map((item, i) => {
              const isHov = hovFeed === i;
              const borderColor = catBorderColor[item.cat];
              const bg = isHov ? catBg[item.cat] : '#fafafa';
              return (
                <div
                  key={i}
                  onMouseEnter={() => setHovFeed(i)}
                  onMouseLeave={() => setHovFeed(null)}
                  style={{
                    display: 'flex',
                    gap: 10,
                    padding: '10px 12px',
                    background: bg,
                    borderRight: `3px solid ${borderColor}`,
                    borderBottom: '1px solid #f1f5f9',
                    cursor: 'default',
                    transition: 'background 0.12s',
                  }}
                >
                  {/* Category pill */}
                  <div style={{ flexShrink: 0, alignSelf: 'flex-start', marginTop: 2 }}>
                    <span style={{
                      fontSize: 9, fontWeight: 700, letterSpacing: '1px',
                      color: borderColor, background: '#fff',
                      border: `1px solid ${borderColor}`,
                      padding: '1px 6px', borderRadius: 2,
                      display: 'inline-block', fontFamily: 'monospace',
                    }}>
                      {item.cat}
                    </span>
                  </div>
                  {/* Content */}
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12, fontWeight: 600, color: '#1e293b', lineHeight: 1.55 }}>
                      {item.text}
                    </div>
                    <div style={{
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                      marginTop: 5, direction: 'ltr',
                    }}>
                      <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '1px', color: '#64748b', textTransform: 'uppercase', fontFamily: 'monospace' }}>
                        {item.source}
                      </span>
                      <span style={{ fontSize: 10, color: '#94a3b8', fontFamily: 'monospace' }}>{item.time}</span>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

      </div>
    </div>
  );
}

// ─── Root ─────────────────────────────────────────────────────────────────────

export default function SelfSection() {
  return (
    <section style={{
      padding: '40px 0',
      direction: 'rtl',
      fontFamily: "'Vazir', 'Inter', 'Segoe UI', Tahoma, sans-serif",
    }}>
      {/* Keyframes for spinner animation */}
      <style>{`
        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
      `}</style>

      {/* Section header */}
      <div style={{
        display: 'flex',
        alignItems: 'flex-end',
        justifyContent: 'space-between',
        marginBottom: 24,
        paddingBottom: 14,
        borderBottom: '1px solid #e2e8f0',
      }}>
        <div>
          <div style={{
            fontSize: 10, fontWeight: 700, letterSpacing: '3px',
            color: '#475569', textTransform: 'uppercase',
            marginBottom: 6,
          }}>
            SELF INTELLIGENCE — MOBARAKEH STEEL CO.
          </div>
          <div style={{ fontSize: 22, fontWeight: 800, color: NAVY, lineHeight: 1.1 }}>
            دیدن خود
          </div>
          <div style={{ fontSize: 12, color: '#64748b', marginTop: 4 }}>
            فولاد مبارکه — بزرگترین تولیدکننده DRI جهان · ظرفیت ۱۰.۳ میلیون تن
          </div>
        </div>
        <div style={{ display: 'flex', gap: 20, direction: 'ltr' }}>
          {[
            { v: '8.63 Mt', l: 'DRI ۱۴۰۲' },
            { v: '8.85 Mt', l: 'تختال ۱۴۰۲' },
            { v: '84%',     l: 'بهره‌برداری' },
          ].map((item) => (
            <div key={item.l} style={{ textAlign: 'center' }}>
              <div style={{ fontSize: 16, fontWeight: 800, color: ACCENT, fontFamily: 'monospace', lineHeight: 1 }}>
                {item.v}
              </div>
              <div style={{ fontSize: 10, color: '#94a3b8', marginTop: 3, letterSpacing: '0.5px' }}>
                {item.l}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* KPI Gauges — animated radial charts */}
      <motion.div
        className="grid grid-cols-2 lg:grid-cols-4 gap-8 mb-8"
        initial={{ opacity: 0, y: 28 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: '-60px' }}
        transition={{ duration: 0.55, ease: EASE }}
      >
        {[
          { label: 'نرخ بهره‌برداری', value: 84, sub: 'هدف: ۹۰٪', dur: 1.8 },
          { label: 'DRI vs هدف',      value: 94, sub: '۸.۶۳ از ۹.۲ Mt', dur: 2 },
          { label: 'صادرات vs هدف',   value: 60, sub: '۱.۲ از ۲.۰ Mt', dur: 2.2 },
          { label: 'سلامت استراتژی',  value: 52, sub: 'میانگین ۶ استراتژی', dur: 1.5 },
        ].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.09, ease: EASE }}
            style={{
              background: '#fff',
              border: '1px solid #e2e8f0',
              borderTop: '3px solid #032340',
              borderRadius: 12,
              padding: '22px 16px',
              boxShadow: '0 8px 24px rgba(3,35,64,0.10), 0 2px 6px rgba(3,35,64,0.06)',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
            }}
          >
            <div style={{ fontSize: 9, fontWeight: 700, color: '#032340', letterSpacing: '2px', textTransform: 'uppercase' as const, textAlign: 'center' as const }}>{item.label}</div>
            <AnimatedRadialChart value={item.value} size={160} duration={item.dur} />
            <div style={{ fontSize: 11, color: '#CD9E53', fontWeight: 600 }}>{item.sub}</div>
          </motion.div>
        ))}
      </motion.div>

      {/* Vo2Max-style KPI cards */}
      <motion.div
        className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8"
        initial={{ opacity: 0, y: 28 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: '-60px' }}
        transition={{ duration: 0.55, delay: 0.18, ease: EASE }}
      >
        <Vo2MaxCard
          title="نرخ بهره‌برداری"
          value={84} status="قابل قبول" progress={84}
          icon={<Activity size={20} />}
          description={<>هدف سالانه <span style={{ fontWeight: 700, color: '#CD9E53' }}>۹۰٪</span> — فاصله ۶ واحد درصد</>}
        />
        <Vo2MaxCard
          title="شدت انرژی (GJ/t)"
          value={82} status="نیاز به بهبود" progress={82}
          icon={<Zap size={20} />}
          description={<>مصرف ۸.۲ GJ/t — هدف <span style={{ fontWeight: 700, color: '#CD9E53' }}>۷.۸</span> GJ/t</>}
        />
        <Vo2MaxCard
          title="پیشرفت استراتژی S3"
          value={72} status="در جریان" progress={72}
          icon={<Target size={20} />}
          description={<>دیجیتال‌سازی MES/ERP — <span style={{ fontWeight: 700, color: '#CD9E53' }}>پیشرو</span> در زمان‌بندی</>}
        />
      </motion.div>

      {/* Module 08 */}
      <div style={{ marginBottom: 20 }}>
        <Module08 />
      </div>

      {/* Modules 09 + 10 side by side */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        <Module09 />
        <Module10 />
      </div>
    </section>
  );
}
