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

const ISSUES = {
  fa: [
    { 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' },
  ],
}


const T = {
  fa: {
    overline: 'STEEL NEWSLETTER', heading: 'خبرنامه فولاد', archive: 'آرشیو کامل ←',
    issueLabel: 'خبرنامه ماهانه', placeholder: 'ایمیل خود را وارد کنید...',
    subscribe: 'عضویت در خبرنامه', done: '✓ ثبت شد',
    overlinePlants: 'MAJOR PLANTS', headingPlants: 'کارخانه‌های بزرگ فولاد ایران',
    allPlants: 'مشاهده همه ←', capacity: 'ظرفیت سالانه',
  },
  en: {
    overline: 'STEEL NEWSLETTER', heading: 'Steel Newsletter', archive: 'Full Archive →',
    issueLabel: 'Monthly Issue', placeholder: 'Enter your email...',
    subscribe: 'Subscribe', done: '✓ Subscribed',
    overlinePlants: 'MAJOR PLANTS', headingPlants: "Iran's Major Steel Plants",
    allPlants: 'View All →', capacity: 'Annual capacity',
  },
}

export default function SteelNewsletterSection() {
  const { lang } = useLang()
  const t = T[lang]
  const [email, setEmail] = useState('')
  const [done,  setDone]  = useState(false)

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

        {/* Newsletter issues */}
        <div style={{ marginBottom: 64 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 24, 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(20px,2.5vw,28px)', 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.archive}</a>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px,1fr))', gap: 1, background: 'var(--rule-thin)', marginBottom: 24 }}>
            {ISSUES[lang].map((issue, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 10 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.35, delay: i * 0.07 }}
                style={{ background: 'var(--paper)', padding: '22px 20px', cursor: 'pointer', display: 'flex', gap: 16, alignItems: 'flex-start' }}
              >
                <div style={{ fontSize: 36, fontWeight: 900, color: 'var(--red)', letterSpacing: '-2px', lineHeight: 1, flexShrink: 0, direction: 'ltr', fontVariantNumeric: 'tabular-nums' }}>
                  {issue.num}
                </div>
                <div>
                  <div style={{ fontSize: 9, fontWeight: 700, color: 'var(--ink-4)', letterSpacing: '1.5px', marginBottom: 6, textTransform: 'uppercase' }}>{t.issueLabel}</div>
                  <h3 style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink)', lineHeight: 1.5, marginBottom: 8 }}>{issue.title}</h3>
                  <div style={{ fontSize: 10, color: 'var(--ink-5)' }}>{issue.date}</div>
                </div>
              </motion.div>
            ))}
          </div>

          {/* Subscribe bar */}
          <div style={{ display: 'flex', maxWidth: 480, border: '1px solid var(--ink)' }}>
            <input
              type="email"
              value={email}
              onChange={e => setEmail(e.target.value)}
              placeholder={t.placeholder}
              disabled={done}
              style={{ flex: 1, border: 'none', padding: '11px 14px', fontSize: 13, fontFamily: 'Vazir, sans-serif', background: 'var(--paper)', color: 'var(--ink)', outline: 'none', direction: lang === 'fa' ? 'rtl' : 'ltr' }}
            />
            <button
              onClick={() => { if (email) setDone(true) }}
              disabled={done}
              style={{ background: done ? 'var(--ink)' : 'var(--red)', color: 'var(--paper)', border: 'none', padding: '11px 20px', fontSize: 12, fontWeight: 700, fontFamily: 'Vazir, sans-serif', cursor: done ? 'default' : 'pointer', whiteSpace: 'nowrap', flexShrink: 0 }}
            >
              {done ? t.done : t.subscribe}
            </button>
          </div>
        </div>

      </div>
    </section>
  )
}
