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

type NewsItem = {
  tag: string; tagEn: string
  title: string; titleEn: string
  desc?: string; descEn?: string
  source: string
  accent: string
  img: string
  date: string; dateEn: string
  featured?: boolean
}

const NEWS: NewsItem[] = [
  {
    tag: 'سرمایه‌گذاری', tagEn: 'Investment',
    title: 'فولاد مبارکه به پیشران نوآوری پایدار در صنعت فولاد کشور و منطقه تبدیل می‌شود',
    titleEn: 'Mobarakeh Steel to Become the Driver of Sustainable Innovation in the Steel Industry',
    desc: 'مدیرعامل صندوق سرمایه‌گذاری خطرپذیر فولاد مبارکه: این گروه باید به پیشران نوآوری پایدار در صنعت فولاد کشور و منطقه تبدیل شود.',
    descEn: 'The CEO of Mobarakeh Steel Venture Fund: this group must become the driver of sustainable innovation in the country and region\'s steel industry.',
    source: 'MSTID', accent: '#c0392b',
    img: '/news/photo-1504307651254-35680f356dfd.jpg',
    date: '۱۴ اردیبهشت ۱۴۰۴', dateEn: 'May 4, 2025',
    featured: true,
  },
  {
    tag: 'نوآوری', tagEn: 'Innovation',
    title: 'از بومی‌سازی تا نوآفرینی',
    titleEn: 'From Localization to Innovation',
    desc: 'گزارشی از مسیر پنج‌ساله بومی‌سازی قطعات حیاتی در فولاد مبارکه.',
    descEn: 'A report on the five-year path of localizing critical components at Mobarakeh Steel.',
    source: 'MSTID', accent: '#2471a3',
    img: '/news/photo-1581092160607-ee22731c9b4e.jpg',
    date: '۱۰ اردیبهشت ۱۴۰۴', dateEn: 'Apr 30, 2025',
  },
  {
    tag: 'فناوری', tagEn: 'Technology',
    title: 'حمایت معاون علمی رئیس‌جمهور از تکمیل «پارک تخصصی فناوری و نوآوری فولاد»',
    titleEn: 'Presidential Science Advisor Backs Completion of Steel Technology & Innovation Park',
    source: 'MSTID', accent: '#1e8449',
    img: '/news/photo-1518770660439-4636190af475.jpg',
    date: '۸ اردیبهشت ۱۴۰۴', dateEn: 'Apr 28, 2025',
  },
  {
    tag: 'رویداد', tagEn: 'Event',
    title: 'بیست و ششمین رویداد «پورتفوکنوتور» برگزار شد',
    titleEn: '26th PortfoConnotor Event Held',
    desc: 'اتحاد MSTID و شرکت صناپ فولاد برای انرژی پاک.',
    descEn: 'MSTID and Sanap Foolad alliance for clean energy.',
    source: 'MSTID', accent: '#b7770d',
    img: '/news/photo-1540575467063-178a50c2df87.jpg',
    date: '۵ اردیبهشت ۱۴۰۴', dateEn: 'Apr 25, 2025',
  },
]

const T = {
  fa: { overline: 'اخبار داخلی', heading: 'تازه‌ترین اخبار صنعت', all: 'همه اخبار ←' },
  en: { overline: 'INTERNAL NEWS', heading: 'Latest Industry News', all: 'All News →' },
}

function Tag({ label, accent }: { label: string; accent: string }) {
  return (
    <span style={{
      display: 'inline-block',
      background: accent, color: '#fff',
      fontSize: 10, fontWeight: 700, letterSpacing: '1px',
      padding: '3px 10px', textTransform: 'uppercase',
    }}>{label}</span>
  )
}

export default function InternalNewsSection() {
  const { lang } = useLang()
  const t = T[lang]
  const [featured, ...rest] = NEWS

  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 }}>

        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 32, 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="#" style={{ fontSize: 12, fontWeight: 700, color: 'var(--red)', textDecoration: 'none' }}>{t.all}</a>
        </div>

        {/* Featured card — horizontal */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr',
          background: '#fff', overflow: 'hidden',
          boxShadow: '0 2px 16px rgba(0,0,0,0.07)',
          marginBottom: 20,
        }} className="max-md:grid-cols-1">
          <div style={{ position: 'relative', minHeight: 280, overflow: 'hidden' }}>
            <img
              src={featured.img}
              alt=""
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform 0.4s ease' }}
              onMouseEnter={e => (e.currentTarget.style.transform = 'scale(1.04)')}
              onMouseLeave={e => (e.currentTarget.style.transform = 'scale(1)')}
            />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,0.35) 0%, transparent 50%)' }} />
            <div style={{ position: 'absolute', top: 16, right: lang === 'fa' ? 16 : 'auto', left: lang === 'en' ? 16 : 'auto' }}>
              <Tag label={lang === 'fa' ? featured.tag : featured.tagEn} accent={featured.accent} />
            </div>
          </div>
          <div style={{ padding: '36px 32px', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 14 }}>
            <div style={{ fontSize: 10, color: 'var(--ink-5)', fontWeight: 600, letterSpacing: '1px' }}>{featured.source} · {lang === 'fa' ? featured.date : featured.dateEn}</div>
            <h3 style={{ fontSize: 'clamp(16px,1.8vw,22px)', fontWeight: 900, color: 'var(--ink)', lineHeight: 1.45, letterSpacing: '-0.3px' }}>
              {lang === 'fa' ? featured.title : featured.titleEn}
            </h3>
            <p style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.8 }}>
              {lang === 'fa' ? featured.desc : featured.descEn}
            </p>
            <a href="#" style={{ fontSize: 12, fontWeight: 700, color: featured.accent, textDecoration: 'none', marginTop: 4 }}>
              {lang === 'fa' ? 'ادامه مطلب ←' : 'Read more →'}
            </a>
          </div>
        </div>

        {/* Regular cards grid */}
        <div className="grid grid-cols-3 max-md:grid-cols-1" style={{ gap: 16 }}>
          {rest.map((item, i) => (
            <div
              key={i}
              style={{
                background: '#fff',
                overflow: 'hidden',
                boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
                display: 'flex', flexDirection: 'column',
                cursor: 'pointer',
                transition: 'box-shadow 0.2s ease, transform 0.2s ease',
              }}
              onMouseEnter={e => { (e.currentTarget as HTMLDivElement).style.boxShadow = '0 8px 28px rgba(0,0,0,0.12)'; (e.currentTarget as HTMLDivElement).style.transform = 'translateY(-3px)' }}
              onMouseLeave={e => { (e.currentTarget as HTMLDivElement).style.boxShadow = '0 2px 12px rgba(0,0,0,0.06)'; (e.currentTarget as HTMLDivElement).style.transform = 'translateY(0)' }}
            >
              {/* Image */}
              <div style={{ position: 'relative', height: 180, overflow: 'hidden' }}>
                <img
                  src={item.img}
                  alt=""
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform 0.4s ease' }}
                  onMouseEnter={e => (e.currentTarget.style.transform = 'scale(1.06)')}
                  onMouseLeave={e => (e.currentTarget.style.transform = 'scale(1)')}
                />
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 60%)' }} />
                <div style={{ position: 'absolute', bottom: 12, right: lang === 'fa' ? 12 : 'auto', left: lang === 'en' ? 12 : 'auto' }}>
                  <Tag label={lang === 'fa' ? item.tag : item.tagEn} accent={item.accent} />
                </div>
              </div>

              {/* Content */}
              <div style={{ padding: '20px', flex: 1, display: 'flex', flexDirection: 'column', gap: 10 }}>
                <div style={{ fontSize: 10, color: 'var(--ink-5)', fontWeight: 600 }}>{item.source} · {lang === 'fa' ? item.date : item.dateEn}</div>
                <h3 style={{ fontSize: 14, fontWeight: 800, color: 'var(--ink)', lineHeight: 1.5, flex: 1 }}>
                  {lang === 'fa' ? item.title : item.titleEn}
                </h3>
                {(lang === 'fa' ? item.desc : item.descEn) && (
                  <p style={{ fontSize: 12, color: 'var(--ink-4)', lineHeight: 1.7 }}>
                    {lang === 'fa' ? item.desc : item.descEn}
                  </p>
                )}
                <a href="#" style={{ fontSize: 11, fontWeight: 700, color: item.accent, textDecoration: 'none', marginTop: 'auto' }}>
                  {lang === 'fa' ? 'ادامه مطلب ←' : 'Read more →'}
                </a>
              </div>
            </div>
          ))}
        </div>

      </div>
    </section>
  )
}
