steelforesight/src/pages/Home/sections/FactoryBentoSection.tsx

import { Download } from 'lucide-react'
import { BentoGrid, BentoGridItem } from '@/components/ui/bento-grid'
import { useLang } from '@/context/LangContext'

const MSC_URL = 'https://www.msc.ir/fa-IR/Portal/8029/page/%D9%85%D8%A7%D9%87%D9%86%D8%A7%D9%85%D9%87-%D8%AA%D8%AD%D9%84%DB%8C%D9%84%DB%8C-%D8%B1%D8%A7%D9%87%D8%A8%D8%B1%D8%AF%DB%8C-%DA%A9%D8%A7%D8%B1%D8%AE%D8%A7%D9%86%D9%87'

type FactoryReport = {
  publisher:   string
  publisherEn: string
  title:       string
  titleEn:     string
  description: string
  descriptionEn: string
  date:        string
  dateEn:      string
  accentColor: string
  imgBg:       string
}

const REPORTS: FactoryReport[] = [
  {
    publisher: 'فولاد مبارکه', publisherEn: 'Mobarakeh Steel',
    title:   'تحلیل عملکرد تولید و صادرات — بهمن ۱۴۰۳',
    titleEn: 'Production & Export Performance — Feb 2025',
    description:   'بررسی آمار تولید ماهانه، مقایسه با بودجه سالانه و تحلیل روند صادرات فولاد تخت در بازارهای منطقه‌ای',
    descriptionEn: 'Monthly production figures, annual budget comparison, and flat steel export trend analysis across regional markets.',
    date: 'بهمن ۱۴۰۳', dateEn: 'Feb 2025',
    accentColor: 'var(--red)',
    imgBg: 'linear-gradient(135deg, rgba(180,20,20,0.13) 0%, rgba(180,20,20,0.04) 100%)',
  },
  {
    publisher: 'فولاد مبارکه', publisherEn: 'Mobarakeh Steel',
    title:   'وضعیت بازار و قیمت‌گذاری — دی ۱۴۰۳',
    titleEn: 'Market Conditions & Pricing — Jan 2025',
    description:   'تحلیل نوسانات قیمت فولاد تخت در بازار داخلی، بررسی اثر نرخ ارز و چشم‌انداز بازار در فصل زمستان',
    descriptionEn: 'Flat steel price fluctuations in the domestic market, exchange rate impact analysis, and winter market outlook.',
    date: 'دی ۱۴۰۳', dateEn: 'Jan 2025',
    accentColor: 'var(--red)',
    imgBg: 'linear-gradient(135deg, rgba(180,20,20,0.11) 0%, rgba(180,20,20,0.03) 100%)',
  },
  {
    publisher: 'فولاد مبارکه', publisherEn: 'Mobarakeh Steel',
    title:   'گزارش پایداری و محیط زیست — آذر ۱۴۰۳',
    titleEn: 'Sustainability & Environment Report — Dec 2024',
    description:   'شاخص‌های زیست‌محیطی ماهانه؛ مصرف انرژی، کاهش انتشار کربن و عملکرد سیستم بازیافت پساب صنعتی',
    descriptionEn: 'Monthly environmental KPIs: energy consumption, carbon emission reductions, and industrial wastewater recycling performance.',
    date: 'آذر ۱۴۰۳', dateEn: 'Dec 2024',
    accentColor: 'var(--red)',
    imgBg: 'linear-gradient(135deg, rgba(180,20,20,0.09) 0%, rgba(180,20,20,0.03) 100%)',
  },
  {
    publisher: 'فولاد مبارکه', publisherEn: 'Mobarakeh Steel',
    title:   'تحلیل نیروی انسانی و بهره‌وری — آبان ۱۴۰۳',
    titleEn: 'Workforce & Productivity Analysis — Nov 2024',
    description:   'بررسی شاخص‌های بهره‌وری نیروی کار، آموزش‌های ماهانه و آمار ایمنی شغلی و حوادث محیط کار',
    descriptionEn: 'Workforce productivity indicators, monthly training hours, occupational safety statistics, and workplace incident rates.',
    date: 'آبان ۱۴۰۳', dateEn: 'Nov 2024',
    accentColor: 'var(--red)',
    imgBg: 'linear-gradient(135deg, rgba(180,20,20,0.13) 0%, rgba(180,20,20,0.04) 100%)',
  },
  {
    publisher: 'فولاد مبارکه', publisherEn: 'Mobarakeh Steel',
    title:   'عملکرد مالی و سرمایه‌گذاری — مهر ۱۴۰۳',
    titleEn: 'Financial Performance & Investment — Oct 2024',
    description:   'خلاصه عملکرد مالی، پروژه‌های جاری سرمایه‌گذاری و پیشرفت طرح توسعه تا پایان مهرماه ۱۴۰۳',
    descriptionEn: 'Financial performance summary, active investment projects, and development plan progress through end of October 2024.',
    date: 'مهر ۱۴۰۳', dateEn: 'Oct 2024',
    accentColor: 'var(--red)',
    imgBg: 'linear-gradient(135deg, rgba(180,20,20,0.10) 0%, rgba(180,20,20,0.03) 100%)',
  },
  {
    publisher: 'فولاد مبارکه', publisherEn: 'Mobarakeh Steel',
    title:   'فناوری و نوآوری در فرآیند تولید — شهریور ۱۴۰۳',
    titleEn: 'Technology & Innovation in Production — Sep 2024',
    description:   'گزارش پیشرفت پروژه‌های دیجیتال‌سازی، بهره‌گیری از هوش مصنوعی در کنترل کیفیت و اتوماسیون خط تولید',
    descriptionEn: 'Digitalization project progress, AI adoption in quality control, and production line automation milestones.',
    date: 'شهریور ۱۴۰۳', dateEn: 'Sep 2024',
    accentColor: 'var(--red)',
    imgBg: 'linear-gradient(135deg, rgba(180,20,20,0.12) 0%, rgba(180,20,20,0.04) 100%)',
  },
  {
    publisher: 'فولاد مبارکه', publisherEn: 'Mobarakeh Steel',
    title:   'زنجیره تأمین و مواد اولیه — مرداد ۱۴۰۳',
    titleEn: 'Supply Chain & Raw Materials — Aug 2024',
    description:   'تحلیل وضعیت تأمین سنگ‌آهن، آهن اسفنجی و کُک؛ بررسی ریسک‌های زنجیره تأمین در فصل تابستان',
    descriptionEn: 'Iron ore, DRI, and coke supply status; supply chain risk assessment for the summer season.',
    date: 'مرداد ۱۴۰۳', dateEn: 'Aug 2024',
    accentColor: 'var(--red)',
    imgBg: 'linear-gradient(135deg, rgba(180,20,20,0.08) 0%, rgba(180,20,20,0.03) 100%)',
  },
]

const T = {
  fa: { overline: 'MOBARAKEH STEEL', heading: 'ماهنامه تحلیلی کارخانه', all: 'مشاهده همه', download: 'دریافت گزارش' },
  en: { overline: 'MOBARAKEH STEEL', heading: 'Monthly Industry Briefing', all: 'View All', download: 'Download Report' },
}

function DownloadCTA({ label }: { label: string }) {
  return (
    <a
      href={MSC_URL}
      target="_blank"
      rel="noopener noreferrer"
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 6, direction: 'ltr',
        fontSize: 12, fontWeight: 700, color: 'var(--red)', textDecoration: 'none',
      }}
    >
      <Download size={14} strokeWidth={2.5} />
      <span>{label}</span>
    </a>
  )
}

function ReportCover({ report, lang }: { report: FactoryReport; lang: 'fa' | 'en' }) {
  return (
    <div
      style={{
        width: '100%', minHeight: 160, background: report.imgBg,
        borderBottom: `2px solid ${report.accentColor}33`,
        display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
        padding: '16px 20px', position: 'relative', overflow: 'hidden',
      }}
    >
      <div style={{
        position: 'absolute', top: '50%', left: '50%',
        transform: 'translate(-50%, -50%)',
        fontSize: 52, fontWeight: 900, letterSpacing: '-3px',
        color: report.accentColor, opacity: 0.07, whiteSpace: 'nowrap',
        userSelect: 'none', direction: 'ltr',
      }}>
        {report.publisherEn.toUpperCase()}
      </div>
      <div style={{
        display: 'inline-flex', alignSelf: 'flex-start',
        background: report.accentColor, color: '#fff',
        fontSize: 9, fontWeight: 700, letterSpacing: '1.5px',
        padding: '4px 10px', textTransform: 'uppercase',
      }}>
        {lang === 'fa' ? report.publisher : report.publisherEn}
      </div>
    </div>
  )
}

export default function FactoryBentoSection() {
  const { lang } = useLang()
  const t = T[lang]

  return (
    <section dir={lang === 'fa' ? 'rtl' : 'ltr'} style={{ background: 'var(--paper-2)' }}>
      <div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 64 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 28, flexWrap: 'wrap', gap: 12 }}>
          <div>
            <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: 'var(--ink-4)', marginBottom: 6 }}>{t.overline}</div>
            <h2 style={{ fontSize: 'clamp(22px,2.5vw,32px)', fontWeight: 900, color: 'var(--ink)', letterSpacing: '-0.5px' }}>{t.heading}</h2>
          </div>
          <a href={MSC_URL} target="_blank" rel="noopener noreferrer" style={{ fontSize: 12, fontWeight: 700, color: 'var(--red)', textDecoration: 'none' }}>{t.all}</a>
        </div>

        <BentoGrid>
          {REPORTS.map((report, i) => (
            <BentoGridItem
              key={i}
              header={<ReportCover report={report} lang={lang} />}
              tag={`${lang === 'fa' ? report.date : report.dateEn} · ${lang === 'fa' ? 'ماهنامه تحلیلی کارخانه' : 'Monthly Factory Analysis'}`}
              tagColor={report.accentColor}
              title={lang === 'fa' ? report.title : report.titleEn}
              description={lang === 'fa' ? report.description : report.descriptionEn}
              footer={<DownloadCTA label={t.download} />}
              accentLine
              className={i === 3 || i === 6 ? 'md:col-span-2' : ''}
            />
          ))}
        </BentoGrid>
      </div>
    </section>
  )
}