import { useState } from 'react'
import { Link } from 'react-router-dom'
import { AnimatePresence, motion } from 'framer-motion'
import { useLang } from '@/context/LangContext'

const NAVY = '#032340'
const GOLD = '#CD9E53'

type Glance = {
  source: string
  date: string; dateEn: string
  title: string; titleEn: string
  desc: string; descEn: string
  img: string
}

const ITEMS: Glance[] = [
  {
    source: 'Financial Times',
    date: '۱۴ اردیبهشت ۱۴۰۵', dateEn: 'May 4, 2026',
    title: 'شوک هیدروژنی به بازار جهانی؛ آغاز رسمی عصر فولادسازی بدون کربن',
    titleEn: 'Hydrogen Shock to Global Markets; the Carbon-Free Steel Era Begins',
    desc: 'پروژه عظیم «فولاد سبز H2» در سوئد با جذب بی‌سابقه ۶.۵ میلیارد یورو سرمایه، رسماً وارد فاز اجرایی شد تا نخستین کارخانه فولادسازی در مقیاس تجاری بر پایه هیدروژن سبز (بدون نیاز به زغال‌سنگ) در جهان متولد شود. این تأسیسات با هدف کاهش ۹۵ درصدی انتشار CO₂، قواعد رقابت در زنجیره ارزش اروپا را برای همیشه بازتعریف می‌کند.',
    descEn: 'Sweden\'s massive "Green Steel H2" project, having raised an unprecedented €6.5bn, has officially entered its execution phase to birth the world\'s first commercial-scale steel plant powered by green hydrogen — redefining Europe\'s value-chain competition for good.',
    img: '/news/photo-1504307651254-35680f356dfd.jpg',
  },
  {
    source: 'Reuters',
    date: '۱۲ اردیبهشت ۱۴۰۵', dateEn: 'May 2, 2026',
    title: 'مکانیسم تنظیم مرزهای کربنی اروپا وارد فاز اجرای کامل شد',
    titleEn: 'EU Carbon Border Mechanism Enters Full Enforcement',
    desc: 'با اجرای کامل CBAM، صادرکنندگان فولاد به اتحادیه اروپا اکنون موظف‌اند هزینه کامل کربن نهفته در محصولات خود را بپردازند. این تحول، فشار بی‌سابقه‌ای بر تولیدکنندگان مبتنی بر کوره بلند وارد کرده و مزیت رقابتی را به سمت فولاد کم‌کربن سوق می‌دهد.',
    descEn: 'With CBAM now fully enforced, steel exporters to the EU must pay the full cost of embedded carbon — placing unprecedented pressure on blast-furnace producers and shifting the competitive edge toward low-carbon steel.',
    img: '/news/photo-1581092160607-ee22731c9b4e.jpg',
  },
  {
    source: 'Bloomberg',
    date: '۳۰ فروردین ۱۴۰۵', dateEn: 'Apr 19, 2026',
    title: 'هوش مصنوعی، تقاضای جهانی فولاد مراکز داده را بازتعریف می‌کند',
    titleEn: 'AI Is Rewriting Global Steel Demand for Data Centers',
    desc: 'موج ساخت مراکز داده هوش مصنوعی، تقاضای جدیدی برای مقاطع ساختمانی و فولاد ویژه ایجاد کرده است. تحلیلگران پیش‌بینی می‌کنند این روند تا پایان دهه، یکی از پیشران‌های اصلی رشد مصرف فولاد در اقتصادهای پیشرفته باشد.',
    descEn: 'The AI data-center construction wave is creating fresh demand for structural sections and specialty steel — projected to be a leading driver of steel consumption growth in advanced economies through the decade.',
    img: '/news/photo-1518770660439-4636190af475.jpg',
  },
]

export default function AtAGlanceSection({ embedded = false }: { embedded?: boolean }) {
  const { lang } = useLang()
  const isFa = lang === 'fa'
  const [i, setI] = useState(0)
  const [dir, setDir] = useState<1 | -1>(1)
  const it = ITEMS[i]

  const go = (d: 1 | -1) => {
    setDir(d)
    setI((prev) => (prev + d + ITEMS.length) % ITEMS.length)
  }

  const T = {
    heading: isFa ? 'در یک نگاه' : 'At a Glance',
  }

  return (
    <section id="at-a-glance" style={{ background: '#faf7f4', padding: '52px 0', overflow: 'hidden', scrollMarginTop: '90px' }} dir={isFa ? 'rtl' : 'ltr'}>
      <div className="max-w-7xl mx-auto px-12 max-md:px-5">

        {!embedded && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, justifyContent: 'space-between', marginBottom: 24 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 4, height: 28, background: GOLD, borderRadius: 2 }} />
              <h2 style={{ fontSize: 'clamp(22px, 2.2vw, 30px)', fontWeight: 900, color: NAVY, letterSpacing: '-0.5px', margin: 0 }}>
                {T.heading}
              </h2>
            </div>
            <Link
              to="/at-a-glance"
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                fontSize: 14, fontWeight: 700, color: GOLD, textDecoration: 'none',
                padding: '8px 16px', border: `1.5px solid ${GOLD}`, borderRadius: 8,
                transition: 'background 160ms, color 160ms', whiteSpace: 'nowrap',
              }}
              onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = GOLD; (e.currentTarget as HTMLElement).style.color = '#fff' }}
              onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = 'transparent'; (e.currentTarget as HTMLElement).style.color = GOLD }}
            >
              {isFa ? 'مشاهده بیشتر' : 'See more'}
              <span>{isFa ? '←' : '→'}</span>
            </Link>
          </div>
        )}

        <div
          style={{ display: 'flex', flexDirection: isFa ? 'row' : 'row-reverse', alignItems: 'center', gap: 0, minHeight: 380, direction: 'ltr' }}
          className="max-lg:!flex-col max-lg:!gap-8"
        >
          {/* ── IMAGE side ── */}
          <div style={{ width: '35%', position: 'relative', flexShrink: 0 }} className="max-lg:!w-full max-lg:!max-w-[400px]">
            <div style={{
              position: 'absolute', inset: 0,
              transform: 'translate(-28px, -22px)',
              background: '#ece7e1', borderRadius: 18,
              boxShadow: '0 30px 70px -30px rgba(7,29,73,0.25)',
            }} />
            <div
              style={{ position: 'relative', borderRadius: 18, overflow: 'hidden', boxShadow: '0 40px 90px -30px rgba(7,29,73,0.45)' }}
              className="aspect-[3/3.2] max-lg:!aspect-[16/10]"
            >
              <AnimatePresence mode="wait" custom={dir}>
                <motion.img
                  key={i}
                  src={it.img}
                  alt=""
                  initial={{ opacity: 0, scale: 1.06 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 1.02 }}
                  transition={{ duration: 0.55, ease: [0.22, 1, 0.36, 1] }}
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
              </AnimatePresence>
            </div>
          </div>

          {/* ── TEXT card side ── */}
          <div style={{ flex: 1, position: 'relative', zIndex: 2 }} className="max-lg:!w-full">
            <div style={{
              background: '#fff', borderRadius: 6,
              boxShadow: '0 30px 80px -40px rgba(7,29,73,0.30)',
              padding: '40px 44px 32px',
              marginLeft: isFa ? '-8%' : 0,
              marginRight: isFa ? 0 : '-8%',
              direction: isFa ? 'rtl' : 'ltr',
            }} className="max-lg:!ms-0 max-lg:!me-0 max-md:!p-6">

              <AnimatePresence mode="wait">
                <motion.div
                  key={i}
                  initial={{ opacity: 0, x: dir * 24 }}
                  animate={{ opacity: 1, x: 0 }}
                  exit={{ opacity: 0, x: dir * -16 }}
                  transition={{ duration: 0.45, ease: [0.22, 1, 0.36, 1] }}
                >
                  <h3 style={{ fontSize: 'clamp(20px, 1.9vw, 27px)', fontWeight: 900, color: NAVY, lineHeight: 1.4, letterSpacing: '-0.3px', margin: '0 0 18px' }}>
                    {isFa ? it.title : it.titleEn}
                  </h3>

                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20, flexWrap: 'wrap', gap: 8 }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 13, color: 'rgba(7,29,73,0.55)' }}>
                      <CalendarIcon />
                      {isFa ? it.date : it.dateEn}
                    </span>
                    <span style={{ fontSize: 14, fontWeight: 700, color: GOLD, letterSpacing: '0.3px' }}>{it.source}</span>
                  </div>

                  <p style={{ fontSize: 'clamp(13px, 1.05vw, 15px)', lineHeight: 2.1, color: 'rgba(7,29,73,0.72)', margin: 0, textAlign: 'justify' }}>
                    {isFa ? it.desc : it.descEn}
                  </p>
                </motion.div>
              </AnimatePresence>

              <div style={{ display: 'flex', gap: 12, marginTop: 28 }}>
                <NavBtn onClick={() => go(-1)} aria="prev">‹</NavBtn>
                <NavBtn onClick={() => go(1)} aria="next">›</NavBtn>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function NavBtn({ children, onClick, aria }: { children: React.ReactNode; onClick: () => void; aria: string }) {
  return (
    <button
      onClick={onClick}
      aria-label={aria}
      style={{
        width: 38, height: 38, borderRadius: '50%',
        background: '#fff', color: GOLD, border: `1.5px solid ${GOLD}`, cursor: 'pointer',
        fontSize: 20, fontWeight: 700, lineHeight: 1,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'inherit', transition: 'background 180ms, color 180ms',
      }}
      onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = GOLD; (e.currentTarget as HTMLElement).style.color = '#fff' }}
      onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = '#fff'; (e.currentTarget as HTMLElement).style.color = GOLD }}
    >
      {children}
    </button>
  )
}

function CalendarIcon() {
  return (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={GOLD} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="18" rx="2" />
      <line x1="16" y1="2" x2="16" y2="6" />
      <line x1="8" y1="2" x2="8" y2="6" />
      <line x1="3" y1="10" x2="21" y2="10" />
    </svg>
  )
}
