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

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

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 displayed = events.slice(0, 4)

  return (
    <section style={{ borderBottom: '2px solid var(--ink)', background: 'var(--paper-2)' }}>
      <div className="max-w-7xl mx-auto px-12 py-20 max-md:px-5 max-md:py-14">
        {/* Sleek top row */}
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 24 }}>
          <Link to="/events" style={{ fontSize: '10px', fontWeight: 700, textTransform: 'uppercase', color: 'var(--ink-4)', textDecoration: 'none' }}>تقویم کامل ←</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}
              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 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]}
                </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' }}>
                  ثبت‌نام ←
                </Link>
              ) : (
                <span style={{ fontSize: 10, color: 'var(--ink-5)', textTransform: 'uppercase', fontWeight: 700 }}>
                  به‌زودی
                </span>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}