import { useLang } from '@/context/LangContext'

const REPORTS = {
  fa: [
    {
      title: 'تحلیل عملکرد تولید و صادرات — بهمن ۱۴۰۳',
      desc: 'بررسی آمار تولید ماهانه، مقایسه با بودجه سالانه و تحلیل روند صادرات فولاد تخت در بازارهای منطقه‌ای',
      date: 'بهمن ۱۴۰۳',
      img: '/news/photo-1504307651254-35680f356dfd.jpg',
    },
    {
      title: 'وضعیت بازار و قیمت‌گذاری — دی ۱۴۰۳',
      desc: 'تحلیل نوسانات قیمت فولاد تخت در بازار داخلی، بررسی اثر نرخ ارز و چشم‌انداز بازار در فصل زمستان',
      date: 'دی ۱۴۰۳',
      img: '/news/photo-1587293852726-70cdb56c2866.jpg',
    },
    {
      title: 'گزارش پایداری و محیط زیست — آذر ۱۴۰۳',
      desc: 'شاخص‌های زیست‌محیطی ماهانه؛ مصرف انرژی، کاهش انتشار کربن و عملکرد سیستم بازیافت پساب صنعتی',
      date: 'آذر ۱۴۰۳',
      img: '/news/photo-1473341304170-971dccb5ac1e.jpg',
    },
    {
      title: 'تحلیل نیروی انسانی و بهره‌وری — آبان ۱۴۰۳',
      desc: 'بررسی شاخص‌های بهره‌وری نیروی کار، آموزش‌های ماهانه و آمار ایمنی شغلی',
      date: 'آبان ۱۴۰۳',
      img: '/news/photo-1581092160607-ee22731c9b4e.jpg',
    },
  ],
  en: [
    {
      title: 'Production & Export Performance — Feb 2025',
      desc: 'Monthly production figures, annual budget comparison, and flat steel export trend analysis across regional markets.',
      date: 'Feb 2025',
      img: '/news/photo-1504307651254-35680f356dfd.jpg',
    },
    {
      title: 'Market Conditions & Pricing — Jan 2025',
      desc: 'Flat steel price fluctuations in the domestic market, exchange rate impact analysis, and winter market outlook.',
      date: 'Jan 2025',
      img: '/news/photo-1587293852726-70cdb56c2866.jpg',
    },
    {
      title: 'Sustainability & Environment Report — Dec 2024',
      desc: 'Monthly environmental KPIs: energy consumption, carbon emission reductions, and industrial wastewater recycling performance.',
      date: 'Dec 2024',
      img: '/news/photo-1473341304170-971dccb5ac1e.jpg',
    },
    {
      title: 'Workforce & Productivity Analysis — Nov 2024',
      desc: 'Workforce productivity indicators, monthly training hours, and occupational safety statistics.',
      date: 'Nov 2024',
      img: '/news/photo-1581092160607-ee22731c9b4e.jpg',
    },
  ],
}

const ISSUES = {
  fa: [
    { num: '۱۲', title: 'فولاد و تحریم‌های جدید: راهکارهای صادراتی ۱۴۰۴', date: 'بهمن ۱۴۰۳' },
    { num: '۱۱', title: 'قیمت‌گذاری فولاد در بازار داخلی: چالش‌ها و فرصت‌ها', date: 'دی ۱۴۰۳' },
    { num: '۱۰', title: 'آمار تولید فولاد ایران در ۹ ماهه ۱۴۰۳', date: 'آذر ۱۴۰۳' },
    { num: '۰۹', title: 'فولاد سبز؛ چشم‌انداز ایران در برابر رقبای منطقه‌ای', date: 'آبان ۱۴۰۳' },
    { num: '۰۸', title: 'تحلیل بازار عراق: فرصت‌ها و تهدیدها برای صادرکنندگان ایرانی', date: 'مهر ۱۴۰۳' },
    { num: '۰۷', title: 'هوش مصنوعی در کنترل کیفیت فولاد: کاربردها و چالش‌ها', date: 'شهریور ۱۴۰۳' },
  ],
  en: [
    { num: '12', title: 'Steel & New Sanctions: Export Strategies for 1404', date: 'Feb 2025' },
    { num: '11', title: 'Steel Pricing in the Domestic Market: Challenges & Opportunities', date: 'Jan 2025' },
    { num: '10', title: 'Iran Steel Production Stats — First 9 Months of 1403', date: 'Dec 2024' },
    { num: '09', title: "Green Steel: Iran's Outlook vs Regional Competitors", date: 'Nov 2024' },
    { num: '08', title: 'Iraq Market Analysis: Opportunities & Threats for Iranian Exporters', date: 'Oct 2024' },
    { num: '07', title: 'AI in Steel Quality Control: Applications & Challenges', date: 'Sep 2024' },
  ],
}

const T = {
  fa: {
    factoryOverline: 'MOBARAKEH STEEL', factoryHeading: 'ماهنامه تحلیلی کارخانه', factoryAll: 'مشاهده همه ←',
    readMore: 'دریافت گزارش ←',
    nlOverline: 'STEEL NEWSLETTER', nlHeading: 'خبرنامه فولاد', nlArchive: 'آرشیو کامل ←',
    placeholder: 'ایمیل خود را وارد کنید...', subscribe: 'عضویت', done: '✓ ثبت شد',
    nlDesc: 'هر ماه تحلیل‌های تخصصی بازار فولاد، اخبار صنعت و گزارش‌های اختصاصی را در ایمیل خود دریافت کنید.',
  },
  en: {
    factoryOverline: 'MOBARAKEH STEEL', factoryHeading: 'Monthly Factory Analysis', factoryAll: 'View All →',
    readMore: 'Get Report →',
    nlOverline: 'STEEL NEWSLETTER', nlHeading: 'Steel Newsletter', nlArchive: 'Full Archive →',
    placeholder: 'Enter your email...', subscribe: 'Subscribe', done: '✓ Done',
    nlDesc: 'Receive expert steel market analysis, industry news, and exclusive reports in your inbox every month.',
  },
}

export default function FactoryNewsletterLayout() {
  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: 56, paddingBottom: 64 }}>
        <div className="grid grid-cols-[60%_1fr] max-md:grid-cols-1 gap-10">

          {/* ══ LEFT · ماهنامه ══ */}
          <div>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 28, flexWrap: 'wrap', gap: 10 }}>
              <div>
                <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: 'var(--ink-4)', marginBottom: 6 }}>{t.factoryOverline}</div>
                <h2 style={{ fontSize: 'clamp(20px,2vw,28px)', fontWeight: 900, color: 'var(--ink)', letterSpacing: '-0.5px' }}>{t.factoryHeading}</h2>
              </div>
              <a href="#" style={{ fontSize: 12, fontWeight: 700, color: 'var(--red)', textDecoration: 'none', whiteSpace: 'nowrap' }}>{t.factoryAll}</a>
            </div>

            <div className="grid grid-cols-2 max-md:grid-cols-1 gap-3">
              {REPORTS[lang].map((r, i) => (
                <div
                  key={i}
                  style={{
                    background: '#fff', overflow: 'hidden',
                    boxShadow: '0 2px 10px rgba(7,29,73,0.08)',
                    display: 'flex', flexDirection: 'column',
                    transition: 'transform 0.2s, box-shadow 0.2s', cursor: 'pointer',
                  }}
                  onMouseEnter={e => { const d = e.currentTarget as HTMLDivElement; d.style.transform = 'translateY(-3px)'; d.style.boxShadow = '0 8px 24px rgba(7,29,73,0.15)' }}
                  onMouseLeave={e => { const d = e.currentTarget as HTMLDivElement; d.style.transform = 'translateY(0)'; d.style.boxShadow = '0 2px 10px rgba(7,29,73,0.08)' }}
                >
                  <div style={{ position: 'relative', height: 110, overflow: 'hidden' }}>
                    <img src={r.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform 0.4s' }}
                      onMouseEnter={e => (e.currentTarget.style.transform = 'scale(1.07)')}
                      onMouseLeave={e => (e.currentTarget.style.transform = 'scale(1)')}
                    />
                    <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(7,29,73,0.88) 0%, rgba(7,29,73,0.15) 100%)' }} />
                    <div style={{
                      position: 'absolute', top: 8,
                      right: lang === 'fa' ? 8 : 'auto', left: lang === 'en' ? 8 : 'auto',
                      background: 'var(--color-navy)', color: '#fff',
                      fontSize: 8, fontWeight: 700, padding: '2px 7px', letterSpacing: '1.5px', textTransform: 'uppercase',
                    }}>
                      {lang === 'fa' ? 'فولاد مبارکه' : 'Mobarakeh Steel'}
                    </div>
                    <div style={{
                      position: 'absolute', bottom: 8,
                      right: lang === 'fa' ? 8 : 'auto', left: lang === 'en' ? 8 : 'auto',
                      background: 'var(--color-blue)', color: '#fff',
                      fontSize: 9, fontWeight: 700, padding: '2px 8px',
                    }}>
                      {r.date}
                    </div>
                  </div>
                  <div style={{ padding: '14px', flex: 1, display: 'flex', flexDirection: 'column', gap: 6, borderTop: '3px solid var(--color-navy)' }}>
                    <h3 style={{ fontSize: 12, fontWeight: 800, color: 'var(--ink)', lineHeight: 1.5, flex: 1 }}>{r.title}</h3>
                    <p style={{ fontSize: 11, color: 'var(--ink-4)', lineHeight: 1.65 }}>{r.desc}</p>
                    <a href="#" style={{ fontSize: 10, fontWeight: 700, color: 'var(--color-blue)', textDecoration: 'none', marginTop: 4 }}>{t.readMore}</a>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* ══ RIGHT · خبرنامه ══ */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div>
              <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: 'var(--ink-4)', marginBottom: 6 }}>{t.nlOverline}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8 }}>
                <h2 style={{ fontSize: 'clamp(20px,2vw,28px)', fontWeight: 900, color: 'var(--ink)', letterSpacing: '-0.5px' }}>{t.nlHeading}</h2>
                <a href="#" style={{ fontSize: 12, fontWeight: 700, color: 'var(--red)', textDecoration: 'none', whiteSpace: 'nowrap', flexShrink: 0 }}>{t.nlArchive}</a>
              </div>
            </div>

            {/* Recent issues — navy number badges */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 1, background: 'var(--rule-thin)' }}>
              {ISSUES[lang].map((issue, i) => (
                <div
                  key={i}
                  style={{ background: '#fff', padding: '14px 16px', display: 'flex', gap: 12, alignItems: 'center', cursor: 'pointer', transition: 'background 0.15s' }}
                  onMouseEnter={e => ((e.currentTarget as HTMLDivElement).style.background = 'var(--paper-2)')}
                  onMouseLeave={e => ((e.currentTarget as HTMLDivElement).style.background = '#fff')}
                >
                  <div style={{
                    background: 'var(--color-navy)', color: '#fff',
                    fontSize: 12, fontWeight: 900, width: 34, height: 34,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0, direction: 'ltr',
                  }}>{issue.num}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink)', lineHeight: 1.4, marginBottom: 2 }}>{issue.title}</div>
                    <div style={{ fontSize: 10, color: 'var(--ink-5)' }}>{issue.date}</div>
                  </div>
                  <div style={{ color: 'var(--color-blue)', fontSize: 14, flexShrink: 0 }}>←</div>
                </div>
              ))}
            </div>
          </div>

        </div>
      </div>
    </section>
  )
}
