import type { CSSProperties } from 'react'
import { motion } from 'framer-motion'
import { reports } from '@/data/reports'

const featured    = reports.find(r => r.featured)!
const flashReport = reports.find(r => r.type === 'flash')!

/* ─── Price snapshot ────────────────────────────────────── */
const PRICES = [
  { label: 'HRC آسیا',       value: '۵۹۰',    delta: '+۳.۲٪', up: true  },
  { label: 'میلگرد ایران',   value: '۲۱,۸۰۰', delta: '+۰.۸٪', up: true  },
  { label: 'سنگ‌آهن دالیان', value: '۱۰۸',    delta: '+۱۸٪',  up: true  },
  { label: 'HRC اروپا',      value: '۶۲۴',    delta: '−۱.۴٪', up: false },
]

/* ─── Shared card style (NO gridColumn here — set via className) */
const CARD: CSSProperties = {
  background:    'var(--paper)',
  padding:       '28px 28px 24px',
  display:       'flex',
  flexDirection: 'column',
  direction:     'rtl',
  fontFamily:    'Vazir, sans-serif',
  position:      'relative',
}

function Tag({ text, color = 'var(--red)' }: { text: string; color?: string }) {
  return (
    <div style={{
      fontSize:      9,
      fontWeight:    700,
      letterSpacing: '2.5px',
      textTransform: 'uppercase',
      color,
      marginBottom:  12,
    }}>
      {text}
    </div>
  )
}

function Accent({ color = 'var(--red)' }: { color?: string }) {
  return (
    <div style={{
      position: 'absolute', top: 0, right: 0, left: 0,
      height: 3, background: color,
    }} />
  )
}

/* ─── Section ────────────────────────────────────────────── */
export default function LatestNewsBentoSection() {
  return (
    <section style={{ background: 'var(--paper-2)', borderBottom: '2px solid var(--ink)' }}>

      {/* ── Header ── */}
      <div className="px-12 pt-16 max-md:px-5 max-md:pt-10">
        <div style={{
          display: 'flex', alignItems: 'center', gap: 16,
          marginBottom: 32, paddingBottom: 20, borderBottom: '2px solid var(--ink)',
        }}>
          <div style={{
            background: 'var(--ink)', color: 'var(--paper)',
            fontSize: 9, fontWeight: 700, letterSpacing: '3px',
            textTransform: 'uppercase', padding: '6px 16px',
          }}>
            آخرین اخبار
          </div>
          <h2 style={{ fontSize: 'clamp(16px,2vw,22px)', fontWeight: 900, letterSpacing: '-0.5px' }}>
            رصد روزانه بازار و صنعت
          </h2>
          <div style={{ flex: 1 }} />
          <span style={{ fontSize: 10, fontWeight: 500, color: 'var(--ink-5)' }}>بهمن ۱۴۰۳</span>
        </div>
      </div>

      {/* ── Bento grid ── */}
      <motion.div
        initial={{ opacity: 0, y: 16 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.5 }}
        className="px-12 pb-14 max-md:px-5 max-md:pb-10"
      >
        {/*
          3-col grid on desktop, 1-col on mobile.
          Items ① and ⑥ use col-span-1 md:col-span-2.
          NO gridColumn in inline style — inline style overrides Tailwind.
        */}
        <div
          className="grid grid-cols-1 md:grid-cols-3"
          style={{ gap: 1, background: 'var(--rule-thin)' }}
        >

          {/* ① Featured report — col-span-2 on desktop ─── */}
          <div style={{ ...CARD, minHeight: 260 }} className="col-span-1 md:col-span-2">
            <Accent />
            <Tag text="تازه‌ترین گزارش ویژه" />
            {/* Ghost number */}
            <div style={{
              fontSize: 96, fontWeight: 900, lineHeight: 0.8,
              letterSpacing: '-5px', color: 'rgba(26,23,18,0.05)',
              marginBottom: 12, userSelect: 'none', direction: 'ltr',
            }}>01</div>
            <h3 style={{ fontSize: 'clamp(16px,2vw,20px)', fontWeight: 900, letterSpacing: '-0.5px', lineHeight: 1.35, color: 'var(--ink)', marginBottom: 12, flex: 1 }}>
              {featured.title}
            </h3>
            <p style={{ fontSize: 13, lineHeight: 1.75, fontWeight: 400, color: 'var(--ink-3)', marginBottom: 20,
              display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
              {featured.summary}
            </p>
            {/* Footer */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingTop: 16, borderTop: '1px solid var(--rule-thin)' }}>
              <div style={{ width: 30, height: 30, background: 'var(--red)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontSize: 12, fontWeight: 900, flexShrink: 0 }}>
                {featured.authorInitial}
              </div>
              <div>
                <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink)' }}>{featured.author}</div>
                <div style={{ fontSize: 10, color: 'var(--ink-5)' }}>{featured.publishDate} · {featured.pages} صفحه</div>
              </div>
              <div style={{ flex: 1 }} />
              <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--red)' }}>خواندن ←</span>
            </div>
          </div>

          {/* ② Market prices ─────────────────────────────── */}
          <div style={CARD}>
            <Accent color="var(--green-ink)" />
            <Tag text="قیمت‌های لحظه‌ای" color="var(--green-ink)" />
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink)', marginBottom: 16 }}>
              آخرین نرخ‌های بازار
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
              {PRICES.map(p => (
                <div key={p.label} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '9px 0', borderBottom: '1px solid var(--rule-thin)' }}>
                  <span style={{ fontSize: 11, color: 'var(--ink-4)', fontWeight: 500 }}>{p.label}</span>
                  <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                    <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink)', direction: 'ltr' }}>{p.value}</span>
                    <span style={{ fontSize: 10, fontWeight: 700, color: p.up ? 'var(--green-ink)' : 'var(--red)', direction: 'ltr' }}>{p.delta}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* ③ Flash report ──────────────────────────────── */}
          <div style={CARD}>
            <Accent color="var(--amber)" />
            <Tag text={`فلش · ${flashReport.publishDate}`} color="var(--amber)" />
            <div style={{ fontSize: 38, fontWeight: 900, letterSpacing: '-2px', color: 'var(--amber)', lineHeight: 1, marginBottom: 12, direction: 'ltr' }}>
              +۱۸٪
            </div>
            <h3 style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink)', lineHeight: 1.4, marginBottom: 8, flex: 1 }}>
              جهش قیمت سنگ‌آهن در بورس دالیان
            </h3>
            <p style={{ fontSize: 12, color: 'var(--ink-4)', fontWeight: 400, lineHeight: 1.6 }}>
              برآورد اثر بر هزینه تمام‌شده تولیدکنندگان DRI ایران
            </p>
          </div>

          {/* ④ Event ─────────────────────────────────────── */}
          <div style={CARD}>
            <Accent color="var(--ink-3)" />
            <Tag text="رویداد · آینده" color="var(--ink-3)" />
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
              <div style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '8px 12px', textAlign: 'center', lineHeight: 1.2, flexShrink: 0, minWidth: 48 }}>
                <div style={{ fontSize: 22, fontWeight: 900 }}>۲۵</div>
                <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '1px', textTransform: 'uppercase' }}>بهمن</div>
              </div>
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink)' }}>تهران</div>
                <div style={{ fontSize: 10, color: 'var(--ink-5)' }}>هتل اسپیناس پالاس</div>
              </div>
            </div>
            <h3 style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink)', lineHeight: 1.4, flex: 1 }}>
              همایش ملی فولاد ایران ۱۴۰۳
            </h3>
            <p style={{ fontSize: 12, color: 'var(--ink-4)', fontWeight: 400, lineHeight: 1.6, marginTop: 6 }}>
              نشست سالانه تولیدکنندگان، صادرکنندگان و سیاست‌گذاران
            </p>
          </div>

          {/* ⑤ Risk alert ────────────────────────────────── */}
          <div style={CARD}>
            <Accent color="#7f1d1d" />
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 12 }}>
              <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#7f1d1d', flexShrink: 0 }} />
              <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '2.5px', textTransform: 'uppercase', color: '#7f1d1d' }}>
                هشدار ریسک · بحرانی
              </span>
            </div>
            <div style={{ display: 'inline-block', background: 'rgba(127,29,29,0.08)', padding: '4px 10px', fontSize: 10, fontWeight: 700, color: '#7f1d1d', marginBottom: 14 }}>
              دی ۱۴۰۳
            </div>
            <h3 style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink)', lineHeight: 1.4, flex: 1 }}>
              مسدود شدن ۳ مسیر پرداخت صادراتی
            </h3>
            <p style={{ fontSize: 12, color: 'var(--ink-4)', fontWeight: 400, lineHeight: 1.6, marginTop: 8 }}>
              بسته تحریمی جدید مسیرهای بانکی صادرات فولاد را محدود کرده است
            </p>
          </div>

          {/* ⑥ Expert quote — col-span-2 on desktop ────── */}
          <div style={CARD} className="col-span-1 md:col-span-2">
            <Accent color="var(--ink-6)" />
            <Tag text="یادداشت تحلیلگر" color="var(--ink-4)" />
            <div style={{ fontSize: 56, lineHeight: 0.7, color: 'var(--rule-thin)', fontWeight: 900, marginBottom: 10, direction: 'ltr', userSelect: 'none' }}>"</div>
            <p style={{ fontSize: 'clamp(14px,1.2vw,16px)', fontWeight: 700, lineHeight: 1.65, letterSpacing: '-0.2px', color: 'var(--ink)', marginBottom: 20, flex: 1 }}>
              فولاد ایران در آستانه تصمیمی تاریخی است: یا باید بازارهای جایگزین را با
              جدیت دنبال کند، یا شاهد کاهش تدریجی سهم صادراتی خود در خاورمیانه باشد.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingTop: 16, borderTop: '1px solid var(--rule-thin)' }}>
              <div style={{ width: 28, height: 28, background: 'var(--red)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontSize: 11, fontWeight: 900, flexShrink: 0 }}>م</div>
              <div>
                <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink)' }}>دکتر علی محمدی</div>
                <div style={{ fontSize: 10, color: 'var(--ink-5)' }}>مدیر ارشد پژوهش · اندیشکده فولاد</div>
              </div>
            </div>
          </div>

          {/* ⑦ Key stat ──────────────────────────────────── */}
          <div style={CARD}>
            <Accent color="var(--ink-3)" />
            <Tag text="آمار کلیدی" color="var(--ink-3)" />
            <div style={{ fontSize: 52, fontWeight: 900, letterSpacing: '-3px', lineHeight: 1, color: 'var(--ink)', marginBottom: 6, direction: 'ltr' }}>
              ۵۴M
            </div>
            <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink-3)', marginBottom: 8 }}>
              تن — صادرات فولاد چین
            </div>
            <p style={{ fontSize: 12, color: 'var(--ink-5)', fontWeight: 400, lineHeight: 1.65, flex: 1 }}>
              در ۶ ماه اول ۲۰۲۴ — رکوردی که قیمت‌های آسیای غربی را ۱۲٪ کاهش داد
            </p>
          </div>

        </div>
      </motion.div>
    </section>
  )
}