import { Link } from 'react-router-dom'
import { events } from '@/data/events'
import type { Event } from '@/data/events'
import { useLang } from '@/context/LangContext'

const typeLabel: Record<Event['type'], { fa: string; en: string }> = {
  conference:    { fa: 'کنگره',     en: 'Conference'    },
  exhibition:    { fa: 'نمایشگاه',  en: 'Exhibition'    },
  seminar:       { fa: 'سمینار',    en: 'Seminar'       },
  international: { fa: 'جهانی',     en: 'International' },
}

const T = {
  fa: {
    overline: 'تقویم رویداد · ۱۴۰۳–۱۴۰۴',
    heading: 'رویدادهای پیش‌رو',
    sub: 'همایش‌ها، نمایشگاه‌ها و نشست‌های تخصصی صنعت فولاد در ماه‌های آینده — برای حضور یا حمایت رسانه‌ای.',
    all: 'تقویم کامل ←',
    register: 'ثبت‌نام ←',
    soon: 'به‌زودی',
  },
  en: {
    overline: 'EVENT CALENDAR · 1403–1404',
    heading: 'Upcoming Events',
    sub: 'Conferences, exhibitions and specialized steel industry meetings — for attendance or media sponsorship.',
    all: 'Full Calendar →',
    register: 'Register →',
    soon: 'Coming Soon',
  },
}

const typeBorderColor: Record<Event['type'], string> = {
  conference:    'var(--ink)',
  exhibition:    '#6b4a00',
  seminar:       '#1a4a2a',
  international: 'var(--red)',
}

const typeTextColor: Record<Event['type'], string> = {
  conference:    'var(--ink)',
  exhibition:    '#6b4a00',
  seminar:       '#1a4a2a',
  international: 'var(--red)',
}

export default function EventsSection() {
  const { lang } = useLang()
  const t = T[lang]
  const displayed = events.slice(0, 4)

  return (
    <section style={{ background: 'var(--paper-2)' }}>
      <div className="max-w-7xl mx-auto px-12 py-28 max-md:px-5 max-md:py-20">
        {/* ── Editorial header ── */}
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: '1fr auto',
            alignItems: 'end',
            gap: 32,
            paddingBottom: 28,
            borderBottom: '1px solid var(--rule-thin)',
            marginBottom: 48,
          }}
          className="mq-stack max-md:grid-cols-1 max-md:gap-4"
        >
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
              <div style={{ width: 32, height: 2, background: 'var(--red)' }} />
              <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: 'var(--ink-4)' }}>
                {t.overline}
              </span>
            </div>
            <h2 style={{ fontSize: 'clamp(22px, 2.5vw, 32px)', fontWeight: 900, letterSpacing: '-0.5px', color: 'var(--ink)', lineHeight: 1.2, marginBottom: 12 }}>
              {t.heading}
            </h2>
            <p style={{ fontSize: 14, lineHeight: 1.7, color: 'var(--ink-4)', maxWidth: 560 }}>
              {t.sub}
            </p>
          </div>
          <Link to="/events" style={{ fontSize: 11, fontWeight: 700, letterSpacing: '1.5px', textTransform: 'uppercase', color: 'var(--red)', textDecoration: 'none', whiteSpace: 'nowrap', paddingBottom: 4 }}>
            {t.all}
          </Link>
        </div>

        {/* 4-col grid */}
        <div
          className="grid grid-cols-4 max-md:grid-cols-2 max-sm:grid-cols-1"
        >
          {displayed.map((event) => (
            <div
              key={event.id}
              className="max-md:p-5"
            style={{
                padding: '32px 28px',
              }}
              className="border-r border-[var(--rule-thin)] first:border-r-0 max-md:border-r-0 max-md:border-b max-md:border-[var(--rule-thin)] max-md:nth-child(even):border-r max-md:nth-child(even):border-[var(--rule-thin)] max-sm:border-r-0 max-sm:border-b max-sm:last:border-b-0 max-md:nth-child(3):border-b-0 max-md:nth-child(4):border-b-0"
            >
              {/* Date block */}
              <div style={{ borderBottom: '2px solid var(--ink)', paddingBottom: 12, marginBottom: 16 }}>
                <div className="max-md:text-4xl" style={{ fontSize: 52, fontWeight: 900, lineHeight: 1, color: 'var(--ink)' }}>
                  {event.date.toLocaleString('fa-IR')}
                </div>
                <div style={{ fontSize: 12, color: 'var(--ink-4)', marginTop: 2 }}>
                  {event.month} {event.year.toLocaleString('fa-IR')}
                </div>
              </div>

              {/* Type pill */}
              <div style={{ marginBottom: 12 }}>
                <span
                  style={{
                    display: 'inline-block',
                    border: `1px solid ${typeBorderColor[event.type]}`,
                    color: typeTextColor[event.type],
                    fontSize: 9,
                    fontWeight: 700,
                    textTransform: 'uppercase',
                    padding: '3px 8px',
                    lineHeight: 1.4,
                  }}
                >
                  {typeLabel[event.type][lang]}
                </span>
              </div>

              {/* Title */}
              <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink)', lineHeight: 1.4, marginBottom: 6 }}>{event.title}</div>

              {/* Location */}
              <div style={{ fontSize: 11, color: 'var(--ink-5)', marginBottom: 14 }}>{event.location} · {event.city}</div>

              {/* CTA */}
              {event.registrationOpen ? (
                <Link to="#" style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', color: 'var(--red)', textDecoration: 'none', cursor: 'pointer' }}>
                  {t.register}
                </Link>
              ) : (
                <span style={{ fontSize: 10, color: 'var(--ink-5)', textTransform: 'uppercase', fontWeight: 700 }}>
                  {t.soon}
                </span>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}