import { motion } from 'framer-motion'
import { useLang } from '@/context/LangContext'

const TECHS = {
  fa: [
    { num: '۰۱', title: 'فولاد هیدروژنی (DRI-H₂)',        tag: 'انرژی پاک',   summary: 'جایگزینی کک با هیدروژن سبز در کوره‌های احیای مستقیم — مسیر صنعت فولاد به سمت خنثی‌سازی کربن' },
    { num: '۰۲', title: 'دیجیتال‌سازی و AI در تولید',      tag: 'هوش مصنوعی', summary: 'کاربرد یادگیری ماشین در بهینه‌سازی فرآیند ذوب، پیش‌بینی نقص کیفی و کاهش ضایعات' },
    { num: '۰۳', title: 'الکترولیز فولاد (MOE)',            tag: 'فناوری نوین', summary: 'تولید فولاد از طریق الکترولیز اکسید آهن با برق تجدیدپذیر — فناوری نسل بعدی' },
    { num: '۰۴', title: 'بازیافت و اقتصاد چرخشی',         tag: 'پایداری',     summary: 'افزایش نرخ بازیافت ضایعات فولادی و کاهش وابستگی به سنگ‌آهن خام' },
    { num: '۰۵', title: 'کوره قوس الکتریکی نسل جدید EAF', tag: 'تجهیزات',     summary: 'EAF با راندمان انرژی ۴۰٪ بالاتر از نسل فعلی — مناسب برای شبکه‌های ناپایدار' },
    { num: '۰۶', title: 'توأم‌سازی CCS با تولید فولاد',   tag: 'محیط زیست',  summary: 'ترکیب کربن‌گیری با فرآیندهای موجود — راه‌حل میان‌مدت برای کاهش انتشار' },
  ],
  en: [
    { num: '01', title: 'Hydrogen Steel (DRI-H₂)',              tag: 'Clean Energy', summary: 'Replacing coke with green hydrogen in direct reduction furnaces — the steel industry\'s path to carbon neutrality' },
    { num: '02', title: 'Digitalization & AI in Production',    tag: 'Artificial Intelligence', summary: 'Machine learning applied to smelting optimization, quality defect prediction, and waste reduction' },
    { num: '03', title: 'Molten Oxide Electrolysis (MOE)',      tag: 'Emerging Tech', summary: 'Producing steel via electrolysis of iron oxide using renewable electricity — next-generation technology' },
    { num: '04', title: 'Recycling & Circular Economy',         tag: 'Sustainability', summary: 'Increasing steel scrap recycling rates and reducing dependence on raw iron ore' },
    { num: '05', title: 'New-Generation Electric Arc Furnace',  tag: 'Equipment', summary: 'EAF with 40% higher energy efficiency than current generation — optimized for unstable power grids' },
    { num: '06', title: 'CCS Integration with Steel Production',tag: 'Environment', summary: 'Combining carbon capture with existing processes — a medium-term solution for emission reduction' },
  ],
}

const T = {
  fa: { overline: 'TECH FRONTIER', heading: 'مرز فناوری', sub: 'فناوری‌های نوظهور در صنعت فولاد جهان و افق کاربرد آن‌ها در ایران' },
  en: { overline: 'TECH FRONTIER', heading: 'Tech Frontier', sub: 'Emerging technologies in the global steel industry and their application horizon in Iran' },
}

export default function Technology() {
  const { lang } = useLang()
  const t = T[lang]
  const techs = TECHS[lang]

  return (
    <div dir={lang === 'fa' ? 'rtl' : 'ltr'} style={{ background: 'var(--paper)', minHeight: '80vh' }}>
      <div style={{ borderBottom: '3px solid var(--ink)' }}>
        <div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 40 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
            <div style={{ width: 36, height: 2, background: 'var(--red)' }} />
            <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: 'var(--ink-4)' }}>{t.overline}</span>
          </div>
          <h1 style={{ fontSize: 'clamp(28px,4vw,52px)', fontWeight: 900, letterSpacing: '-1.5px', color: 'var(--ink)', marginBottom: 12 }}>{t.heading}</h1>
          <p style={{ fontSize: 15, color: 'var(--ink-3)', lineHeight: 1.7, maxWidth: 560 }}>{t.sub}</p>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 64 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 1, background: 'var(--rule-thin)' }}>
          {techs.map((tech, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 12 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.4, delay: i * 0.06 }}
              style={{ background: 'var(--paper)', padding: '28px 24px', position: 'relative' }}
            >
              <div style={{ position: 'absolute', top: 0, right: 0, left: 0, height: 3, background: 'var(--ink)' }} />
              <div style={{ fontSize: 48, fontWeight: 900, letterSpacing: '-3px', color: 'rgba(26,23,18,0.06)', lineHeight: 1, marginBottom: 10, direction: 'ltr' }}>{tech.num}</div>
              <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '1.5px', color: 'var(--red)', marginBottom: 10, textTransform: 'uppercase' }}>{tech.tag}</div>
              <h3 style={{ fontSize: 15, fontWeight: 800, color: 'var(--ink)', lineHeight: 1.45, marginBottom: 12 }}>{tech.title}</h3>
              <p style={{ fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.7 }}>{tech.summary}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  )
}
