import { useState, useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import { ExternalLink, ChevronLeft, ChevronRight } from 'lucide-react'
import { useLang } from '@/context/LangContext'
import { events } from '@/data/events'

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

const TYPE_LABEL: Record<string, { fa: string; en: string; color: string; bg: string }> = {
  conference:    { fa: 'کنفرانس',    en: 'Conference',    color: '#2471a3', bg: '#EAF2FB' },
  exhibition:    { fa: 'نمایشگاه',   en: 'Exhibition',    color: '#1e8449', bg: '#EAFAF1' },
  seminar:       { fa: 'نشست تخصصی', en: 'Seminar',       color: '#7d3c98', bg: '#F5EEF8' },
  international: { fa: 'بین‌الملل',  en: 'International', color: '#c0392b', bg: '#FDEDEC' },
}

const EVENT_IMGS: Record<string, string> = {
  'iran-steel-congress-1403':      '/news/photo-1611273426858-450d8e3c9fce.jpg',
  'middle-east-steel-metals-2024': '/news/photo-1570168007204-dfb528c6958f.jpg',
  'steel-policy-seminar-1404':     '/news/photo-1567789884554-0b844b597180.jpg',
  'world-steel-forum-2025':        '/news/photo-1504307651254-35680f356dfd.jpg',
  'iran-metallurgy-expo-1404':     '/news/photo-1518770660439-4636190af475.jpg',
  'oecd-steel-summit-2025':        '/news/photo-1581092160607-ee22731c9b4e.jpg',
}

/* ── Countdown ─────────────────────────────────────────── */
const HERO_TARGET = new Date('2026-10-16T09:00:00')
function useCountdown(target: Date) {
  const calc = () => {
    const diff = Math.max(0, target.getTime() - Date.now())
    return {
      days:  Math.floor(diff / 86400000),
      hours: Math.floor((diff % 86400000) / 3600000),
      mins:  Math.floor((diff % 3600000) / 60000),
      secs:  Math.floor((diff % 60000) / 1000),
    }
  }
  const [t, setT] = useState(calc)
  useEffect(() => { const id = setInterval(() => setT(calc()), 1000); return () => clearInterval(id) }, [])
  return t
}

/* ── Jalali calendar helpers ────────────────────────────── */
const WEEKDAYS = ['شنبه', 'یکشنبه', 'دوشنبه', 'سه‌شنبه', 'چهارشنبه', 'پنج‌شنبه', 'جمعه']
const J_MONTHS = ['فروردین','اردیبهشت','خرداد','تیر','مرداد','شهریور','مهر','آبان','آذر','دی','بهمن','اسفند']
const faNum = (n: number) => n.toLocaleString('fa-IR', { useGrouping: false })

function jParts(d: Date) {
  const p = new Intl.DateTimeFormat('en-US-u-ca-persian', { day:'numeric', month:'numeric', year:'numeric' }).formatToParts(d)
  const get = (t: string) => Number(p.find(x => x.type === t)?.value)
  return { day: get('day'), month: get('month'), year: get('year') }
}
function buildMonth(anchor: Date) {
  const { month, year } = jParts(anchor)
  const first = new Date(anchor)
  while (jParts(first).day !== 1) first.setDate(first.getDate() - 1)
  const days: Date[] = []
  const cur = new Date(first)
  while (jParts(cur).month === month && jParts(cur).year === year) {
    days.push(new Date(cur)); cur.setDate(cur.getDate() + 1)
  }
  // Persian week starts Saturday → JS getDay(): Sat=6, Sun=0, Mon=1 … Fri=5
  const dowMap = [1, 2, 3, 4, 5, 6, 0] // Sun→1, Mon→2 … Sat→0
  const firstDow = dowMap[first.getDay()]
  return { days, firstDow, month, year }
}

function MiniCalendar({ anchor, onNav, eventDates, onSelect }: {
  anchor: Date; onNav: (d: 1|-1) => void
  eventDates: Date[]; onSelect: (d: Date) => void
}) {
  const { days, firstDow, month, year } = buildMonth(anchor)
  const today = new Date(); const todayJ = jParts(today)

  return (
    <div style={{
      display: 'flex', flexDirection: 'column', gap: 12,
      background: '#fff', border: '1px solid #E7E7E7', borderRadius: 8,
      padding: 12, height: '100%', boxSizing: 'border-box',
    }}>
      {/* تقویم label row */}
      <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', padding: '0 8px' }}>
        <span style={{ fontSize: 18, fontWeight: 500, color: '#262626', textAlign: 'right' }}>تقویم</span>
      </div>

      {/* month nav */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 8px', direction: 'rtl' }}>
        <button onClick={() => onNav(1)} style={{
          width: 24, height: 24, borderRadius: 24, border: 'none',
          background: '#FBEED9', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <ChevronRight size={12} color={GOLD} />
        </button>
        <span style={{ fontSize: 18, fontWeight: 500, color: '#262626', textAlign: 'center', flex: 1 }}>
          {J_MONTHS[month - 1]}ماه {faNum(year)}
        </span>
        <button onClick={() => onNav(-1)} style={{
          width: 24, height: 24, borderRadius: 24, border: 'none',
          background: '#FBEED9', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <ChevronLeft size={12} color={GOLD} />
        </button>
      </div>

      {/* weekday headers — pill bg #F7F7F7 */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', direction: 'rtl',
        background: '#F7F7F7', borderRadius: 25, padding: '6px 4px', gap: 3,
      }}>
        {WEEKDAYS.map(d => (
          <div key={d} style={{ textAlign: 'center', fontSize: 10, fontWeight: 500, color: '#5D5D5D', lineHeight: '16px' }}>{d}</div>
        ))}
      </div>

      {/* day cells — bg #F7F7F7 */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', direction: 'rtl',
        background: '#F7F7F7', borderRadius: 16, padding: 4, gap: 3, flex: 1,
      }}>
        {Array.from({ length: firstDow }, (_, i) => <div key={`e${i}`} />)}
        {days.map(d => {
          const jp = jParts(d)
          const isToday = jp.day === todayJ.day && jp.month === todayJ.month && jp.year === todayJ.year
          const hasEv = eventDates.some(ed => {
            const ej = jParts(ed); return ej.day === jp.day && ej.month === jp.month && ej.year === jp.year
          })
          return (
            <button key={jp.day} onClick={() => onSelect(d)} style={{
              aspectRatio: '1', border: hasEv && !isToday ? `1px solid ${GOLD}` : 'none',
              borderRadius: isToday ? 99 : hasEv ? 60 : '50%',
              fontSize: isToday ? 14 : 12, fontWeight: 500,
              background: isToday ? GOLD : '#fff',
              color: isToday ? '#fff' : '#888888',
              cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
              transition: 'background .15s',
            }}>
              {faNum(jp.day)}
            </button>
          )
        })}
      </div>
    </div>
  )
}

/* ── Countdown box ─────────────────────────────────────── */
function CBox({ v, label }: { v: number; label: string }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
      <div style={{
        width: 80, height: 80, borderRadius: 14,
        background: 'rgba(255,255,255,0.09)', border: '1px solid rgba(255,255,255,0.14)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 32, fontWeight: 900, color: '#fff', fontVariantNumeric: 'tabular-nums',
      }}>{faNum(v)}</div>
      <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', fontWeight: 600 }}>{label}</span>
    </div>
  )
}

/* ── Main component ────────────────────────────────────── */
export default function Events() {
  const { lang } = useLang()
  const isFa = lang === 'fa'
  const cd = useCountdown(HERO_TARGET)

  const [calAnchor, setCalAnchor] = useState(new Date())
  const [selEvt, setSelEvt] = useState(events[0])
  const [showAll, setShowAll] = useState(false)

  const handleCalNav = (dir: 1 | -1) => {
    const n = new Date(calAnchor); n.setDate(n.getDate() + dir * 30); setCalAnchor(n)
  }

  // scroll to the calendar when arriving via the «تقویم اندیشکده» nav link (/events#calendar)
  const { hash } = useLocation()
  useEffect(() => {
    if (hash !== '#calendar') return
    const el = document.getElementById('calendar')
    if (!el) return
    const timer = setTimeout(() => window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 90, behavior: 'smooth' }), 120)
    return () => clearTimeout(timer)
  }, [hash])

  // approximate Gregorian marker dates for each event
  const MONTH_OFF: Record<string, number> = {
    فروردین:3, اردیبهشت:4, خرداد:5, تیر:6, مرداد:7, شهریور:8,
    مهر:9, آبان:10, آذر:11, دی:12, بهمن:1, اسفند:2,
  }
  const eventDates = events.map(ev => {
    const m = MONTH_OFF[ev.month] ?? 3
    const yr = m < 3 ? 2026 : 2025
    return new Date(yr, m - 1, ev.date)
  })

  const featured = events[0]
  const others = events.slice(1)
  const visibleOthers = showAll ? others : others.slice(0, 4)

  const selType = TYPE_LABEL[selEvt.type] ?? { fa: selEvt.type, en: selEvt.type, color: GOLD, bg: '#f5f5f5' }
  const featType = TYPE_LABEL[featured.type] ?? { fa: featured.type, en: featured.type, color: GOLD, bg: '#f5f5f5' }

  return (
    <div dir={isFa ? 'rtl' : 'ltr'} style={{ background: '#F5F5F5', minHeight: '100vh' }}>

      {/* ═══════════════════════════════════════════════
          HERO BANNER
      ═══════════════════════════════════════════════ */}
      <section style={{ position: 'relative', background: NAVY, overflow: 'hidden' }}>
        {/* world map background */}
        <img src="/world-map.webp" alt="" style={{ width: '100%', display: 'block' }} />
        {/* overlay + content absolutely on top of the image */}
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to left, rgba(3,35,64,0.92) 30%, rgba(3,35,64,0.55) 65%, rgba(3,35,64,0.35) 100%)' }} />

        {/* text + countdown — right side, vertically centered */}
        <div style={{ position: 'absolute', top: 0, right: 0, bottom: 0, width: '52%', zIndex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '48px 5vw 48px 24px', direction: 'rtl' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 14 }}>
            <span style={{ fontSize: 13, fontWeight: 700, color: GOLD }}>استکهلم، سوئد</span>
            <img src="/icons/vuesax/linear/location.svg" alt="" style={{ width: 16, height: 16, filter: 'invert(73%) sepia(50%) saturate(500%) hue-rotate(5deg)' }} />
          </div>
          <h1 style={{ fontSize: 'clamp(22px,3vw,42px)', fontWeight: 900, color: GOLD, margin: '0 0 14px', lineHeight: 1.2 }}>
            اجلاس جهانی فولاد سبز
          </h1>
          <p style={{ fontSize: 14, lineHeight: 2, color: 'rgba(255,255,255,0.72)', margin: '0 0 24px' }}>
            مرجع نهایی برای تعیین استانداردهای کربن‌زدایی در زنجیره ارزش فولاد با حضور وزرای انرژی اتحادیه اروپا و مدیران ارشد ۵۰ شرکت برتر.
          </p>
          {/* countdown — inline below description */}
          <div style={{ display: 'flex', gap: 12, marginBottom: 24, direction: 'ltr', justifyContent: 'flex-end' }}>
            <CBox v={cd.days}  label={isFa ? 'روز'   : 'Days'} />
            <CBox v={cd.hours} label={isFa ? 'ساعت'  : 'Hrs'}  />
            <CBox v={cd.mins}  label={isFa ? 'دقیقه' : 'Min'}  />
            <CBox v={cd.secs}  label={isFa ? 'ثانیه' : 'Sec'}  />
          </div>
          <div>
            <a href="#" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8, direction: 'ltr',
              background: GOLD, color: NAVY, borderRadius: 10, padding: '12px 28px',
              fontSize: 14, fontWeight: 800, textDecoration: 'none',
            }}>
              <ExternalLink size={14} strokeWidth={2.5} />
              <span style={{ direction: 'rtl' }}>{isFa ? 'اطلاعات بیشتر' : 'Learn More'}</span>
            </a>
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════
          CALENDAR  |  SELECTED EVENT DETAIL
          LTR grid so physical column order: calendar=LEFT, event=RIGHT
      ═══════════════════════════════════════════════ */}
      <div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 0 }}>
        {/* Figma: Calendar 409px | gap 37 | Card rest — LTR so calendar LEFT */}
        <div style={{ display: 'grid', gridTemplateColumns: '409px 1fr', gap: 37, direction: 'ltr', alignItems: 'stretch' }} className="max-lg:!grid-cols-1">

          {/* LEFT — calendar */}
          <div id="calendar" dir={isFa ? 'rtl' : 'ltr'} style={{ scrollMarginTop: 90 }}>
            <MiniCalendar anchor={calAnchor} onNav={handleCalNav} eventDates={eventDates}
              onSelect={d => {
                const jp = jParts(d)
                const hit = events.find(ev => {
                  const m = MONTH_OFF[ev.month] ?? 3
                  const yr = m < 3 ? 2026 : 2025
                  const ed = new Date(yr, m - 1, ev.date)
                  return jParts(ed).day === jp.day && jParts(ed).month === jp.month
                })
                if (hit) setSelEvt(hit)
              }}
            />
          </div>

          {/* RIGHT — event card (Figma: white, border #E7E7E7, radius 16, padding 20, gap 20) */}
          <div style={{
            background: '#fff', border: '1px solid #E7E7E7', borderRadius: 16,
            padding: 20, display: 'flex', flexDirection: 'column', gap: 20,
          }}>
            {/* hint text — styled box (Figma: bg #F8F9FA, border gold-10%, radius 16, center) */}
            <div style={{
              background: '#F8F9FA', border: '1px solid rgba(115,92,0,0.2)',
              borderRadius: 16, padding: '8px 24px', textAlign: 'center',
            }}>
              <span style={{ fontSize: 16, fontWeight: 500, color: '#4D4635', direction: 'rtl' }}>
                "برای مشاهده جزئیات هر رویداد، روی تاریخ مورد نظر در تقویم کلیک کنید."
              </span>
            </div>

            {/* content row: text LEFT (flex 1) | image RIGHT (251px) — forced LTR */}
            <div style={{ display: 'flex', gap: 18, direction: 'ltr', flex: 1, minHeight: 0 }}>
              {/* text section */}
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 9, direction: isFa ? 'rtl' : 'ltr', minWidth: 0 }}>
                {/* date + category row */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'flex-end', direction: 'ltr' }}>
                  {/* category tag — GOLD bg white text */}
                  <span style={{ fontSize: 12, fontWeight: 400, padding: '2px 10px', borderRadius: 4, background: GOLD, color: '#fff' }}>
                    {isFa ? selType.fa : selEvt.type}
                  </span>
                  {/* date */}
                  <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                    <span style={{ fontSize: 12, color: '#262626', direction: 'rtl' }}>{selEvt.date} {selEvt.month} {selEvt.year}</span>
                    <img src="/icons/vuesax/linear/calendar-tick.svg" alt="" style={{ width: 22, height: 22, filter: 'invert(40%) sepia(90%) saturate(400%) hue-rotate(190deg)' }} />
                  </div>
                </div>
                {/* title */}
                <h3 style={{ fontSize: 18, fontWeight: 400, color: '#183354', margin: 0, lineHeight: 1.7, textAlign: 'right' }}>{selEvt.title}</h3>
                {/* description lines */}
                <p style={{ fontSize: 14, lineHeight: 1.7, color: '#4D4635', margin: 0, textAlign: 'right' }}>{selEvt.description}</p>
                {/* CTA — full width */}
                <a href="#" style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                  background: GOLD, color: '#fff', borderRadius: 8, padding: '8px 16px',
                  fontSize: 16, fontWeight: 500, textDecoration: 'none', marginTop: 'auto',
                  direction: 'ltr',
                }}>
                  <img src="/icons/vuesax/linear/export.svg" alt="" style={{ width: 18, height: 18, filter: 'brightness(0) invert(1)' }} />
                  <span style={{ direction: 'rtl' }}>{isFa ? 'اطلاعات بیشتر' : 'Learn More'}</span>
                </a>
              </div>
              {/* image RIGHT — 251px, full height */}
              <div style={{ flexShrink: 0, width: 251, borderRadius: 8, overflow: 'hidden' }}>
                <img src={EVENT_IMGS[selEvt.id] ?? '/news/photo-1567789884554-0b844b597180.jpg'} alt=""
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* ═══════════════════════════════════════════════
          FEATURED UPCOMING EVENT
      ═══════════════════════════════════════════════ */}
      <div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 56 }}>
        {/* heading — gold right border (Figma: border-right 5px solid #CD9E53) */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
          borderRight: `5px solid ${GOLD}`, paddingRight: 10, marginBottom: 24,
          direction: 'rtl',
        }}>
          <h2 style={{ fontSize: 24, fontWeight: 500, color: NAVY, margin: 0, lineHeight: '41px' }}>
            {isFa ? 'رویداد برجسته پیش رو' : 'Featured Upcoming Event'}
          </h2>
        </div>

        {/* card: image LEFT (1fr) | navy RIGHT (2fr) */}
        <div style={{ display: 'grid', gridTemplateColumns: '354fr 714fr', borderRadius: 16, overflow: 'hidden', boxShadow: '0 4px 40px rgba(3,35,64,0.13)', direction: 'ltr', minHeight: 287 }} className="max-lg:!grid-cols-1">

          {/* IMAGE — gradient overlay + CTA at bottom */}
          <div style={{ position: 'relative', minHeight: 287, overflow: 'hidden' }}>
            <img src={EVENT_IMGS[featured.id] ?? '/news/photo-1611273426858-450d8e3c9fce.jpg'} alt=""
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            {/* bottom gradient overlay */}
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(0deg, #000000 29%, rgba(0,0,0,0) 100%)' }} />
            {/* bottom: date badge + CTA */}
            <div style={{ position: 'absolute', bottom: 19, left: 17, right: 17, display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                width: 40, height: 40, borderRadius: 8,
                background: 'rgba(255,255,255,0.15)', backdropFilter: 'blur(4px)',
              }}>
                <img src="/icons/vuesax/linear/calendar-tick.svg" alt="" style={{ width: 22, height: 22, filter: 'invert(73%) sepia(50%) saturate(500%) hue-rotate(5deg)' }} />
              </div>
              <a href="#" style={{
                display: 'inline-flex', alignItems: 'center', gap: 8, direction: 'ltr',
                background: GOLD, color: '#fff', borderRadius: 8, padding: '8px 16px',
                fontSize: 14, fontWeight: 500, textDecoration: 'none', flex: 1, justifyContent: 'center',
              }}>
                <img src="/icons/vuesax/linear/export.svg" alt="" style={{ width: 18, height: 18, filter: 'brightness(0) invert(1)' }} />
                <span style={{ direction: 'rtl' }}>{isFa ? 'اطلاعات بیشتر' : 'Learn More'}</span>
              </a>
            </div>
          </div>

          {/* NAVY PANEL */}
          <div style={{ background: NAVY, padding: '0 36px', display: 'flex', flexDirection: 'column', alignItems: 'flex-end', justifyContent: 'center', gap: 10, direction: isFa ? 'rtl' : 'ltr' }}>
            {/* gold decorative bar */}
            <div style={{ width: 108, height: 14, background: GOLD, borderRadius: 7, alignSelf: 'flex-end' }} />

            {/* content */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, width: '100%' }}>
              {/* ── top block: title + meta + tag | gold bottom border ── */}
              <div style={{ borderBottom: `1px solid ${GOLD}`, paddingBottom: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {/* title */}
                <h3 style={{ fontSize: 18, fontWeight: 500, color: GOLD, margin: 0, lineHeight: 1.5, textAlign: 'right' }}>{featured.title}</h3>
                {/* meta row: location | date | category tag — all right-aligned */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, justifyContent: 'flex-end', direction: 'ltr', flexWrap: 'wrap' }}>
                  {/* location */}
                  <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                    <img src="/icons/vuesax/linear/location.svg" alt="" style={{ width: 22, height: 22, filter: 'invert(73%) sepia(50%) saturate(500%) hue-rotate(5deg)' }} />
                    <span style={{ fontSize: 15, color: '#ADADAD', direction: 'rtl' }}>{featured.city}</span>
                  </div>
                  {/* date */}
                  <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                    <img src="/icons/vuesax/linear/calendar-tick.svg" alt="" style={{ width: 22, height: 22, filter: 'invert(73%) sepia(50%) saturate(500%) hue-rotate(5deg)' }} />
                    <span style={{ fontSize: 15, color: '#ADADAD', direction: 'rtl' }}>{featured.date} {featured.month} {featured.year}</span>
                  </div>
                  {/* category tag */}
                  <span style={{ fontSize: 12, fontWeight: 400, padding: '4px 14px', borderRadius: 8, background: '#E53935', color: '#fff' }}>
                    {isFa ? featType.fa : featured.type}
                  </span>
                </div>
              </div>

              {/* ── bottom block: why + description ── */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, padding: '0 16px' }}>
                <p style={{ fontSize: 18, fontWeight: 500, color: GOLD, margin: 0, textAlign: 'right' }}>
                  {isFa ? 'چرا این رویداد اهمیت دارد؟' : 'Why this event matters?'}
                </p>
                <p style={{ fontSize: 16, lineHeight: 1.75, color: '#F9F9F9', margin: 0, textAlign: 'right' }}>{featured.description}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* ═══════════════════════════════════════════════
          OTHER EVENTS GRID
      ═══════════════════════════════════════════════ */}
      <div className="max-w-7xl mx-auto px-12 max-md:px-5" style={{ paddingTop: 56, paddingBottom: 80 }}>
        {/* heading — gold right border */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', borderRight: `5px solid ${GOLD}`, paddingRight: 10, marginBottom: 24, direction: 'rtl' }}>
          <h2 style={{ fontSize: 24, fontWeight: 500, color: NAVY, margin: 0, lineHeight: '41px' }}>
            {isFa ? 'سایر رویدادها' : 'Other Events'}
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', columnGap: 18, rowGap: 32 }} className="max-lg:!grid-cols-1">
          {visibleOthers.map(ev => {
            const t = TYPE_LABEL[ev.type] ?? { fa: ev.type, en: ev.type, color: GOLD, bg: '#f5f5f5' }
            return (
              <div key={ev.id} style={{
                background: '#F9F9F9', borderBottom: `3px solid ${GOLD}`, borderRadius: 21,
                padding: '11px 12px', display: 'flex', direction: 'ltr', gap: 10, minHeight: 207,
                transition: 'box-shadow .2s, transform .2s',
              }}
                onMouseEnter={e => { const el = e.currentTarget as HTMLElement; el.style.boxShadow='0 8px 28px rgba(3,35,64,0.13)'; el.style.transform='translateY(-2px)' }}
                onMouseLeave={e => { const el = e.currentTarget as HTMLElement; el.style.boxShadow=''; el.style.transform='' }}
              >
                {/* IMAGE — left side */}
                <div style={{ flexShrink: 0, width: 138, height: 175, borderRadius: 16, overflow: 'hidden', alignSelf: 'center' }} className="max-md:hidden">
                  <img src={EVENT_IMGS[ev.id] ?? '/news/photo-1567789884554-0b844b597180.jpg'} alt=""
                    style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                </div>

                {/* TEXT — right side */}
                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', gap: 8, direction: isFa ? 'rtl' : 'ltr', minWidth: 0 }}>
                  {/* meta: location + date + category */}
                  <div style={{ display: 'flex', alignItems: 'center', gap: 13, justifyContent: 'flex-end', direction: 'ltr', flexWrap: 'wrap' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                      <img src="/icons/vuesax/linear/location.svg" alt="" style={{ width: 24, height: 24, filter: 'invert(73%) sepia(50%) saturate(500%) hue-rotate(5deg)' }} />
                      <span style={{ fontSize: 16, color: '#ADADAD', direction: 'rtl' }}>{ev.city}</span>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                      <img src="/icons/vuesax/linear/calendar-tick.svg" alt="" style={{ width: 24, height: 24, filter: 'invert(73%) sepia(50%) saturate(500%) hue-rotate(5deg)' }} />
                      <span style={{ fontSize: 16, color: '#ADADAD', direction: 'rtl' }}>{ev.date} {ev.month} {ev.year}</span>
                    </div>
                    <span style={{ fontSize: 12, fontWeight: 400, padding: '4px 14px', borderRadius: 8, background: '#E53935', color: '#fff', flexShrink: 0 }}>
                      {isFa ? t.fa : ev.type}
                    </span>
                  </div>

                  {/* content: title + desc + cta */}
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                    <h3 style={{ fontSize: 18, fontWeight: 400, color: '#111415', margin: 0, lineHeight: 1.5, textAlign: 'right' }}>{ev.title}</h3>
                    <p style={{ fontSize: 14, lineHeight: 1.7, color: '#4D4635', margin: 0, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden', textAlign: 'right' }}>{ev.description}</p>
                    <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                      <a href="#" style={{
                        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, direction: 'ltr',
                        background: GOLD, color: '#fff', borderRadius: 8, width: 169, height: 40,
                        fontSize: 16, fontWeight: 500, textDecoration: 'none', flexShrink: 0,
                      }}>
                        <img src="/icons/vuesax/linear/export.svg" alt="" style={{ width: 18, height: 18, filter: 'brightness(0) invert(1)' }} />
                        <span style={{ direction: 'rtl' }}>{isFa ? 'اطلاعات بیشتر' : 'Learn More'}</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            )
          })}
        </div>

        {/* show all / less */}
        {others.length > 4 && (
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 36 }}>
            <button onClick={() => setShowAll(v => !v)} style={{
              display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 700, color: NAVY,
              background: 'none', border: 'none', cursor: 'pointer', direction: 'rtl',
            }}>
              <img src="/icons/vuesax/linear/arrow-down.svg" alt="" style={{ width: 18, height: 18, opacity: 0.6, transform: showAll ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }} />
              <span>{showAll ? (isFa ? 'نمایش کمتر' : 'Show less') : (isFa ? 'مشاهده همه' : 'Show all')}</span>
            </button>
          </div>
        )}
      </div>
    </div>
  )
}
